/**
 * Janua — El panel de Dirección: la piel
 * ======================================
 * La del quiosco de escritorio (apps/quiosco-pc/src/piel.css), copiada tal
 * cual en lo común para que los dos se vean igual, más lo propio del panel:
 * pestañas, tabla de la plantilla y tarjetas de aprobación. Aquí no hay
 * ventana que arrastrar ni teclado de PIN.
 */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; src: url(fuentes/IBMPlexSans_400Regular.ttf); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; src: url(fuentes/IBMPlexSans_600SemiBold.ttf); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; src: url(fuentes/IBMPlexSans_700Bold.ttf); }
:root {
  --fondo: #f3f5f7;
  --superficie: #ffffff;
  --fondo-suave: #eceff2;
  --texto: #131920;
  --texto-suave: #6b747e;
  --texto-tenue: #aab2bb;
  --linea: #dfe3e8;
  --linea-fuerte: #c8cdd4;
  --marca: #123a5c;
  --marca-oscura: #0b2340;
  --marca-suave: #e9eff5;
  --entrar: #1e6b45;
  --salir: #a32b25;
  --aviso: #96601a;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}

/* ── La barra de arriba ───────────────────────────────────── */
/* La misma que la de la tablet, y además es la barra DE LA VENTANA: los
   botones del sistema viven dentro de ella y de ella se tira para mover la
   aplicación. Eso es lo que hace que sea un programa de escritorio y no una
   página web dentro de un marco.
   Todo lo que se pulsa tiene que decir `no-drag`: si no, arrastra la ventana
   en vez de responder. */
.barra {
  height: 42px; display: flex; align-items: center; gap: 0;
  padding: 0 18px; background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}


/* Hueco para los botones del sistema. En Mac están a la izquierda, encima del
   contenido; en Windows los pinta el sistema a la derecha. */
/* En Mac, los tres botones del sistema acaban sobre los 72 px. Con 80 el logo
   quedaba pegado a ellos; 100 le da aire sin desplazarlo a media barra. */


.barra .separador { width: 1px; height: 16px; background: var(--linea); margin: 0 11px; }
/* Gris y de peso normal: dice qué es esto, no es un título. */
.barra .sitio { color: var(--texto-suave); font-size: 13.5px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La empresa a la derecha: círculo navy con las iniciales y el nombre al
   lado. */
.barra .empresa { display: flex; align-items: center; gap: 9px; }
.barra .inicial { width: 22px; height: 22px; border-radius: 999px; flex: 0 0 22px;
                  background: var(--marca); color: #fff; font-size: 10.5px;
                  font-weight: 700; letter-spacing: .3px;
                  display: grid; place-items: center; }
.barra .nombre { color: var(--marca-oscura); font-size: 12.5px; font-weight: 600;
                 white-space: nowrap; max-width: 230px; overflow: hidden;
                 text-overflow: ellipsis; }
/* Mientras no esté el logo. */
.marca-punto {
  width: 20px; height: 20px; border-radius: var(--r-sm);
  background: var(--marca); color: #fff; font-weight: 700; font-size: 12px;
  display: grid; place-items: center; flex: 0 0 auto;
}
/* El `.btn-menu-principal` del escritorio: blanco, borde fino, radio corto. */
.barra .boton.flojo { padding: 9px 14px; font-size: 14px; border-radius: var(--r-sm); }

/* ── Títulos, con su filete navy ──────────────────────────── */
h1 { font-size: 19px; letter-spacing: -.2px; margin: 0 0 16px;
     border-left: 3px solid var(--marca); padding-left: 10px; }
h2 { font-size: 16px; margin: 0 0 10px; }
.suave { color: var(--texto-suave); font-size: 13px; }
.menudo { color: var(--texto-suave); font-size: 12.5px; }
.etiqueta { font-size: 11px; font-weight: 600; color: var(--texto-suave);
            letter-spacing: .6px; text-transform: uppercase; }

/* ── Cuerpo ───────────────────────────────────────────────── */
.pantalla { display: none; height: calc(100% - 42px); overflow: auto; }
.pantalla.puesta { display: block; }
.cuerpo { max-width: 640px; margin: 0 auto; padding: 22px 20px 32px; }
.cuerpo.ancho { max-width: 940px; }

.ficha { background: var(--superficie); border: 1px solid var(--linea);
         border-radius: var(--r-md); padding: 14px; }
.ficha + .ficha { margin-top: 12px; }
.opcion { display: block; width: 100%; text-align: left; cursor: pointer;
          background: var(--superficie); border: 1px solid var(--linea);
          border-radius: var(--r-md); padding: 13px 15px; margin-bottom: 9px;
          font: inherit; color: inherit; }
.opcion:hover { border-color: var(--linea-fuerte); background: #fbfcfd; }
.opcion .qué { font-weight: 600; }
.opcion .porqué { color: var(--texto-suave); font-size: 12.5px; margin-top: 2px; }

/* ── Campos ───────────────────────────────────────────────── */
label { display: block; margin: 12px 0 5px; font-size: 12.5px; font-weight: 600; }
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], input[type=time], input[type=number], select, textarea {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-sm); -webkit-user-select: text; user-select: text;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave);
}
.fila { display: flex; gap: 12px; }
.fila > * { flex: 1; }

/* ── Botones ──────────────────────────────────────────────── */
button { font: inherit; cursor: pointer; }
.boton {
  padding: 9px 18px; border-radius: var(--r-md); border: none;
  background: var(--marca); color: #fff; font-size: 14px; font-weight: 600;
}
.boton:hover { background: var(--marca-oscura); }
.boton:disabled { opacity: .5; cursor: default; }
.boton.flojo { background: var(--superficie); color: var(--texto);
               border: 1px solid var(--linea-fuerte); font-size: 14px; }
.boton.flojo:hover { background: var(--fondo-suave); }
.boton.entrar { background: var(--entrar); }
.boton.salir  { background: var(--salir); }
.boton.pausa  { background: var(--aviso); }
.boton.ancho { width: 100%; }
.boton.grande { font-size: 17px; padding: 14px; }

/* ── Avisos ───────────────────────────────────────────────── */
.aviso { border-radius: var(--r-md); padding: 9px 12px; margin: 11px 0;
         font-size: 13px; border: 1px solid; }
.aviso.mal  { background: #fbeceb; border-color: #e7c3c0; color: var(--salir); }
.aviso.bien { background: #e9f3ee; border-color: #b9d7c7; color: var(--entrar); }
.aviso.ojo  { background: #fdf3e3; border-color: #e8d2a8; color: var(--aviso); }
.aviso:empty { display: none; }

/* ── El teclado del PIN ───────────────────────────────────── */
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
           max-width: 292px; margin: 0 auto; }
.teclado button {
  padding: 15px 0; font-size: 21px; font-weight: 600;
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-md); color: var(--texto);
}
.teclado button:hover { background: var(--marca-suave); border-color: var(--marca); }
.teclado button:active { background: var(--marca); color: #fff; }
.teclado .flojo { font-size: 13px; color: var(--texto-suave); }

.huecos { display: flex; gap: 14px; justify-content: center; margin: 18px 0 20px; }
.hueco { width: 18px; height: 22px; border-bottom: 3px solid var(--linea-fuerte); }
.hueco.puesto { border-bottom-color: var(--marca); }
.hueco.puesto::after { content: "•"; display: block; font-size: 26px; line-height: 17px;
                       text-align: center; color: var(--marca); }

/* ── La pantalla de confirmar, que es la que se mira ──────── */
/* Centrada en el alto de la ventana, y no pegada arriba como el resto: es lo
   único que hay en esta pantalla y se mira desde lejos mientras se va
   llegando. Con el hueco debajo, el nombre te queda a la altura de la frente
   en vez de a la de los ojos. */
#p-confirmar .cuerpo { min-height: 100%; display: flex; flex-direction: column;
                       justify-content: center; padding-bottom: 80px; }
.quien { text-align: center; padding: 0 0 10px; }
.quien .nombre { font-size: 31px; font-weight: 700; letter-spacing: -.5px; }
.quien .apellidos { font-size: 23px; font-weight: 400; color: var(--texto-suave);
                    margin-top: 2px; }
.quien .estado { margin-top: 14px; font-size: 14px; color: var(--texto-suave); }

/* ── Tablas ───────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
     color: var(--texto-suave); padding: 8px 10px; border-bottom: 1px solid var(--linea-fuerte); }
td { padding: 9px 10px; border-bottom: 1px solid var(--linea); }
tr.dia td { background: var(--fondo-suave); font-weight: 700; text-transform: capitalize; }
.marca-chip { font-size: 11px; border: 1px solid #e0cf90; color: var(--aviso);
              border-radius: var(--r-sm); padding: 1px 5px; }

.lista-gente { max-height: 320px; overflow: auto; border: 1px solid var(--linea);
               border-radius: var(--r-md); background: var(--superficie); }
.lista-gente label { display: flex; align-items: center; gap: 10px; margin: 0;
                     padding: 11px 14px; border-bottom: 1px solid var(--linea);
                     font-weight: 400; cursor: pointer; }
.lista-gente label:hover { background: var(--fondo-suave); }
.lista-gente input { width: auto; }
.dentro { color: var(--entrar); font-size: 13px; font-weight: 600; }

.pie { display: flex; gap: 12px; margin-top: 22px; }
.pie.centrado { justify-content: center; }
.secretos { display: flex; gap: 28px; justify-content: center; text-align: center;
            margin: 20px 0; }
.secreto .valor { font-size: 26px; font-weight: 700; letter-spacing: 3px;
                  font-family: "IBM Plex Mono", Consolas, monospace;
                  -webkit-user-select: text; user-select: text; }

/* ── El cuadro de preguntar ───────────────────────────────── */
dialog {
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-lg);
  padding: 24px; width: 420px; max-width: 90vw;
  background: var(--superficie); color: var(--texto); font: inherit;
}
dialog::backdrop { background: rgba(19, 25, 32, .45); }
dialog h2 { margin: 0 0 6px; }
dialog .pie { margin-top: 20px; }

/* ── El logo ──────────────────────────────────────────────── */
/* Mientras no esté el fichero, la app enseña la «J» y funciona igual: una
   marca que falta no puede impedir que nadie fiche. */
.marca-img { height: 20px; width: auto; display: block; flex: 0 0 auto; }
.logo-grande { height: 62px; width: auto; display: block; margin: 0 auto 20px; }
/* `hidden` es un atributo, y lo aplica la hoja del navegador con `display:none`.
   Cualquier `display` puesto en una clase le gana y la imagen rota se ve igual
   — que es exactamente lo que pasaba mientras no estaba el fichero del logo. */
[hidden] { display: none !important; }

/* ── Desvincular: pequeño y en una esquina ────────────────── */
/* Apagar el punto de fichaje no es una acción de todos los días, y un botón
   del tamaño de las demás invita a pulsarlo. Va abajo a la derecha, en gris y
   en cuerpo menudo: quien lo busca lo encuentra, y quien no, no tropieza. */
.rincon { position: fixed; right: 14px; bottom: 10px; background: none; border: none;
          color: var(--texto-tenue); font-size: 11.5px; padding: 6px 8px; cursor: pointer; }
.rincon:hover { color: var(--salir); text-decoration: underline; }

/* La opción principal del menú: la misma ficha, con el navy marcando que es
   la que se usa. No más grande — más grande sería gritar. */
.opcion.principal { border-color: var(--marca); background: var(--marca-suave); }
.opcion.principal .qué { color: var(--marca-oscura); }
.etiqueta.separador { margin: 18px 0 8px; }

/* ── Volver, en la esquina de la página ───────────────────── */
/* Fuera de la cabecera: esa es la identidad del sitio, y un botón de
   navegación dentro la convierte en una barra de herramientas. */
.volver { position: fixed; top: 54px; right: 18px; z-index: 5;
          padding: 6px 14px; font-size: 13px; }


/* ── Lo propio del panel ──────────────────────────────────── */
body { min-height: 100vh; }
.pantalla { height: auto; min-height: calc(100vh - 42px); }
.cuerpo.estrecho { max-width: 380px; padding-top: 70px; }
.pestanas { display: flex; gap: 2px; margin-left: 22px; height: 42px; }
.pestanas a { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 42px;
              color: var(--texto-suave); text-decoration: none; font-size: 13.5px;
              border-bottom: 2px solid transparent; }
.pestanas a:hover { color: var(--texto); }
.pestanas a.puesta { color: var(--marca-oscura); font-weight: 600; border-bottom-color: var(--marca); }
.cuenta { background: var(--aviso); color: #fff; border-radius: 999px; font-size: 11px;
          font-weight: 700; padding: 0 6px; line-height: 17px; }
.salir-link { background: none; border: none; color: var(--texto-suave); font-size: 12.5px;
              margin-left: 16px; padding: 6px; }
.salir-link:hover { color: var(--salir); text-decoration: underline; }
.ficha.sin-relleno { padding: 0; overflow: hidden; }
.casilla { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; font-size: 14px; }
.casilla input, td input[type=checkbox] { width: auto; margin: 0; }
td.enlaces button { background: none; border: none; color: var(--marca); font-size: 13px; padding: 2px 6px; }
td.enlaces button.peligro { color: var(--salir); }
td.enlaces button:hover { text-decoration: underline; }
.estado-pausa { color: var(--aviso); font-weight: 600; }
.propuesta { display: flex; gap: 16px; align-items: flex-start; }
.propuesta .que { flex: 1; }
.propuesta .persona { font-weight: 700; font-size: 15px; }
.propuesta .cambio { margin-top: 4px; }
.propuesta .antes { color: var(--texto-suave); text-decoration: line-through; }
.propuesta .motivo { margin-top: 6px; color: var(--texto-suave); font-size: 13px; }
.propuesta .botones { display: flex; gap: 8px; flex: 0 0 auto; }
.vacio { text-align: center; color: var(--texto-suave); padding: 40px 0; }
a.boton { display: inline-block; text-decoration: none; }
.titulo-con-boton { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.titulo-con-boton h1 { margin: 0; }
.jornada { margin-top: 12px; }
.jornada .fila > div { min-width: 0; }
.horario { border: 1px solid var(--linea); border-radius: var(--r-md); padding: 10px; margin-top: 8px; }
.horario .cab { display: flex; gap: 8px; align-items: center; }
.horario .tramos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.horario .tramo { display: flex; align-items: center; gap: 4px; }
.horario .tramo input { width: 118px; }
.enlace { background: none; border: none; color: var(--marca); font-size: 13px; padding: 2px 4px; }
.enlace.peligro { color: var(--salir); }
.acciones-jornada { display: flex; gap: 10px; margin-top: 10px; }
.acciones-jornada select { width: auto; }
.controles { align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.controles > * { flex: 0 0 auto; }
.vistas { display: flex; border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm); overflow: hidden; }
.vistas button { background: var(--superficie); border: none; padding: 8px 12px; font-size: 13px; }
.vistas button + button { border-left: 1px solid var(--linea-fuerte); }
.vistas button.puesta { background: var(--marca); color: #fff; }
.navegar { display: flex; align-items: center; gap: 8px; }
.navegar .boton { padding: 7px 11px; }
.navegar span { min-width: 150px; text-align: center; font-weight: 600; }
tr.semana td { font-weight: 700; background: #fafbfc; border-top: 1px solid var(--linea-fuerte); }
tr.total td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--texto); }
.mas { color: #0891b2; font-weight: 700; white-space: nowrap; }
.menos { color: #c2410c; font-weight: 700; white-space: nowrap; }
.nota { display: inline-block; font-size: 11.5px; color: var(--aviso); background: #fdf3e3;
        border: 1px solid #e8d2a8; border-radius: var(--r-sm); padding: 1px 6px; margin-left: 6px; font-weight: 400; }
.pin-grande { font-size: 30px; font-weight: 700; letter-spacing: 6px; text-align: center; margin: 10px 0; }
@media (max-width: 720px) {
  .barra { padding: 0 10px; overflow-x: auto; }
  .barra .sitio, .barra .empresa .nombre { display: none; }
  .pestanas { margin-left: 8px; }
  .propuesta { flex-direction: column; }
  th:nth-child(3), td:nth-child(3) { display: none; }
}
.persona-enlace { color: inherit; text-decoration: none; }
.persona-enlace:hover { text-decoration: underline; }
/* Aquí las fechas ya vienen escritas bien («Septiembre de 2026»): la
   mayúscula en cada palabra del quiosco pondría «De» y «Min». */
tr.dia td { text-transform: none; }
tr.dia a { color: var(--marca-oscura); text-decoration: none; }
tr.dia a:hover { text-decoration: underline; }

/* ── Dentro de la app de escritorio ───────────────────────── */
/* La barra se arrastra para mover la ventana; lo que se pulsa, no. En Mac los
   tres círculos van arriba a la izquierda y en Windows los botones a la
   derecha: se les deja su hueco, como en la ventana principal. */
body.en-escritorio .barra { -webkit-app-region: drag; }
body.en-escritorio .barra a, body.en-escritorio .barra button { -webkit-app-region: no-drag; }
body.es-mac .barra { padding-left: 100px; }
body.es-win .barra { padding-right: 144px; }
.barra.sin-sesion .pestanas, .barra.sin-sesion .empresa, .barra.sin-sesion .salir-link { display: none; }

/* La cuenta de baja: una franja bajo la barra, en todas las pantallas. */
.franja-baja { background: #fdf3e3; border-bottom: 1px solid #e8d2a8; color: var(--aviso);
               padding: 9px 20px; text-align: center; font-weight: 600; }
.franja-baja[hidden] { display: none; }

/* ── El menú de Dirección: una columna a la izquierda ───────── */
.lateral { position: fixed; top: 42px; left: 0; bottom: 0; width: 196px; z-index: 5;
           background: var(--superficie); border-right: 1px solid var(--linea);
           padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.lateral[hidden] { display: none; }
.lateral a { display: flex; align-items: center; justify-content: space-between; gap: 8px;
             padding: 9px 12px; border-radius: var(--r-md); color: var(--texto-suave);
             text-decoration: none; font-size: 14px; }
.lateral a:hover { background: var(--fondo); color: var(--texto); }
.lateral a.puesta { background: var(--marca-suave); color: var(--marca-oscura); font-weight: 600; }
.lateral a[hidden] { display: none; }
.lateral-separa { height: 1px; background: var(--linea); margin: 8px 6px; }
body.con-lateral .pantalla { margin-left: 196px; }
@media (max-width: 720px) {
  .lateral { position: static; width: auto; flex-direction: row; overflow-x: auto; padding: 6px;
             border-right: 0; border-bottom: 1px solid var(--linea); }
  .lateral a { white-space: nowrap; }
  .lateral-separa { width: 1px; height: auto; margin: 4px; }
  body.con-lateral .pantalla { margin-left: 0; }
}

/* ── Calendario ──────────────────────────────────────────────
   Cada persona, su color (una marca junto al nombre y el tono de sus
   turnos). Las ausencias, llenas y con su letra, en colores propios.
   Sin colores de «bien» ni de «mal»: lo previsto y lo fichado, y ya. */
.cuerpo.completo { max-width: none; padding: 22px 24px 32px; }
.cal-marco { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea);
             border-radius: var(--r-md); }
table.cal { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.cal th, .cal td { border-bottom: 1px solid var(--linea); border-right: 1px solid #eef1f4;
                   padding: 0; text-align: center; }
.cal thead th { padding: 7px 2px 6px; font-weight: 600; color: var(--texto-suave); font-size: 11px;
                text-transform: uppercase; letter-spacing: .3px; }
.cal thead th .num { display: block; color: var(--texto); font-size: 13px; letter-spacing: 0; }
.cal .persona { position: sticky; left: 0; z-index: 1; background: var(--superficie);
                text-align: left; padding: 8px 12px; min-width: 180px; white-space: nowrap;
                border-right: 1px solid var(--linea); font-size: 13px; }
.cal thead .persona { font-size: 11px; }
.cal .punto { display: inline-block; width: 10px; height: 10px; border-radius: 999px;
              margin-right: 8px; vertical-align: middle; }
.cal td.dia { height: 46px; min-width: 36px; vertical-align: middle; cursor: pointer; }
.cal td.dia:hover { background: #f7f9fb; }
.cal .finde { background: #f8f9fa; }
.cal .festivo { background: repeating-linear-gradient(135deg, #eef1f4 0 4px, #f8f9fa 4px 8px); }
.cal .hoy { box-shadow: inset 0 3px 0 var(--marca); }
.cal .turno { display: block; margin: 3px 3px 1px; padding: 3px 2px; border-radius: 4px;
              font-size: 11px; font-weight: 600; color: var(--texto); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }
.cal .aus { display: block; margin: 3px; padding: 4px 2px; border-radius: 4px; color: #fff;
            font-weight: 700; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .fichado { display: block; font-size: 10.5px; color: var(--texto-suave); white-space: nowrap; }
.cal.semana td.dia { min-width: 120px; }

/* Los colores de las ausencias. Pedida y sin aprobar: el mismo color, en hueco. */
.aus-vacaciones      { background: #0f766e; --c: #0f766e; }
.aus-asuntos_propios { background: #6d28d9; --c: #6d28d9; }
.aus-permiso         { background: #b45309; --c: #b45309; }
.aus-baja            { background: #475569; --c: #475569; }
.aus-otra            { background: #be185d; --c: #be185d; }
.aus.pedida { background: var(--superficie); color: var(--c); border: 1.5px dashed var(--c); }

.leyenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12.5px;
           color: var(--texto-suave); align-items: center; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda .muestra { display: inline-block; min-width: 26px; padding: 2px 5px; border-radius: 4px;
                    color: #fff; font-weight: 700; font-size: 11px; text-align: center; }
.leyenda .muestra.pedida { background: var(--superficie); color: var(--texto-suave); border: 1.5px dashed var(--texto-suave); }
.leyenda .muestra.festivo { background: repeating-linear-gradient(135deg, #e3e7ec 0 4px, #f3f5f7 4px 8px); color: var(--texto-suave); }
.leyenda .muestra.finde { background: #eceff2; color: var(--texto-suave); }
.leyenda .personas { gap: 6px 14px; }

/* ── Organización ─────────────────────────────────────────── */
.org-pestanas { display: inline-flex; margin-bottom: 16px; }
.org-parte { display: none; }
.org-parte.puesta { display: block; }
.dias { display: flex; gap: 6px; margin: 4px 0 6px; }
.dias label { display: grid; place-items: center; width: 38px; height: 34px; margin: 0;
              border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm); cursor: pointer;
              font-weight: 600; background: var(--superficie); }
.dias input { display: none; }
.dias label.puesta { background: var(--marca); border-color: var(--marca); color: #fff; }
.tramo-turno { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tramo-turno input { width: 118px; }
.etiqueta-estado { font-size: 12px; font-weight: 600; }

/* En el mes, los 31 días caben sin desplazarse: columnas iguales. */
table.cal:not(.semana) { table-layout: fixed; }
table.cal:not(.semana) .persona { width: 190px; }
table.cal:not(.semana) td.dia { min-width: 0; }
.leyenda-turnos { margin-top: 6px; }
/* Una ausencia fuera del calendario (listas, tarjetas): la misma marca. */
.aus { color: #fff; border-radius: 4px; font-weight: 700; font-size: 11px; }

/* ── Calendario: planificar arrastrando ────────────────────── */
.cal-disposicion { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 16px; align-items: start; }
.cal-izquierda { min-width: 0; }
.cal-plantilla { position: sticky; top: 12px; max-height: calc(100vh - 120px); overflow-y: auto;
                 background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-md);
                 padding: 12px; }
.cal-plantilla .etiqueta { margin-bottom: 8px; }
@media (max-width: 1100px) { .cal-disposicion { grid-template-columns: 1fr; } .cal-plantilla { position: static; max-height: none; } }

.persona-arrastrable { border: 1px solid var(--linea); border-left: 4px solid var(--c); border-radius: var(--r-md);
                       padding: 8px 9px; margin-bottom: 8px; background: var(--superficie); cursor: grab; }
.persona-arrastrable.sin-horario { cursor: default; }
.persona-arrastrable .nombre { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px;
                               cursor: grab; user-select: none; padding: 2px 0 7px; }
.persona-arrastrable .nombre::after { content: '⠿'; margin-left: auto; color: var(--texto-tenue); font-size: 15px; }
.persona-arrastrable.arrastrando { opacity: .5; }
.persona-arrastrable select { width: 100%; padding: 6px 8px; font-size: 12.5px; margin: 6px 0 0; }
.persona-arrastrable.sin-horario .nombre { cursor: default; }
.persona-arrastrable.sin-horario .nombre::after { content: ''; }

/* El desplegable de los días. */
.desplegable { position: relative; }
.desplegable > summary { list-style: none; cursor: pointer; border: 1px solid var(--linea-fuerte);
                         border-radius: var(--r-sm); padding: 6px 8px; font-size: 12.5px; background: var(--superficie);
                         display: flex; justify-content: space-between; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after { content: '▾'; color: var(--texto-suave); }
.desplegable[open] > summary { border-color: var(--marca); }
.desplegable .opciones { display: flex; gap: 4px; padding: 6px 0 2px; }
.desplegable .opciones label { flex: 1; display: grid; place-items: center; height: 28px; margin: 0;
                               border: 1px solid var(--linea-fuerte); border-radius: var(--r-sm);
                               font-size: 12px; font-weight: 600; cursor: pointer; }
.desplegable .opciones label.puesta { background: var(--marca); border-color: var(--marca); color: #fff; }
.desplegable .opciones input { display: none; }

/* Las semanas: se marcan pinchando. */
.cal th.semana-cab { background: var(--fondo-suave); color: var(--texto); font-size: 11px; padding: 5px 2px;
                     cursor: pointer; user-select: none; border-right: 2px solid var(--superficie); }
.cal th.semana-cab.elegida { background: var(--marca); color: #fff; }
.cal th.semana-cab.encima, .cal td.encima, .cal th.encima { box-shadow: inset 0 0 0 2px var(--marca); }
.cal .dia.soltable { background: var(--marca-suave); }

/* Ausencias: la inicial de quien la pide, en el color de su tipo. Sin
   aprobar, rayada. */
.aus.pedida, .leyenda .muestra.pedida {
  color: var(--c); border: 1px solid var(--c);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, white) 0 4px, #fff 4px 8px);
}
.leyenda .fila-leyenda { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; width: 100%; }
.leyenda .titulo-leyenda { font-weight: 600; color: var(--texto); min-width: 90px; }
.leyenda [draggable=true] { cursor: grab; }
.cal .turno.planificado { cursor: pointer; }
.cal .aus { cursor: pointer; }

/* El circulito rojo: hay solicitudes de ausencia sin aprobar. */
.cuenta.roja { background: #d92d20; }
.plegable > summary { cursor: pointer; font-weight: 600; color: var(--texto-suave); padding: 6px 0; }
.plegable[open] > summary { color: var(--texto); }

/* En el mes, las marcas son estrechas: sin relleno, para que quepan dos letras. */
table.cal:not(.semana) .turno, table.cal:not(.semana) .aus { margin: 3px 1px 1px; padding: 3px 0; font-size: 10.5px;
                                                            text-overflow: clip; letter-spacing: -.2px; }
table.cal:not(.semana) .fichado { font-size: 10px; letter-spacing: -.2px; overflow: hidden; }

/* Los días de cada horario de la ficha, junto a su nombre. */
.horario .cab { display: flex; gap: 8px; align-items: flex-start; }
.horario .cab > input { flex: 1; }
.horario .dias-horario { width: 190px; flex: 0 0 auto; }
.horario .dias-horario .opciones { position: absolute; z-index: 3; background: var(--superficie); border: 1px solid var(--linea);
                                   border-radius: var(--r-sm); padding: 6px; width: 250px; box-shadow: 0 6px 18px #0002; }

/* La etiqueta de un cambio (anexo L1): se pulsa y enseña lo que pasó. */
.cambio-etiqueta { margin-top: 3px; }
.cambio-etiqueta > summary { cursor: pointer; font-size: 12.5px; color: var(--aviso); list-style: none; font-weight: 600; }
.cambio-etiqueta > summary::-webkit-details-marker { display: none; }
.cambio-etiqueta.discreta > summary { color: var(--texto-suave); }
.cambio-etiqueta > div { margin-top: 3px; line-height: 1.45; }

/* En el login: la otra puerta, la de la plantilla. */
.otra-puerta { text-align: center; margin: 18px 0 0; font-size: 14px; }
.otra-puerta a { color: var(--texto-suave); }

/* Mi empresa */
.emp-dato { margin: 4px 0 0; font-weight: 600; }
.emp-cifras { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 8px 0 14px; }
.emp-cifras > div { display: flex; flex-direction: column; gap: 2px; }
.emp-cifras .etiqueta { margin: 0; }
.emp-baja { border-top: 1px solid var(--linea); padding-top: 12px; }
.emp-descargas { width: 100%; margin-top: 6px; }
.emp-descargas td { padding: 10px 6px; border-top: 1px solid var(--linea); vertical-align: middle; }
.emp-descargas tr:first-child td { border-top: 0; }
.emp-documentos { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 6px; }

.emp-pagar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 14px; }