/* ===========================================================================
   ba-rro · control de presencia
   Blanco y negro. Tipografía Archivo (autoalojada) con respaldo Helvetica.
   Mobile-first. El color no codifica información: el estado se distingue por
   relleno / contorno / punto lleno-hueco.
   ========================================================================= */

/* --- Fuente autoalojada (no depende de ningún CDN) --- */
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 400;
    font-display: swap; src: url('fuentes/archivo-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 500;
    font-display: swap; src: url('fuentes/archivo-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 600;
    font-display: swap; src: url('fuentes/archivo-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Archivo'; font-style: normal; font-weight: 700;
    font-display: swap; src: url('fuentes/archivo-700.woff2') format('woff2');
}

:root {
    --papel:   #FFFFFF;
    --tinta:   #000000;
    --apagado: #767676;   /* gris texto secundario */
    --linea:   #E3E3E3;   /* hairlines */
    --suave:   #F5F5F5;    /* superficie sutil */
    --font: 'Archivo', Helvetica, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--papel);
    color: var(--tinta);
    line-height: 1.5;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { letter-spacing: -0.02em; font-weight: 600; }

a { color: var(--tinta); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

input, select, button { font-family: inherit; }

/* Números tabulares en todo lo que sea cifra */
.reloj, .contador-valor, .num, .registro time { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   BARRA SUPERIOR (sticky en móvil)
   ========================================================================= */
.barra {
    position: sticky; top: 0; z-index: 10;
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; background: var(--papel);
    border-bottom: 1px solid var(--tinta);
}
.barra nav a { margin-left: 16px; font-size: 14px; color: var(--apagado); }
.barra nav a:first-child { margin-left: 0; }
.marca {
    font-weight: 700; font-size: 15px; text-transform: lowercase;
    letter-spacing: -0.02em;
}

/* ===========================================================================
   ACCESO
   ========================================================================= */
.centro { display: flex; min-height: 100dvh; align-items: center; justify-content: center; padding: 24px; }
.tarjeta-acceso {
    background: var(--papel); border: 1px solid var(--tinta);
    padding: 32px 28px; width: 100%; max-width: 380px;
}
.tarjeta-acceso .marca { display: block; margin-bottom: 6px; color: var(--apagado); font-weight: 500; }
.tarjeta-acceso h1 { font-size: 21px; margin: 0 0 24px; }

label { display: block; margin-bottom: 16px; font-size: 13px; color: var(--apagado); font-weight: 500; }
input[type=text], input[type=password], input[type=date],
input[type=month], input[type=time], select {
    display: block; width: 100%; margin-top: 6px; padding: 13px 12px;
    border: 1px solid var(--linea); border-radius: 0;
    font-size: 16px; /* 16px evita el zoom automático de iOS */
    background: var(--papel); color: var(--tinta); -webkit-appearance: none; appearance: none;
}
select { background-image: none; }
input:focus, select:focus { border-color: var(--tinta); outline: none; }
.filtro input, .filtro select { width: auto; margin-top: 0; }

.btn-principal {
    width: 100%; padding: 14px; border: 1px solid var(--tinta); border-radius: 0;
    background: var(--tinta); color: var(--papel); font-size: 16px; font-weight: 600;
    cursor: pointer; margin-top: 8px; min-height: 50px;
}
.btn-principal:hover { background: var(--papel); color: var(--tinta); }

/* ===========================================================================
   AVISOS (monocromo: borde izquierdo grueso)
   ========================================================================= */
.aviso, .error {
    border: 1px solid var(--tinta); border-left-width: 4px;
    padding: 11px 14px; font-size: 14px; margin: 16px 0; background: var(--papel);
}
.error { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

/* ===========================================================================
   FICHAJE
   ========================================================================= */
.fichaje { max-width: 480px; margin: 0 auto; padding: 32px 20px 48px; text-align: center; }
.saludo { color: var(--apagado); margin: 0 0 20px; font-weight: 500; }

/* Estado: el punto encodea el estado (lleno / hueco / gris) */
.estado {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 600; padding: 6px 14px;
    border: 1px solid var(--tinta); border-radius: 999px; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.estado .punto { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--tinta); background: var(--papel); }
.estado--trabajando .punto { background: var(--tinta); }                 /* punto lleno  */
.estado--pausado    .punto { background: var(--papel); }                 /* punto hueco  */
.estado--fuera      { color: var(--apagado); border-color: var(--apagado); }
.estado--fuera      .punto { border-color: var(--apagado); background: var(--papel); }

/* Punto vivo con latido sutil cuando se está trabajando */
.estado--trabajando .punto { animation: latido 2s ease-in-out infinite; }
@keyframes latido { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Reloj — pieza protagonista */
.reloj {
    font-size: clamp(56px, 18vw, 88px);
    font-weight: 600; letter-spacing: -0.03em;
    margin: 18px 0 2px; line-height: 1;
}
.fecha { color: var(--apagado); margin: 0 0 28px; font-size: 14px; }

.contador {
    display: flex; flex-direction: column; gap: 3px; align-items: center;
    margin-bottom: 32px; padding: 18px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.contador-etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--apagado); font-weight: 600; }
.contador-valor { font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.contador-meta { font-size: 13px; color: var(--apagado); }

/* Botones de acción — tres jerarquías monocromas:
   sólido (avanzar) · contorno (pausa) · fantasma (salida) */
.acciones { display: flex; flex-direction: column; gap: 12px; }
.btn-accion {
    width: 100%; padding: 18px; border: 1px solid var(--tinta); border-radius: 0;
    font-size: 17px; font-weight: 600; cursor: pointer; min-height: 60px;
    background: var(--papel); color: var(--tinta); transition: transform .05s ease;
}
.btn-accion:active { transform: translateY(1px); }
.btn-entrada, .btn-reanudar { background: var(--tinta); color: var(--papel); }  /* sólido  */
.btn-entrada:hover, .btn-reanudar:hover { background: var(--papel); color: var(--tinta); }
.btn-pausa { background: var(--papel); color: var(--tinta); }                    /* contorno */
.btn-pausa:hover { background: var(--suave); }
.btn-salida {                                                                   /* fantasma */
    background: var(--papel); color: var(--apagado); border-color: var(--linea);
    font-weight: 500; min-height: 52px;
}
.btn-salida:hover { color: var(--tinta); border-color: var(--tinta); }

/* Registro del día */
.registro { margin-top: 36px; text-align: left; }
.registro h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
               color: var(--apagado); font-weight: 600; margin-bottom: 4px; }
.registro ul { list-style: none; padding: 0; margin: 0; }
.registro li { display: flex; justify-content: space-between; align-items: center;
               padding: 13px 0; border-bottom: 1px solid var(--linea); }
.registro time { color: var(--apagado); font-size: 15px; }
.reg-tipo { font-weight: 600; font-size: 15px; }
/* En B&W los tipos de evento se distinguen con un guion/marca, no color */
.reg-pausa, .reg-salida { font-weight: 500; color: var(--apagado); }

/* Formularios centrados */
.formulario { max-width: 360px; margin: 24px auto 0; text-align: left; }

/* ===========================================================================
   PANEL
   ========================================================================= */
.panel { max-width: 980px; margin: 0 auto; padding: 28px 18px 56px; }
.bloque { margin-bottom: 44px; }
.bloque-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bloque-cab h2, .bloque h2 { font-size: 21px; margin: 0; }
.bloque h3 { font-size: 15px; margin: 26px 0 12px; }
.subtitulo { color: var(--apagado); font-size: 13px; margin: 6px 0 16px; }
.enlace-csv { margin-left: auto; font-size: 13px; color: var(--tinta);
              border: 1px solid var(--tinta); padding: 7px 13px; }
.enlace-csv:hover { background: var(--tinta); color: var(--papel); text-decoration: none; }
.enlace-mini { font-size: 13px; color: var(--apagado); text-decoration: underline; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; border: 1px solid var(--tinta); }
.tabla th, .tabla td { padding: 11px 13px; text-align: left; font-size: 14px;
                       border-bottom: 1px solid var(--linea); }
.tabla th { background: var(--tinta); color: var(--papel); font-weight: 600; font-size: 11px;
            text-transform: uppercase; letter-spacing: 0.06em; }
.tabla tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; }
.num.neg { font-weight: 700; }               /* balance negativo: peso, no color */
.num.neg::before { content: ''; }
.num.pos { font-weight: 400; }
.fila-inactiva { color: var(--apagado); }

/* Pills de estado (monocromo) */
.pill { display: inline-block; font-size: 11px; padding: 3px 9px; border: 1px solid var(--tinta);
        font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pill--trabajando { background: var(--tinta); color: var(--papel); }     /* sólido  */
.pill--pausado    { background: var(--papel); color: var(--tinta); }     /* contorno */
.pill--libre      { background: var(--suave); color: var(--apagado); border-color: var(--linea); }
.pill--sin-fichar { background: var(--papel); color: var(--apagado); border-color: var(--linea); border-style: dashed; }
.motivo { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--apagado); }

.acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.acciones-fila form { display: flex; gap: 8px; }
.btn-mini { font-size: 12px; padding: 7px 11px; border: 1px solid var(--tinta);
            background: var(--papel); cursor: pointer; color: var(--tinta); min-height: 36px; }
.btn-mini:hover { background: var(--tinta); color: var(--papel); }

.formulario-alta { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.formulario-alta input, .formulario-alta select { width: auto; margin-top: 0; }
.formulario-alta .btn-principal { width: auto; padding: 13px 22px; min-height: 48px; }

/* Corrección de fichajes (filas-formulario en rejilla) */
.editar-lista { border: 1px solid var(--tinta); }
.editar-cab, .fila-editar {
    display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.4fr;
    gap: 12px; align-items: center; padding: 11px 13px;
    border-bottom: 1px solid var(--linea);
}
.editar-cab { background: var(--tinta); color: var(--papel); font-size: 11px;
              text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.fila-editar:last-child { border-bottom: none; }
.fila-editar select, .fila-editar input[type=time] { margin-top: 0; padding: 9px; }
.filtro--editar { display: flex; gap: 18px; flex-wrap: wrap; }
.filtro--editar label { margin: 0; }

/* ===========================================================================
   MÓVIL — tablas de día y mes como tarjetas apiladas
   ========================================================================= */
@media (max-width: 620px) {
    .tabla.responsive thead { position: absolute; left: -9999px; }   /* ocultar cabecera */
    .tabla.responsive, .tabla.responsive tbody, .tabla.responsive tr, .tabla.responsive td { display: block; width: 100%; }
    .tabla.responsive { border: none; }
    .tabla.responsive tr { border: 1px solid var(--tinta); margin-bottom: 12px; padding: 6px 12px; }
    .tabla.responsive td { display: flex; justify-content: space-between; align-items: center;
                           gap: 16px; border-bottom: 1px solid var(--linea); padding: 9px 0; text-align: right; }
    .tabla.responsive tr td:last-child { border-bottom: none; }
    .tabla.responsive td::before { content: attr(data-label); font-weight: 600; font-size: 11px;
                                   text-transform: uppercase; letter-spacing: 0.04em; color: var(--apagado);
                                   text-align: left; }
    .tabla.responsive .num { text-align: right; }

    .editar-cab { display: none; }
    .fila-editar { grid-template-columns: 1fr 1fr; }
    .enlace-csv { margin-left: 0; }
    .formulario-alta { flex-direction: column; align-items: stretch; }
    .formulario-alta input, .formulario-alta select, .formulario-alta .btn-principal { width: 100%; }
}

/* Tablas no-responsive (equipo, no laborables, editar): scroll horizontal en móvil */
@media (max-width: 620px) {
    .tabla:not(.responsive) { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===========================================================================
   ESCRITORIO — botones de fichaje en fila
   ========================================================================= */
@media (min-width: 560px) {
    .acciones { flex-direction: row; justify-content: center; }
    .btn-accion { flex: 1 1 0; max-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    *, .estado--trabajando .punto { animation: none !important; transition: none !important; }
}