:root {
    --color-primario: #107bbf;
    --color-primario-hover: #0c5f93;
    --color-acento: #2e7d6b;
    --color-acento-hover: #235e51;
    --color-peligro: #c0392b;
    --color-peligro-bg: #fbe9e7;
    --color-exito: #1e7e45;
    --color-exito-bg: #e6f4ea;
    --color-aviso: #8a5a00;
    --color-aviso-bg: #fdf1da;

    --fondo-pagina: #f3f4f6;
    --fondo-tarjeta: #ffffff;
    --fondo-suave: #eef1f5;

    --texto-principal: #1c2733;
    --texto-secundario: #5a6472;
    --texto-tenue: #8b95a1;

    --borde: #e1e4e9;
    --borde-fuerte: #c7ccd3;

    --radio: 10px;
    --radio-chico: 6px;
    --sombra: 0 1px 3px rgba(20, 30, 45, 0.06);
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--fondo-pagina);
    color: var(--texto-principal);
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
}

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

h1, h2, h3 { color: var(--texto-principal); font-weight: 600; margin: 0 0 16px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }

.titulo-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.titulo-seccion h2 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 19px;
}
.migaja {
    font-size: 13px;
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: .03em;
}

small { color: var(--texto-tenue); }

/* --- Layout general --- */
.contenedor {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

.volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--texto-secundario);
    margin-bottom: 18px;
}

/* --- Barra info superior (fecha/hora + usuario) --- */
.barra-info {
    background: #3a9bd5;
    color: rgba(255,255,255,0.92);
    font-size: 12px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

/* --- Barra principal de navegación --- */
.barra-superior {
    background: var(--color-primario);
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    position: sticky;
    top: 0;
    z-index: 50;
}
.marca-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-weight: 700;
    font-size: 17px;
    white-space: nowrap;
    flex-shrink: 0;
}
.marca-logo .icono-logo { font-size: 28px; }
.marca-logo .img-logo { height: 48px; max-height: 48px; width: auto; max-width: 150px; object-fit: contain; display: block; }

/* Pestañas de navegación */
.nav-pestanas {
    display: flex;
    align-items: stretch;
    height: 76px;
    gap: 2px;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255,255,255,0.88);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    width: 110px;
    height: 76px;
    border-bottom: 3px solid transparent;
    transition: background .12s;
    flex-shrink: 0;
}
.nav-btn .nav-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: white;
}
.nav-btn .nav-svg svg {
    width: 28px;
    height: 28px;
}
.nav-btn .nav-label { line-height: 1; }
.nav-btn:hover { background: rgba(255,255,255,0.1); text-decoration: none; color: white; }
.nav-btn.activa {
    background: rgba(0,0,0,0.18);
    color: white;
}
.nav-cerrar:hover { background: rgba(220,50,50,0.25); }

/* --- Hamburguesa responsive --- */
.nav-hamburguesa {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    padding: 8px;
    margin-top: 0;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
}
.nav-hamburguesa span {
    display: block;
    width: 24px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}
.nav-hamburguesa.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburguesa.abierto span:nth-child(2) { opacity: 0; }
.nav-hamburguesa.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-dropdown {
    display: none;
    position: absolute;
    top: 95px; /* barra-info (19px) + barra-superior (76px) */
    right: 0;
    left: 0;
    background: var(--color-primario);
    z-index: 49;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.nav-dropdown.visible { display: flex; }
.nav-dropdown .nav-btn {
    width: 100%;
    height: 56px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 20px;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 14px;
}
.nav-dropdown .nav-btn .nav-svg { width: 22px; height: 22px; }
.nav-dropdown .nav-btn .nav-svg svg { width: 22px; height: 22px; }

@media (max-width: 768px) {
    .nav-pestanas { display: none; }
    .nav-hamburguesa { display: flex; }
    .barra-superior { position: relative; }
}


/* --- Tarjetas / paneles --- */
.panel, .tarjeta {
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px 22px;
    margin-bottom: 22px;
}

/* --- Menú de módulos (rejilla de botones grandes) --- */
.menu-modulos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    max-width: 720px;
}
.menu-modulos a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 28px 16px;
    text-decoration: none;
    color: var(--texto-principal);
    font-weight: 600;
    font-size: 15px;
    transition: border-color .15s, transform .1s;
}
.menu-modulos a:hover { border-color: var(--color-primario); text-decoration: none; }
.menu-modulos a:active { transform: scale(0.98); }
.menu-modulos .icono { font-size: 26px; }
.menu-modulos a.deshabilitado { opacity: .45; pointer-events: none; }

/* --- Formularios --- */
label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-secundario);
    margin: 14px 0 5px;
}
label:first-child { margin-top: 0; }

input[type="text"], input[type="password"], input[type="number"],
input[type="date"], input[type="email"], input[type="tel"],
select, textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    background: #fff;
    color: var(--texto-principal);
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.12);
}
textarea { resize: vertical; min-height: 70px; }

.fila { display: flex; gap: 14px; flex-wrap: wrap; }
.fila > div { flex: 1; min-width: 140px; }

.linea-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}
.linea-check input { width: auto; }
.linea-check label { margin: 0; font-weight: 400; color: var(--texto-principal); }

/* --- Botones --- */
button, .boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--radio-chico);
    cursor: pointer;
    background: var(--color-primario);
    color: white;
    margin-top: 16px;
    text-decoration: none;
}
button:hover, .boton:hover { background: var(--color-primario-hover); text-decoration: none; }
button:active, .boton:active { transform: scale(0.98); }

.boton-secundario { background: var(--fondo-suave); color: var(--texto-principal); border: 1px solid var(--borde-fuerte); }
.boton-secundario:hover { background: #e3e7ec; }

.boton-peligro { background: var(--color-peligro); }
.boton-peligro:hover { background: #a5301f; }

.boton-acento { background: var(--color-acento); }
.boton-acento:hover { background: var(--color-acento-hover); }

/* --- Mensajes / avisos --- */
.aviso { padding: 12px 14px; border-radius: var(--radio-chico); margin-bottom: 16px; font-size: 14px; }
.aviso-error { background: var(--color-peligro-bg); color: var(--color-peligro); font-weight: 600; }
.aviso-ok { background: var(--color-exito-bg); color: var(--color-exito); }
.aviso-info { background: var(--color-aviso-bg); color: var(--color-aviso); }

/* --- Tablas --- */
table {
    border-collapse: collapse;
    width: 100%;
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
}
th, td {
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--borde);
    font-size: 13.5px;
}
th {
    background: var(--fondo-suave);
    color: var(--texto-secundario);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .03em;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }

.acciones a { margin-right: 12px; font-size: 13px; }
.acciones .borrar { color: var(--color-peligro); }

/* --- Insignias de estado --- */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.badge-si, .badge-pagado { background: var(--color-exito-bg); color: var(--color-exito); }
.badge-no { background: var(--fondo-suave); color: var(--texto-secundario); }
.badge-admin { background: #fdeccb; color: #8a5a00; }
.badge-empleado { background: #dceafb; color: #1f5c8a; }
.badge-anulada { background: var(--color-peligro-bg); color: var(--color-peligro); }

/* --- Caja de total destacado (cobro / informes) --- */
.caja-total {
    background: var(--color-primario);
    color: white;
    padding: 26px;
    border-radius: var(--radio);
    text-align: center;
    margin-bottom: 22px;
}
.caja-total .importe { font-size: 38px; font-weight: 700; }
.caja-total .detalle { font-size: 13px; opacity: .85; margin-top: 6px; }

/* --- Login --- */
.pantalla-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.caja-login {
    background: var(--fondo-tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 4px 18px rgba(20,30,45,0.08);
    padding: 36px 32px;
    width: 100%;
    max-width: 360px;
}
.caja-login h2 { text-align: center; color: var(--color-primario); }
.caja-login button { width: 100%; padding: 12px; font-size: 15px; }