:root {
  --fondo: #f3f4f5; --superficie: #ffffff; --texto: #1d2226; --suave: #6b7175; --borde: #e3e6e8;
  --oscuro: #1d2226; --turquesa: #00e3e9; --turquesa-texto: #007f84; --ok: #1a8a4a; --ok-fondo: #e3f5ea;
  --mal: #c0392b; --mal-fondo: #fbe7e5; --aviso: #9a6700; --aviso-fondo: #fff4d6;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14181b; --superficie: #1f2529; --texto: #e8eaeb; --suave: #9aa3a8; --borde: #333b40;
    --turquesa-texto: #5ff0f4; --ok: #5fd08d; --ok-fondo: #183526; --mal: #ff8a7d; --mal-fondo: #3d1f1c;
    --aviso: #f3c45b; --aviso-fondo: #3a2f12; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--turquesa-texto); }
h1 { font-size: 1.4rem; margin: 0 0 16px; }
h2 { font-size: 1.1rem; margin: 24px 0 10px; }

/* Cabecera y menú */
.cabecera { background: var(--oscuro); color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marca { font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--turquesa); text-decoration: none; font-size: 14px; }
.marca small { display: block; color: #aab2b6; letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 12px; }
.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.menu a { color: #dfe4e6; text-decoration: none; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.menu a.activo, .menu a:hover { background: #2f373c; color: #fff; }
.menu .sep { width: 1px; background: #3a4348; margin: 4px 6px; }
.usuario { font-size: 13px; color: #aab2b6; display: flex; gap: 10px; align-items: center; }
.usuario button { background: none; border: 1px solid #4a545a; color: #dfe4e6; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.banda-soporte { background: var(--aviso-fondo); color: var(--aviso); padding: 8px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; }

.pagina { padding: 20px 16px 40px; }
.estrecha { max-width: 560px; margin: 0 auto; }

/* Tarjetas, rejilla, botones */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.cifras { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.cifra { background: var(--fondo); border-radius: 8px; padding: 10px 12px; }
.cifra b { display: block; font-size: 1.35rem; }
.cifra span { color: var(--suave); font-size: 13px; }
.btn { display: inline-block; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); padding: 8px 14px; border-radius: 7px; font: inherit; cursor: pointer; text-decoration: none; }
.btn.primario { background: var(--turquesa); border-color: var(--turquesa); color: #062c2e; font-weight: 600; }
.btn.peligro { color: var(--mal); border-color: var(--mal); }
.btn.peque { padding: 3px 9px; font-size: 13px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0; }

/* Botón de fichar */
.fichar { text-align: center; }
.fichar .reloj { font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fichar .fecha { color: var(--suave); margin-bottom: 18px; }
.boton-fichar { width: 100%; max-width: 340px; border: 0; border-radius: 14px; padding: 22px; font-size: 1.35rem; font-weight: 700; cursor: pointer; }
.boton-fichar.entrada { background: var(--turquesa); color: #062c2e; }
.boton-fichar.salida { background: var(--oscuro); color: #fff; outline: 2px solid var(--turquesa); }
.boton-fichar:disabled { opacity: .6; cursor: wait; }
.ubicacion { font-size: 13px; color: var(--suave); margin-top: 10px; min-height: 20px; }
.marcas { list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.marcas li { background: var(--fondo); border-radius: 20px; padding: 3px 12px; font-size: 14px; }

/* Tablas */
.tabla-caja { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; font-size: 14px; }
th { color: var(--suave); font-weight: 600; font-size: 13px; }
td.ancho { white-space: normal; min-width: 180px; }
tr.finde td, tr.festivo td { color: var(--suave); background: var(--fondo); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Etiquetas y mensajes */
.etq { display: inline-block; border-radius: 12px; padding: 1px 9px; font-size: 12.5px; background: var(--fondo); color: var(--suave); }
.etq.ok { background: var(--ok-fondo); color: var(--ok); }
.etq.mal { background: var(--mal-fondo); color: var(--mal); }
.etq.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.mensajes { list-style: none; padding: 0; margin: 0 0 16px; }
.mensajes li { padding: 10px 14px; border-radius: 8px; margin-bottom: 8px; background: var(--ok-fondo); color: var(--ok); }
.mensajes li.error { background: var(--mal-fondo); color: var(--mal); }
.mensajes li.info { background: var(--aviso-fondo); color: var(--aviso); }
.suave { color: var(--suave); }

/* Formularios */
.form p { margin: 0 0 12px; }
.form label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 3px; }
.form input:not([type=checkbox]), .form select, .form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 7px; background: var(--superficie); color: var(--texto); font: inherit; }
.form input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; }
.form .helptext { display: block; font-size: 12px; color: var(--suave); margin-top: 2px; }
.form ul.errorlist { list-style: none; padding: 0; margin: 0 0 4px; color: var(--mal); font-size: 13px; }
.form-dos { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.en-linea { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.en-linea input, .en-linea select { padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--texto); font: inherit; }

/* Entrar */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.acceso .tarjeta { width: 100%; max-width: 380px; }
.acceso .logo { text-align: center; margin-bottom: 18px; }
.acceso .logo b { color: var(--turquesa-texto); letter-spacing: 2px; text-transform: uppercase; }

@media (max-width: 640px) {
  .cabecera { padding: 8px 12px; }
  .menu { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .menu a { white-space: nowrap; }
}

/* Impresión del registro mensual */
@media print {
  .cabecera, .banda-soporte, .no-imprimir, .mensajes { display: none !important; }
  body { background: #fff; color: #000; }
  .tarjeta { border: 0; padding: 0; }
  th, td { font-size: 11px; padding: 3px 6px; }
}

/* Logos (Easy Fichajes y el del cliente) */
.logo-producto { height: 30px; display: block; }
.empresa-cab { display: flex; align-items: center; gap: 8px; color: #dfe4e6; font-size: 13px; }
.logo-cliente { height: 28px; max-width: 110px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px 5px; }
.logo-cliente-grande { max-height: 70px; max-width: 220px; object-fit: contain; }
.logo-acceso { background: var(--oscuro); border-radius: 10px; padding: 14px; margin-bottom: 8px; }
.logo-acceso img { height: 40px; max-width: 100%; }
.contrato h1 { font-size: 1.3rem; } .contrato h2 { color: var(--turquesa-texto); font-size: 1.02rem; }
.contrato .ref { color: var(--suave); font-size: 13px; }
.contrato table.firma td { border: 1px solid var(--borde); padding: 6px 8px; white-space: normal; }
/* Con muchas opciones el menú baja a su propia fila (marca y usuario arriba) */
@media (max-width: 1250px) {
  .cabecera .usuario { margin-left: auto; }
  .menu { order: 3; flex-basis: 100%; }
}
/* Móvil: una sola línea arriba (logo, logo o nombre de la empresa y «Salir») */
@media (max-width: 640px) {
  .logo-producto { height: 24px; }
  .usuario > span { display: none; }
  .empresa-cab img + span { display: none; }
  .empresa-cab span { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cabecera { gap: 10px; }
}
@media (max-width: 640px) { .cifras { grid-template-columns: repeat(2, 1fr); } }

/* Capturas en los manuales */
.contrato .captura { text-align: center; margin: 14px 0 4px; }
.contrato .cap-movil { width: 100%; max-width: 280px; height: auto; border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.contrato .cap-pc { width: 100%; max-width: 900px; height: auto; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.contrato .pie-cap { text-align: center; color: var(--suave); font-size: 13px; font-style: italic; margin: 0 0 18px; }

.aviso-ubicacion { text-align: left; background: var(--aviso-fondo); border-radius: 10px; padding: 16px; }

.selector-empresa select { background: #2f373c; color: #fff; border: 1px solid #4a545a; border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 13px; max-width: 200px; }