/* ============================================================================
   MEYVO · CALMA (10-10-2026) — el estilo por defecto: fondo «blanco invierno»,
   naranjo institucional que no grita, barra lateral clara y menú por grupos.
   Los colores salen de variables que js/calma.js calcula desde UN color de fondo
   (con contraste de lectura garantizado). Los valores de abajo son el respaldo
   para el primer pintado, antes de que corra el JavaScript.
   Capa ENCIMA de portal.css, como piel.css: no cambia ninguna lógica.
   ============================================================================ */
html[data-piel="calma"]{
  --page:#FBF9F6; --card:#FEFDFC; --card2:#F7F5F2; --surface:#FAF8F5;
  --hair:#EBE8E4; --line:rgba(0,0,0,.15); --line-soft:rgba(0,0,0,.06);
  --ink:#262320; --muted:#71706F; --side:#F2F0ED; --side-hover:#E9E6E2;
  --acento-texto:#CA4700; --sobre-acento:#2B1608; --acento-hover:color-mix(in srgb, var(--volt-bright) 90%, #000);
  --curva:cubic-bezier(.16,1,.3,1);
  --ia:#0A7A91;                                   /* el turquesa de la IA, un poco más hondo: texto blanco encima se lee (5:1) */
}
html[data-piel="calma"] body{ background:var(--page); color:var(--ink); }
html[data-piel="calma"] .main{ background:var(--page); }

/* ---------- barra lateral ---------- */
html[data-piel="calma"] .side{ background:var(--side); color:var(--ink); border-right:1px solid var(--hair); }
html[data-piel="calma"] .side .wordmark-txt{ color:var(--ink); }
html[data-piel="calma"] .nav-item{ color:var(--nav-ink, var(--ink)); font-weight:600; }
html[data-piel="calma"] .nav-item:hover{ background:color-mix(in srgb, var(--volt-bright) 11%, transparent); color:var(--ink); }
html[data-piel="calma"] .nav-item.on{
  background:color-mix(in srgb, var(--volt-bright) 18%, transparent); color:var(--ink); font-weight:700;
  box-shadow:inset 3px 0 0 var(--volt-bright);
}
html[data-piel="calma"] .nav-item.on .ic{ color:var(--acento-texto); }
html[data-piel="calma"] .nav-item:focus-visible,
html[data-piel="calma"] .nav-gh:focus-visible{ outline:2px solid var(--acento-texto); outline-offset:1px; }
html[data-piel="calma"] .side .sec-label{ color:var(--muted); }
html[data-piel="calma"] .side .who{ background:var(--card); border:1px solid var(--hair); color:var(--ink); }
html[data-piel="calma"] .side .who .muted{ color:var(--muted); }
html[data-piel="calma"] .powered{ color:var(--muted); border-top:1px solid var(--hair); }
html[data-piel="calma"] .powered b{ color:var(--acento-texto); }
html[data-piel="calma"] .powered:hover{ color:var(--ink); }

/* ---------- menú por grupos (también sirve sin el estilo calma: valores neutros) ---------- */
.nav-gh{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  padding:10px 12px; margin-bottom:2px; border:0; border-radius:11px; background:transparent;
  font:inherit; font-size:14px; font-weight:700; color:#C7C4CE;
}
.nav-gh:hover{ background:var(--side-hover); color:#fff; }
.nav-gh .ic{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-gh .ic svg{ width:20px; height:20px; }
.nav-gt{ flex:1; }
.nav-chev{ width:16px; height:16px; display:inline-flex; opacity:.7; transition:transform .25s var(--curva, ease); }
.nav-chev svg{ width:16px; height:16px; }
.nav-grupo.open > .nav-gh .nav-chev{ transform:rotate(180deg); }
.nav-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--curva, ease); }
.nav-grupo.open > .nav-sub{ grid-template-rows:1fr; }
.nav-sub-in{ overflow:hidden; min-height:0; visibility:hidden; transition:visibility 0s linear .26s;
  margin-left:21px; padding-left:8px; border-left:1.5px solid rgba(255,255,255,.1); }
.nav-grupo.open > .nav-sub > .nav-sub-in{ visibility:visible; transition-delay:0s; }
.nav-item.sub{ padding:8px 11px; font-size:13.5px; font-weight:600; margin-bottom:1px; }
.nav-grupo.activo > .nav-gh{ color:#fff; }
html[data-piel="calma"] .nav-gh{ color:var(--nav-ink, var(--ink)); }
html[data-piel="calma"] .nav-gh:hover{ background:color-mix(in srgb, var(--volt-bright) 11%, transparent); color:var(--ink); }
html[data-piel="calma"] .nav-grupo.activo > .nav-gh{ color:var(--ink); }
html[data-piel="calma"] .nav-grupo.activo > .nav-gh .ic{ color:var(--acento-texto); }
html[data-piel="calma"] .nav-sub-in{ border-left-color:var(--line); }
@media (prefers-reduced-motion:reduce){ .nav-sub, .nav-chev, .nav-sub-in{ transition:none; } }

/* ---------- tarjetas, campos y botones ---------- */
html[data-piel="calma"] .card,
html[data-piel="calma"] .acc,
html[data-piel="calma"] .modal{
  background:var(--card); border:1px solid var(--hair); border-radius:16px;
  box-shadow:0 1px 2px rgba(60,45,30,.04), 0 10px 26px -18px rgba(60,45,30,.16);
}
html[data-piel="calma"] .card:hover{ border-color:color-mix(in srgb, var(--volt-bright) 34%, var(--hair)); }
html[data-piel="calma"] .card.kpi{ border-top:3px solid color-mix(in srgb, var(--volt-bright) 70%, transparent); }
html[data-piel="calma"] .kpi b{ color:var(--ink); }
html[data-piel="calma"] .topbar h1, html[data-piel="calma"] .card h3{ color:var(--ink); }
html[data-piel="calma"] .muted{ color:var(--muted); }
html[data-piel="calma"] input, html[data-piel="calma"] select, html[data-piel="calma"] textarea{
  background:var(--card); border-color:var(--line); color:var(--ink); }
html[data-piel="calma"] input::placeholder, html[data-piel="calma"] textarea::placeholder{ color:color-mix(in srgb, var(--muted) 75%, var(--card)); }
html[data-piel="calma"] input:focus, html[data-piel="calma"] select:focus, html[data-piel="calma"] textarea:focus{
  border-color:var(--volt-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--volt-bright) 24%, transparent); }
html[data-piel="calma"] .btn-volt{ background:var(--volt-bright); color:var(--sobre-acento); box-shadow:none; }
html[data-piel="calma"] .btn-volt:hover{ background:var(--acento-hover); color:var(--sobre-acento); }
html[data-piel="calma"] .btn-ghost{ border-color:var(--line); color:var(--ink); }
html[data-piel="calma"] .btn-ghost:hover{ border-color:var(--volt-bright); color:var(--acento-texto); background:color-mix(in srgb, var(--volt-bright) 8%, transparent); }
html[data-piel="calma"] .pill.volt{ background:color-mix(in srgb, var(--volt-bright) 16%, transparent); color:color-mix(in srgb, var(--acento-texto) 72%, var(--ink)); }
html[data-piel="calma"] .callout{ background:var(--card); border-color:var(--hair); border-left-color:var(--volt-bright); }
html[data-piel="calma"] .callout .ci, html[data-piel="calma"] .acc-ic{ color:var(--acento-texto); }
html[data-piel="calma"] .quote{ background:linear-gradient(120deg, color-mix(in srgb, var(--volt-bright) 10%, var(--card)), var(--card)); border-color:var(--hair); }
html[data-piel="calma"] .obj-hero{ background:linear-gradient(120deg, color-mix(in srgb, var(--volt-bright) 12%, var(--card)), var(--card)); }
html[data-piel="calma"] .empty{ border-color:var(--line); color:var(--muted); }
html[data-piel="calma"] .bar{ background:color-mix(in srgb, var(--ink) 9%, transparent); }
html[data-piel="calma"] .modal-bg{ background:rgba(40,30,20,.38); backdrop-filter:blur(4px); }
html[data-piel="calma"] table th{ color:var(--muted); }
html[data-piel="calma"] tr, html[data-piel="calma"] td, html[data-piel="calma"] th, html[data-piel="calma"] .list-item{ border-color:var(--hair); }

/* texto de acento sobre claro (links, pestañas, etiquetas): el acento oscurecido hasta leerse */
html[data-piel="calma"] .tab.on,
html[data-piel="calma"] .av-cta,
html[data-piel="calma"] .gloss-btn,
html[data-piel="calma"] .obj-hero .oh-k,
html[data-piel="calma"] .pg-k,
html[data-piel="calma"] .volt,
html[data-piel="calma"] .ob-go,
html[data-piel="calma"] .acct-sum b{ color:var(--acento-texto); }
/* dentro de las tarjetas oscuras (hero del alumno, cuenta) se mantiene el acento brillante */
html[data-piel="calma"] :is(.pg-hero,.pg-fb,.today-hero,.acct-hero,.myrt-bar) :is(.pg-k,.oh-k,.av-cta,.volt){ color:var(--volt-bright); }

/* ---------- móvil: la barra de abajo también es clara ---------- */
@media(max-width:820px){
  html[data-piel="calma"] .bottombar{ background:color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter:blur(14px); border-top:1px solid var(--hair); }
  html[data-piel="calma"] .bottombar .bi{ color:var(--muted); }
  html[data-piel="calma"] .bottombar .bi.on{ color:var(--acento-texto); }
}

/* ---------- «Fondo de la app» en Mi identidad ---------- */
.fondo-chip{ display:inline-flex; align-items:center; gap:9px; padding:8px 13px 8px 9px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-size:13.5px; font-weight:700; }
.fondo-chip i{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.18); flex-shrink:0; }
.fondo-chip.on{ border-color:var(--volt-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--volt-bright) 24%, transparent); }
.fondo-chip:focus-visible{ outline:2px solid var(--acento-texto, var(--volt-deep)); outline-offset:2px; }

/* ---------- fotos del mes (diario de vida y panel de alumnos) ---------- */
.fm-aviso{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:14px 16px; border-radius:14px;
  border:1px solid var(--hair); border-left:4px solid var(--volt-bright); background:var(--card); }
.fm-aviso.ok{ border-left-color:var(--ok, #2F8F57); }
.fm-aviso .fm-t{ flex:1; min-width:180px; }
.fm-aviso .fm-t b{ display:block; }
.fm-tira{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; scroll-snap-type:x proximity; }
.fm-foto{ position:relative; flex:0 0 auto; width:104px; scroll-snap-align:start; }
.fm-foto img{ width:104px; height:136px; object-fit:cover; border-radius:12px; border:1px solid var(--hair); display:block; background:var(--card2); cursor:zoom-in; }
.fm-foto span{ display:block; margin-top:4px; font-size:11.5px; color:var(--muted); text-align:center; }
.fm-foto button.x{ position:absolute; top:5px; right:5px; width:24px; height:24px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(20,16,12,.62); color:#fff; font-size:15px; line-height:1; }
.fm-pend{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.fm-pend img{ width:64px; height:84px; object-fit:cover; border-radius:10px; border:1px solid var(--hair); }
.fm-pill{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
  background:color-mix(in srgb, var(--volt-bright) 18%, transparent); color:var(--acento-texto, var(--volt-deep)); }
.fm-pill.ok{ background:color-mix(in srgb, var(--ok, #2F8F57) 16%, transparent); color:var(--ok, #2F8F57); }
.dj-foto{ display:block; width:100%; max-width:240px; margin-top:10px; border-radius:12px; border:1px solid var(--hair); }

/* ---------- pantalla de ingreso calma (17-10) ---------- */
html[data-piel="calma"] .login-wrap{ background:var(--page); }
html[data-piel="calma"] .login{ background:var(--card); border:1px solid var(--hair); color:var(--ink); box-shadow:0 18px 44px -28px rgba(60,45,30,.22); }
html[data-piel="calma"] .login .wordmark-txt{ color:var(--ink); }
html[data-piel="calma"] .login h2{ color:var(--ink); }
html[data-piel="calma"] .login p.sub, html[data-piel="calma"] .login label{ color:var(--muted); }
html[data-piel="calma"] .login input{ background:var(--card); border-color:var(--line); color:var(--ink); }
html[data-piel="calma"] .login input:focus{ border-color:var(--volt-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--volt-bright) 24%, transparent); }
html[data-piel="calma"] .login a{ color:var(--acento-texto); }

/* ---------- acciones de la lista de alumnos: ícono + nombre (17-10, Diego) ---------- */
td .btn-ghost.btn-sm{ display:inline-flex; align-items:center; gap:6px; margin:2px 2px; }
td .btn-ghost.btn-sm span{ font-size:12.5px; font-weight:600; }
td .btn-ghost.btn-sm svg{ flex-shrink:0; }

/* la celda de acciones de la lista de alumnos se ajusta en varias líneas (17-10: no se salía de la pantalla) */
td.acc-alumno{ white-space:normal; min-width:300px; }
td.acc-alumno .btn{ margin:3px 3px 3px 0; }

/* pie de la pantalla de ingreso: sin opacidad, para que se lea (revisión 17-10) */
html[data-piel="calma"] .login p.sub{ opacity:1 !important; }