/* Signatus Control Horario — cliente de administración (Electron).

   ---------- Identidad ----------
   Cada programa de Signatus tiene SU acento: la Agenda es morada, Pólizas
   azul, Legítima granate. Control Horario es bronce. Lo que hace familia no
   es el tono, es el patrón: el degradado de acento en la cabecera, el lobo
   metido en el símbolo del producto, la serif en los títulos y las tarjetas
   con su ilustración de fondo. Cambiando el acento, esto sigue pareciendo
   Signatus.

   Todo el color sale de `--accent-control-horario`. Los cinco tonos de abajo
   son derivaciones suyas (oscuro y claro para el degradado, suave y tenue
   para fondos): ningún componente lleva un color a pelo, así que reteñir el
   producto entero es tocar este bloque y nada más.

   Tipografía (spec §9): Inter para la interfaz, Source Serif 4 para el
   wordmark y los títulos. Las dos con alternativas ya instaladas en el
   sistema por delante, para que la aplicación se vea igual sin conexión y no
   haya que pedirle una letra a nadie de fuera. */
:root {
  --accent-control-horario: #8a5a16;
  --acento: var(--accent-control-horario);
  --acento-oscuro: #5e3c0c;   /* arranque del degradado de la cabecera */
  --acento-claro: #b0742a;    /* final del degradado y estados hover */
  --acento-suave: #f6ebda;    /* pastillas, iconos y fondos de acento */
  --acento-tenue: #fbf6ef;    /* fondos apenas teñidos */

  --fondo: #f8f5f0;
  --superficie: #ffffff;
  --borde: #e8dfd2;
  --borde-suave: #f2ebe1;
  --borde-campo: rgba(138, 90, 22, 0.24);
  --texto: #2a2118;
  --texto-tenue: #6f6455;

  --ok: #1e7d4f;       --ok-fondo: #e5f4ec;
  /* El ámbar de «Modificado» vive cerca del bronce del acento, así que ese
     badge se distingue además por borde e icono (ver .badge--modificado):
     es la marca que una inspección tiene que ver a la primera. */
  --aviso: #92400e;    --aviso-fondo: #fef3c7;  --aviso-borde: #f59e0b;
  --error: #b91c1c;    --error-fondo: #fee2e2;

  --radio: 12px;
  --radio-tarjeta: 18px;
  --sombra: 0 1px 2px rgba(94, 60, 12, 0.05), 0 2px 8px rgba(94, 60, 12, 0.07);
  --sombra-tarjeta: 0 2px 6px rgba(94, 60, 12, 0.05), 0 8px 24px rgba(94, 60, 12, 0.08);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 14px/1.45 Inter, "Segoe UI", system-ui, sans-serif;
}

.aplicacion { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Cabecera con pestañas ----------
   Misma forma que la Agenda y que el resto de la suite: el degradado del
   acento arriba, la marca a la izquierda, la sesión a la derecha y las
   secciones como pestañas colgando del borde inferior. Además del parecido
   de familia, deja el ancho entero de la ventana para la tabla de fichajes,
   que es la pantalla con más columnas de la aplicación. */
.cabecera {
  background: linear-gradient(105deg, var(--acento-oscuro) 0%, var(--acento) 55%, var(--acento-claro) 100%);
  color: #fff; padding: 9px 18px; position: sticky; top: 0; z-index: 20;
}
/* Una sola fila: marca a la izquierda, pestañas en medio y la sesión a la
   derecha, igual que la Agenda. */
.cabecera__fila { display: flex; align-items: center; gap: 14px; }
/* La marca lleva al inicio. Va como botón para que funcione con teclado y
   lector de pantalla, pero se despoja de todo lo que la haría parecer uno:
   sigue leyéndose como el nombre del programa. */
.cabecera__marca {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.cabecera__marca:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 8px; }
.cabecera__logo { width: 44px; height: 44px; flex-shrink: 0; }
.cabecera__nombre { font-family: var(--serif); font-weight: 500; font-size: 16px; color: #fff; white-space: nowrap; }
/* La sesión no se encoge ni se parte en dos renglones: lo que cede cuando la
   ventana se estrecha son las pestañas. */
.cabecera__sesion {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px;
  flex: 0 0 auto; white-space: nowrap;
}
/* El botón de perfil: avatar de iniciales + nombre. Todo en el tamaño de la
   barra —12,5px— y no en el del título: la zona de sesión acompaña, no compite
   con las pestañas, que son lo que hay que poder leer y pulsar. */
.cabecera__usuario {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.95); white-space: nowrap;
  background: none; border: 0; font: inherit; font-size: 12.5px;
  padding: 2px 4px; cursor: pointer; border-radius: 999px;
}
.cabecera__usuario:hover { background: rgba(255, 255, 255, 0.14); }
.cabecera__usuario:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; }
.cabecera__usuario-nombre { font-weight: 600; }

/* Avatar de iniciales: un círculo pequeño, del alto de la línea de texto. */
.cabecera__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5);
  background: #fff; color: var(--acento);
  font-size: 10px; font-weight: 700; line-height: 1;
}

.cabecera__idioma {
  background: rgba(255, 255, 255, 0.14); color: #fff; font: inherit; font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px;
  padding: 3px 6px; cursor: pointer; max-width: 120px;
}
.cabecera__idioma:hover { background: rgba(255, 255, 255, 0.24); }
/* El desplegable nativo pinta sus opciones con el color del sistema: si el
   texto se queda blanco, la lista abierta sale en blanco sobre blanco. */
.cabecera__idioma option { color: var(--texto); background: var(--superficie); }

/* En ventanas estrechas cae primero el nombre —queda el avatar, que sigue
   llevando al perfil— y después el idioma. Las pestañas son lo que no puede
   pasar a una segunda fila. */
@media (max-width: 1180px) { .cabecera__usuario-nombre { display: none; } }
@media (max-width: 980px) { .cabecera__idioma { display: none; } }

.cabecera__sesion button {
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff; font: inherit; font-size: 12px; padding: 3px 9px;
  border-radius: 999px; cursor: pointer;
}
.cabecera__sesion button:hover { background: rgba(255, 255, 255, 0.24); }
/* El selector de empresa (gestorías) se viste como la cabecera, no como un
   campo de formulario blanco pegado encima del degradado. */
.cabecera__sesion select {
  background: rgba(255, 255, 255, 0.14); color: #fff; font: inherit; font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; padding: 4px 10px; max-width: 190px;
}
.cabecera__sesion select option { color: var(--texto); background: var(--superficie); }

/* ---------- La campanita ----------
   Avisos internos. Cuelga de la cabecera y por eso hereda su color: el icono
   va a trazo con currentColor y no un emoji, que cada sistema pinta a su
   manera y desentonaría sobre el bronce. */
.campanita { position: relative; display: flex; }
.campanita__boton {
  /* Se sale de la regla general de .cabecera__sesion button: no lleva píldora
     ni fondo, porque es un icono y no una acción con nombre. */
  background: none !important; border: 0 !important; padding: 4px !important;
  color: #fff; cursor: pointer; display: flex; align-items: center;
  position: relative; border-radius: 8px;
}
.campanita__boton:hover { background: rgba(255, 255, 255, 0.16) !important; }
.campanita__icono { width: 21px; height: 21px; display: block; }
.campanita__cuenta {
  position: absolute; top: -1px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--error); color: #fff;
  border-radius: 999px; font-size: 10.5px; line-height: 16px;
  font-weight: 600; text-align: center;
  box-shadow: 0 0 0 2px var(--acento-oscuro);
}
.campanita__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 330px; max-height: 60vh; overflow-y: auto;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  white-space: normal;
}
.campanita__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid var(--borde);
  font-weight: 600; font-size: 13px;
  position: sticky; top: 0; background: var(--superficie); border-radius: 12px 12px 0 0;
}
.campanita__lista { list-style: none; margin: 0; padding: 0; }
.campanita__aviso {
  padding: 10px 12px; border-bottom: 1px solid var(--borde-suave); cursor: pointer;
  /* Sin leer: una barra de acento a la izquierda. Se distingue de un vistazo
     sin tener que leer nada. */
  border-left: 3px solid var(--acento);
}
.campanita__aviso:hover { background: var(--acento-tenue); }
.campanita__aviso--leido { border-left-color: transparent; opacity: 0.72; }
.campanita__aviso-titulo { font-size: 13px; font-weight: 600; }
.campanita__aviso-cuerpo { font-size: 12.5px; color: var(--texto-tenue); margin-top: 2px; }
.campanita__aviso-fecha { font-size: 11.5px; color: var(--texto-tenue); margin-top: 4px; }
.campanita__vacio { padding: 18px 12px; text-align: center; color: var(--texto-tenue); font-size: 13px; }
.boton--menudo { font-size: 11.5px; padding: 3px 9px; }

/* ---------- Mi perfil ----------
   Datos en dos columnas, que es como se leen los datos de una ficha: etiqueta
   pequeña arriba y valor debajo, no una tabla. */
.rejilla-perfil {
  display: grid; gap: 12px 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 14px;
}
.dato-perfil { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dato-perfil__etiqueta {
  font-size: 11.5px; color: var(--texto-tenue);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.dato-perfil__valor { font-size: 14px; overflow-wrap: anywhere; }

/* ---------- Mi jornada ----------
   El fichaje propio de quien administra. Vive en su propia pantalla y no
   apretujado en la cabecera: el botón tiene que verse y entenderse sin que
   nadie lo busque. */
.mi-jornada { text-align: center; padding: 22px 20px 26px; }
.mi-jornada__hora {
  font-family: var(--serif); font-size: 46px; font-weight: 500;
  color: var(--acento); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mi-jornada__fecha { color: var(--texto-tenue); text-transform: capitalize; margin-bottom: 12px; }
.mi-jornada__estado { margin-bottom: 14px; color: var(--texto-tenue); font-size: 13.5px; }
.mi-jornada .campo { max-width: 260px; margin: 0 auto 14px; text-align: left; }
.mi-jornada__acciones { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mi-jornada__boton {
  padding: 14px 34px; border: none; border-radius: 999px; color: #fff;
  font: inherit; font-size: 16px; font-weight: 500; cursor: pointer;
  box-shadow: var(--sombra-tarjeta);
  background: linear-gradient(150deg, var(--acento-oscuro) 0%, var(--acento) 55%, var(--acento-claro) 100%);
}
.mi-jornada__boton:hover { filter: brightness(1.06); }
.mi-jornada__boton:disabled { opacity: 0.6; cursor: default; }

/* Las pestañas, como en la Agenda: solo texto sobre el degradado, en blanco
   translúcido, y la activa en blanco pleno con su subrayado. Ni pastillas ni
   iconos — es la forma que tiene la casa de marcar dónde estás.
   Cuando la ventana no da para las nueve en una línea, la fila se parte en
   dos en vez de recortarlas: una sección escondida es una sección a la que
   nadie llega, y eso es peor que una cabecera un poco más alta. */
.cabecera__nav {
  display: flex; gap: 2px; margin-right: auto; min-width: 0;
  flex: 1 1 auto; flex-wrap: wrap;
}
.pestana {
  padding: 6px 8px; border: 0; border-bottom: 2px solid transparent; background: none;
  font: inherit; font-size: 12.5px; color: rgba(255, 255, 255, 0.78);
  cursor: pointer; white-space: nowrap;
}
.pestana:hover { color: #fff; }
.pestana--activa { border-bottom-color: #fff; color: #fff; font-weight: 600; }

/* Aviso de sesión de soporte: cruza la cabecera entera, que es donde no se
   puede pasar por alto. */
.cabecera__soporte {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 6px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.16); font-size: 12px; color: rgba(255, 255, 255, 0.95);
}

.principal { flex: 1; padding: 26px 32px 40px; min-width: 0; }
.principal__titulo { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 4px; }
.principal__sub { color: var(--texto-tenue); margin: 0 0 22px; font-size: 13.5px; }

/* ---------- Controles ---------- */
.boton {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie);
  color: var(--texto); font: inherit; font-weight: 500; cursor: pointer;
}
.boton:hover { background: var(--acento-tenue); border-color: var(--acento-suave); }
.boton--primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton--primario:hover { background: var(--acento-claro); border-color: var(--acento-claro); }
.boton--peligro { color: var(--error); border-color: var(--error-fondo); }
.boton:disabled { opacity: 0.55; cursor: default; }
/* «Ver más / Ver menos» dentro de un desplegable: es un enlace, no una acción
   con peso, y con el aspecto de botón normal competía con lo que despliega. */
.boton--enlace {
  background: none; border: none; padding: 2px 0; margin-bottom: 6px;
  color: var(--acento); font-size: 12.5px; text-decoration: underline; cursor: pointer;
}

.campo { display: block; }
.campo__etiqueta { display: block; font-size: 12px; color: var(--texto-tenue); margin-bottom: 4px; }
/* Los campos van con el relleno teñido del acento y se ponen en blanco al
   escribir en ellos, como en la Agenda: es lo que hace que un formulario de
   la casa se reconozca de un vistazo. */
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde-campo);
  border-radius: 10px; background: var(--acento-suave); font: inherit; color: var(--texto);
}
.campo textarea { min-height: 80px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px; background: var(--superficie);
}
.campo input:disabled, .campo input[readonly] { background: var(--borde-suave); color: var(--texto-tenue); }

/* Las casillas que dibuja el navegador desentonan con el resto: se dibujan a
   mano en la familia del acento, igual que en la Agenda. */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  display: inline-grid; place-content: center; flex: 0 0 auto;
  width: 1.05rem; height: 1.05rem; margin: 0;
  border: 1.5px solid var(--acento-claro); background: var(--acento-suave); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
input[type="checkbox"] { border-radius: 0.32rem; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked {
  background: var(--acento); border-color: var(--acento);
}
/* El palote: un rectángulo con dos lados y girado, que es la forma más
   fiable de dibujar un verificado en CSS. */
input[type="checkbox"]:checked::before {
  content: ""; width: 0.3rem; height: 0.58rem; margin-top: -0.12rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type="radio"]:checked::before {
  content: ""; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #fff;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--acento-claro); outline-offset: 2px;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
  border-color: var(--borde); background: var(--borde-suave); cursor: default;
}
.campo--linea { display: flex; align-items: center; gap: 8px; }
.campo--linea input[type="checkbox"] { width: auto; }

.fila-campos { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.fila-campos .campo { min-width: 150px; }

.aviso { border-radius: 10px; padding: 10px 14px; font-size: 13px; margin: 12px 0; }
.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--ok { background: var(--ok-fondo); color: var(--ok); }
.aviso--info { background: var(--acento-tenue); color: var(--texto-tenue); }

/* ---------- Tarjetas y tablas ---------- */
.tarjetas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
/* ---------- Ilustraciones de fondo ----------
   Mismo recurso que en la Agenda: dibujos decorativos, a baja opacidad,
   anclados abajo a la derecha, para que las tarjetas no queden planas y en
   blanco. Dos diferencias de implementación, a propósito:

   - Van por `mask` con `background: var(--acento)` en vez de llevar el color
     metido dentro del SVG. Así siguen al token de acento solos, y reteñir el
     producto no obliga a reeditar cada dibujo.
   - Al ser un pseudoelemento decorativo no llegan al DOM: ningún lector de
     pantalla los nombra ni hay que ponerles un alt vacío en cada sitio.

   Una tarjeta tiene que leerse igual de bien con dibujo que sin él: por eso
   el contenido va en su propia capa por encima. */
.ilustra { position: relative; overflow: hidden; }
.ilustra > * { position: relative; z-index: 1; }
.ilustra::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--acento); opacity: 0.1; pointer-events: none;
  -webkit-mask: var(--dibujo) right -8px bottom -12px / auto 116% no-repeat;
          mask: var(--dibujo) right -8px bottom -12px / auto 116% no-repeat;
}
/* Reloj: lo que mide esta aplicación. */
.ilustra--reloj { --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 120'%3E%3Ccircle cx='92' cy='62' r='40' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M92 38v26l18 10' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Silueta de persona: plantilla y presencias. */
.ilustra--persona { --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 120'%3E%3Ccircle cx='104' cy='44' r='22' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M66 116c0-24 17-40 38-40s38 16 38 40' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Calendario: ausencias y periodos. */
.ilustra--calendario { --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Crect x='36' y='30' width='84' height='74' rx='10' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M36 54h84M58 20v18M98 20v18' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Documento: informes y exportaciones. */
.ilustra--documento { --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Cpath d='M44 18h44l24 24v62a8 8 0 0 1-8 8H44a8 8 0 0 1-8-8V26a8 8 0 0 1 8-8z' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M56 66h44M56 84h30' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Escudo: cumplimiento e integridad. */
.ilustra--escudo { --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Cpath d='M78 14 36 32v30c0 26 18 44 42 50 24-6 42-24 42-50V32z' fill='none' stroke='%23000' stroke-width='7'/%3E%3Cpath d='M60 64l14 14 24-26' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* Edificio: centros de trabajo. */
.ilustra--edificio { --dibujo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 120'%3E%3Cpath d='M40 108V44l38-26 38 26v64' fill='none' stroke='%23000' stroke-width='7' stroke-linejoin='round'/%3E%3Cpath d='M66 108V78h24v30' fill='none' stroke='%23000' stroke-width='7'/%3E%3C/svg%3E"); }

.tarjeta-dato {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  padding: 16px 20px; min-width: 170px; box-shadow: var(--sombra-tarjeta); cursor: pointer;
}
.tarjeta-dato:hover { border-color: var(--acento-suave); }
.tarjeta-dato__numero { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--acento); }
.tarjeta-dato__etiqueta { color: var(--texto-tenue); font-size: 12.5px; }

.panel-bloque {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta);
  padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--sombra-tarjeta);
}
.panel-bloque__titulo { font-family: var(--serif); font-weight: 500; font-size: 16px; margin: 0 0 12px; }

table.tabla {
  width: 100%; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta); box-shadow: var(--sombra-tarjeta);
  /* Separate y no collapse: con collapse el navegador ignora el redondeo de
     las esquinas y la tabla vuelve a salir cuadrada. */
  border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.tabla thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--texto-tenue); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--borde);
  background: var(--acento-tenue);
}
.tabla tbody td { padding: 9px 12px; border-bottom: 1px solid var(--borde-suave); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr.fila-clicable { cursor: pointer; }
.tabla tbody tr.fila-clicable:hover { background: var(--acento-tenue); }
.tabla .num { font-variant-numeric: tabular-nums; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap; }
/* «Modificado» es la marca que una inspección tiene que ver a la primera, y
   su ámbar vive cerca del bronce del acento. Por eso no se distingue solo por
   color: lleva borde propio y el lápiz delante. */
.badge--modificado {
  background: var(--aviso-fondo); color: var(--aviso);
  border: 1px solid var(--aviso-borde); padding: 1px 9px;
}
.badge--modificado::before { content: "✎ "; }
.badge--ok { background: var(--ok-fondo); color: var(--ok); }
.badge--pendiente { background: var(--acento-suave); color: var(--texto); }
.badge--rechazada, .badge--incompleta, .badge--inactivo { background: var(--error-fondo); color: var(--error); }
.badge--abierta { background: var(--ok-fondo); color: var(--ok); }

.detalle-dia { background: var(--acento-tenue); border-radius: 10px; padding: 10px 14px; margin: 4px 0; font-size: 13px; }
.detalle-dia__fila { display: flex; gap: 10px; padding: 2px 0; align-items: baseline; }
.detalle-dia__hora { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 42px; }
.tachado { text-decoration: line-through; color: var(--texto-tenue); }
.detalle-correccion {
  margin: 3px 0 6px 52px; padding: 6px 10px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 8px; font-size: 12px; color: var(--texto-tenue);
}

/* ---------- Modal ---------- */
.velo {
  position: fixed; inset: 0; background: rgba(42, 33, 24, 0.4);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 20px; z-index: 50;
  overflow-y: auto;
}
.modal {
  background: var(--superficie); border-radius: var(--radio-tarjeta); padding: 22px 24px;
  width: 100%; max-width: 520px; box-shadow: var(--sombra-tarjeta);
}
.modal__titulo { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 0 0 14px; }
.modal__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal__campos .campo--ancho { grid-column: 1 / -1; }
.modal__acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ---------- Login ---------- */
.login { max-width: 340px; margin: 12vh auto 0; }
.login__logo { width: 96px; height: 96px; display: block; margin: 0 auto 14px; }
.login__titulo { text-align: center; font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 2px; }
.login__sub { text-align: center; color: var(--texto-tenue); font-size: 13px; margin: 0 0 24px; }
.login .campo { margin-bottom: 12px; }
.login .boton { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- Pie de autoría ----------
   El mismo que firma el resto de la casa, con el mismo orden: el texto
   primero y el logo después. Va sobre el fondo, sin tarjeta ni línea de
   separación: es una firma, no una sección de la aplicación. */
.pie {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0.35rem; padding: 0.9rem 1rem 1.2rem;
  color: var(--texto-tenue); font-size: 0.78rem;
}
.pie__logo { height: 1.05rem; width: auto; vertical-align: middle; flex: 0 0 auto; }
.pie a { color: var(--acento); text-decoration: none; font-weight: 600; }
.pie a:hover { text-decoration: underline; }
.pie__sep { opacity: 0.5; }
/* Botón, no enlace: no lleva a ninguna dirección, abre una ventana. Se viste
   de enlace porque es lo que se espera ver en un pie. */
.pie__enlace {
  padding: 0; border: 0; background: none; color: var(--texto-tenue);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.pie__enlace:hover { color: var(--acento); }
.licencias p { margin: 0 0 0.8rem; line-height: 1.5; font-size: 13.5px; }
.licencias p:last-child { margin-bottom: 0; }

.cargando { padding: 2rem 0; color: var(--texto-tenue); }
.vacio { padding: 1.4rem; text-align: center; color: var(--texto-tenue); }

/* ---------- Navegación de móvil ----------
   Escondida en escritorio y encendida por el @media de más abajo. Vive
   siempre en el DOM para que girar el teléfono no obligue a reconstruir la
   cabecera: lo único que cambia es cuál de las dos barras se ve. */
.barra-inferior { display: none; }
.cabecera__onda { display: none; }

/* La barra es la misma que la de la aplicación del móvil, que a su vez está
   portada de Signatus Agenda: pastilla flotante con una mordida de verdad en
   el borde de arriba y un disco que viaja hasta la pestaña abierta. El dibujo
   lo hace js/barra-inferior.js; aquí solo van los colores y las medidas de las
   que ese módulo saca sus cuentas. */
.barra-inferior__fondo {
  position: absolute; left: 0; right: 0; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(94, 60, 12, 0.06))
          drop-shadow(0 8px 22px rgba(94, 60, 12, 0.1));
}
.barra-inferior__pastilla { fill: var(--superficie); }
.barra-inferior__halo { fill: var(--acento-suave); }
.barra-inferior__disco { fill: var(--acento); }

.barra-inferior__boton {
  position: relative; z-index: 1; flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 3px 6px;
  border: 0; background: none; color: var(--texto-tenue);
  font: inherit; font-size: 10.5px; line-height: 1.2;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.barra-inferior__icono {
  width: 21px; height: 21px; padding: 7px 0; box-sizing: content-box;
  transform: translateY(0);
  transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1), color 0.2s ease;
}
.barra-inferior__boton--activo { color: var(--acento); font-weight: 600; }
.barra-inferior__boton--activo .barra-inferior__icono {
  transform: translateY(calc(var(--alza-icono, 0px) * -1)); color: #fff;
}
.barra-inferior__boton:active .barra-inferior__icono { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .barra-inferior__icono { transition: color 0.2s ease; }
}

/* La hoja de «Más»: el resto de secciones, en una rejilla de botones grandes
   que se pulsan con el pulgar. */
.hoja-mas__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hoja-mas__boton {
  padding: 14px 12px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.hoja-mas__boton:hover { border-color: var(--acento-suave); }
.hoja-mas__boton--activo {
  border-color: var(--acento); background: var(--acento-tenue);
  color: var(--acento); font-weight: 600;
}

/* ---------- Pantallas pequeñas ----------
   El mismo programa, no una versión recortada: no se esconde ninguna sección
   ni se quita ninguna columna. Lo que cambia es cómo se coloca. */
@media (max-width: 860px) {
  /* La cabecera se parte en dos filas: arriba la marca y la sesión, y debajo
     las pestañas, que se deslizan de lado. Antes se apilaban en una columna
     altísima que empujaba el contenido media pantalla hacia abajo. */
  /* Abajo manda la barra de pestañas, que se alcanza con el pulgar. Las de
     arriba se van con ella: tener las dos sería decir dos veces lo mismo y
     robarle a la pantalla el alto que hace falta para el contenido. */
  .barra-inferior {
    display: flex; position: sticky; bottom: 0;
    margin: auto 10px 6px; padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barra-inferior::after {
    content: ""; position: absolute; left: -10px; right: -10px; bottom: -6px;
    height: calc(env(safe-area-inset-bottom, 0px) + 6px);
    background: var(--fondo); pointer-events: none; z-index: -1;
  }
  .cabecera__nav { display: none; }
  .hoja-mas__rejilla { grid-template-columns: 1fr; }

  /* La cabecera hace sitio a la onda, que la recorta por abajo. */
  .cabecera {
    position: relative;
    padding: max(env(safe-area-inset-top, 0px), 8px) 12px 34px;
    z-index: 10;
  }
  .cabecera__onda {
    display: block; position: absolute; left: 0; right: 0; bottom: -1px;
    width: 100%; height: 34px; color: var(--fondo); pointer-events: none;
  }
  /* El pie no cabe y encima competiría con la barra. */
  .pie { display: none; }
  .cabecera__fila { flex-wrap: wrap; gap: 8px; }
  .cabecera__marca { flex: 1 1 auto; min-width: 0; }
  .cabecera__logo { width: 34px; height: 34px; }
  .cabecera__nombre { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .cabecera__sesion { flex: 0 0 auto; }

  .cabecera__nav {
    order: 3; flex: 1 0 100%;
    flex-wrap: nowrap; overflow-x: auto; gap: 0;
    /* Sin barra de desplazamiento a la vista: el degradado del borde ya
       insinúa que hay más, y una barra gris sobre el bronce queda fatal. */
    scrollbar-width: none; -ms-overflow-style: none;
    margin: 2px -12px -8px; padding: 0 12px;
  }
  .cabecera__nav::-webkit-scrollbar { display: none; }
  .pestana { padding: 7px 10px; flex: 0 0 auto; }

  /* El hueco de la barra, que va fija por encima: sin esto la última fila
     de la tabla queda debajo y no hay forma de leerla. */
  .principal { padding: 18px 14px calc(78px + env(safe-area-inset-bottom, 0px)); }
  .principal__titulo { font-size: 21px; }

  .panel-bloque { padding: 14px 14px; border-radius: 12px; }

  /* Cada tabla se desliza dentro de su propio hueco. El envoltorio lo pone
     app.js al pintar cada pantalla. */
  .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
  .tabla-scroll > table.tabla { min-width: 520px; }

  /* Filtros y formularios, uno debajo de otro: tres campos en fila a lo ancho
     de un móvil no se leen ni se rellenan. */
  .fila-campos { flex-direction: column; align-items: stretch; gap: 10px; }
  .fila-campos .campo { min-width: 0; }
  .fila-campos > .boton { width: 100%; }
  /* El separador elástico que empuja los botones a la derecha no pinta nada
     cuando todo va en columna: ocuparía un hueco vacío. */
  .fila-campos > span[style*="flex:1"] { display: none; }

  .modal { padding: 16px 14px; border-radius: 12px; }
  .velo { padding: 3vh 10px; }
  /* El formulario del modal, a una columna. */
  .modal__campos { grid-template-columns: 1fr; }
  .modal__acciones { flex-direction: column-reverse; }
  .modal__acciones .boton { width: 100%; }

  /* Las tarjetas del panel, de dos en dos: de una en una obligaban a bajar
     seis pantallas para ver seis números. */
  .tarjetas { gap: 10px; }
  .tarjeta-dato { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 12px 14px; }
  .tarjeta-dato__numero { font-size: 26px; }

  .rejilla-perfil { grid-template-columns: 1fr 1fr; gap: 10px 16px; }

  .campanita__panel { width: min(300px, calc(100vw - 20px)); }
}

/* Móviles estrechos de verdad. */
@media (max-width: 420px) {
  .cabecera__nombre { display: none; }
  .tarjeta-dato { flex: 1 1 100%; }
  .rejilla-perfil { grid-template-columns: 1fr; }
}