/* css/ui/theme.css */
/* --- Legibilidad sobre el fondo oscuro de partículas, sin overlay blanco ---
     Sólo texto/controles que quedan directamente sobre el fondo (sin card opaca detrás)
     dentro de Entreno/Hábitos/Cardio/Comida/Progreso. No toca coach panel ni sheet modal. */
body.silk-on .day-name, body.silk-on .hb-title, body.silk-on .time-display,
  body.silk-on .ring-num, body.silk-on .w-now, body.silk-on .diary-head .t,
  body.silk-on .cal-empty-title, body.silk-on .macro-top b, body.silk-on .wordmark,
  body.silk-on .client-name { color: var(--gize-text); }

body.silk-on .day-sub, body.silk-on .count, body.silk-on .empty, body.silk-on .ring-sub,
  body.silk-on .ring-lbl, body.silk-on .diary-head .s, body.silk-on .cal-empty-sub,
  body.silk-on .w-meta, body.silk-on .macro-top span, body.silk-on .foot,
  body.silk-on .reset-routine, body.silk-on .client-sub { color: var(--gize-text-2); }

body.silk-on .clear, body.silk-on .cardio-tools-h, body.silk-on .ct-hint,
  body.silk-on .load-def { color: var(--gize-text-2); }

body.silk-on .clear:active { color: var(--gize-text); }

body.silk-on .time-display.finished { color: var(--blue-2); }

body.silk-on .ring-num.over { color: var(--blue-2); }

body.silk-on .day-name:focus, body.silk-on .day-sub:focus { color: var(--txt); }

body.silk-on .reset-routine, body.silk-on .load-def, body.silk-on .clear { border-color: color-mix(in srgb, var(--gize-text) 28%, transparent); }

body.silk-on .add-set, body.silk-on .cal-create { color: var(--gize-blue); border-color: color-mix(in srgb, var(--gize-blue) 45%, transparent); }

body.silk-on .day-del { color: var(--gize-text-2); }

/* --- Cajas de contenido (Entreno/Hábitos/Cardio/Comida/Progreso) ---
     Cada caja pasa a la superficie de marca (--gize-surface). Las de sección llevan además
     el borde RGB (ver css/ui/gize-surfaces.css). Al redefinir las
     variables --card/--border/--txt* DENTRO de cada caja, todo lo que ya usaba esas variables
     (inputs, texto, subtítulos) se adapta solo, sin tocar el marcado ni la lógica. Scopeado a
     body.silk-on: no afecta login, panel del coach ni el modal/sheet de ejercicios.
     Lista única vía :is() + nesting: antes esta misma lista de clases estaba repetida en
     6 selectores separados (family, ::before/::after, el ::after ajustado, los hijos con
     z-index, y reduced-motion) — la causa real de --green, .food-name, .hb-name y
     .sess-item: se agregaba una card nueva a alguna de las 6 listas y no a las otras.
     Agregar una card nueva a la familia ahora es tocar esta única lista, una sola vez. */
body.silk-on :is(.card, .hb-item, .food-row, .diary-item, .w-chart, .w-item, .water-card,
    .vol-card, .fi-card, .mc-block, .cardio-rx, .plan-banner, .join-box, .daynotes,
    .daily-card, .ci-card, .sess-item, .hx-row) {
    --card: var(--gize-surface); --card-2: var(--gize-surface-2); --border: var(--gize-border);
    --txt: var(--gize-text); --txt-2: var(--gize-text-2); --txt-3: var(--gize-text-2); --glow: color-mix(in srgb, var(--gize-blue) 22%, transparent);
    --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--gize-surface);
  }

/* .cal-search no es una "card" (sin fondo/borde propio, solo envuelve el input de
     búsqueda) — redefine únicamente las variables que su input ya usa, sin el resto
     del tratamiento de card de arriba (que le pondría un fondo/overflow que no le sirve). */
body.silk-on .cal-search {
    --card-2: var(--gize-surface-2); --border: var(--gize-border); --txt: var(--gize-text); --txt-3: var(--gize-text-2);
  }

/* --- Texto suelto del coach (sin card opaca detrás) --- */
body.silk-coach .co-title, body.silk-coach .co-client-name,
  body.silk-coach .hb-title, body.silk-coach .co-brand .wordmark,
  body.silk-coach .co-onboard-lead { color: var(--gize-text); }

body.silk-coach .co-brand-tag { color: var(--gize-text-2); }

body.silk-coach .co-brand-dash { color: var(--gize-text-2); }

body.silk-coach .co-sec, body.silk-coach .ci-f label, body.silk-coach .co-note-lbl,
  body.silk-coach .co-sub, body.silk-coach .cal-hint, body.silk-coach .ml-head,
  body.silk-coach .pl-help, body.silk-coach .foot { color: var(--gize-text-2); }

body.silk-coach .pl-sub, body.silk-coach .ml-tot { color: var(--gize-text); }

body.silk-coach .co-logout, body.silk-coach .co-back {
    color: var(--gize-text); border-color: color-mix(in srgb, var(--gize-text) 28%, transparent); background: rgba(255,255,255,.04); }

body.silk-coach .co-logout:hover, body.silk-coach .co-back:hover { border-color: color-mix(in srgb, var(--gize-blue) 55%, transparent); color: var(--gize-text); }

body.silk-coach .co-add-day, body.silk-coach .co-copy-btn {
    color: var(--gize-blue); border-color: color-mix(in srgb, var(--gize-blue) 42%, transparent); }

body.silk-coach .co-day-del { color: var(--gize-danger); border-color: color-mix(in srgb, var(--gize-danger) 40%, transparent); }

/* --- Cajas del coach: mismo tratamiento que las del cliente ---
     Misma consolidación vía :is() + nesting que el bloque del cliente arriba: una sola
     lista de clases en vez de repetida en 6 selectores separados. */
body.silk-coach :is(.co-item, .co-exc, .co-invite, .opt-sec, .opt-item, .week-editor,
    .hx-row, .cp-ccard, .co-tab, .co-daytab, .ap-day, .cp-modal, .co-row, .co-slog,
    .ck-card, .sess-item) {
    --card: var(--gize-surface); --card-2: var(--gize-surface-2); --border: var(--gize-border);
    --txt: var(--gize-text); --txt-2: var(--gize-text-2); --txt-3: var(--gize-text-2); --glow: color-mix(in srgb, var(--gize-blue) 22%, transparent);
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--gize-surface);
    border-color: var(--gize-border); color: var(--gize-text);
    box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.03);
  }

/* Bug de producción: .cp-modal y .cp-ccard son modales centrados con su propio
     position:fixed (ver sus reglas más abajo), pero la familia de arriba les pone
     position:relative como al resto — misma especificidad exacta que esta regla
     (body.silk-coach + 1 clase), así que sin este empate a favor de la que viene
     después en la hoja de estilos, "relative" le gana a "fixed" y el modal deja de
     ser un overlay: se renderiza en el flujo normal del documento, superpuesto con
     el contenido del panel debajo en vez de centrado en pantalla. */
body.silk-coach .cp-modal, body.silk-coach .cp-ccard { position: fixed; }
/* Mismo empate con overflow: la familia les pone overflow:hidden (para recortar el
     contenido a las esquinas) y eso anulaba el overflow-y:auto de los modales — el
     editor de preguntas, más alto que la pantalla, no se podía scrollear. */
body.silk-coach .cp-modal, body.silk-coach .cp-ccard { overflow-x: hidden; overflow-y: auto; }

/* pestañas/estados activos mantienen el verde de marca */
body.silk-coach .co-tab.on, body.silk-coach .co-daytab.on {
    background: var(--blue); border-color: var(--blue); color: var(--gize-text); }

body.silk-coach .ap-day.on { border-color: color-mix(in srgb, var(--gize-blue) 55%, transparent); }

/* --- Campos/controles sueltos del coach (sin card detrás): mismo tratamiento oscuro --- */
body.silk-coach .co-note, body.silk-coach .co-search, body.silk-coach .co-dayname,
  body.silk-coach .ml-in, body.silk-coach .opt-body, body.silk-coach .bw {
    background: color-mix(in srgb, var(--gize-surface) 72%, transparent); border-color: var(--gize-border); color: var(--gize-text); }

body.silk-coach .co-note::placeholder, body.silk-coach .co-search::placeholder,
  body.silk-coach .co-dayname::placeholder, body.silk-coach .ml-in::placeholder,
  body.silk-coach .opt-body::placeholder { color: color-mix(in srgb, var(--gize-text-2) 50%, transparent); }

body.silk-coach .co-note:focus, body.silk-coach .co-search:focus, body.silk-coach .co-dayname:focus,
  body.silk-coach .ml-in:focus, body.silk-coach .opt-body:focus {
    outline: none; border-color: color-mix(in srgb, var(--gize-blue) 50%, transparent); background: rgba(14,26,19,.9); }

body.silk-coach .bw.dl, body.silk-coach .bw.now { color: var(--gize-text); }

body.silk-coach .co-exc-name, body.silk-coach .co-exc-btn {
    background: color-mix(in srgb, var(--gize-surface) 60%, transparent); border-color: var(--gize-border); color: var(--gize-text); }

/* .pl-help ya tiene su color cubierto arriba (lista de "texto suelto"); solo le
     faltaba el fondo, que no es parte de la familia "card" (sin meteors: es un
     cuadro de ayuda chico, no una card de contenido). */
body.silk-coach .pl-help { background: color-mix(in srgb, var(--gize-surface) 60%, transparent); }

/* fecha nativa legible sobre oscuro */
body.silk-coach input[type="date"] { color-scheme: dark; }

/* Bug de producción: .topbar es el header del CLIENTE (logo + nombre/"tu planilla") y no
     tiene nada que ver con el panel del coach — pero #coachHost es position:fixed;inset:0
     con background:transparent y su propio scroll interno (overflow-y:auto), independiente
     del document. .topbar, en cambio, vive en el documento base y no scrollea con él: queda
     fijo en pantalla mientras el contenido del coach se desliza por debajo, y como
     #coachHost no pinta nada opaco en esa franja superior, el header del cliente se ve *a
     través* — superpuesto con "‹ Volver" y los primeros campos. El coach ya tiene su propia
     cabecera (.co-head, con Volver/Actualizar/Salir), así que el header del cliente no debe
     mostrarse en absoluto mientras el panel del coach está activo. */
body.silk-coach .topbar { display: none; }

/* Mismo motivo que el bug de arriba: .navbar es la nav inferior del CLIENTE (Entreno/
     Hábitos/.../Ajustes) y no tiene nada que ver con el coach — la navegación del coach
     va por su propia cabecera (.co-head: ‹ Volver / Actualizar / Salir) y sus tabs
     internos (.co-tab/.co-daytab). Sin esto, al ser #coachHost transparente y con scroll
     propio, la nav de abajo se seguía viendo/tocando por debajo del panel del coach. */
body.silk-coach .navbar { display: none; }

body.silk-coach #coachModeBadge { display: flex; }