/* Pensado primero para el celular del dueño; en pantallas grandes se centra con un ancho máximo. */

:root {
    --fondo: #f4f5f7;
    --superficie: #ffffff;
    --texto: #1d2329;
    --texto-suave: #5f6b76;
    --borde: #dde1e6;
    --primario: #1f5fbf;
    --primario-texto: #ffffff;
    --verde: #1e8a4c;
    --verde-fondo: #e3f4ea;
    --alerta: #b4560c;
    --alerta-fondo: #fdf0e3;
    --peligro: #b3261e;
    --ok-fondo: #e3f4ea;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #15191d;
        --superficie: #1f252b;
        --texto: #e6e9ec;
        --texto-suave: #9aa5af;
        --borde: #343c44;
        --primario: #5b9bf0;
        --primario-texto: #0d1217;
        --verde: #5ccf8c;
        --verde-fondo: #1b3326;
        --alerta: #f0a35e;
        --alerta-fondo: #3a2a1a;
        --peligro: #f2867e;
        --ok-fondo: #1b3326;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

a { color: var(--primario); }

h1 { font-size: 1.4rem; margin: 0.5rem 0 1rem; }
h1 small { display: block; font-size: 0.95rem; font-weight: normal; color: var(--texto-suave); }
h2 { font-size: 1.1rem; margin: 1.25rem 0 0.5rem; }

.barra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 1rem;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 600; }
.salir { margin: 0; }

.menu {
    display: flex;
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 1;
}
.menu a {
    flex: 1;
    text-align: center;
    padding: 0.7rem 0.1rem;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--texto-suave);
    border-bottom: 3px solid transparent;
}
.menu a.activo { color: var(--primario); border-bottom-color: var(--primario); font-weight: 600; }

.contenido { max-width: 760px; margin: 0 auto; padding: 0.75rem 1rem 3rem; }

.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.formulario label { display: block; margin-bottom: 0.9rem; font-weight: 500; }
.formulario input:not([type=checkbox]), .formulario select, .formulario textarea {
    display: block;
    width: 100%;
    margin-top: 0.3rem;
    padding: 0.6rem;
    font: inherit;
    color: var(--texto);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 6px;
}
.formulario .casilla { display: flex; gap: 0.5rem; align-items: center; font-weight: normal; }
.formulario .casilla input { width: 1.2rem; height: 1.2rem; }
.fila { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.fila > label { flex: 1; min-width: 9rem; }
.filtros .fila + .fila { margin-top: 0.25rem; }

.boton {
    display: inline-block;
    padding: 0.55rem 1rem;
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}
.boton.principal { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); font-weight: 600; }
.boton.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; font-weight: 600; }
.enlace { background: none; border: none; color: var(--primario); font: inherit; cursor: pointer; padding: 0; }
.accion { font-size: 0.92rem; }

.error:empty { display: none; }
.error, .aviso, .ok { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.error { background: var(--alerta-fondo); color: var(--peligro); }
.error ul { margin: 0; padding-left: 1.1rem; }
.aviso { background: var(--alerta-fondo); color: var(--texto); border-left: 4px solid var(--alerta); }
.ok { background: var(--ok-fondo); border-left: 4px solid var(--verde); }
.nota { color: var(--texto-suave); font-size: 0.92rem; }

.ingreso { max-width: 360px; margin: 3rem auto 0; }
.ingreso h1 { text-align: center; }
.ingreso .boton { width: 100%; }

/* Hoy */
.grupo h2 { display: flex; align-items: center; gap: 0.5rem; }
.cuenta { font-size: 0.85rem; background: var(--borde); border-radius: 999px; padding: 0 0.55rem; }
.lista { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; }
.lista li { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--borde); }
.lista li:last-child { border-bottom: none; }
.detalle { margin-left: auto; color: var(--texto-suave); font-size: 0.92rem; }
.punto { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.punto.verde { background: var(--verde); }
.punto.gris { background: var(--texto-suave); }
.punto.vacio { border: 2px solid var(--borde); }

/* Fichadas de un día */
.navegador-fecha { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.navegador-fecha input { flex: 1; padding: 0.5rem; font: inherit; color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 6px; }
.titulo-jornada { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.titulo-jornada h2 { margin: 0; }
.total { margin-left: auto; font-weight: 600; }
.fichadas { list-style: none; padding: 0; margin: 0.75rem 0; }
.fichadas li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0; border-top: 1px solid var(--borde); }
.fichadas .hora { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 3rem; }
.fichadas .tipo { color: var(--texto-suave); }
.fichadas .accion { margin-left: auto; }
.fichadas .motivo { flex-basis: 100%; font-size: 0.88rem; color: var(--texto-suave); padding-left: 3.5rem; }
.fichadas li.anulada .hora, .fichadas li.anulada .tipo { text-decoration: line-through; color: var(--texto-suave); }

.etiqueta { font-size: 0.78rem; padding: 0.05rem 0.45rem; border-radius: 4px; background: var(--borde); color: var(--texto); white-space: nowrap; }
.etiqueta.alerta { background: var(--alerta-fondo); color: var(--alerta); font-weight: 600; }
.etiqueta.verde { background: var(--verde-fondo); color: var(--verde); font-weight: 600; }
.alerta-texto { color: var(--alerta); font-weight: 600; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; margin-bottom: 0.75rem; }
.tabla th, .tabla td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { font-size: 0.85rem; color: var(--texto-suave); font-weight: 600; }
.tabla tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr.inactivo td { color: var(--texto-suave); }
.tabla tr.fila-alerta td { background: var(--alerta-fondo); }
.horas-dia span { margin-right: 0.45rem; font-variant-numeric: tabular-nums; }
.horas-dia .manual { text-decoration: underline dotted; }
.resumen-empleado { margin-top: 0; }

.zona-peligro { border-color: var(--peligro); }
.zona-peligro h2 { margin-top: 0; color: var(--peligro); }