:root {
    /* Colores de marca (tomados del logo de Symetry) */
    --marca-gris: #54585a;
    --marca-rojo: #ee2738;
    /* --azul se conserva por compatibilidad: es el "tinta" principal */
    --azul: #2a2d2f;
    --azul-claro: #54585a;
    --gris-fondo: #f3f4f5;
    --gris-borde: #dfe2e4;
    --rojo: #c0392b;
    --verde: #1e7e34;
    --texto: #1d2023;
    --texto-suave: #5d6468;
    --sombra: 0 1px 2px rgba(20, 24, 28, .06), 0 2px 8px rgba(20, 24, 28, .04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--gris-fondo);
    color: var(--texto);
}


.container { width: 100%; max-width: 1040px; margin: 0 auto; padding: 24px 16px 40px; flex: 1; }
.container-angosto { max-width: 420px; margin: 24px auto; }

h1 { font-size: 1.5rem; margin: 4px 0 6px; letter-spacing: -0.01em; color: var(--azul); }
h2 { font-size: 1.1rem; color: var(--azul); margin-top: 0; }
h3 { font-size: 0.95rem; color: var(--azul-claro); margin-bottom: 6px; }
.subtitulo { color: var(--texto-suave); margin-top: 0; font-size: 0.92rem; }

.banner-info {
    background: #f0f0f0;
    border-left: 4px solid var(--azul);
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 0.88rem;
}
.banner-info summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--azul);
}
.banner-info ul {
    margin: 10px 0 2px 0;
    padding-left: 20px;
}
.banner-info li { margin-bottom: 6px; line-height: 1.4; }

.card {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 12px;
    box-shadow: var(--sombra);
    padding: 18px;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover { border-color: var(--azul-claro); }

.grid-admin { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .grid-admin { grid-template-columns: 1fr 1fr 1fr; } }

.finde h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.finde-pasado { opacity: 0.7; background: #fafbfc; }
.feriado { border-left: 4px solid #b8860b; }
.tag { background: var(--gris-borde); color: var(--texto); font-size: 0.72rem; padding: 2px 8px; border-radius: 20px; }
.tag-proximo { background: var(--verde); color: #fff; }

.tablas { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .tablas { grid-template-columns: 1fr 1fr; } }

table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 8px 6px; border-bottom: 1px solid var(--gris-borde); text-align: left; }
th { background: var(--azul); color: #fff; font-size: 0.8rem; }

.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: -2px; padding: 2px; }
.tabla-scroll table { min-width: 480px; }

@media (max-width: 480px) {
    .container { padding: 10px; }
    h1 { font-size: 1.15rem; }
    h2 { font-size: 1rem; }
    .card { padding: 12px; }
    table { font-size: 0.8rem; }
    th, td { padding: 6px 4px; }
}

.vacante { color: var(--rojo); font-weight: 600; }
.alerta { color: var(--rojo); font-weight: 700; }
.ok { color: var(--verde); font-weight: 600; }

form { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 0.85rem; font-weight: 600; color: #48566a; }
input, select, textarea, button {
    padding: 9px 10px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 0.95rem;
}
textarea { font-family: monospace; resize: vertical; }
button {
    background: var(--azul);
    color: #fff;
    border: none;
    cursor: pointer;
    font-weight: 600;
}
button:hover { background: var(--azul-claro); }

.fila-ajuste {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: 1px solid var(--gris-borde);
    padding: 8px 0;
}
.turno-label { font-size: 0.85rem; min-width: 140px; }

.nota { font-size: 0.8rem; color: #8a97a8; }



/* Intercambios / coberturas */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-2 .card { margin-bottom: 0; }
.grid-2 + .card { margin-top: 16px; }
.grid-2 select { width: 100%; min-width: 0; }
.fila-cambio td { background: #fff8e6; }
.nota-cambio { font-size: 0.74rem; color: #8a6d00; margin-top: 2px; }
.tag-cambio { background: #ffe8a3; color: #5c4700; text-decoration: none; }
.fila-cancelada td { opacity: 0.5; text-decoration: line-through; }
.fila-cancelada td:last-child, .fila-cancelada td:nth-last-child(2) { text-decoration: none; }
.btn-sec { background: #fff; color: var(--rojo); border: 1px solid var(--rojo); padding: 5px 10px; font-size: 0.82rem; }
.btn-sec:hover { background: var(--rojo); color: #fff; }
td form { display: inline; }

/* Home Office */
.banner-previa { background: #fff8e6; border-left: 4px solid #b8860b; border-radius: 6px; padding: 10px 14px; font-size: 0.9rem; }
.fila-hoy td { background: #eaf6ec; font-weight: 600; }
.lista-check { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 8px; }
@media (min-width: 700px) { .lista-check { grid-template-columns: 1fr 1fr 1fr; } }
label.check { font-weight: 400; color: var(--texto); display: flex; align-items: center; gap: 6px; }
label.check input { padding: 0; }


/* ==========================================================
   Encabezado
   ========================================================== */
.site-header {
    background: #fff;
    border-bottom: 1px solid var(--gris-borde);
    box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 4px 14px rgba(20,24,28,.05);
    position: sticky;
    top: 0;
    z-index: 100;
}
.header-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--azul);
    flex-shrink: 0;
}
.brand-logo { height: 26px; width: auto; display: block; }
.brand-sep { width: 1px; height: 30px; background: var(--gris-borde); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-size: 1rem; font-weight: 700; color: var(--azul); }
.brand-text small {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-suave);
    margin-top: 2px;
}

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--texto-suave);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--gris-fondo); color: var(--azul); }
.nav-links a.activo { color: var(--azul); font-weight: 650; }
.nav-links a.activo::after {        /* subrayado rojo de la pestaña activa */
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--marca-rojo);
}
.nav-links a.nav-salir,
.nav-links a.nav-acceso {
    margin-left: 6px;
    border: 1px solid var(--gris-borde);
}
.nav-links a.nav-salir:hover { border-color: var(--marca-rojo); color: var(--marca-rojo); background: #fff; }
.nav-links a.nav-acceso { background: var(--azul); color: #fff; border-color: var(--azul); }
.nav-links a.nav-acceso:hover { background: var(--marca-gris); color: #fff; }
.nav-links a.nav-acceso.activo::after { display: none; }
.nav-badge {
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 2px 6px;
    border-radius: 20px;
    background: #fff1d6;
    color: #8a5a00;
}

/* En celular: marca arriba, menú abajo deslizable de lado */
@media (max-width: 720px) {
    .header-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px 6px; }
    .brand-logo { height: 22px; }
    .brand-sep { height: 24px; }
    .nav-links {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -12px;
        padding: 0 12px 4px;
    }
    .nav-links::-webkit-scrollbar { display: none; }
    .nav-links { gap: 0; }
    .nav-links a { padding: 7px 8px; font-size: 0.84rem; }
    .nav-links a.activo::after { left: 8px; right: 8px; }
    .nav-badge { font-size: 0.56rem; padding: 1px 5px; }
    .nav-links a.nav-salir, .nav-links a.nav-acceso { margin-left: auto; }
}

/* ==========================================================
   Pie de página
   ========================================================== */
.site-footer {
    background: var(--azul);
    color: #c9cdd0;
    margin-top: 24px;
    border-top: 3px solid var(--marca-rojo);
}
.footer-inner {
    max-width: 1040px;
    margin: 0 auto;
    padding: 26px 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.footer-brand { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.footer-brand strong { color: #fff; font-size: 0.98rem; }
.footer-brand span { font-size: 0.84rem; line-height: 1.45; color: #a9afb3; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: #e4e7e9; text-decoration: none; font-size: 0.88rem; }
.footer-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
    width: calc(100% - 32px);
    max-width: 1008px;
    margin: 0 auto;
    padding: 12px 0 18px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.78rem;
    color: #8e959a;
}
.footer-bottom strong { color: #d6dadc; font-weight: 600; }
.version-tag { font-size: 0.74rem; color: #7c8388; }
@media (max-width: 720px) {
    .footer-inner { flex-direction: column; gap: 14px; padding-top: 22px; }
    .footer-bottom { flex-direction: column; }
}