/* =====================================================================
   CALENDARIO DE EQUIPO · Ops Console · RODECA Labs · v2
   ─────────────────────────────────────────────────────────────────────
   PUERTO A LA OPS CONSOLE (2026-10-08). Este archivo es el CSS de la
   maqueta de Edna (calendario.html, líneas 6-741) movido tal cual, con
   un solo cambio estructural: TODO selector cuelga de #view-calendario.
   La maqueta usa nombres genéricos (.btn, .panel, .barra, .av, .sub…)
   que YA EXISTEN en app.css con otro diseño; dejarlos globales rompía
   Inicio, Documentos, Equipo y Admin. Los comentarios y las decisiones
   de producto de la maqueta se conservan íntegros.
   ─────────────────────────────────────────────────────────────────────
   Línea gráfica: company/brand/ — IBM Plex, sin serifa, sin itálicas,
   sin pesos 300 ni 800.
   v2 (6 OCT): cada quien tiene su panel — foto, color, jornada, horas
   comprometidas y días inhábiles. Proponer una junta ya no es escoger
   una hora a ciegas: el sistema ofrece solo los huecos en que TODOS los
   asistentes están libres, igual que la vista del cliente en PMedic.
   ─────────────────────────────────────────────────────────────────────
   2.ª VUELTA (8 OCT): QA contó 158 colores escritos a mano y listó los que
   cambian el SIGNIFICADO de la rejilla en oscuro. Los tintes, rayados,
   anillos de foco y sombras pasan ahora por tokens (--t-*, --foco*,
   --sombra*, --verde) que se declaran abajo y se voltean en los dos bloques
   oscuros; lo que se queda literal a propósito está anotado en su lugar y lo
   lista scripts/check-cal-css.mjs. Reglas nuevas de esta vuelta: los tres
   estados de una junta (.junta.propuesta tentativa, .junta.cancelada
   tachada), el panel y el paso de cancelación (.cancel-caja,
   .cancel-recordatorio, .btn.peligro.firme), la salida de la bienvenida
   (.bv-salir) y la foto como <img> (.av img).
   ===================================================================== */
/* Los tokens de la maqueta vivían en :root y desde ahí pisaban los de la
   Console en TODA la app. Aquí viven en la sección y, donde el valor
   coincide al carácter con un token de marca de app.css, se escriben en
   términos de ése: así un cambio de marca entra en un solo lugar.
   Equivalencias verificadas contra public/app.css líneas 2-8:
     --tinta      #111144 = --depths      --azul    #223382 = --royal
     --azul-claro #9BACD8 = --aster       --naranja #F98513 = --habanero
     --papel      #F4F1EC = --luster      --piedra  #DAD1C8 = --tan
   Cuatro se escriben contra el token SEMÁNTICO de la Console, no contra el
   de marca, porque en claro valen exactamente lo mismo y así el calendario
   también hereda el modo oscuro de la Console sin repetirlos abajo:
     --tx    #111144 = --text-1 (que en claro es var(--depths))
     --fondo #F4F1EC = --bg      (que en claro es var(--luster))
     --panel #FFFFFF = --surface (claro)
     --borde #DAD1C8 = --border  (claro)
   NO coinciden y se quedan literales (ver el reporte):
     --azul-medio #3D5A80  (app.css lo tiene sólo como --elisa-h, que es
                            identidad de persona, no un token de marca)
     --rojo       #B3261E  (app.css: --err-c #8B0000)
     --tx-suave   #4A4C72  (app.css: --text-3 #5A6280)
     --blanco     #FFFFFF  (literal a propósito: es "blanco", no superficie)
   --mono NO se redefine aquí: app.css ya declara en :root el mismo
   'IBM Plex Mono' y se hereda. Volver a declararlo en términos de sí
   mismo sería un ciclo (var(--mono) dentro de --mono). */
#view-calendario{
  --tinta:var(--depths); --azul:var(--royal); --azul-claro:var(--aster); --azul-medio:#3D5A80;
  --naranja:var(--habanero); --papel:var(--luster); --piedra:var(--tan);
  --rojo:#B3261E; --blanco:#FFFFFF;
  --tx:var(--text-1); --tx-suave:#4A4C72; --fondo:var(--bg);
  --panel:var(--surface); --borde:var(--border);
  --texto:var(--sans);
  --r:10px;
  /* ── Tintes, rayados, anillos y sombras ───────────────────────────────
     QA listó 158 colores literales en este archivo, y varios cambian el
     SIGNIFICADO de la rejilla cuando el tema es oscuro: la columna de HOY
     deja de distinguirse, las rayas de Piedra al 45% pasan de insinuarse a
     gritar sobre una celda oscura, la franja apartada se vuelve invisible y
     los anillos de foco casi desaparecen. Pasan por token para que el bloque
     oscuro los voltee en UN solo lugar. En claro valen exactamente lo que
     valían (una excepción anotada: --sombra-sel unifica .16 y .18, que a ojo
     son el mismo).
     Lo que NO entra aquí y NO cambia entre temas: los colores de identidad de
     cada persona, el naranja de acción, y los velos blancos que van ENCIMA de
     un color de persona (--sobre-id-*), porque el color de abajo tampoco
     cambia. Un velo que voltea sobre un fondo que no voltea sería un error. */
  --t-hoy:rgba(34,51,130,.045);        /* la columna de HOY */
  --t-raya:rgba(218,209,200,.45);      /* el rayado de una hora cerrada */
  --t-inhabil-a:rgba(179,38,30,.06);   /* el rayado de un día inhábil */
  --t-inhabil-b:rgba(179,38,30,.14);
  --t-apartado-a:rgba(17,17,68,.05);   /* la franja apartada a mano */
  --t-apartado-b:rgba(17,17,68,.11);
  --t-apartado-bd:rgba(17,17,68,.16);
  --t-ok:rgba(34,51,130,.12);          /* el fondo de la pastilla "Confirmó" */
  --t-tinte:rgba(34,51,130,.04);       /* velos de Real, del más tenue… */
  --t-hover:rgba(34,51,130,.06);       /* …al de un hueco al pasar encima… */
  --t-ico:rgba(34,51,130,.08);
  --t-hover-f:rgba(34,51,130,.09);     /* …y al de un hueco para todo el grupo */
  --t-rojo:rgba(179,38,30,.08);        /* velos de aviso rojo */
  --t-rojo-m:rgba(179,38,30,.12);
  --t-rojo-bd:rgba(179,38,30,.4);
  --foco:rgba(34,51,130,.14);          /* el anillo de 3px de un campo con foco */
  --foco-fuerte:rgba(34,51,130,.2);
  --sombra-sel:rgba(34,51,130,.16);    /* "esto está seleccionado" */
  --sombra-on:rgba(34,51,130,.3);
  --verde:#2E7D32;                     /* una sugerencia resuelta */
  /* velos blancos ENCIMA de un color de persona: no voltean */
  --sobre-id-a:rgba(255,255,255,.2);
  --sobre-id-b:rgba(255,255,255,.26);
  --sobre-id-c:rgba(255,255,255,.75);
}

#view-calendario *,
#view-calendario *::before,
#view-calendario *::after{box-sizing:border-box}
#view-calendario button{font:inherit;color:inherit}
#view-calendario{margin:0;background:var(--fondo);color:var(--tx);font-family:var(--texto);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
#view-calendario em{font-style:normal;font-weight:600}
#view-calendario code{font-family:var(--mono);font-size:.87em;background:var(--t-hover-f);
  padding:2px 6px;border-radius:5px}
#view-calendario :focus-visible{outline:2px solid var(--naranja);outline-offset:2px;border-radius:4px}

/* ───────── blindaje contra app.css ─────────
   Prefijar no alcanza en tres clases: app.css las declara a nivel raíz y
   las propiedades que la maqueta NO declara se cuelan igual dentro de la
   sección (gana la más específica propiedad por propiedad, no la regla
   entera). Verificado contra public/app.css: .btn líneas 79-86,
   .panel 386-388 / 416-419 / 430, .sub 375-376.
     .btn    traía alto fijo 44px, versalitas, mono y nowrap.
     .panel  es el cajón deslizante de la Console: fixed, transform y
             visibility:hidden — el panel de detalle del calendario
             quedaba invisible.
     .sub    es la rama del árbol de Equipo: grid + ::before con una
             línea; en el calendario .sub es un párrafo de apoyo. */
#view-calendario .btn{height:auto;min-height:0;font-family:var(--texto);
  text-transform:none;letter-spacing:normal;white-space:normal}
#view-calendario .btn.sm{height:auto}
#view-calendario .panel{left:auto;right:auto;bottom:auto;width:auto;height:auto;
  z-index:auto;box-shadow:none;transform:none;transition:none;display:block;
  visibility:visible;opacity:1}
#view-calendario .sub{display:block;grid-template-columns:none;gap:0;min-height:0;
  position:static}
#view-calendario .sub::before{content:none}
/* La maqueta se escribió con los márgenes por omisión del navegador para
   <p> (su único reset era body{margin:0}). app.css hace *{margin:0;padding:0}
   en toda la app: aquí se devuelven los que la maqueta daba por hechos. */
#view-calendario p{margin:1em 0}

/* Los botones que vivían en la barra propia de la maqueta (Acomodar,
   Sugerencias, Mi panel, Proponer junta) ahora viven en el encabezado de
   la sección, como el botón "Subir" de Documentos. Mismo gap que tenían
   en .barra .der. */
#view-calendario .cal-acciones{display:flex;gap:11px;align-items:center;flex-wrap:wrap}
/* La hoja era la página entera (ancho máximo y respiración propios).
   Ahora el marco lo da .content/.view de la Console, así que la hoja se
   queda sólo como contenedor del acomodo: sin ancho ni padding propios
   para no sumar doble margen. */
#view-calendario .hoja{max-width:none;margin:0;padding:0}
/* Rejilla de 12 columnas para las zonas acomodables. El gap sustituye a los
   margin-bottom de cada bloque, que aquí se anulan para no sumar doble. */
#view-calendario .zona-rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;align-items:start}
body #view-calendario .zona-rejilla > *{grid-column:span var(--col,12);min-width:0;margin-top:0;margin-bottom:0}
#view-calendario .zona-rejilla > .fondo-modal{grid-column:1 / -1}
#view-calendario .con-alto{height:var(--alto);overflow:auto}
/* con alto fijo y scroll, el asa de tamaño se iría con el contenido: mientras
   se acomoda se recorta, así el asa queda siempre a la vista */
body.acomodando #view-calendario .con-alto{overflow:hidden}
#view-calendario #tablero.zona-rejilla{grid-template-columns:repeat(12,minmax(0,1fr))}
#view-calendario #tablero.zona-rejilla > #marco-cal{--col:9}
#view-calendario #tablero.zona-rejilla > #cal-panel{--col:3}
#view-calendario .panel.sin-pegar{position:static}

/* ---- avatar: foto si la hay, iniciales si no ---- */
#view-calendario .av{border-radius:50%;display:grid;place-items:center;flex:none;overflow:hidden;
  font-weight:700;letter-spacing:.01em;background-size:cover;background-position:center}
/* La foto ya no es un background-image con un data URI: es una <img> cuyo
   src es foto_url, para que el navegador la cachee por su URL. */
#view-calendario .av img{width:100%;height:100%;display:block;object-fit:cover}
#view-calendario .av.s{width:22px;height:22px;font-size:9.5px}
#view-calendario .av.m{width:28px;height:28px;font-size:11px}
#view-calendario .av.g{width:46px;height:46px;font-size:16px}
#view-calendario .av.xl{width:84px;height:84px;font-size:27px}

/* ---- encabezado ----
   La barra propia de la maqueta (marino, con logo, nombre de quien entró
   y el selector "ver como") se quitó completa: la Console ya tiene barra,
   identidad y sesión, y el "ver como" desaparece por requisito de
   seguridad — la identidad es la sesión real. Con la barra se fueron sus
   reglas: .barra, .barra-in, .marca, .logo-barra, .logo-mini, .yo-caja,
   .yo-txt, .yo-nom y .ver-como*. */
#view-calendario .btn{border:1px solid var(--borde);background:var(--panel);color:var(--tinta);
  padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:.18s}
#view-calendario .btn:hover{border-color:var(--azul);color:var(--azul);background:#fff}
/* Real = "aquí estás / esto está activo". Naranja = "haz esto ahora".
   .btn.pri usaba Real, el mismo color que una pestaña seleccionada, y eso
   aplanaba la jerarquía: comprometerse y navegar se veían igual. */
#view-calendario .btn.pri{background:var(--naranja);border-color:var(--naranja);color:#2A1500}
#view-calendario .btn.pri:hover{background:#E2740A;border-color:#E2740A;color:#2A1500}
#view-calendario .btn.sm{padding:6px 13px;font-size:13px}
#view-calendario .btn.peligro:hover{border-color:var(--rojo);color:var(--rojo)}

#view-calendario .controles{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--borde);border-radius:var(--r);padding:11px 14px;margin-bottom:14px}
#view-calendario .vistas{display:inline-flex;background:var(--papel);border:1px solid var(--borde);
  border-radius:999px;padding:3px;gap:2px}
#view-calendario .vistas button{border:0;background:none;padding:7px 16px;border-radius:999px;font-size:13.5px;
  font-weight:600;color:var(--tinta);cursor:pointer;transition:.18s}
#view-calendario .vistas button:hover{background:#fff;color:var(--azul)}
#view-calendario .vistas button.on{background:var(--azul);color:#fff;box-shadow:0 1px 4px var(--sombra-on)}
#view-calendario .vistas button.on:hover{background:var(--azul);color:#fff}
#view-calendario .semana-nav{display:flex;align-items:center;gap:10px}
#view-calendario .flecha{width:32px;height:32px;border-radius:50%;border:1px solid var(--borde);
  background:var(--panel);color:var(--tinta);cursor:pointer;display:grid;place-items:center;transition:.18s}
#view-calendario .flecha:hover{border-color:var(--azul);color:var(--azul);background:#fff}
#view-calendario .semana-txt{font-weight:600;font-size:14.5px;min-width:190px;text-align:center}
#view-calendario .gente{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
#view-calendario .ficha-p{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borde);
  background:var(--papel);border-radius:999px;padding:4px 13px 4px 4px;cursor:pointer;
  font-size:13px;font-weight:600;transition:.18s;color:var(--tinta)}
#view-calendario .ficha-p:hover{background:#fff}
#view-calendario .ficha-p.on{background:var(--panel);border-color:var(--azul);box-shadow:0 1px 3px var(--sombra-sel)}
#view-calendario .ficha-p.off{color:var(--tx-suave);opacity:.65}
#view-calendario .ficha-p.off .av{filter:grayscale(1)}

/* ---- propuestas dirigidas a mí ---- */
#view-calendario .propuestas{background:rgba(249,133,19,.1);border:1px solid rgba(249,133,19,.45);
  border-left:4px solid var(--naranja);border-radius:var(--r);padding:14px 17px;margin-bottom:14px}
#view-calendario .propuestas .tit{font-weight:700;font-size:14.5px;color:#8A4500;display:flex;align-items:center;gap:8px}
#view-calendario .propuestas .sub{margin:3px 0 0;font-size:13px;color:#6E3A00}
#view-calendario .prop-fila{display:flex;align-items:center;gap:12px;background:var(--panel);
  border:1px solid rgba(249,133,19,.45);border-radius:9px;padding:11px 13px;margin-top:10px;
  flex-wrap:wrap}
#view-calendario .prop-fila .quien{font-size:12.5px;color:var(--tx-suave)}
#view-calendario .prop-fila b{font-size:14.5px;display:block;line-height:1.3}
#view-calendario .prop-fila .cuando{font-family:var(--mono);font-size:12.5px;color:var(--tx-suave)}
#view-calendario .prop-fila .acc{margin-left:auto;display:flex;gap:7px}

/* ---- rejilla ---- */
#view-calendario .tablero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
#view-calendario .marco-cal{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
/* El calendario de equipo arranca sin nadie marcado, así que puede estar
   legítimamente vacío. Se explica en vez de dejar una rejilla en blanco. */
#view-calendario .cal-vacio{padding:62px 30px;display:flex;flex-direction:column;align-items:center;
  gap:12px;text-align:center}
#view-calendario .cal-vacio svg{width:42px;height:42px;color:var(--azul-claro)}
#view-calendario .cal-vacio b{font-size:16.5px;font-weight:600;color:var(--tx)}
#view-calendario .cal-vacio p{margin:0;font-size:13.5px;color:var(--tx-suave);max-width:40ch;line-height:1.5}
#view-calendario .cal-vacio em{font-style:normal;font-weight:600;color:var(--azul)}
#view-calendario .cal-vacio .btn{margin-top:6px}
#view-calendario .panel.con-dueno{border-top:4px solid var(--borde)}
#view-calendario .fila{display:grid;grid-template-columns:62px repeat(var(--cols,7),minmax(0,1fr));
  border-bottom:1px solid var(--borde)}
#view-calendario .fila:last-child{border-bottom:0}
#view-calendario .fila.cabeza{position:sticky;top:0;z-index:5;background:var(--azul);border-bottom:0}
#view-calendario .fila.cabeza .hora-col,
#view-calendario .fila.cabeza .dia-cab{border-right-color:rgba(244,241,236,.18)}
#view-calendario .fila.cabeza .dia-cab .d{color:var(--azul-claro)}
#view-calendario .fila.cabeza .dia-cab .n{color:var(--papel)}
#view-calendario .fila.cabeza .dia-cab.hoy .d{color:var(--papel)}
#view-calendario .fila.cabeza .dia-cab.hoy .n{background:var(--papel);color:var(--tinta)}
#view-calendario .hora-col{padding:6px 8px;border-right:1px solid var(--borde);font-family:var(--mono);
  font-size:11px;color:var(--tx-suave);text-align:right}
#view-calendario .dia-cab{padding:10px 8px;text-align:center;border-right:1px solid var(--borde)}
#view-calendario .dia-cab:last-child{border-right:0}
#view-calendario .dia-cab .d{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-suave)}
#view-calendario .dia-cab .n{font-size:19px;font-weight:700;margin-top:2px;line-height:1.1}
#view-calendario .dia-cab.hoy .n{background:var(--azul);color:#fff;border-radius:50%;width:32px;height:32px;
  display:inline-grid;place-items:center;font-size:16px}
#view-calendario .dia-cab.hoy .d{color:var(--azul)}
#view-calendario .celda{border-right:1px solid var(--borde);min-height:54px;padding:3px;display:flex;
  flex-direction:column;gap:3px;position:relative}
#view-calendario .celda:last-child{border-right:0}
/* Vista de mes: cada día ofrece su propio + para apartar o proponer sin
   tener que bajar a la vista de semana. */
#view-calendario .mes-dia-cab{display:flex;align-items:center;justify-content:space-between;padding:1px 3px}
#view-calendario .mes-dia-cab span{font-size:12px;font-weight:700}
#view-calendario .mes-dia-cab span.hoy{color:var(--azul)}
#view-calendario .mes-mas{width:19px;height:19px;border-radius:50%;border:1px solid var(--borde);
  background:var(--panel);color:var(--tx-suave);font-size:13px;line-height:1;cursor:pointer;
  opacity:0;transition:.15s;padding:0}
#view-calendario .celda:hover .mes-mas{opacity:1}
#view-calendario .mes-mas:hover{border-color:var(--azul);color:var(--azul);background:#fff}
#view-calendario .mes-mas:focus-visible{opacity:1}
#view-calendario .celda.col-hoy{background:var(--t-hoy)}
#view-calendario .celda.col-hoy.cerrado{background-color:var(--t-hoy);
  background-image:repeating-linear-gradient(135deg,transparent,transparent 6px,
    var(--t-raya) 6px,var(--t-raya) 12px)}
#view-calendario .celda.cerrado{background:repeating-linear-gradient(135deg,transparent,transparent 6px,
  var(--t-raya) 6px,var(--t-raya) 12px)}
#view-calendario .celda.inhabil{background:repeating-linear-gradient(135deg,var(--t-inhabil-a),
  var(--t-inhabil-a) 6px,var(--t-inhabil-b) 6px,var(--t-inhabil-b) 12px)}
#view-calendario .celda.inhabil::after{content:attr(data-motivo);position:absolute;inset:0;display:grid;
  place-items:center;font-size:9.5px;font-weight:600;color:#7E1B15;text-align:center;
  padding:2px;pointer-events:none;line-height:1.2}
#view-calendario .libre{position:absolute;inset:3px;border:1px dashed transparent;border-radius:7px;
  background:none;cursor:pointer;transition:.15s}
#view-calendario .libre:hover{border-color:var(--azul-claro);background:var(--t-hover)}
#view-calendario .libre::after{content:"+";position:absolute;inset:0;display:grid;place-items:center;
  color:var(--azul);font-size:17px;font-weight:600;opacity:0}
#view-calendario .libre:hover::after{opacity:.75}

#view-calendario .junta{border-radius:7px;padding:6px 8px;cursor:pointer;position:relative;transition:.15s;
  text-align:left;border:0;width:100%;display:block;z-index:2}
#view-calendario .junta:hover{filter:brightness(1.07)}
#view-calendario .junta b{display:block;font-size:11.5px;font-weight:600;line-height:1.25;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
#view-calendario .junta .h{display:block;font-family:var(--mono);font-size:9.5px;opacity:.85;margin-top:1px}
#view-calendario .junta .tipo-tag{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;background:var(--sobre-id-b);border-radius:3px;
  padding:1px 5px;margin-top:4px}
#view-calendario .junta .asis{display:flex;gap:2px;margin-top:4px}
#view-calendario .junta .asis .av{width:15px;height:15px;font-size:7.5px;border:1.5px solid var(--sobre-id-c)}
#view-calendario .junta .asis .av.esperando{opacity:.5;border-style:dashed}
/* ---- los tres estados de una junta, y por qué se ven distintos ----
   · confirmada → sólida. Aparta la hora.
   · propuesta  → tentativa: rayada Y con borde discontinuo. APARTA LA HORA
     (decisión de Edna, 2.ª vuelta: ver libre() en cal.js), así que tiene que
     distinguirse de una confirmada a primera vista, no sólo por el rayado.
   · cancelada  → tachada y apagada. NO aparta la hora: el hueco se vuelve a
     ofrecer encima del bloque.
   El fondo de cada bloque es el color de identidad de quien la propuso y lo
   pone el JS en línea; lo que va encima son los velos --sobre-id-*, que no
   voltean porque el color de abajo tampoco voltea. */
#view-calendario .junta.propuesta{background-image:repeating-linear-gradient(135deg,transparent,transparent 5px,
  var(--sobre-id-a) 5px,var(--sobre-id-a) 10px);border:1.5px dashed var(--sobre-id-c)}
#view-calendario .junta.cancelada{opacity:.52;filter:saturate(.3)}
#view-calendario .junta.cancelada b,
#view-calendario .junta.cancelada .h{text-decoration:line-through}
/* una cancelada ya no es tentativa: deja de estar rayada */
#view-calendario .junta.cancelada.propuesta{background-image:none;border-style:solid}
#view-calendario .junta .marca-cancel{background:var(--sobre-id-b)}
#view-calendario .junta.sel{outline:2px solid var(--tinta);outline-offset:1px}

/* ---- panel ---- */
#view-calendario .panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:18px;position:sticky;top:14px}
#view-calendario .panel .vacio{color:var(--tx-suave);font-size:14px;text-align:center;padding:30px 10px}
#view-calendario .panel-tipo{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:999px}
#view-calendario .panel h3{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:11px 0 4px;line-height:1.2}
#view-calendario .panel .cuando{font-family:var(--mono);font-size:13px;color:var(--tx-suave)}
#view-calendario .campo{border-top:1px solid var(--borde);padding-top:12px;margin-top:12px}
#view-calendario .campo .et{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-suave);display:block;margin-bottom:4px}
#view-calendario .campo .va{font-size:14px;line-height:1.5}
#view-calendario .asistente{display:flex;align-items:center;gap:9px;padding:7px 0}
#view-calendario .asistente .nom{font-size:14px;font-weight:600;flex:1}
#view-calendario .estado{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
#view-calendario .estado.ok{background:var(--t-ok);color:var(--azul)}
#view-calendario .estado.esp{background:rgba(249,133,19,.16);color:#8A4500}
#view-calendario .estado.no{background:var(--t-rojo-m);color:var(--rojo)}
#view-calendario .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--borde)}

/* ---- una junta cancelada: en el panel y en el paso de cancelarla ----
   D2. El panel tiene que decir que está cancelada, quién la canceló y por
   qué, y NO ofrecer cancelarla otra vez (F5). */
#view-calendario .panel.con-cancelada{border-top-style:dashed}
#view-calendario .panel h3.tach,
#view-calendario .panel .cuando.tach{text-decoration:line-through;color:var(--tx-suave)}
#view-calendario .cancel-caja{margin-top:12px;background:var(--t-rojo);
  border:1px solid var(--t-rojo-bd);border-left:4px solid var(--rojo);border-radius:8px;
  padding:11px 13px;font-size:13px;line-height:1.45}
#view-calendario .cancel-caja b{display:block;font-size:14px;font-weight:700;color:var(--rojo)}
#view-calendario .cancel-caja .quien{display:block;font-size:12.5px;color:var(--tx-suave);margin-top:1px}
#view-calendario .cancel-caja .mot{display:block;margin-top:8px;color:var(--tx);
  overflow-wrap:anywhere}
#view-calendario .cancel-caja .mot .et{display:block;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-suave);margin-bottom:2px}
/* el recordatorio del paso de cancelar: es .tz-otra, la franja tibia que ya
   existe, con un botón que lleva al flujo de contrapropuesta */
#view-calendario .cancel-recordatorio{margin:0 0 16px}
#view-calendario .cancel-recordatorio b{display:block;margin-bottom:2px}
#view-calendario .cancel-recordatorio .btn{margin-top:10px}
/* el botón que SÍ destruye: se lee destructivo sin depender del hover, y sin
   fondo rojo sólido (en oscuro el rojo de la Console es claro y el texto
   blanco encima no se leería) */
#view-calendario .btn.peligro.firme{border-color:var(--rojo);color:var(--rojo);font-weight:700}
#view-calendario .btn.peligro.firme:hover{background:var(--t-rojo);border-color:var(--rojo);
  color:var(--rojo)}
/* el motivo, dentro de la franja que avisa de una cancelación */
#view-calendario .prop-fila .motivo{display:block;font-size:12.5px;color:var(--tx-suave);
  margin-top:2px;overflow-wrap:anywhere}

/* ---- modales ---- */
#view-calendario .fondo-modal{position:fixed;inset:0;background:rgba(17,17,68,.45);display:none;
  align-items:center;justify-content:center;padding:20px;z-index:50}
#view-calendario .fondo-modal.on{display:flex}
#view-calendario .modal{background:var(--panel);border-radius:14px;width:min(620px,100%);max-height:92vh;
  overflow-y:auto;box-shadow:0 24px 60px rgba(17,17,68,.3)}
#view-calendario .modal.ancho{width:min(760px,100%)}
#view-calendario .modal-cab{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--borde);
  position:sticky;top:0;background:var(--panel);z-index:2;border-radius:14px 14px 0 0}
#view-calendario .modal-cab h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.015em}
#view-calendario .cerrar{margin-left:auto;background:none;border:0;font-size:22px;cursor:pointer;
  color:var(--tx-suave);line-height:1;padding:0 4px}
#view-calendario .modal-cuerpo{padding:20px 22px}
#view-calendario .rej{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#view-calendario .ancho-col{grid-column:1/-1}
#view-calendario label.et,
#view-calendario .et-b{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-suave);display:block;margin-bottom:5px}
#view-calendario input,
#view-calendario select,
#view-calendario textarea{width:100%;font-family:var(--texto);font-size:14.5px;color:var(--tx);
  background:var(--papel);border:1px solid var(--borde);border-radius:8px;padding:10px 12px}
/* El desplegable del sistema traía su propia tipografía, su propio gris y su
   propia flecha. Con appearance:none vuelve a ser de la casa y la flecha se
   dibuja con dos degradados, sin imagen externa. */
#view-calendario select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;font-weight:600;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-suave) 50%),
                   linear-gradient(135deg,var(--tx-suave) 50%,transparent 50%);
  background-position:calc(100% - 18px) 54%,calc(100% - 13px) 54%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#view-calendario select:hover{border-color:var(--azul)}
#view-calendario select option{background:var(--panel);color:var(--tx);font-weight:500}

/* Desplegable de la casa. El panel del <select> lo dibuja el sistema
   operativo y no hay CSS que lo cambie; éste lo dibuja la página. */
#view-calendario .dd{position:relative}
#view-calendario .dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--papel);border:1px solid var(--borde);border-radius:8px;padding:10px 12px;
  font-family:var(--texto);font-size:14.5px;font-weight:600;color:var(--tx);text-align:left}
#view-calendario .dd-btn:hover{border-color:var(--azul)}
#view-calendario .dd-btn[aria-expanded="true"]{border-color:var(--azul);box-shadow:0 0 0 3px var(--foco)}
#view-calendario .dd-flecha{width:7px;height:7px;flex:none;border-right:2px solid var(--tx-suave);
  border-bottom:2px solid var(--tx-suave);transform:rotate(45deg) translate(-2px,-2px)}
#view-calendario .dd-panel{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;
  background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:5px;
  box-shadow:0 18px 44px rgba(17,17,68,.16);max-height:252px;overflow-y:auto}
#view-calendario .dd-op{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;
  padding:9px 11px;font-family:var(--texto);font-size:14px;font-weight:500;color:var(--tx)}
#view-calendario .dd-op:hover{background:var(--fondo)}
#view-calendario .dd-op.on{background:var(--azul);color:#fff;font-weight:600}
#view-calendario .dd-op .nota{display:block;font-size:11.5px;opacity:.72;font-weight:500}

/* En el calendario de equipo, un hueco sólo se dibuja si TODAS las personas
   que estás viendo lo tienen libre: por eso se marca distinto. */
#view-calendario .libre.para-todos:hover{border-color:var(--azul);background:var(--t-hover-f)}
#view-calendario .libre.para-todos::after{content:"+ junta";font-size:10px;font-weight:700;letter-spacing:.04em}
#view-calendario input[type="color"]{padding:3px;height:42px;cursor:pointer}
#view-calendario input[type="file"]{background:none;border:0;padding:0;font-size:13px}
#view-calendario input:focus,
#view-calendario select:focus,
#view-calendario textarea:focus{outline:0;border-color:var(--azul);
  box-shadow:0 0 0 3px var(--foco)}
#view-calendario .ayuda{font-size:12px;color:var(--tx-suave);margin-top:5px;line-height:1.45}
#view-calendario .quienes{display:flex;gap:8px;flex-wrap:wrap}
#view-calendario .quien{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borde);
  background:var(--papel);border-radius:999px;padding:5px 13px 5px 5px;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--tinta)}
#view-calendario .quien.on{background:var(--panel);border-color:var(--azul);box-shadow:0 1px 3px var(--sombra-sel)}
#view-calendario .quien.off{opacity:.6}

/* ---- huecos disponibles ---- */
#view-calendario .huecos{margin-top:6px}
/* Tira de días: se elige el día y abajo salen sólo sus horas. Antes bajaba
   una lista corrida de diez días y había que recorrerla entera. */
#view-calendario .tira-dias{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin}
#view-calendario .tira-dia{flex:none;min-width:74px;border:1px solid var(--borde);background:var(--panel);
  border-radius:11px;padding:8px 10px;cursor:pointer;text-align:center;transition:.16s;
  display:flex;flex-direction:column;gap:1px;color:var(--tx)}
#view-calendario .tira-dia:hover:not(:disabled){border-color:var(--azul)}
#view-calendario .tira-dia .dd{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-suave)}
#view-calendario .tira-dia .nn{font-size:19px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
#view-calendario .tira-dia .hh{font-size:10px;color:var(--tx-suave);line-height:1.2}
#view-calendario .tira-dia.on{background:var(--azul);border-color:var(--azul);color:#fff}
#view-calendario .tira-dia.on .dd,
#view-calendario .tira-dia.on .hh{color:rgba(255,255,255,.82)}
#view-calendario .tira-dia.sin{opacity:.42;cursor:not-allowed}
#view-calendario .hueco-dia{border:1px solid var(--borde);border-radius:9px;margin-bottom:9px;overflow:hidden}
#view-calendario .hueco-dia .cab{background:var(--papel);padding:8px 12px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px}
#view-calendario .hueco-dia .cab .cuenta{margin-left:auto;font-size:11.5px;color:var(--tx-suave);font-weight:500}
#view-calendario .hueco-lista{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}
#view-calendario .hueco{border:1px solid var(--borde);background:var(--panel);border-radius:7px;padding:7px 12px;
  font-family:var(--mono);font-size:12.5px;cursor:pointer;transition:.15s;color:var(--tinta)}
#view-calendario .hueco:hover{border-color:var(--azul);color:var(--azul)}
#view-calendario .hueco.on{background:var(--azul);border-color:var(--azul);color:#fff}
#view-calendario .sin-huecos{padding:16px;text-align:center;font-size:13.5px;color:var(--tx-suave);
  background:var(--papel);border-radius:9px;line-height:1.5}
#view-calendario .aviso{border-radius:8px;padding:11px 13px;margin-top:14px;font-size:13.5px;line-height:1.45;display:none}
#view-calendario .aviso.on{display:block}
#view-calendario .aviso.rojo{background:var(--t-rojo);border:1px solid var(--t-rojo-bd);color:#7E1B15}
#view-calendario .aviso.ambar{background:rgba(249,133,19,.1);border:1px solid rgba(249,133,19,.45);color:#6E3A00}
#view-calendario .modal-pie{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;
  border-top:1px solid var(--borde);background:var(--papel);border-radius:0 0 14px 14px;
  position:sticky;bottom:0}

/* ---- mi panel ---- */
#view-calendario .perfil-cab{display:flex;gap:18px;align-items:center;margin-bottom:20px}
#view-calendario .foto-caja{position:relative;flex:none}
#view-calendario .foto-caja .cambiar{position:absolute;inset:auto 0 -4px 0;background:var(--tinta);color:#fff;
  font-size:9.5px;font-weight:700;text-align:center;padding:2px 0;border-radius:0 0 999px 999px;
  letter-spacing:.04em;cursor:pointer}
/* la foto se pica para editarla: el botón sale cuando está seleccionada */
#view-calendario .foto-btn{border:0;background:none;padding:0;border-radius:50%;cursor:pointer;display:block}
#view-calendario .foto-btn:hover .av{box-shadow:0 0 0 3px var(--foco-fuerte)}
#view-calendario .foto-btn.sel .av{box-shadow:0 0 0 3px var(--naranja)}
#view-calendario .foto-btn:focus-visible{outline:2px solid var(--naranja);outline-offset:3px}
#view-calendario .foto-acc{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---- sugerencias ---- */
#view-calendario #btn-sug .punto{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;
  border-radius:999px;background:var(--naranja);color:#2A1500;font-size:10.5px;font-weight:700}
#view-calendario #btn-sug.con-pendientes{border-color:var(--naranja)}
/* #sug-codigo y #sug-pegar se fueron con el código para copiar y pegar:
   ya hay servidor y una sugerencia le llega sola a quien lleva la lista. */
#view-calendario #sug-nueva{width:100%;box-sizing:border-box;font-family:var(--texto);
  font-size:14px;padding:10px 12px;border:1px solid var(--borde);border-radius:8px;
  background:var(--papel);color:var(--tx);resize:vertical}
#view-calendario #sug-nueva:focus{outline:0;border-color:var(--azul);
  box-shadow:0 0 0 3px var(--foco)}
#view-calendario .sug-lista{display:flex;flex-direction:column;gap:9px}
#view-calendario .sug-fila{display:flex;gap:11px;background:var(--papel);border:1px solid var(--borde);
  border-left:4px solid var(--borde);border-radius:10px;padding:12px 14px}
#view-calendario .sug-fila.sug-nueva{border-left-color:var(--naranja);background:rgba(249,133,19,.07)}
#view-calendario .sug-fila.sug-proxima{border-left-color:var(--azul)}
#view-calendario .sug-fila.sug-atendida{border-left-color:var(--azul-claro)}
#view-calendario .sug-fila.sug-resuelta{border-left-color:var(--verde);opacity:.78}
#view-calendario .sug-cuerpo{flex:1;min-width:0}
#view-calendario .sug-cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px}
#view-calendario .sug-cab b{color:var(--tinta)}
#view-calendario .sug-fecha{font-family:var(--mono);font-size:10.5px;color:var(--tx-suave)}
#view-calendario .sug-estado{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;border:1px solid var(--borde);border-radius:999px;padding:2px 9px;
  color:var(--tx-suave);white-space:nowrap}
#view-calendario .sug-nueva .sug-estado{border-color:var(--naranja);color:#8A4500}
#view-calendario .sug-resuelta .sug-estado{border-color:var(--verde);color:var(--verde)}
#view-calendario .sug-txt{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--tx);
  white-space:pre-wrap;word-break:break-word}
#view-calendario .sug-acc{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
#view-calendario .sug-b{border:1px solid var(--borde);background:var(--panel);border-radius:999px;padding:3px 10px;
  font-family:var(--texto);font-size:11.5px;font-weight:600;color:var(--tx-suave);cursor:pointer}
#view-calendario .sug-b:hover{border-color:var(--azul);color:var(--azul)}
#view-calendario .sug-b.on{background:var(--azul);border-color:var(--azul);color:#fff}
#view-calendario .sug-link{border:0;background:none;padding:0;font-family:var(--texto);font-size:12.5px;
  font-weight:600;color:var(--azul);text-decoration:underline;cursor:pointer}
#view-calendario .aviso-sug .tit{color:#8A4500}
#view-calendario .jornada-fila{display:grid;grid-template-columns:34px 1fr 1fr;gap:9px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--borde)}
#view-calendario .jornada-fila:last-child{border-bottom:0}
#view-calendario .jornada-fila .d{font-size:12.5px;font-weight:700;color:var(--tinta)}
#view-calendario .jornada-fila.off{opacity:.42}
/* Una fila por día: interruptor, nombre con su "+ franja", y las franjas
   apiladas a la derecha. El <input type="time"> del navegador se fue: no
   dejaba escribir a medias y abría su propio reloj con otros colores. */
#view-calendario .jornada-fila{grid-template-columns:34px 1fr 1.5fr;align-items:start;padding:10px 0}
#view-calendario .jornada-dia{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
#view-calendario .franja-mas{border:1px dashed var(--borde);background:none;border-radius:999px;
  padding:3px 10px;font-size:11.5px;font-weight:600;color:var(--azul);cursor:pointer}
#view-calendario .franja-mas:hover{border-color:var(--azul);background:var(--t-hover)}
#view-calendario .franjas{display:flex;flex-direction:column;gap:7px}
#view-calendario .franja{display:flex;align-items:center;gap:7px}
#view-calendario .franja .a{font-size:12.5px;color:var(--tx-suave);flex:none}
#view-calendario .franja.vacia{font-size:13px;color:var(--tx-suave);font-style:normal}
#view-calendario .hsel{flex:1 1 0;min-width:0;padding:7px 26px 7px 10px;font-size:13.5px;font-weight:600;
  appearance:none;background:var(--papel);border:1px solid var(--borde);border-radius:8px;
  color:var(--tx);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-suave) 50%),
                   linear-gradient(135deg,var(--tx-suave) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#view-calendario .hsel:hover{border-color:var(--azul)}
#view-calendario .hsel:focus{outline:0;border-color:var(--azul);box-shadow:0 0 0 3px var(--foco)}
#view-calendario .franja-x{width:26px;height:26px;flex:none;border:1px solid var(--borde);background:var(--panel);
  border-radius:50%;color:var(--tx-suave);cursor:pointer;font-size:15px;line-height:1}
#view-calendario .franja-x:hover{border-color:var(--rojo);color:var(--rojo)}
#view-calendario .franja-x.hueca{border:0;background:none;pointer-events:none}
/* el desplegable de la casa, en versión chica, dentro de una franja */
#view-calendario .hdd{flex:1 1 0;min-width:0}
#view-calendario .hdd .dd-btn{padding:7px 10px;font-size:13.5px;gap:6px}
#view-calendario .hdd .dd-panel{max-height:216px}
/* sobre el fondo oscuro de la bienvenida */
#view-calendario .bv-jornada .dd-btn{background:rgba(244,241,236,.1);border-color:rgba(244,241,236,.22);
  color:var(--papel)}
#view-calendario .bv-jornada .dd-btn:hover,
#view-calendario .bv-jornada .dd-btn[aria-expanded="true"]{border-color:var(--azul-claro)}
#view-calendario .bv-jornada .dd-flecha{border-color:var(--azul-claro)}
#view-calendario .bv-jornada .franja .a{color:#A9B6D8}
#view-calendario .bv-jornada .franja-mas{color:var(--papel);border-color:rgba(244,241,236,.3)}
#view-calendario .bv-jornada .franja-x{background:rgba(244,241,236,.08);border-color:rgba(244,241,236,.22);color:var(--papel)}
#view-calendario .bv-jornada .franja .a,
#view-calendario .bv-jornada .franja.vacia{color:#A9B6D8}
#view-calendario .sw-dia{width:34px;height:20px;border-radius:999px;border:0;background:var(--piedra);
  position:relative;cursor:pointer;transition:.2s;padding:0}
#view-calendario .sw-dia::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:.2s}
#view-calendario .sw-dia.on{background:var(--azul)}
#view-calendario .sw-dia.on::after{left:16px}
#view-calendario .horas-caja{display:flex;align-items:center;gap:14px;background:var(--papel);
  border:1px solid var(--borde);border-radius:9px;padding:13px 15px;margin-top:6px}
#view-calendario .horas-caja .dato{font-size:26px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
#view-calendario .horas-caja .texto{font-size:12.5px;color:var(--tx-suave);line-height:1.4}
#view-calendario .barra-horas{height:7px;border-radius:999px;background:var(--piedra);overflow:hidden;margin-top:8px}
#view-calendario .barra-horas i{display:block;height:100%;border-radius:999px;background:var(--azul)}
#view-calendario .barra-horas i.lleno{background:var(--naranja)}
#view-calendario .bloqueo-fila{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--borde)}
#view-calendario .bloqueo-fila:last-of-type{border-bottom:0}
#view-calendario .bloqueo-fila .f{font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap}
#view-calendario .bloqueo-fila .m{flex:1;font-size:13.5px}
#view-calendario .bloqueo-fila .x{border:1px solid var(--borde);background:var(--panel);border-radius:7px;
  width:28px;height:28px;cursor:pointer;color:var(--tx-suave);line-height:1}
#view-calendario .bloqueo-fila .x:hover{border-color:var(--rojo);color:var(--rojo)}
#view-calendario .colores{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
#view-calendario .color-op{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0}
#view-calendario .color-op.on{border-color:var(--tinta);box-shadow:0 0 0 2px #fff inset}
/* Un color que ya es de alguien no se puede tomar: si dos personas comparten
   tono, los bloques de la rejilla dejan de decir de quién son. */
#view-calendario .color-op.tomado{opacity:.26;cursor:not-allowed;position:relative}
#view-calendario .color-op.tomado::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;
  margin-left:-1px;background:var(--tx);transform:rotate(45deg);border-radius:2px}

/* ---- modo personal / equipo ---- */
#view-calendario .modo{display:inline-flex;background:var(--papel);border:1px solid var(--borde);
  border-radius:999px;padding:3px;gap:2px}
#view-calendario .modo button{border:0;background:none;padding:7px 16px;border-radius:999px;font-size:13.5px;
  font-weight:600;color:var(--tinta);cursor:pointer;transition:.18s}
#view-calendario .modo button:hover{background:#fff;color:var(--azul)}
#view-calendario .modo button.on{background:var(--tinta);color:#fff}
#view-calendario .modo button.on:hover{background:var(--tinta);color:#fff}
/* La regla de #ver-cuenta se quitó: ese id no existe en el cuerpo de la
   maqueta (quedó de una versión en que el botón "Equipo" traía un contador).
   La línea de cal.js que lo buscaba también se fue. */

/* ---- resumen de mi semana ---- */
#view-calendario .de-quien{margin:0 0 12px;font-size:13px;font-weight:600;color:var(--azul)}
/* zona horaria */
#view-calendario .tz-aviso{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tx-suave);white-space:nowrap}
#view-calendario .tz-otra{margin-top:10px;background:rgba(249,133,19,.1);border:1px solid rgba(249,133,19,.4);
  border-radius:8px;padding:9px 12px;font-size:12.5px;line-height:1.45;color:#6E3A00}

/* ---- modo acomodar ---- */
#view-calendario .barra-acomodo{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  background:var(--tinta);color:var(--papel);border-radius:var(--r);padding:16px 20px;
  margin-bottom:14px}
body.acomodando #view-calendario .barra-acomodo{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  max-height:52vh;overflow:auto;box-shadow:0 10px 40px rgba(17,17,68,.45);margin:0}
body.acomodando #view-calendario .hoja{padding-bottom:280px}
#view-calendario .barra-acomodo b{display:block;font-size:14.5px;margin-bottom:3px}
#view-calendario .barra-acomodo span{display:block;font-size:12.5px;color:#A9B6D8;max-width:62ch;line-height:1.5}
#view-calendario .barra-acomodo .nota{color:var(--naranja);font-weight:600;margin-top:6px}
#view-calendario .barra-acomodo pre{margin-top:10px;background:rgba(0,0,0,.28);border-radius:8px;padding:10px 12px;
  font-family:var(--mono);font-size:11px;color:#C9D4F0;max-height:150px;overflow:auto;
  white-space:pre-wrap;word-break:break-all}
#view-calendario .barra-acomodo .acc{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-self:flex-start}
#view-calendario .barra-acomodo .agregar{flex-basis:100%;display:flex;gap:6px;flex-wrap:wrap;
  border-top:1px solid rgba(244,241,236,.18);padding-top:11px;margin-top:2px}
#view-calendario .barra-acomodo .agregar .btn{font-size:11.5px;padding:5px 10px}

/* ---- piezas agregadas desde el modo acomodar ---- */
#view-calendario .pieza-nueva{min-width:0}
#view-calendario .asa-acomodo.mia{background:var(--naranja);color:#2A1500}
#view-calendario .asa-acomodo.mia .ojo,
#view-calendario .asa-acomodo.mia .ir,
#view-calendario .asa-acomodo.mia .tx,
#view-calendario .asa-acomodo.mia .im,
#view-calendario .asa-acomodo.mia .bor{border-color:rgba(42,21,0,.35);color:#2A1500}
#view-calendario .asa-acomodo.mia .med{background:rgba(42,21,0,.14)}
#view-calendario .asa-acomodo .tx,
#view-calendario .asa-acomodo .im,
#view-calendario .asa-acomodo .bor{border:1px solid rgba(255,255,255,.4);
  background:none;color:#fff;border-radius:999px;padding:2px 9px;font-size:10.5px;
  font-weight:700;cursor:pointer;flex:none;font-family:inherit}
#view-calendario .asa-acomodo .bor:hover{background:#B3261E;border-color:#B3261E;color:#fff}
#view-calendario .asa-acomodo .tx:hover,
#view-calendario .asa-acomodo .im:hover{background:rgba(255,255,255,.2)}
#view-calendario .editando{outline:2px solid var(--naranja) !important;outline-offset:2px;
  background:rgba(249,133,19,.08);border-radius:6px}

#view-calendario .celda-nueva{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);
  padding:16px 18px}
#view-calendario .cn-tit{font-size:14.5px;font-weight:700;color:var(--tinta);margin-bottom:5px}
#view-calendario .cn-tx{margin:0;font-size:13.5px;line-height:1.5;color:var(--tx-suave)}
#view-calendario .cn-h{margin:0;font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--tinta)}
#view-calendario .cn-fig{height:120px;background:var(--naranja);border-radius:10px}
#view-calendario .cn-fig.redonda{border-radius:50%;width:120px}
#view-calendario .cn-linea{height:1px;background:var(--borde)}
#view-calendario .cn-img{display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid var(--borde);background:var(--papel);min-height:40px}
#view-calendario .barra-acomodo .btn{background:rgba(244,241,236,.1);border-color:rgba(244,241,236,.28);color:var(--papel)}
#view-calendario .barra-acomodo .btn.pri{background:var(--naranja);border-color:var(--naranja);color:#2A1500}

body.acomodando #view-calendario .acomodo-pieza{position:relative;outline:2px dashed var(--azul-claro);
  outline-offset:3px;border-radius:var(--r);min-height:54px}
/* OJO: aquí NO va pointer-events:none sobre todo. El arrastre del tamaño
   escucha en la ventana; apagar los eventos de la página dejaba el modo
   trabado cuando el puntero se soltaba fuera del asa. */
body.redimensionando #view-calendario{cursor:nwse-resize;user-select:none}
#view-calendario .asa-tam{position:absolute;right:0;bottom:0;width:24px;height:24px;display:grid;
  place-items:center;background:var(--naranja);color:#2A1500;border-radius:7px 0 var(--r) 0;
  cursor:nwse-resize;z-index:4;pointer-events:auto}
#view-calendario .asa-acomodo .med{font-family:var(--mono);font-size:10.5px;font-weight:600;
  background:rgba(255,255,255,.2);border-radius:999px;padding:2px 7px;flex:none}
#view-calendario .asa-acomodo .ir{border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.16);
  color:#fff;border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700;
  cursor:pointer;flex:none}
#view-calendario .asa-acomodo .ir:hover{background:var(--naranja);border-color:var(--naranja);color:#2A1500}

/* el nivel en el que estás, y la línea que dice dónde va a caer la pieza */
body.acomodando #view-calendario .acomodo-foco{outline:2px solid var(--naranja);outline-offset:6px;
  border-radius:var(--r)}
body.acomodando #view-calendario .acomodo-pieza.antes::before,
body.acomodando #view-calendario .acomodo-pieza.despues::after{content:'';position:absolute;z-index:6;
  background:var(--naranja);border-radius:3px}
body.acomodando #view-calendario .acomodo-pieza.antes::before{left:-5px;right:-5px;top:-5px;height:4px}
body.acomodando #view-calendario .acomodo-pieza.despues::after{left:-5px;right:-5px;bottom:-5px;height:4px}
body.acomodando #view-calendario .acomodo-pieza.lado.antes::before{left:-5px;right:auto;top:-5px;
  bottom:-5px;width:4px;height:auto}
body.acomodando #view-calendario .acomodo-pieza.lado.despues::after{right:-5px;left:auto;top:-5px;
  bottom:-5px;width:4px;height:auto}
#view-calendario .con-ancho{flex:none}

/* la ruta de niveles dentro de la barra */
#view-calendario .barra-acomodo .ruta{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:2px 0 7px;
  font-size:12px;color:#A9B6D8}
#view-calendario .barra-acomodo .ruta .paso{border:0;background:rgba(244,241,236,.12);color:var(--papel);
  border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;cursor:pointer;
  font-family:inherit}
#view-calendario .barra-acomodo .ruta .paso:hover{background:rgba(244,241,236,.26)}
#view-calendario .barra-acomodo .ruta .paso.aqui{background:var(--naranja);color:#2A1500;cursor:default}
body.acomodando #view-calendario .acomodo-pieza.encima{outline-color:var(--naranja);outline-style:solid}
body.acomodando #view-calendario .acomodo-pieza.en-vuelo{opacity:.45}
#view-calendario .asa-acomodo{position:relative;z-index:3;display:flex;align-items:center;gap:10px;cursor:grab;
  background:var(--azul);color:#fff;border-radius:8px;padding:5px 10px;margin-bottom:8px;
  font-size:12px;font-weight:600;user-select:none}
#view-calendario .asa-acomodo:active{cursor:grabbing}
#view-calendario .asa-acomodo .ag{font-size:14px;letter-spacing:-2px;opacity:.8}
#view-calendario .asa-acomodo .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-calendario .asa-acomodo .ojo{border:1px solid rgba(255,255,255,.4);background:none;color:#fff;
  border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700;cursor:pointer}
#view-calendario .asa-acomodo .ojo:hover{background:rgba(255,255,255,.18)}
/* escondido de verdad fuera del modo acomodar; en el modo se ve apagado */
body:not(.acomodando) #view-calendario .acomodo-oculto{display:none}
body.acomodando #view-calendario .acomodo-oculto{opacity:.45}
/* dentro de una celda-contenedor que coloca en fila (los controles, por
   ejemplo) el asa no puede ir en el flujo: deformaría la fila. Ahí va
   encima, como pestaña, y el contenido no se mueve. */
#view-calendario .asa-acomodo.mini{position:absolute;top:-11px;left:-2px;margin:0;padding:3px 8px;
  font-size:11px;gap:7px;max-width:calc(100% + 4px);z-index:5}
#view-calendario .asa-acomodo.mini .ojo{padding:1px 7px;font-size:10px}
#view-calendario .mi-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:12px;
  margin-bottom:14px}
/* Más aire y un icono por celda: eran tres cajas chicas con un número suelto
   y se leían como un pie de página, no como el resumen de tu semana. */
#view-calendario .mi-caja{display:flex;align-items:flex-start;gap:14px;min-height:104px;padding:18px 20px}
#view-calendario .mi-ico{flex:none;width:42px;height:42px;border-radius:12px;background:var(--t-ico);
  color:var(--azul);display:grid;place-items:center}
#view-calendario .mi-ico svg{width:21px;height:21px}
#view-calendario .mi-caja.alerta .mi-ico{background:rgba(249,133,19,.14);color:var(--naranja)}
#view-calendario .mi-dato{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
#view-calendario .mi-caja{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r)}
#view-calendario .mi-caja .n{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--azul)}
#view-calendario .mi-caja .t{font-size:12.5px;color:var(--tx-suave);line-height:1.35}
#view-calendario .mi-caja .t b{display:block;color:var(--tinta);font-size:13.5px;font-weight:600}
#view-calendario .mi-caja.alerta .n{color:var(--naranja)}
#view-calendario .mi-caja .barra-horas{margin-top:6px;width:100%}

/* ---- lista para escoger calendarios ---- */
#view-calendario .ver-lista{display:flex;flex-direction:column;gap:2px}
#view-calendario .ver-fila{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;
  cursor:pointer;border:1px solid transparent;background:none;width:100%;text-align:left;transition:.15s}
#view-calendario .ver-fila:hover{background:var(--papel)}
#view-calendario .ver-fila .nom{flex:1;font-size:15px;font-weight:600}
#view-calendario .ver-fila .sub{font-size:12px;color:var(--tx-suave);font-weight:400;display:block}
#view-calendario .marca-v{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--borde);flex:none;
  display:grid;place-items:center;color:#fff;font-size:13px;line-height:1}
#view-calendario .ver-fila.on .marca-v{background:var(--azul);border-color:var(--azul)}
#view-calendario .ver-fila.on{background:var(--papel);border-color:var(--borde)}

/* ---- contrapropuesta ---- */
#view-calendario .contra-cab{background:var(--papel);border:1px solid var(--borde);border-radius:9px;
  padding:13px 15px;margin-bottom:16px;font-size:14px;line-height:1.5}
#view-calendario .contra-cab b{display:block;font-size:15px;margin-bottom:2px}
#view-calendario .contra-cab .tach{text-decoration:line-through;color:var(--tx-suave)}

/* ---- leyenda ---- */
#view-calendario .leyenda{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:14px;padding:12px 16px;
  background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);font-size:12.5px;
  color:var(--tx-suave)}
#view-calendario .leyenda .it{display:inline-flex;align-items:center;gap:7px;color:var(--tinta);font-weight:500}
#view-calendario .leyenda .sw{width:12px;height:12px;border-radius:4px}
/* Las reglas .spec* y .pie-sello se quitaron: estilaban la ficha técnica
   que la maqueta llevaba al pie en versiones viejas y que no existe en el
   cuerpo portado. */

@media (max-width:1040px){
  #view-calendario .tablero{grid-template-columns:minmax(0,1fr)}
  #view-calendario .zona-rejilla{grid-template-columns:minmax(0,1fr)}
  body #view-calendario .zona-rejilla > *{grid-column:1 / -1}
  #view-calendario .con-alto{height:auto}
  #view-calendario .con-ancho{width:auto !important}
  #view-calendario .panel{position:static}
  #view-calendario .marco-cal{overflow-x:auto}
  #view-calendario .fila{min-width:760px}
}
@media (max-width:620px){
  #view-calendario .rej{grid-template-columns:minmax(0,1fr)}
  #view-calendario .gente{margin-left:0;width:100%}
  #view-calendario .prop-fila .acc{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){#view-calendario *{transition:none!important}}

/* ---- franja apartada: ni junta ni hueco ---- */
#view-calendario .apartado{position:absolute;inset:3px;border-radius:7px;display:grid;place-items:center;
  padding:2px;text-align:center;pointer-events:none;
  background:repeating-linear-gradient(135deg,var(--t-apartado-a),var(--t-apartado-a) 5px,
    var(--t-apartado-b) 5px,var(--t-apartado-b) 10px);
  border:1px solid var(--t-apartado-bd)}
#view-calendario .apartado span{font-size:9.5px;font-weight:600;color:var(--tinta);opacity:.72;line-height:1.15;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---- en la contrapropuesta, los huecos que además le sirven al grupo ---- */
#view-calendario .hueco.pleno{border-color:var(--azul-claro);box-shadow:inset 0 -2px 0 var(--naranja)}
#view-calendario .hueco.pleno.on{box-shadow:inset 0 -2px 0 var(--naranja)}

/* ---- dos caminos para una hora libre ---- */
#view-calendario .opc-lista{display:grid;gap:10px}
#view-calendario .opc{display:block;width:100%;text-align:left;border:1px solid var(--borde);
  background:var(--panel);border-radius:var(--r);padding:14px 16px;cursor:pointer;
  transition:border-color .15s,background .15s}
#view-calendario .opc:hover{border-color:var(--azul);background:var(--t-tinte)}
#view-calendario .opc b{display:block;font-size:15px;font-weight:600;margin-bottom:3px;color:var(--tinta)}
#view-calendario .opc span{display:block;font-size:13px;color:var(--tx-suave);line-height:1.45}
#view-calendario .bloqueo-fila.franja .f{color:var(--azul)}

/* ---- las barras de desplazamiento también son de la casa ---- */
#view-calendario *{scrollbar-width:thin;scrollbar-color:var(--azul-claro) transparent}
#view-calendario ::-webkit-scrollbar{width:11px;height:11px}
#view-calendario ::-webkit-scrollbar-track{background:transparent}
#view-calendario ::-webkit-scrollbar-thumb{background:var(--azul-claro);border-radius:999px;
  border:3px solid var(--fondo);background-clip:padding-box}
#view-calendario ::-webkit-scrollbar-thumb:hover{background:var(--azul);border-color:var(--fondo);
  background-clip:padding-box}
#view-calendario ::-webkit-scrollbar-corner{background:transparent}
#view-calendario .modal::-webkit-scrollbar-thumb{border-color:var(--panel)}

/* ---- portada de bienvenida y alta de la primera vez ---- */
#view-calendario .bienvenida{position:fixed;inset:0;z-index:90;background:var(--tinta);color:var(--papel);
  overflow-y:auto;display:grid;place-items:center;padding:40px 24px}
#view-calendario .bv-centro{width:100%;max-width:560px;text-align:center;display:flex;flex-direction:column;
  align-items:center}
/* Un solo logo, el oficial de la Console (#rl-logo-neg, marfil sobre
   marino). La maqueta traía además una versión apilada para pantalla
   angosta; en lugar de copiar sus trazos al sprite de index.html, el
   mismo logo se achica — misma proporción 2:1, mismas medidas que ya
   usaba la versión apilada. */
#view-calendario .bv-logo{width:300px;height:150px;flex:none;margin-bottom:10px}
#view-calendario .bv-paso{width:100%;display:flex;flex-direction:column;align-items:center}
/* .bv-quienes y .bv-quien-op se quitaron con la pantalla de "¿quién
   eres?": la identidad ya no se escoge, la manda la sesión. */
#view-calendario .bv-paso[hidden]{display:none}
#view-calendario .bienvenida[hidden]{display:none}
#view-calendario .bv-et{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--naranja);margin-bottom:12px}
#view-calendario .bv-hola{font-size:50px;line-height:1.05;font-weight:700;letter-spacing:-.03em;margin:0 0 14px}
#view-calendario .bv-tit{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
#view-calendario .bv-linea{font-size:16px;line-height:1.55;color:var(--azul-claro);margin:0 0 26px;max-width:46ch}
#view-calendario .bv-cta{font-size:16px;padding:13px 34px}
/* La salida de la capa. La dirección de diseño del CMO (sección 6, "Escape
   controlado") la pide como "un enlace de texto chico, no un botón": de ahí
   que sea un <button> sin caja, subrayado y en Aster. Aquí decía que el alta
   no se podía saltar; se podía y debía, lo que no se marca es el pendiente.
   Aster y Marfil no voltean en oscuro porque la capa sigue siendo Marino. */
#view-calendario .bv-salir{margin-top:2px;border:0;background:none;padding:6px 10px;
  font-family:var(--texto);font-size:13px;font-weight:500;color:var(--azul-claro);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#view-calendario .bv-salir:hover{color:var(--luster)}
#view-calendario .bv-foto{margin:0 0 26px}
#view-calendario .bv-foto .cambiar{background:var(--naranja);color:#2A1500}
/* el editor de jornada es el mismo de Mi panel, sobre fondo oscuro */
#view-calendario .bv-jornada{width:100%;text-align:left;background:rgba(244,241,236,.06);
  border:1px solid rgba(244,241,236,.16);border-radius:var(--r);padding:6px 16px;margin-bottom:26px}
#view-calendario .bv-jornada .jornada-fila{border-bottom-color:rgba(244,241,236,.14)}
#view-calendario .bv-jornada .jornada-fila .d{color:var(--papel)}

#view-calendario .bv-check{width:72px;height:72px;border-radius:50%;background:var(--naranja);color:#2A1500;
  display:grid;place-items:center;margin-bottom:20px}
#view-calendario .bv-check svg{width:36px;height:36px}
@media (max-width:620px){
  #view-calendario .bv-logo{width:230px;height:115px}
  #view-calendario .bv-hola{font-size:34px}
  #view-calendario .bv-tit{font-size:21px}
}
/* el aviso de alta pendiente es el componente de propuestas, otro texto */
#view-calendario .falta-alta .tit{color:#8A4500}
/* =====================================================================
   MODO OSCURO
   La maqueta es sólo clara; la Console tiene oscuro automático y además un
   interruptor de tema. Si este archivo no dijera nada, el calendario
   quedaría como una isla blanca dentro de una app oscura. Se repiten la
   MISMA condición de medios y el MISMO [data-theme] que usa app.css
   (líneas 18-34) para que el interruptor también mande aquí: el bloque de
   medios lleva :root:not([data-theme="light"]) para que elegir "claro" a
   mano gane sobre el sistema, y el bloque [data-theme="dark"] para que
   elegir "oscuro" a mano gane sobre un sistema en claro.
   2.ª VUELTA: eso que aquí decía —que los rayados (día cerrado, día inhábil,
   franja apartada, junta propuesta) estaban escritos como rgba() literales
   dentro de sus degradados y que ningún token los alcanzaba— ya no es cierto.
   QA los listó con su línea y Edna lo mandó arreglar (D5): ahora pasan por los
   tokens --t-* , --foco* y --sombra* que se declaran arriba, y aquí abajo se
   voltean. Lo que SIGUE literal a propósito está anotado ahí mismo: los
   colores de identidad de persona, el naranja de acción, los velos blancos
   sobre un color de persona y el marfil que es texto sobre Marino.
   ===================================================================== */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) #view-calendario{
  /* Marino dejó de ser superficie y pasó a ser tinta: en oscuro la tinta
     es clara. Las cuatro superficies que SIGUEN siendo marino se arreglan
     abajo, una por una. */
  --tinta:var(--text-1);
  /* Real a #223382 sobre un fondo oscuro no se lee. Es el mismo realce
     que app.css le aplica al Real en oscuro (ver --edna-h en su bloque
     oscuro): sirve de superficie con texto marfil y de tinta sobre
     superficie oscura. */
  --azul:#3D5FA8;
  /* Marfil y Piedra eran las superficies secundarias (campos, pestañas,
     pies de modal, pastillas): en oscuro son las de la Console. */
  --papel:var(--surface2);
  --piedra:var(--surface2);
  --tx-suave:var(--text-3);
  --rojo:var(--err-c);
  /* Los tintes y rayados de la rejilla, volteados (QA / D5).
     Un velo de Real al 4-9% sobre papel se ve; sobre una superficie oscura
     desaparece, así que el velo pasa a ser CLARO (Aster) sobre lo oscuro. Y
     las rayas de Piedra al 45%, que en claro apenas se insinúan, en oscuro
     son casi blancas sobre una celda oscura: bajan a un marfil muy tenue.
     Los anillos de foco siguen siendo el mismo gesto, en Aster: el borde del
     campo ya se pone en --azul, que en oscuro es el Real realzado. */
  --t-hoy:rgba(155,172,216,.1);
  --t-raya:rgba(234,232,240,.1);
  --t-inhabil-a:rgba(255,107,107,.08);
  --t-inhabil-b:rgba(255,107,107,.18);
  --t-apartado-a:rgba(234,232,240,.06);
  --t-apartado-b:rgba(234,232,240,.13);
  --t-apartado-bd:rgba(234,232,240,.22);
  --t-ok:rgba(155,172,216,.2);
  --t-tinte:rgba(155,172,216,.06);
  --t-hover:rgba(155,172,216,.1);
  --t-ico:rgba(155,172,216,.14);
  --t-hover-f:rgba(155,172,216,.17);
  --t-rojo:rgba(255,107,107,.1);
  --t-rojo-m:rgba(255,107,107,.16);
  --t-rojo-bd:rgba(255,107,107,.38);
  --foco:rgba(155,172,216,.3);
  --foco-fuerte:rgba(155,172,216,.45);
  /* una sombra sobre fondo oscuro sólo se ve si es negra, no azul */
  --sombra-sel:rgba(0,0,0,.5);
  --sombra-on:rgba(0,0,0,.6);
  /* el verde de "resuelta" es el de la Console en oscuro */
  --verde:var(--ok-c);
  /* --tx, --fondo, --panel y --borde no hacen falta aquí: ya están
     escritos como var(--text-1)/var(--bg)/var(--surface)/var(--border),
     que la Console misma voltea.
     --naranja y --azul-claro NO cambian: naranja es la acción y los
     azules claros son identidad. */
}
/* Las cuatro superficies marino que siguen siendo marino en oscuro. */
:root:not([data-theme="light"]) #view-calendario .bienvenida,
:root:not([data-theme="light"]) #view-calendario .barra-acomodo{background:var(--depths)}
:root:not([data-theme="light"]) #view-calendario .foto-caja .cambiar,
:root:not([data-theme="light"]) #view-calendario .modo button.on,
:root:not([data-theme="light"]) #view-calendario .modo button.on:hover{background:var(--depths)}
/* Marfil que es TEXTO sobre marino o sobre el azul del encabezado de la
   rejilla: no puede seguir a --papel ahora que --papel es superficie
   oscura, o quedaría texto oscuro sobre fondo oscuro. */
:root:not([data-theme="light"]) #view-calendario .bienvenida,
:root:not([data-theme="light"]) #view-calendario .barra-acomodo,
:root:not([data-theme="light"]) #view-calendario .barra-acomodo .btn,
:root:not([data-theme="light"]) #view-calendario .barra-acomodo .ruta .paso,
:root:not([data-theme="light"]) #view-calendario .fila.cabeza .dia-cab .n,
:root:not([data-theme="light"]) #view-calendario .fila.cabeza .dia-cab.hoy .d,
:root:not([data-theme="light"]) #view-calendario .bv-jornada .dd-btn,
:root:not([data-theme="light"]) #view-calendario .bv-jornada .franja-mas,
:root:not([data-theme="light"]) #view-calendario .bv-jornada .franja-x,
:root:not([data-theme="light"]) #view-calendario .bv-jornada .jornada-fila .d{color:var(--luster)}
/* Los hover que la maqueta resolvía con blanco puro: en oscuro el blanco
   es un flash dentro de una app oscura, así que van a la superficie de la
   Console. El color de texto de cada uno no se toca. */
:root:not([data-theme="light"]) #view-calendario .btn:hover,
:root:not([data-theme="light"]) #view-calendario .vistas button:hover,
:root:not([data-theme="light"]) #view-calendario .flecha:hover,
:root:not([data-theme="light"]) #view-calendario .ficha-p:hover,
:root:not([data-theme="light"]) #view-calendario .mes-mas:hover,
:root:not([data-theme="light"]) #view-calendario .modo button:hover{background:var(--surface)}
/* Los avisos tibios (propuestas, sugerencias nuevas, alta pendiente, zona
   horaria, aviso ámbar) llevaban cafés oscuros escritos a mano sobre un
   tinte naranja claro. El tinte sigue; el texto pasa a los tonos de aviso
   que la Console ya usa en oscuro. */
:root:not([data-theme="light"]) #view-calendario .propuestas .tit,
:root:not([data-theme="light"]) #view-calendario .propuestas .sub,
:root:not([data-theme="light"]) #view-calendario .aviso-sug .tit,
:root:not([data-theme="light"]) #view-calendario .falta-alta .tit,
:root:not([data-theme="light"]) #view-calendario .estado.esp,
:root:not([data-theme="light"]) #view-calendario .sug-nueva .sug-estado,
:root:not([data-theme="light"]) #view-calendario .tz-otra,
:root:not([data-theme="light"]) #view-calendario .aviso.ambar{color:var(--warn-c)}
:root:not([data-theme="light"]) #view-calendario .aviso.rojo,
:root:not([data-theme="light"]) #view-calendario .celda.inhabil::after{color:var(--err-c)}

}

:root[data-theme="dark"] #view-calendario{
  /* Marino dejó de ser superficie y pasó a ser tinta: en oscuro la tinta
     es clara. Las cuatro superficies que SIGUEN siendo marino se arreglan
     abajo, una por una. */
  --tinta:var(--text-1);
  /* Real a #223382 sobre un fondo oscuro no se lee. Es el mismo realce
     que app.css le aplica al Real en oscuro (ver --edna-h en su bloque
     oscuro): sirve de superficie con texto marfil y de tinta sobre
     superficie oscura. */
  --azul:#3D5FA8;
  /* Marfil y Piedra eran las superficies secundarias (campos, pestañas,
     pies de modal, pastillas): en oscuro son las de la Console. */
  --papel:var(--surface2);
  --piedra:var(--surface2);
  --tx-suave:var(--text-3);
  --rojo:var(--err-c);
  /* Los tintes y rayados de la rejilla, volteados (QA / D5).
     Un velo de Real al 4-9% sobre papel se ve; sobre una superficie oscura
     desaparece, así que el velo pasa a ser CLARO (Aster) sobre lo oscuro. Y
     las rayas de Piedra al 45%, que en claro apenas se insinúan, en oscuro
     son casi blancas sobre una celda oscura: bajan a un marfil muy tenue.
     Los anillos de foco siguen siendo el mismo gesto, en Aster: el borde del
     campo ya se pone en --azul, que en oscuro es el Real realzado. */
  --t-hoy:rgba(155,172,216,.1);
  --t-raya:rgba(234,232,240,.1);
  --t-inhabil-a:rgba(255,107,107,.08);
  --t-inhabil-b:rgba(255,107,107,.18);
  --t-apartado-a:rgba(234,232,240,.06);
  --t-apartado-b:rgba(234,232,240,.13);
  --t-apartado-bd:rgba(234,232,240,.22);
  --t-ok:rgba(155,172,216,.2);
  --t-tinte:rgba(155,172,216,.06);
  --t-hover:rgba(155,172,216,.1);
  --t-ico:rgba(155,172,216,.14);
  --t-hover-f:rgba(155,172,216,.17);
  --t-rojo:rgba(255,107,107,.1);
  --t-rojo-m:rgba(255,107,107,.16);
  --t-rojo-bd:rgba(255,107,107,.38);
  --foco:rgba(155,172,216,.3);
  --foco-fuerte:rgba(155,172,216,.45);
  /* una sombra sobre fondo oscuro sólo se ve si es negra, no azul */
  --sombra-sel:rgba(0,0,0,.5);
  --sombra-on:rgba(0,0,0,.6);
  /* el verde de "resuelta" es el de la Console en oscuro */
  --verde:var(--ok-c);
  /* --tx, --fondo, --panel y --borde no hacen falta aquí: ya están
     escritos como var(--text-1)/var(--bg)/var(--surface)/var(--border),
     que la Console misma voltea.
     --naranja y --azul-claro NO cambian: naranja es la acción y los
     azules claros son identidad. */
}
/* Las cuatro superficies marino que siguen siendo marino en oscuro. */
:root[data-theme="dark"] #view-calendario .bienvenida,
:root[data-theme="dark"] #view-calendario .barra-acomodo{background:var(--depths)}
:root[data-theme="dark"] #view-calendario .foto-caja .cambiar,
:root[data-theme="dark"] #view-calendario .modo button.on,
:root[data-theme="dark"] #view-calendario .modo button.on:hover{background:var(--depths)}
/* Marfil que es TEXTO sobre marino o sobre el azul del encabezado de la
   rejilla: no puede seguir a --papel ahora que --papel es superficie
   oscura, o quedaría texto oscuro sobre fondo oscuro. */
:root[data-theme="dark"] #view-calendario .bienvenida,
:root[data-theme="dark"] #view-calendario .barra-acomodo,
:root[data-theme="dark"] #view-calendario .barra-acomodo .btn,
:root[data-theme="dark"] #view-calendario .barra-acomodo .ruta .paso,
:root[data-theme="dark"] #view-calendario .fila.cabeza .dia-cab .n,
:root[data-theme="dark"] #view-calendario .fila.cabeza .dia-cab.hoy .d,
:root[data-theme="dark"] #view-calendario .bv-jornada .dd-btn,
:root[data-theme="dark"] #view-calendario .bv-jornada .franja-mas,
:root[data-theme="dark"] #view-calendario .bv-jornada .franja-x,
:root[data-theme="dark"] #view-calendario .bv-jornada .jornada-fila .d{color:var(--luster)}
/* Los hover que la maqueta resolvía con blanco puro: en oscuro el blanco
   es un flash dentro de una app oscura, así que van a la superficie de la
   Console. El color de texto de cada uno no se toca. */
:root[data-theme="dark"] #view-calendario .btn:hover,
:root[data-theme="dark"] #view-calendario .vistas button:hover,
:root[data-theme="dark"] #view-calendario .flecha:hover,
:root[data-theme="dark"] #view-calendario .ficha-p:hover,
:root[data-theme="dark"] #view-calendario .mes-mas:hover,
:root[data-theme="dark"] #view-calendario .modo button:hover{background:var(--surface)}
/* Los avisos tibios (propuestas, sugerencias nuevas, alta pendiente, zona
   horaria, aviso ámbar) llevaban cafés oscuros escritos a mano sobre un
   tinte naranja claro. El tinte sigue; el texto pasa a los tonos de aviso
   que la Console ya usa en oscuro. */
:root[data-theme="dark"] #view-calendario .propuestas .tit,
:root[data-theme="dark"] #view-calendario .propuestas .sub,
:root[data-theme="dark"] #view-calendario .aviso-sug .tit,
:root[data-theme="dark"] #view-calendario .falta-alta .tit,
:root[data-theme="dark"] #view-calendario .estado.esp,
:root[data-theme="dark"] #view-calendario .sug-nueva .sug-estado,
:root[data-theme="dark"] #view-calendario .tz-otra,
:root[data-theme="dark"] #view-calendario .aviso.ambar{color:var(--warn-c)}
:root[data-theme="dark"] #view-calendario .aviso.rojo,
:root[data-theme="dark"] #view-calendario .celda.inhabil::after{color:var(--err-c)}