/* EL MÓVIL DEL EMPLEADO (control de presencia, fase 6, tarea 4, 9-11-2026): su hoja, pequeña y aparte. El
   móvil no carga nada del ERP; los colores y la letra son los del tema de partida del ERP («alzafrut»,
   web/estatico/alzafrut.css), y las medidas, las de los bocetos aprobados («movil-b-con-ausencia» y
   «movil-emparejar-horas-resumenes»). Cada color, en su token: ninguno escrito a mano más abajo. */

:root {
  --fondo: #f6f5f3;
  --superficie: #ffffff;
  --borde: #e0dcd6;
  --borde-suave: #f0ece6;
  --texto: #2a2521;
  --texto-suave: #6d655d;
  --texto-tenue: #8a8279;
  --texto-claro: #ffffff;
  --naranja: #f29400;
  --naranja-sombra: #8c5600;
  --naranja-texto: #b06c00;
  --verde: #97be0b;
  --verde-sombra: #5c7300;
  --verde-texto: #5c7300;
  --rojo-oscuro: #b00013;
  --rojo: #e20018;
  --fondo-dentro: #f2f8e4;
  --fondo-fuera: #fdecee;
  --fondo-ausente: #fff4e0;
  --fondo-boton: #fce7cb;
  --borde-boton: #e8c48e;
  --fondo-otra: #faf7f2;
  --franja-vacia: #f0ece6;
  --velo-claro: rgba(255, 255, 255, .22);
  --franja-amarillo: #f5c400;
  --franja-negro: #1f1f1f;
  --sombra-foco: rgba(242, 148, 0, .45);
  /* «Vacaciones», con más color (10-11-2026): el fondo crema, para que los meses en blanco destaquen, y su sombra. */
  --fondo-calendario: #fcefdc;
  --sombra-tarjeta: 0 1px 3px rgba(140, 86, 0, .16);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.35;
}

/* En el portátil, la franja de obras: como el ERP. */
.franja-desarrollo {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--franja-amarillo) 0 14px, var(--franja-negro) 14px 28px);
  color: var(--texto-claro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-shadow: 0 0 3px var(--franja-negro);
}

/* La barra, clara y con la raya naranja debajo, como la cabecera del ERP: lleva el logotipo de la empresa
   (9-11-2026), y sobre el naranja no se vería («alza» es de ese naranja). */
.barra {
  background: var(--superficie);
  color: var(--texto);
  border-bottom: 3px solid var(--naranja);
  padding: 9px 16px;
  padding-top: max(9px, env(safe-area-inset-top));
  font-weight: 600;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.barra .logotipo { display: block; height: 28px; width: auto; }
/* Sin logotipo, el nombre, con el mismo alto: la barra no da un salto de una pantalla a otra. */
.barra > span:first-child { line-height: 28px; }
.barra .derecha { display: flex; align-items: center; gap: 10px; }
.barra .ayuda {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--naranja);
  color: var(--naranja-texto);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

.cuerpo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.hueco { flex: 1; }

p { margin: 0; }
.titulo { font-size: 20px; font-weight: 700; margin: 0; }
.titulo.bien { color: var(--verde-texto); }
.seccion { font-size: 13px; color: var(--texto-suave); }
.seccion.centrada { text-align: center; }
/* LA BIENVENIDA DE «LISTO» (10-11-2026): «BIENVENIDO/A» y el logotipo de la empresa en grande, centrados en el
   hueco entre la barra y el acceso directo. */
.bienvenida { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.bienvenida .bienvenido { font-size: 28px; font-weight: 800; letter-spacing: 4px; color: var(--naranja-texto); }
.bienvenida .logotipo-grande { display: block; width: min(80%, 320px); height: auto; margin: 4px 0 10px; }
.a-los-lados { display: flex; justify-content: space-between; gap: 10px; }

/* Cómo está: dentro (verde), fuera (rojo) o fuera por una ausencia (naranja). */
.estado { font-size: 14px; padding: 8px 12px; border-radius: 8px; background: var(--fondo-fuera); color: var(--rojo-oscuro); }
.estado.dentro { background: var(--fondo-dentro); color: var(--verde-texto); }
.estado.ausente { background: var(--fondo-ausente); color: var(--naranja-texto); }

.franja { height: 10px; border-radius: 5px; background: var(--franja-vacia); overflow: hidden; }
.franja span { display: block; height: 100%; width: var(--hecho, 0%); background: var(--verde); }

.reloj { text-align: center; font-variant-numeric: tabular-nums; }
.reloj .digital { display: block; font-size: 40px; font-weight: 700; line-height: 1.1; }
.reloj small { display: block; font-size: 12px; color: var(--texto-suave); }

.lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borde);
         border-radius: 10px; font-size: 14px; }
.lista li { padding: 8px 12px; border-bottom: 1px solid var(--borde-suave); display: flex; justify-content: space-between;
            gap: 10px; }
.lista li:last-child { border-bottom: none; }
.lista .h { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* Un valor largo que no puede ir en una línea (la versión de «salud», 9-11-2026: en el móvil se salía de su caja). */
.lista .h.largo { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.ayuda-corta li { display: block; }

/* El botón grande: verde (entrar, la vuelta) o naranja (salir). Con su sombra de tecla, como el boceto. */
form { margin: 0; }
.boton-grande {
  display: block;
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 22px 0;
  background: var(--verde);
  box-shadow: 0 4px 0 var(--verde-sombra);
  color: var(--texto-claro);
  font: inherit;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* LO DE FICHAR, SIEMPRE A LA VISTA (probado a mano el 9-11-2026): con muchos fichajes —un turno partido con
   ausencias— o en un móvil bajo con la barra del navegador, la lista sube por detrás y el botón no se va
   debajo. Ocupa también el margen de abajo del cuerpo, para que no asome nada por debajo del botón. */
.abajo {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 -16px calc(-1 * max(16px, env(safe-area-inset-bottom)));
  padding: 6px 16px max(16px, env(safe-area-inset-bottom));
  background: var(--fondo);
}
.boton-grande.salir { background: var(--naranja); box-shadow: 0 4px 0 var(--naranja-sombra); }
.boton-grande:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--verde-sombra); }
.boton-grande.salir:active { box-shadow: 0 1px 0 var(--naranja-sombra); }
.boton-grande:disabled { opacity: .6; transform: none; cursor: default; }

.boton-segundo {
  display: block;
  width: 100%;
  border: 1px solid var(--borde-boton);
  border-radius: 12px;
  padding: 14px 0;
  background: var(--fondo-boton);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* FUERA DE LA OFICINA (segunda etapa, tarea 4, 10-11-2026). Sin la marca «Ficha desde fuera», «Salir por una
   ausencia…» se ve apagado, como el botón grande, y debajo el porqué. Con ella, la primera vez, el aviso de la
   ubicación, en el tono de «ojo» (naranja), con su raya como los demás avisos. */
.boton-segundo.apagado { opacity: .6; cursor: default; }
.no-puede { margin: 0; font-size: 14px; color: var(--rojo-oscuro); text-align: center; }
.aviso-ubicacion { border-radius: 4px 8px 8px 4px; padding: 10px 12px; border-left: 4px solid var(--naranja-texto);
                   background: var(--fondo-ausente); color: var(--texto); font-size: 14px; }
.aviso-ubicacion p { margin: 0; }
.aviso-ubicacion p + p { margin-top: 6px; }
.aviso-ubicacion .titulo-aviso { font-size: 16px; font-weight: 700; color: var(--naranja-texto); }

/* «MIS HORAS» (tarea 5, el boceto): la semana con ‹ ›, cada día con lo trabajado a la derecha y debajo sus
   fichajes, sus ausencias por horas y lo que no cuadra; el total; y abajo, lo que le queda. */
.selector { display: flex; justify-content: space-between; align-items: center; background: var(--superficie);
            border: 1px solid var(--borde); border-radius: 10px; font-size: 15px; font-weight: 600; }
.selector > * { min-width: 44px; padding: 9px 0; text-align: center; }
.selector a, .selector .apagado { font-size: 24px; line-height: 24px; font-weight: 400; text-decoration: none; }
.selector a { color: var(--naranja-texto); }
.selector .apagado { color: var(--borde); }
.semana { overflow: hidden; }
.semana li { display: block; }
.semana .dia { color: var(--texto-suave); white-space: nowrap; }
.semana .fichajes, .semana .por-horas, .semana .aviso-del-dia { font-size: 13px; font-variant-numeric: tabular-nums; }
.semana .fichajes { color: var(--texto-suave); }
.semana .por-horas { color: var(--naranja-texto); }
.semana .aviso-del-dia { color: var(--rojo-oscuro); }
.semana li.hoy { background: var(--fondo-dentro); }
.semana li.por-venir .h { color: var(--texto-suave); }
.semana li.total { font-weight: 600; }
.saldos { display: flex; gap: 8px; }
.saldos div { flex: 1; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px;
              padding: 8px 6px; text-align: center; font-size: 12px; color: var(--texto-suave); }
.saldos b { display: block; font-size: 18px; color: var(--texto); font-variant-numeric: tabular-nums; }
.saldos .negativo b { color: var(--rojo-oscuro); }
.saldos .destaca b { color: var(--verde-texto); }

/* «VACACIONES» (10-11-2026; Alberto: «Bonito y elegante»): el año con ‹ ›, lo que le queda, la leyenda y los doce
   meses en dos columnas. Las vacaciones, una banda verde de punta a punta de cada trozo de semana; los festivos, en
   rojo suave; hoy, con su anillo naranja; antes del alta, apagado. Cada día mide lo mismo (22 px de alto, con la
   letra de 12) en las dos columnas, y un toque en uno marcado dice qué es en el aviso oscuro de abajo. */
body.con-calendario { background: var(--fondo-calendario); }
/* El año, en el naranja de la casa con la letra blanca; la flecha que no lleva a ningún sitio, desvaída. */
.selector.corporativo { background: var(--naranja); border-color: var(--naranja); color: var(--texto-claro);
                        box-shadow: var(--sombra-tarjeta); }
.selector.corporativo a { color: var(--texto-claro); }
.selector.corporativo .apagado { color: var(--texto-claro); opacity: .4; }
.con-calendario .saldos div { box-shadow: var(--sombra-tarjeta); }
.saldos div.destaca { background: var(--fondo-dentro); border-color: var(--verde); color: var(--verde-texto); }
.leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 12px;
           color: var(--texto-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { display: inline-block; width: 16px; height: 12px; border-radius: 6px; }
.muestra.vacaciones { background: var(--verde); }
.muestra.festivo { background: var(--fondo-fuera); box-shadow: inset 0 0 0 1px var(--rojo-oscuro); }
.muestra.hoy { box-shadow: inset 0 0 0 2px var(--naranja); }
.muestra.fuera { background: var(--franja-vacia); }
.anual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mes-anual { min-width: 0; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde);
             border-radius: 10px; padding: 0 6px 6px; box-shadow: var(--sombra-tarjeta); }
/* Cada mes, con su banda; y el de hoy, en naranja con la letra blanca, como «Cumpleaños» del ERP. */
.mes-anual h2 { margin: 0 -6px 4px; padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 18px;
                letter-spacing: .06em; text-transform: uppercase; background: var(--fondo-boton);
                border-bottom: 1px solid var(--borde-boton); color: var(--naranja-texto); }
.mes-anual.actual { border-color: var(--naranja); box-shadow: 0 0 0 1px var(--naranja), var(--sombra-tarjeta); }
.mes-anual.actual h2 { background: var(--naranja); border-bottom-color: var(--naranja); color: var(--texto-claro); }
.mes-anual table.dias-del-mes { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 2px; }
/* Los días de la semana, en negrita: de lunes a viernes en naranja, y el sábado y el domingo en rojo. */
.mes-anual th { padding: 0 0 2px; font-size: 10px; font-weight: 700; line-height: 14px; color: var(--naranja-texto); }
.mes-anual th.finde { color: var(--rojo-oscuro); }
.mes-anual td { padding: 0; text-align: center; }
.mes-anual td > * { position: relative; display: block; width: 100%; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 11px;
                    background: none; color: var(--texto); font: inherit; font-size: 12px; line-height: 22px;
                    font-variant-numeric: tabular-nums; }
.mes-anual td.vacaciones > * { background: var(--verde); font-weight: 700; border-radius: 0; }
.mes-anual td.vacaciones.empieza > * { border-top-left-radius: 11px; border-bottom-left-radius: 11px; }
.mes-anual td.vacaciones.acaba > * { border-top-right-radius: 11px; border-bottom-right-radius: 11px; }
.mes-anual td.festivo > * { background: var(--fondo-fuera); color: var(--rojo-oscuro); font-weight: 700; }
.mes-anual td.fuera > * { color: var(--texto-tenue); }
/* Hoy y el día tocado llevan su anillo redondo encima, sin cambiar la forma del día: dentro de la banda de las
   vacaciones, el día es recto, y un anillo en su borde salía cuadrado. */
.mes-anual td.hoy > *::after, .mes-anual button.elegido::after { content: ""; position: absolute; inset: 0;
                                                                 border-radius: 11px; pointer-events: none;
                                                                 box-shadow: inset 0 0 0 2px var(--naranja); }
.mes-anual button.elegido::after { box-shadow: inset 0 0 0 2px var(--texto); }
.mes-anual button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.que-es { position: sticky; bottom: 0; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--texto);
          color: var(--texto-claro); font-size: 14px; text-align: center; cursor: pointer; }
.con-pestanas .que-es { bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 8px); }

/* «¿Por qué sales?»: cada ausencia, un botón; «Otra ausencia», más apagada. */
.ausencia {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;   /* el mismo alto en todas, también «Otra ausencia», con su letra menor */
  text-align: left;
  cursor: pointer;
}
.ausencia small { font-size: 12px; font-weight: 400; color: var(--naranja-texto); white-space: nowrap; }
.ausencia.otra { background: var(--fondo-otra); font-weight: 400; color: var(--texto-suave); font-size: 15px; }
.ausencia:disabled { opacity: .6; }
.volver { display: block; text-align: center; font-size: 15px; color: var(--texto-suave); padding: 10px; }

.aviso { border-radius: 4px 8px 8px 4px; padding: 10px 12px; font-size: 14px; border-left: 4px solid var(--rojo-oscuro);
         background: var(--fondo-fuera); color: var(--rojo-oscuro); }
.aviso.bien { border-left-color: var(--verde-texto); background: var(--fondo-dentro); color: var(--verde-texto); }

/* «RESÚMENES» (tarea 6, el boceto): una tarjeta por mes, con su marca —pendiente, conforme o no—, lo trabajado,
   el PDF y, si falta contestar, «Recibido y conforme» y «No conforme». */
.mes { background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 12px;
       display: flex; flex-direction: column; gap: 6px; }
.mes .cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; }
.marca { font-size: 12px; font-weight: 400; padding: 2px 8px; border-radius: 9px; white-space: nowrap;
         font-variant-numeric: tabular-nums; }
.marca.pend { background: var(--fondo-ausente); color: var(--naranja-texto); }
.marca.ok { background: var(--fondo-dentro); color: var(--verde-texto); }
.marca.no { background: var(--fondo-fuera); color: var(--rojo-oscuro); }
.mes .motivo { color: var(--texto); }
.mes .pdf { color: var(--naranja-texto); font-size: 14px; text-decoration: none; padding: 4px 0; }
/* Los dos, del mismo ancho y con el texto centrado; en un móvil estrecho, «Recibido y conforme» baja a dos
   renglones y «No conforme» se queda en medio. */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.duo form { display: flex; }
.duo .si, .duo .no { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; border: none;
                     border-radius: 10px; padding: 12px 6px; font: inherit; font-size: 14px; font-weight: 600;
                     line-height: 20px; color: var(--texto-claro); text-align: center; text-decoration: none;
                     cursor: pointer; }
.duo .si { background: var(--verde); box-shadow: 0 3px 0 var(--verde-sombra); }
.duo .no { background: var(--rojo); box-shadow: 0 3px 0 var(--rojo-oscuro); }
.duo .si:disabled { opacity: .6; }
form.motivo { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.caja-texto { width: 100%; border: 2px solid var(--borde); border-radius: 10px; background: var(--superficie);
              color: var(--texto); font: inherit; font-size: 16px; padding: 10px; resize: vertical; }
.caja-texto:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px var(--sombra-foco); }
.boton-grande.rojo { background: var(--rojo); box-shadow: 0 4px 0 var(--rojo-oscuro); }
.boton-grande.rojo:active { box-shadow: 0 1px 0 var(--rojo-oscuro); }

/* Emparejar: el código, grande y espaciado, como en la ventana de RR.HH. */
.codigo {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.codigo:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px var(--sombra-foco); }
/* El ejemplo, claro y sin negrita: gris y en negrita parecía un código ya escrito (probado a mano, 9-11-2026). */
.codigo::placeholder { color: var(--texto-tenue); font-weight: 400; opacity: 1; }

/* Tras fichar: la pantalla entera, verde o naranja. */
body.fichado.verde { background: var(--verde); }
body.fichado.naranja { background: var(--naranja); }
.confirma {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  color: var(--texto-claro);
}
.confirma .tick { font-size: 64px; line-height: 1; }
.confirma .que { font-size: 24px; font-weight: 700; }
.confirma .hora { font-size: 48px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.confirma .dia, .confirma .cual { font-size: 16px; }
.confirma .aviso-fichado { background: var(--velo-claro); border-radius: 10px; padding: 10px 12px; font-size: 15px;
                           margin-top: 6px; max-width: 360px; }
.confirma .volver { color: var(--texto-claro); margin-top: 10px; }

/* Las pestañas de abajo («Hoy», «Mis horas»; «Resúmenes», la tarea 6), siempre a la vista; y el botón grande
   de «Hoy», pegado encima de ellas. Su alto, en `--alto-pestanas`: 1 + 3 + 11 + 18 + 12. */
:root { --alto-pestanas: 45px; }
.pestanas { position: sticky; bottom: 0; display: flex; border-top: 1px solid var(--borde);
            background: var(--superficie); padding-bottom: env(safe-area-inset-bottom); }
.pestanas a { flex: 1; text-align: center; padding: 11px 0 12px; font-size: 13px; line-height: 18px;
              color: var(--texto-suave); text-decoration: none; border-top: 3px solid transparent; }
.con-pestanas .abajo { bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom)); }
.pestanas a.activa { color: var(--naranja-texto); font-weight: 600; border-top-color: var(--naranja); }

a:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sombra-foco); }