:root {
  /* Colores de Es Molinot (esmolinot.com): verde oscuro, oliva, marrón del logo y fondo piedra. */
  --fondo: #f3f4f2; --tarjeta: #fff; --tinta: #222; --suave: #5b6458; --borde: #cfd6cf;
  --marca: #2f3f2e; --marca-2: #48603f; --marca-claro: #e4ebdb; --acento: #8a5a2b; --acento-f: #f3e9de;
  --ok: #4b6a2c; --ok-f: #e6eedb; --mal: #a3322a; --mal-f: #f8e4e1; --ojo: #8a5a2b; --ojo-f: #f6ecdc; --info: #2f5d7c; --info-f: #e3edf3; --lila: #6b4a7a; --lila-f: #efe7f2;
  --r: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.9rem; margin: 0 0 .25rem; color: var(--marca); }
h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.25rem; margin: 0 0 .75rem; color: var(--marca); }
h3 { font-size: .95rem; margin: 1rem 0 .5rem; }
a { color: var(--acento); }
.contador { background: #c8893f; color: #fff; border-radius: 99px; padding: 0 .4rem; font-size: .75rem; font-weight: 700; margin-left: .15rem; }
.enlace { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; font: inherit; cursor: pointer; min-height: 0; }
main { max-width: 1040px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
main.ancho { max-width: 1320px; }
.cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sub { color: var(--suave); margin: 0; font-size: .92rem; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r); padding: 1.1rem; margin-bottom: 1rem; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: 1rem; }
.rejilla > .tarjeta { margin: 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .75rem; }
.cifra b { display: block; font-size: 1.55rem; line-height: 1.15; letter-spacing: -.02em; }
.cifra span { color: var(--suave); font-size: .82rem; }
.bien { color: var(--ok); } .peligro { color: var(--mal); } .atento { color: var(--ojo); }
.aviso { padding: .7rem .9rem; border-radius: 10px; margin: 0 0 1rem; font-size: .95rem; }
.aviso.ok { background: var(--ok-f); color: var(--ok); } .aviso.mal { background: var(--mal-f); color: var(--mal); }
.aviso.ojo { background: var(--ojo-f); color: #5c3a17; } .aviso.info { background: var(--info-f); color: var(--info); }
label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .75rem; }
label small, .ayuda { display: block; font-weight: 400; color: var(--suave); font-size: .8rem; margin-top: .2rem; }
input:not([type=checkbox]):not([type=radio]), select, textarea { width: 100%; font: inherit; font-weight: 400; padding: .55rem .65rem; border: 1px solid #b9b8ad; border-radius: 8px; background: #fff; color: inherit; margin-top: .2rem; min-height: 42px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #8a5a2b66; outline-offset: 1px; }
.campos { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
fieldset { border: 1px solid var(--borde); border-radius: 10px; margin: 0 0 1rem; padding: .9rem; }
legend { font-weight: 700; padding: 0 .35rem; }
.radios { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.radios label { flex: 1 1 140px; margin: 0; border: 1px solid #b9b8ad; border-radius: 8px; padding: .6rem .7rem; font-weight: 500; cursor: pointer; display: flex; gap: .5rem; align-items: center; }
.radios label:has(input:checked) { border-color: var(--marca-2); background: var(--marca-claro); }
button, .boton { display: inline-flex; align-items: center; justify-content: center; font: inherit; font-weight: 600; border: 1px solid var(--marca); background: var(--marca); color: #fff; border-radius: 8px; padding: .55rem .95rem; cursor: pointer; text-decoration: none; min-height: 42px; }
button:hover, .boton:hover { background: var(--marca-2); }
.sec { background: #fff; color: var(--marca); } .sec:hover { background: var(--marca-claro); }
.rojo { background: #fff; border-color: var(--mal); color: var(--mal); } .rojo:hover { background: var(--mal-f); }
.chico { padding: .25rem .55rem; font-size: .84rem; min-height: 32px; }
.fila { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.reloj { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.03em; line-height: 1.1; }
.grande { font-size: 1.1rem; padding: .8rem 1.3rem; min-height: 52px; }
.tabla-cont { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { text-align: left; color: var(--suave); font-weight: 600; font-size: .8rem; padding: .4rem .55rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: .55rem; border-bottom: 1px solid #ecebe3; vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.chapa { display: inline-block; font-size: .76rem; font-weight: 600; border-radius: 99px; padding: .08rem .55rem; background: #ecebe3; color: #3f4845; white-space: nowrap; }
.chapa.ok { background: var(--ok-f); color: var(--ok); } .chapa.mal { background: var(--mal-f); color: var(--mal); }
.chapa.ojo { background: var(--ojo-f); color: var(--acento); } .chapa.info { background: var(--info-f); color: var(--info); } .chapa.lila { background: var(--lila-f); color: var(--lila); }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: .55rem 0; border-bottom: 1px solid #ecebe3; display: flex; justify-content: space-between; gap: .75rem; align-items: center; flex-wrap: wrap; }
.lista li:last-child { border-bottom: 0; }
.vacio { color: var(--suave); padding: .5rem 0; margin: 0; }
.pestanas { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pestanas a { padding: .5rem .8rem; text-decoration: none; color: var(--suave); border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 500; }
.pestanas a.activo { color: var(--marca); border-color: var(--marca); font-weight: 700; }
.navmes { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.navmes a { text-decoration: none; border: 1px solid var(--borde); background: #fff; border-radius: 8px; padding: .25rem .65rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal .cab { font-size: .78rem; color: var(--suave); text-align: center; font-weight: 600; }
.dia { min-height: 72px; background: #fff; border: 1px solid #ecebe3; border-radius: 8px; padding: .3rem .4rem; font-size: .76rem; text-decoration: none; color: inherit; display: block; overflow: hidden; }
.dia b { font-size: .88rem; display: block; }
.dia.fuera { visibility: hidden; }
.dia.hoy { outline: 2px solid var(--marca); }
.e-trabajado { background: var(--ok-f); } .e-parcial { background: var(--ojo-f); } .e-sin_registrar { background: var(--mal-f); }
.e-festivo { background: var(--info-f); } .e-ausencia, .e-ausencia_parcial { background: var(--lila-f); } .e-ausencia_pendiente { background: repeating-linear-gradient(45deg, var(--lila-f), var(--lila-f) 6px, #fff 6px, #fff 12px); }
.e-no_laborable { background: #f0efe8; color: var(--suave); }
.leyenda { display: flex; gap: .6rem; flex-wrap: wrap; font-size: .78rem; margin-top: .75rem; color: var(--suave); }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .25rem; vertical-align: -1px; border: 1px solid #0001; }
.cuad { min-width: 880px; table-layout: fixed; }
.cuad th:first-child, .cuad td:first-child { width: 170px; position: sticky; left: 0; background: #fff; z-index: 1; }
.cuad td { padding: .35rem; }
.cuad select { font-size: .78rem; min-height: 30px; padding: .1rem .2rem; margin-top: .2rem; color: var(--suave); }
.turno { display: flex; justify-content: space-between; gap: .2rem; align-items: center; background: var(--marca-claro); border-radius: 6px; padding: .15rem .35rem; font-size: .76rem; margin-bottom: .2rem; }
.turno.borrador { background: #fff; border: 1px dashed var(--marca-2); }
.turno.alerta { background: var(--mal-f); }
.turno button { background: none; border: 0; color: var(--suave); padding: 0 .15rem; min-height: 0; font-size: .9rem; }
.turno button:hover { background: none; color: var(--mal); }
.celda-aus { background: var(--lila-f); color: var(--lila); border-radius: 6px; font-size: .76rem; padding: .2rem .35rem; }
.pin { max-width: 340px; margin: 1.5rem auto; text-align: center; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
.teclado button { font-size: 1.5rem; min-height: 68px; background: #fff; color: var(--tinta); border-color: var(--borde); }
.teclado button:hover { background: var(--marca-claro); }
.pin-puntos { font-size: 2rem; letter-spacing: .5rem; min-height: 3rem; }
.acceso { max-width: 400px; margin: 3rem auto; }
.oculto { display: none !important; }
.informe { background: #fff; padding: 1.5rem; border: 1px solid var(--borde); border-radius: var(--r); }
.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; }
.firmas div { border-top: 1px solid #000; padding-top: .4rem; font-size: .85rem; }
.marca { display: inline-flex; background: #fff; border-radius: 8px; padding: .3rem .55rem; text-decoration: none; }
.marca img { display: block; height: 30px; width: auto; }
.logo-acceso { display: block; width: 210px; max-width: 70%; height: auto; margin: 0 auto 1.25rem; }
/* Panel de gestión */
.lateral { position: fixed; inset: 0 auto 0 0; width: 228px; background: var(--marca); color: #fff; overflow-y: auto; padding: 1rem .75rem; z-index: 5; }
.lateral a { color: #fff; text-decoration: none; }
.lateral-cab { display: flex; justify-content: space-between; align-items: center; padding: 0 .5rem .75rem; }
.menu-boton { display: none; color: #fff; }
.grupo { margin-bottom: 1rem; }
.grupo h2 { font-family: inherit; color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .65; margin: 0 .5rem .25rem; font-weight: 600; }
.grupo a { display: flex; justify-content: space-between; align-items: center; padding: .4rem .55rem; border-radius: 8px; font-size: .92rem; }
.grupo a:hover { background: #ffffff22; }
.grupo a.activo { background: #fff; color: var(--marca); font-weight: 600; }
.cuenta { border-top: 1px solid #ffffff33; padding-top: .75rem; font-size: .88rem; }
.cuenta .enlace { padding: .3rem .55rem; color: #fff; }
.panel-cuerpo { margin-left: 228px; }
/* App de empleados */
.empleado { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.empleado main { max-width: 640px; }
.app-cab { background: var(--tarjeta); border-bottom: 3px solid var(--marca); display: flex; justify-content: space-between; align-items: center; padding: .55rem 1rem; position: sticky; top: 0; z-index: 5; }
.campana { color: var(--marca); position: relative; display: flex; padding: .3rem; text-decoration: none; }
.campana .contador { position: absolute; top: -3px; right: -5px; margin: 0; }
.avatar { background: var(--marca); color: #fff; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; text-decoration: none; margin-left: .35rem; }
.app-tabs { position: fixed; inset: auto 0 0 0; background: #fff; border-top: 1px solid var(--borde); display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
.app-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .5rem 0 .45rem; font-size: .7rem; font-weight: 500; color: var(--suave); text-decoration: none; }
.app-tabs a.activo { color: var(--marca); font-weight: 700; }
.empleado .grande { width: 100%; }
.empleado .fila > form { flex: 1 1 100%; }
.turno-dia { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .65rem 0; border-bottom: 1px solid #ecebe3; }
.turno-dia:last-child { border-bottom: 0; }
.turno-dia.hoy b:first-child { color: var(--marca-2); }
.aviso-fila { display: block; padding: .65rem 0; border-bottom: 1px solid #ecebe3; text-decoration: none; color: inherit; }
.aviso-fila:last-child { border-bottom: 0; }
.aviso-fila.nuevo { font-weight: 600; }
.aviso-fila small { display: block; color: var(--suave); font-weight: 400; }
.cal-horario .dia { min-height: 78px; line-height: 1.2; }
.cal-horario .hora { display: block; font-size: .74rem; font-variant-numeric: tabular-nums; }
.dia.elegido { box-shadow: inset 0 0 0 2px var(--marca-2); }
.h-trabaja { background: var(--marca-claro); color: var(--marca); }
.h-libre { background: #f0efe8; color: var(--suave); }
.h-festivo { background: #dc8f78; color: #45190e; }
.h-ausente { background: #ead2b4; color: #5c3a17; }
.h-vacaciones { background: #b9a2cc; color: #33204a; }
.h-fuera-temporada { background: repeating-linear-gradient(45deg, #f0efe8, #f0efe8 5px, #fff 5px, #fff 10px); color: var(--suave); }
.reloj-dia { font-size: 1.35rem; font-weight: 700; margin: 0 0 .25rem; font-variant-numeric: tabular-nums; }
.segmentos { display: inline-flex; background: #e7e6dd; border-radius: 8px; padding: 2px; }
.segmentos a { padding: .3rem .75rem; border-radius: 6px; text-decoration: none; color: var(--suave); font-size: .88rem; font-weight: 500; }
.segmentos a.activo { background: #fff; color: var(--marca); font-weight: 700; }
.matriz { min-width: 760px; table-layout: fixed; }
.matriz th, .matriz td { text-align: center; padding: .25rem; }
.matriz th:first-child, .matriz td:first-child { width: 165px; text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; padding-left: .25rem; }
.matriz th:last-child, .matriz td:last-child { width: 72px; text-align: right; white-space: nowrap; }
.matriz th.es-hoy { color: var(--marca); font-weight: 800; }
.matriz td.es-hoy { background: #f5fbf9; }
.matriz th.es-festivo { color: var(--info); }
.m-turno, .m-otro { display: block; border-radius: 6px; padding: .3rem .1rem; font-size: .76rem; line-height: 1.25; text-decoration: none; font-variant-numeric: tabular-nums; margin-bottom: 2px; color: inherit; min-height: 2.3rem; }
.m-otro { font-size: .72rem; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.f-manana { background: #b9cc90; color: #2c3a1b; }
.f-tarde { background: #ecc96b; color: #4a3608; }
.f-noche { background: #93a9c0; color: #1c2f45; }
.f-flexible { background: var(--marca-claro); color: var(--marca); }
.m-pend { display: inline-block; background: var(--ojo-f); color: #6d4900; border-radius: 99px; width: 1.1rem; font-size: .7rem; font-weight: 700; }
.m-pie td { font-size: .78rem; color: var(--suave); font-weight: 600; background: #faf9f5; }
.matriz.compacta { min-width: 960px; }
.matriz.compacta th:first-child, .matriz.compacta td:first-child { width: 150px; }
.matriz.compacta td, .matriz.compacta th { padding: .15rem 1px; font-size: .72rem; }
.matriz.compacta .m-turno, .matriz.compacta .m-otro { min-height: 1.7rem; padding: .25rem 0; font-size: .7rem; border-radius: 4px; }
.dia-fila { display: grid; grid-template-columns: 70px repeat(5, minmax(0, 1fr)); gap: .5rem; align-items: end; padding: .4rem 0; border-bottom: 1px solid #ecebe3; }
.dia-fila label { margin: 0; font-weight: 500; font-size: .76rem; color: var(--suave); }
.dia-fila input { min-height: 36px; padding: .3rem .4rem; font-size: .88rem; }
.dia-activo { display: flex; gap: .35rem; align-items: center; font-weight: 700 !important; color: var(--tinta) !important; font-size: .9rem !important; padding-bottom: .5rem; }
@media (max-width: 720px) {
  .dia-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dia-activo { grid-column: 1 / -1; padding-bottom: 0; }
}
@media (max-width: 900px) {
  .lateral { position: sticky; inset: 0 0 auto 0; width: auto; padding: .55rem 1rem; }
  .lateral-cab { padding: 0; }
  .menu-boton { display: block; min-height: 0; }
  .lateral-menu { display: none; padding-top: .75rem; }
  .lateral.abierto .lateral-menu { display: block; }
  .panel-cuerpo { margin-left: 0; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.4rem; }
  .dia { min-height: 54px; padding: .2rem; font-size: .66rem; }
  .dia span.det { display: none; }
  .cal-horario .dia { min-height: 66px; padding: .2rem .15rem; }
  .cal-horario .hora { font-size: .66rem; letter-spacing: -.02em; }
  .reloj { font-size: 2.2rem; }
}
@media print {
  .lateral, .app-cab, .app-tabs, .no-imprimir { display: none !important; }
  .panel-cuerpo { margin: 0 !important; }
  body { padding: 0 !important; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .informe { border: 0; padding: 0; }
}