/* «Mi cuenta», las tres secciones de datos (18-ago-2026): ver lo que se
   guarda de ti, cambiar el correo y pedir el borrado.

   ARCHIVO APARTE, y no dentro de cuenta.css, porque hoy la zona la están
   tocando varias manos a la vez y cuenta.css es de otra tanda: dos
   escrituras sobre el mismo archivo se pisan y una desaparece sin avisar.
   Si algún día queda una sola mano, esto se pega al final de cuenta.css y
   se quita el <link> de cuenta.php.

   Los colores van escritos enteros, igual que en cuenta.css, porque la
   zona no tiene tema oscuro: la tarjeta es blanca siempre. El
   color-scheme: light de abajo es para que el navegador puesto en oscuro
   no oscurezca ÉL los campos y las casillas, que es como salían textos
   grises sobre gris. */

/* ---- el botón, que en esta pantalla no tenía estilo --------------- */
/* Hallazgo del 18-ago-2026: cuenta.css dice «.cta-form .btn-guardar» pero
   .btn-guardar en sí solo está escrito en plan.css, y cuenta.php NO carga
   plan.css. Resultado: el botón de «Pedir factura» llevaba desde el 9 de
   agosto saliendo como un botón gris del navegador, sin color de marca, en
   medio de una tarjeta cuidada. Se copia aquí la misma regla de plan.css
   (no se toca plan.css: es de otra pantalla). */
.cta-form .btn-guardar, .cta-borrar .btn-guardar {
  display: block; background: var(--indigo); color: #fff;
  border: none; border-radius: 12px; padding: 14px 30px; font-weight: 800;
  font-size: 0.98rem; cursor: pointer; font-family: inherit;
}
.cta-form .btn-guardar:hover, .cta-borrar .btn-guardar:hover {
  background: var(--indigo-claro);
}

.cta-datos, .cta-correo, .cta-borrar {
  background: #fff; border: 1px solid var(--borde); border-radius: 16px;
  padding: 20px 22px; margin: 0 0 18px; color: var(--texto);
  color-scheme: light;
}
.cta-datos h2, .cta-correo h2, .cta-borrar h2 {
  margin: 0 0 12px; font-size: 1.05rem;
}

/* ---- el desplegable con los datos ---------------------------------- */
/* OJO: nada de display:flex en el <summary>. En el iPhone eso rompe el
   desplegable entero (no abre), y en el PC no se nota. */
.cta-datos .desp > summary {
  cursor: pointer; font-weight: 700; color: var(--indigo);
  list-style: none; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--papel); user-select: none;
}
.cta-datos .desp > summary::-webkit-details-marker { display: none; }
.cta-datos .desp > summary::before { content: "▸ "; color: var(--indigo-claro); }
.cta-datos .desp[open] > summary::before { content: "▾ "; }
.cta-datos .desp > summary:hover { border-color: var(--indigo-claro); }

.cta-lista { margin: 14px 0 0; }
.cta-lista .fila {
  display: grid; grid-template-columns: 190px 1fr; gap: 4px 14px;
  padding: 9px 2px; border-top: 1px solid var(--borde);
}
.cta-lista .fila:first-child { border-top: 0; }
.cta-lista .que {
  font-size: 0.82rem; font-weight: 700; color: var(--suave);
  text-transform: uppercase; letter-spacing: 0.04em; align-self: center;
}
.cta-lista .vale { word-break: break-word; }
.cta-lista .vale.vacio { color: var(--suave); font-style: italic; }
@media (max-width: 560px) {
  .cta-lista .fila { grid-template-columns: 1fr; }
}

/* ---- cambiar el correo --------------------------------------------- */
.cta-correo .cta-form input[type="email"] {
  font: inherit; padding: 11px 13px; border: 2px solid var(--borde);
  border-radius: 10px; background: #fff; color: var(--texto);
}
.cta-correo .cta-form input[type="email"]:focus {
  outline: none; border-color: var(--indigo-claro);
}
.cta-correo .cta-actual {
  background: var(--papel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 9px 12px; margin: 0 0 14px; font-size: 0.92rem; color: var(--suave);
}
.cta-correo .cta-actual b { color: var(--texto); }

/* ---- pedir el borrado ---------------------------------------------- */
/* Marco ámbar, no rojo: es una petición que se atiende a mano, no un
   botón que borra al pulsarlo. El rojo aquí asustaría de más. */
.cta-borrar { border-color: #eddcb6; }
.cta-borrar h2 { color: #8a5a10; }
.cta-borrar .cta-ojo {
  background: #fdf6e6; border: 1px solid #eddcb6; border-radius: 12px;
  padding: 11px 14px; margin: 10px 0 14px; line-height: 1.5;
  font-size: 0.94rem; color: #6b4a11;
}
.cta-borrar .cta-marcar {
  display: block; margin: 0 0 14px; font-size: 0.94rem; line-height: 1.5;
}
.cta-borrar .cta-marcar input { margin-right: 8px; }

/* ---- desistir en 14 dias (15-oct-2026): el mismo boton y la misma casilla que el borrado */
.cta-desistir .btn-guardar, .cta-renovacion .btn-guardar {
  display: block; background: var(--indigo); color: #fff;
  border: none; border-radius: 12px; padding: 14px 30px; font-weight: 800;
  font-size: 0.98rem; cursor: pointer; font-family: inherit; margin: 0 0 12px;
}
.cta-desistir .btn-guardar:hover, .cta-renovacion .btn-guardar:hover { background: var(--indigo-claro); }
.cta-desistir .cta-marcar, .cta-renovacion .cta-marcar {
  display: block; margin: 0 0 14px; font-size: 0.94rem; line-height: 1.5;
}
.cta-desistir .cta-marcar input, .cta-renovacion .cta-marcar input { margin-right: 8px; }
/* renovacion.php (15-oct-2026): la misma casilla dentro de la caja de entrada, sin el estilo
   de etiqueta en mayusculas de estilo.css ni el input a todo lo ancho */
.caja-entrada .cta-renovacion .cta-marcar {
  text-transform: none; letter-spacing: normal; font-weight: 400; color: inherit;
}
.caja-entrada .cta-renovacion .cta-marcar input { width: auto; padding: 0; }