/* ============================================================================
   Momix — /mi-cuenta (cuenta del VISITANTE público). Vista 3 de la cara pública.

   Cuelga de assets/home.css: de ahí salen las fuentes, los tokens de tema
   (body / body.dark) y los botones. Acá SOLO lo propio de esta pantalla — así el
   día que cambie un verde o un radio, cambia en un lugar y esta página lo toma.
   CSP: nada de style="" inline; todo vive acá.
   ============================================================================ */

/* El fondo lo pinta home.css con --pg. El body de esta pantalla necesita además
   ocupar el alto completo para que el footer quede abajo aun con poco contenido.

   ROJO DE PELIGRO, aparte: la paleta trae `--fav` (#EF4444), que es el rojo del CORAZÓN de
   favoritos —un ícono relleno, donde el contraste se juzga distinto—. Como TEXTO no llega al 4,5:1
   de WCAG AA sobre la tarjeta blanca (3,76:1), y en blanco sobre relleno tampoco (3,35:1). Lo midió
   axe. Por eso hay un rojo propio para lo que se LEE: oscuro sobre claro, claro sobre oscuro. */
.ct-body { min-height:100vh; display:flex; flex-direction:column;
  --dgr:#B91C1C;        /* rojo de texto (6,5:1 sobre tarjeta clara) */
  --dgr-bg:#B91C1C;     /* relleno del botón destructivo: blanco encima da 6,5:1 en los dos temas */
}
body.ct-body.dark { --dgr:#FCA5A5; }

/* ── Header ──
   El de la home vive SOBRE la foto del hero (texto claro sobre imagen oscura). Acá no hay
   foto: se le pone el navy de la marca debajo, y así los mismos controles blancos siguen
   teniendo el contraste que fueron diseñados a tener, en tema claro y en oscuro. */
.ct-header { background:var(--navy); flex:none; }
.ct-header .mx-avatar { width:34px; height:34px; font-size:14px; }

/* ── Contenedor ──
   Angosto a propósito (860px): esto es una lista de decisiones sobre una cuenta, no una
   vidriera. En un monitor de 27" una fila de favoritos de 2000px de ancho deja el precio a
   la izquierda y el botón "Quitar" a medio metro de distancia. */
.ct-wrap { flex:1 0 auto; width:100%; max-width:860px; margin:0 auto;
  padding:clamp(22px,4vw,44px) clamp(16px,4vw,28px) 64px; }

.ct-head { margin-bottom:22px; }
.ct-h1 { margin:0 0 6px; font:600 clamp(26px,3.4vw,34px) 'Outfit',sans-serif; letter-spacing:-.02em; color:var(--head); }
.ct-h2 { margin:0; font:600 18px 'Outfit',sans-serif; letter-spacing:-.01em; color:var(--head); }
.ct-lead { margin:0; font:400 15px/1.6 'Manrope',sans-serif; color:var(--mut); }
.ct-sub { display:block; font:400 13px/1.55 'Manrope',sans-serif; color:var(--mut2); }

/* ── Tarjetas de sección ── */
.ct-card { background:var(--card); border:1px solid var(--bord); border-radius:16px;
  padding:clamp(16px,3vw,24px); margin-bottom:16px; }
.ct-card-head { margin-bottom:16px; }
.ct-count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px;
  padding:0 7px; margin-left:6px; border-radius:999px; background:var(--green-tint); color:var(--green-dk);
  font:600 12px 'Outfit',sans-serif; vertical-align:middle; }
body.dark .ct-count { background:rgba(34,211,166,.16); color:var(--green-lt); }

/* ── Campos ──
   `.mx-field` (home.css) está pensado para el formulario de demo sobre fondo oscuro. Acá se
   reajusta a la superficie de tarjeta, respetando los 44px mínimos de control operable. */
.ct-field { width:100%; min-height:44px; padding:11px 14px; border-radius:11px;
  border:1px solid var(--bord); background:var(--pg); color:var(--head);
  font:400 15px 'Manrope',sans-serif; }
.ct-field:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(34,211,166,.18); }
.ct-lbl { display:block; margin:0 0 6px; font:600 12.5px 'Outfit',sans-serif; letter-spacing:.04em;
  text-transform:uppercase; color:var(--mut2); }
.ct-fieldwrap { min-width:0; }               /* ítem de grid: sin esto no se achica y desborda en mobile */
.ct-code { letter-spacing:.42em; font-family:'Outfit',sans-serif; font-size:18px; text-align:center; }

.ct-grid2 { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
.ct-fieldwrap-btn .mx-btn { height:44px; padding:0 20px; }
.ct-inline { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.ct-inline .ct-field { flex:1 1 220px; min-width:0; }
.ct-inline .mx-btn, .ct-inline .ct-btn-danger { height:44px; padding:0 18px; flex:none; }

/* ── Email actual + su edición ── */
.ct-mailrow { display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-top:18px; padding-top:18px; border-top:1px solid var(--bord); flex-wrap:wrap; }
.ct-mail { display:block; font:500 15px 'Manrope',sans-serif; color:var(--head); word-break:break-all; }
/* El par mostrar/ocultar va con [hidden] explícito: `display:X` en una clase EMPATA con el
   [hidden] del navegador y le gana por cascada (pasó 3+ veces en este proyecto). */
.ct-mailbox { margin-top:14px; padding:16px; border-radius:12px; background:var(--pg); border:1px solid var(--bord); }
.ct-mailbox[hidden] { display:none; }
.ct-mailbox .ct-sub { margin-bottom:12px; }
.ct-mailbox .ct-linkbtn { margin-top:12px; }

.ct-meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:16px;
  font:400 12.5px 'Manrope',sans-serif; color:var(--mut2); }
.ct-crm { display:inline-flex; align-items:center; gap:6px; color:var(--green-dk); }
body.dark .ct-crm { color:var(--green-lt); }
.ct-crm svg { flex:none; }

/* ── Listas (favoritos y alertas) ── */
.ct-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
/* `display:flex` en la clase empata con el [hidden] del navegador y le gana: al quitar el último
   favorito la lista vacía seguía ocupando lugar. Misma trampa que documenta CLAUDE.md. */
.ct-list[hidden] { display:none; }
.ct-item { display:flex; align-items:center; gap:14px; padding:12px; border-radius:12px;
  border:1px solid var(--bord); background:var(--pg); }
/* La propiedad que ya no está se ve APAGADA, pero el apagado va en la FOTO y en el título, no en
   toda la fila: un `opacity` en el contenedor le baja el contraste también al texto y al botón
   "Quitar" —que es justo lo único que todavía se puede hacer con esa fila— y los tira debajo del
   mínimo AA (medido con axe: 3 violaciones que desaparecieron al sacarlo de acá). */
.ct-item.is-gone .ct-thumb { opacity:.45; }
.ct-item.is-gone .ct-item-t { color:var(--mut); }
.ct-thumb { flex:none; width:96px; height:72px; border-radius:9px; object-fit:cover; display:block; background:var(--bord); }
.ct-thumb-no { background:linear-gradient(135deg,var(--bord),var(--card)); }
/* min-width:0 obligatorio: un ítem de flex tiene min-width:auto implícito y un título largo
   estira la fila hasta romper el layout en mobile en vez de recortarse. */
.ct-item-body { flex:1 1 auto; min-width:0; }
.ct-item-p { font:600 16px 'Outfit',sans-serif; color:var(--head); }
.ct-item-p .per { font:400 12px 'Manrope',sans-serif; color:var(--mut2); }
.ct-item-t { font:500 14px 'Manrope',sans-serif; color:var(--head);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-item-m { font:400 12.5px 'Manrope',sans-serif; color:var(--mut2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ct-gone { color:#92400E; }
body.dark .ct-gone { color:#FBBF24; }
.ct-item-acts { flex:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ct-bell { flex:none; width:40px; height:40px; border-radius:11px; display:inline-flex;
  align-items:center; justify-content:center; background:var(--green-tint); color:var(--green-dk); }
body.dark .ct-bell { background:rgba(34,211,166,.14); color:var(--green-lt); }

.ct-freq { display:inline-flex; align-items:center; gap:7px; }
.ct-freq-l { font:400 12.5px 'Manrope',sans-serif; color:var(--mut2); }
.ct-freq select { min-height:44px; padding:0 10px; border-radius:10px; border:1px solid var(--bord);
  background:var(--card); color:var(--head); font:400 13.5px 'Manrope',sans-serif; cursor:pointer; }
.ct-freq select:focus { outline:none; border-color:var(--green); }

.ct-empty { margin:0; padding:18px; border-radius:12px; border:1px dashed var(--bord);
  font:400 14px/1.6 'Manrope',sans-serif; color:var(--mut2); text-align:center; }
.ct-empty[hidden] { display:none; }

/* ── Botones propios ── */
.ct-btn-ghost { display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:0 16px; border-radius:11px; border:1px solid var(--bord); background:var(--card);
  color:var(--head); font:600 13.5px 'Outfit',sans-serif; cursor:pointer; text-decoration:none;
  transition:border-color .2s, background .2s; }
.ct-btn-ghost:hover { border-color:var(--green); color:var(--head); background:var(--pg); }
.ct-btn-inline { margin-top:14px; }
.ct-btn-x { min-height:44px; padding:0 14px; border-radius:11px; border:1px solid transparent;
  background:none; color:var(--mut); font:500 13.5px 'Manrope',sans-serif; cursor:pointer;
  transition:color .2s, border-color .2s; }
.ct-btn-x:hover { color:var(--dgr); border-color:var(--dgr); }
.ct-btn-danger { display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:0 18px; border-radius:11px; border:none; background:var(--dgr-bg); color:#fff;
  font:600 13.5px 'Outfit',sans-serif; cursor:pointer; transition:filter .2s; }
.ct-btn-danger:hover { filter:brightness(.92); }
.ct-btn-danger:active { transform:scale(.98); }
.ct-linkbtn { background:none; border:none; padding:6px 0; min-height:44px; cursor:pointer;
  font:500 13.5px 'Manrope',sans-serif; color:var(--green-dk); text-decoration:underline; }
body.dark .ct-linkbtn { color:var(--green-lt); }
.ct-btn-block { width:100%; min-height:48px; margin-top:6px; }

.ct-actions { display:flex; gap:10px; flex-wrap:wrap; }
.ct-sesiones { margin:0 0 14px; font:400 13.5px 'Manrope',sans-serif; color:var(--mut); }

/* La zona de riesgo se ve distinta ANTES de que alguien la lea: es la acción más grave de la
   pantalla. Ya no dice "no se puede deshacer" —desde mt_108 hay 30 días de gracia— pero sigue
   marcada, porque lo que empieza ahí termina en un borrado definitivo. */
.ct-danger { border-color:rgba(239,68,68,.42); }
.ct-danger .ct-h2 { color:var(--dgr); }
/* El plazo de gracia se lee ANTES de tipear la palabra: es la información que cambia la decisión
   (mucha gente no se da de baja por miedo a perder todo, y acá no lo pierde por 30 días). Va con el
   mismo tratamiento de "recuadro informativo" que `.ct-nueva` del login, pero en el tono de la
   sección, no en verde: acá no se está felicitando a nadie. */
.ct-gracia { margin:0 0 16px; padding:12px 14px; border-radius:11px;
  background:rgba(239,68,68,.07); border:1px solid rgba(239,68,68,.22);
  font:400 13.5px/1.6 'Manrope',sans-serif; color:var(--head); }
body.dark .ct-gracia { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); }

/* ── Cuenta dada de baja: la cuenta regresiva (mt_108) ──
   Esta tarjeta es TODA la pantalla cuando aparece, así que no compite con nada y puede permitirse
   el número grande: los días que quedan son el dato por el que la persona entró. */
.ct-baja { border-color:rgba(239,68,68,.42); }
.ct-baja .ct-h1 { color:var(--dgr); }
.ct-baja-dias { margin:0 0 10px; font:600 clamp(19px,2.6vw,24px) 'Outfit',sans-serif;
  letter-spacing:-.01em; color:var(--head); }
.ct-baja .ct-actions { margin-top:18px; }
.ct-baja .mx-btn-primary { min-height:44px; padding:0 22px; }

/* Cartel de confirmación que se queda quieto (?m=react). No es un toast: quien acaba de recuperar
   una cuenta que estaba por borrarse tiene derecho a leerlo con calma. */
.ct-flash { display:flex; align-items:center; gap:9px; margin:0 0 18px; padding:12px 15px;
  border-radius:12px; background:var(--green-tint); color:var(--green-dk);
  border:1px solid rgba(11,110,99,.22); font:500 14px/1.5 'Manrope',sans-serif; }
.ct-flash svg { flex:none; }
body.dark .ct-flash { background:rgba(34,211,166,.13); color:var(--green-lt); border-color:rgba(34,211,166,.28); }

/* ── Sin sesión: entrar / crear la cuenta ── */
.ct-signin { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:820px) { .ct-signin { grid-template-columns:1.15fr .85fr; align-items:start; } }
.ct-card-in .ct-lbl { margin-top:14px; }
.ct-nueva { margin:10px 0 4px; padding:11px 13px; border-radius:11px; background:var(--green-tint);
  color:var(--green-dk); font:500 13.5px/1.5 'Manrope',sans-serif; }
body.dark .ct-nueva { background:rgba(34,211,166,.13); color:var(--green-lt); }
.ct-legal { margin:14px 0 0; font:400 12px/1.55 'Manrope',sans-serif; color:var(--mut2); }
.ct-row-links { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ct-card-why { background:var(--pg); }
.ct-bullets { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ct-bullets li { display:flex; gap:10px; font:400 14px/1.55 'Manrope',sans-serif; color:var(--mut); }
.ct-bullets svg { flex:none; margin-top:2px; color:var(--green); }
/* Los pasos del login alternan por [hidden]: misma trampa del display que arriba. */
[data-step][hidden], [data-mailstep][hidden] { display:none; }

/* ── Footer ──
   El link es la única salida de esta pantalla en mobile, así que tiene que cumplir los 44px de
   alto táctil: como <a> inline medía 18px (lo cazó tests/ux). `inline-flex` + min-height lo lleva
   al mínimo sin agrandar la tipografía. */
.ct-foot { flex:none; padding:14px 22px 22px; text-align:center; border-top:1px solid var(--bord);
  font:400 13px 'Manrope',sans-serif; }
.ct-foot a { display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 14px; }
/* home.css pinta TODO enlace con --green-dk (#0B6E63), que está pensado para fondo claro: sobre el
   navy del tema oscuro da 3,05:1 y no llega al 4,5:1 de WCAG AA (lo midió axe en tests/ux). En
   oscuro el enlace usa la variante clara de la paleta, que es la que existe justamente para esto.
   Se acota a esta pantalla a propósito: cambiar la regla global de home.css es tocar la home y el
   explorador, que son de otro agente y de otra verificación. */
body.dark .ct-foot a, body.dark .ct-wrap a { color:var(--green-lt); }
body.dark .ct-foot a:hover, body.dark .ct-wrap a:hover { color:var(--green); }
/* El botón fantasma es un <a> en algunos lugares ("Ver ficha", "Crear una alerta"): su color lo
   define .ct-btn-ghost y no tiene que competir con la regla de arriba. */
body.dark .ct-wrap a.ct-btn-ghost { color:var(--head); }

/* ── Mobile ── */
@media (max-width:640px) {
  .ct-grid2 { grid-template-columns:1fr; align-items:stretch; }
  .ct-fieldwrap-btn .mx-btn { width:100%; }
  /* La fila pasa a dos renglones: foto + datos arriba, acciones abajo y a lo ancho. Con todo en
     una línea, en 360px el botón "Quitar" quedaba de 40px y el título sin lugar. */
  .ct-item { flex-wrap:wrap; }
  .ct-item-acts { width:100%; justify-content:flex-start; }
  .ct-thumb { width:76px; height:58px; }
  .ct-freq { flex:1 1 auto; }
  .ct-freq select { flex:1 1 auto; min-width:0; }
}