/* Página de Ciclo: tokens de ciclo/client/src/index.css (ciruela cálido #8a2f62 / #e08bbb,
   fuente del sistema, tarjetas de 1,25 rem, píldoras) y los colores de fase validados de la app. */

.tema-ciclo .pp { font-family: var(--t-fuente); }
.ci-ante { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; color: var(--t-acento); background: var(--t-chip); padding: 6px 12px; border-radius: 999px; margin-bottom: 16px; }
.ci-ante .ico { width: 15px; height: 15px; }
.ci-h1 { font: 800 clamp(3.4rem, 13vw, 6.4rem)/.95 var(--t-titulos); letter-spacing: -0.04em; color: var(--t-acento); }
.ci-h2 { font: 750 clamp(1.7rem, 5vw, 2.4rem)/1.1 var(--t-titulos); letter-spacing: -0.02em; margin-bottom: 10px; }
.ci-lead { font-size: 1.12rem; color: var(--t-texto-2); max-width: 34em; margin-top: 16px; }
.ci-texto { color: var(--t-texto-2); max-width: 46em; margin-bottom: 20px; font-size: 1.02rem; }
.ci-tenue { color: var(--t-texto-2); font-size: .85rem; margin-top: 10px; }

.ci-hero { display: grid; gap: 32px; align-items: center; padding-top: 24px; padding-bottom: 40px; }
@media (min-width: 880px) { .ci-hero { grid-template-columns: 1.2fr 1fr; padding-top: 48px; } }
.ci-tarjeta-hero { background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: var(--t-radio); padding: 24px; box-shadow: 0 24px 60px -30px rgb(138 47 98 / 40%); max-width: none; }

.ci-seccion { padding-top: 40px; padding-bottom: 16px; }
.ci-explorador { display: grid; gap: 28px; align-items: center; background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: var(--t-radio); padding: 24px; }
@media (min-width: 760px) { .ci-explorador { grid-template-columns: 280px 1fr; padding: 32px; } }
.ci-rueda.grande { width: 100%; max-width: 280px; margin: 0 auto; }
.ci-rueda.grande .ci-centro b { font-size: 3rem; }
.ci-rueda.grande .ci-fase { transition: opacity .25s; }
.ci-rueda.grande .ci-fase.apagada { opacity: .25; }
.ci-rueda.grande .ci-hoy { transition: cx .2s ease, cy .2s ease; }
.ci-label { display: block; font-weight: 700; font-size: .88rem; margin: 0 0 6px; color: var(--t-texto); }
#ci-control { width: 100%; accent-color: var(--t-acento); height: 32px; cursor: pointer; }
h3.ci-fase { font: 800 1.8rem var(--t-titulos); margin: 14px 0 6px; }
h3.ci-fase.menstrual { color: var(--t-menstrual); } h3.ci-fase.folicular { color: var(--t-folicular); }
h3.ci-fase.ovulatoria { color: var(--t-ovulatoria); } h3.ci-fase.lutea { color: var(--t-lutea); } h3.ci-fase.premenstrual { color: var(--t-premenstrual); }
#ci-desc { font-size: 1.02rem; min-height: 4.8em; }

.ci-cripto { display: grid; gap: 16px; }
@media (min-width: 860px) { .ci-cripto { grid-template-columns: 1fr 1fr; } }
.ci-caja { background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: var(--t-radio); padding: 20px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.ci-caja textarea, .ci-caja input[type="text"] { width: 100%; font: 500 1rem var(--t-fuente); color: var(--t-texto); background: var(--t-fondo); border: 1px solid var(--t-borde); border-radius: 14px; padding: 10px 12px; resize: vertical; }
.ci-caja textarea:focus, .ci-caja input:focus { outline: 2px solid var(--t-acento); outline-offset: 1px; }
.ci-boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 .95rem var(--t-fuente); border-radius: 999px; padding: 11px 20px; min-height: 44px; border: 0; background: var(--t-acento); color: var(--t-acento-texto); cursor: pointer; margin-top: 6px; }
.ci-boton:disabled { opacity: .5; cursor: progress; }
.ci-boton .ico { width: 16px; height: 16px; }
.ci-sec { background: var(--t-chip); color: var(--t-acento); margin-top: 0; flex: none; }
.ci-fila { display: flex; gap: 8px; }
.ci-fila input { flex: 1; min-width: 0; }
.ci-servidor { background: color-mix(in srgb, var(--t-superficie) 80%, var(--t-chip)); }
.ci-cifrado { margin: 0; font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; word-break: break-all; background: var(--t-fondo); border: 1px dashed var(--t-borde); border-radius: 12px; padding: 12px; min-height: 6.5em; color: var(--t-texto-2); }
.ci-resultado { min-height: 1.5em; font-weight: 600; overflow-wrap: anywhere; }
.ci-resultado.bien { color: var(--t-ovulatoria); }
.ci-resultado.mal { color: var(--t-menstrual); }

.ci-niveles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ci-nivel { display: inline-flex; align-items: baseline; gap: 6px; font: 700 .92rem var(--t-fuente); border-radius: 999px; padding: 10px 16px; border: 1px solid var(--t-borde); background: var(--t-superficie); color: var(--t-texto); cursor: pointer; }
.ci-nivel small { font-weight: 500; color: var(--t-texto-2); font-size: .75rem; }
.ci-nivel[aria-checked="true"] { background: var(--t-acento); color: var(--t-acento-texto); border-color: var(--t-acento); }
.ci-nivel[aria-checked="true"] small { color: inherit; opacity: .8; }
.ci-nivel-detalle { background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: var(--t-radio); padding: 20px; min-height: 9em; }
.ci-nivel-resumen { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.ci-nivel-detalle ul { display: grid; gap: 6px; }
.ci-nivel-detalle li { position: relative; padding-left: 20px; color: var(--t-texto-2); }
.ci-nivel-detalle li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--t-acento); }

.ci-fuentes { display: grid; gap: 10px; }
.ci-fuentes li { background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: 16px; padding: 14px 16px; color: var(--t-texto-2); }
.ci-fuentes b { color: var(--t-texto); }