/* Estetica de recreativa (apartado 3), con el limite que el propio documento
   pone: la envoltura nunca puede estorbar la lectura de una cifra ni la
   escritura de un dato. Por eso los titulos van en tipografia de pixel y
   todo lo que se lee o se teclea, en monoespaciada de tamano comodo. */

@font-face {
    font-family: 'Pixel';
    src: url('pixel.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    /* Hasta que llegue la fuente se ve la de reserva, no un hueco en blanco */
    font-display: swap;
}

:root {
    /* Cielo nocturno en bandas planas */
    --noche-1: #080b34;
    --noche-2: #141a52;
    --noche-3: #2a1a63;
    --noche-4: #3f1f6e;

    /* Los colores del juego: planos y saturados */
    --rojo:     #e8402a;
    --amarillo: #ffd23f;
    --cian:     #35c8ee;
    --verde:    #5bc236;
    --naranja:  #ff8c1a;
    --blanco:   #ffffff;

    --tinta:    #0a0a14;
    --panel:    #161a3d;
    --borde-luz:  #5a63b8;
    --borde-sombra: #060818;

    --mono: ui-monospace, 'DejaVu Sans Mono', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100%;
    font-family: var(--mono);
    /* 17px: se lee de pie y con prisa en el mostrador */
    font-size: 17px;
    line-height: 1.6;
    color: var(--blanco);
    background-color: var(--noche-1);
    /* Bandas planas, sin degradado suave: cada color acaba donde empieza el
       siguiente, como el cielo de un arcade de 1989. */
    background-image: linear-gradient(
        180deg,
        var(--noche-1) 0%,   var(--noche-1) 22%,
        var(--noche-2) 22%,  var(--noche-2) 44%,
        var(--noche-3) 44%,  var(--noche-3) 70%,
        var(--noche-4) 70%,  var(--noche-4) 100%);
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Margen lateral fijo para que en un movil no se pegue a los bordes */
    padding: 32px 16px;
}

/* ------------------------------------------------------- globos de fondo */
/* Decoracion. Van detras de todo y no los lee el lector de pantalla. */
.globos {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.globo {
    position: absolute;
    border-radius: 50%;
    /* Borde grueso de dos tonos: el relieve de 8 bits */
    border: 4px solid var(--tinta);
    opacity: 0.30;
    animation: flotar 14s ease-in-out infinite;
}

/* El brillo es un cuadrado, no un degradado: en pixel art la luz es un bloque */
.globo::after {
    content: '';
    position: absolute;
    top: 18%;
    left: 20%;
    width: 22%;
    height: 22%;
    background: var(--blanco);
    opacity: 0.85;
}

.globo.g1 { width:  92px; height:  92px; background: var(--rojo);     left:  6%; top: 14%; animation-delay: 0s;    }
.globo.g2 { width:  64px; height:  64px; background: var(--cian);     left: 82%; top: 22%; animation-delay: -3s;   }
.globo.g3 { width: 120px; height: 120px; background: var(--amarillo); left: 74%; top: 62%; animation-delay: -6s;   }
.globo.g4 { width:  56px; height:  56px; background: var(--verde);    left: 14%; top: 70%; animation-delay: -9s;   }
.globo.g5 { width:  78px; height:  78px; background: var(--naranja);  left: 46%; top: 82%; animation-delay: -4.5s; }

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-34px); }
}

/* ---------------------------------------------------------- la recreativa */
.recreativa {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    text-align: center;
}

.titulo {
    font-family: 'Pixel', var(--mono);
    font-size: clamp(19px, 6.2vw, 34px);
    line-height: 1.45;
    margin: 0 0 6px;
    color: var(--amarillo);
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Contorno duro de varios colores, sin difuminar: los rotulos del juego */
    text-shadow:
         3px  3px 0 var(--rojo),
        -3px -3px 0 var(--cian),
         3px -3px 0 var(--tinta),
        -3px  3px 0 var(--tinta);
}

.subtitulo {
    font-family: 'Pixel', var(--mono);
    font-size: clamp(8px, 2.6vw, 11px);
    color: var(--cian);
    letter-spacing: 2px;
    margin: 0 0 26px;
    text-transform: uppercase;
}

.moneda {
    font-family: 'Pixel', var(--mono);
    font-size: clamp(10px, 3.2vw, 13px);
    color: var(--blanco);
    letter-spacing: 3px;
    margin: 0 0 30px;
    animation: parpadeo 1.2s steps(1, end) infinite;
}

/* steps(): el parpadeo es un corte seco, no un desvanecido */
@keyframes parpadeo {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ------------------------------------------------------------- pulsadores */
.mandos {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 22px;
}

.boton {
    display: block;
    width: 100%;
    font-family: 'Pixel', var(--mono);
    font-size: clamp(10px, 3vw, 13px);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--tinta);
    padding: 18px 14px;
    border: 4px solid var(--tinta);
    cursor: pointer;
    /* Relieve de pulsador: luz arriba, sombra abajo, sin difuminar */
    box-shadow: inset 3px 3px 0 rgba(255, 255, 255, 0.45),
                inset -3px -3px 0 rgba(0, 0, 0, 0.35),
                0 5px 0 var(--borde-sombra);
    transition: filter 0.08s steps(2, end);
}

.boton:hover  { filter: brightness(1.18); }
.boton:active { transform: translateY(4px); box-shadow: inset 3px 3px 0 rgba(255,255,255,0.45),
                                                        inset -3px -3px 0 rgba(0,0,0,0.35),
                                                        0 1px 0 var(--borde-sombra); }
.boton:focus-visible { outline: 4px solid var(--blanco); outline-offset: 3px; }

.boton-1 { background: var(--amarillo); }
.boton-2 { background: var(--cian); }
.boton-3 { background: var(--verde); }

/* Cuando Google aun no esta configurado: se ve, no se puede pulsar, y dice
   por que. Mejor que esconderlo y que nadie sepa que falta. */
.boton[aria-disabled='true'] {
    background: #6d6f8a;
    color: #24263a;
    cursor: not-allowed;
    box-shadow: inset 3px 3px 0 rgba(255,255,255,0.2),
                inset -3px -3px 0 rgba(0,0,0,0.3);
}

.aviso-boton {
    font-size: 13px;
    color: var(--amarillo);
    margin: -6px 0 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------- panel */
.panel {
    background: var(--panel);
    border: 4px solid var(--tinta);
    box-shadow: inset 3px 3px 0 var(--borde-luz),
                inset -3px -3px 0 var(--borde-sombra);
    padding: 24px 20px;
    margin-bottom: 22px;
    text-align: left;
}

.panel h2 {
    font-family: 'Pixel', var(--mono);
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--amarillo);
    margin: 0 0 18px;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- campos */
/* Aqui manda la legibilidad: etiqueta clara, campo alto, texto grande. */
.campo { margin-bottom: 18px; }

.campo label {
    display: block;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--cian);
    text-transform: uppercase;
    margin-bottom: 7px;
}

.campo input {
    width: 100%;
    font-family: var(--mono);
    font-size: 17px;
    color: var(--tinta);
    background: var(--blanco);
    border: 3px solid var(--tinta);
    box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.22);
    padding: 13px 12px;
}

.campo input:focus-visible {
    outline: 4px solid var(--amarillo);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ game over */
.game-over {
    border: 4px solid var(--rojo);
    background: #2a0c10;
    padding: 18px 16px;
    margin-bottom: 22px;
    text-align: center;
}

.game-over strong {
    display: block;
    font-family: 'Pixel', var(--mono);
    font-size: clamp(13px, 4.2vw, 18px);
    color: var(--rojo);
    letter-spacing: 2px;
    margin-bottom: 9px;
    text-shadow: 2px 2px 0 var(--tinta);
}

.game-over p { margin: 0; font-size: 15px; line-height: 1.55; }

.confirmacion {
    border: 4px solid var(--verde);
    background: #0d2a12;
    padding: 18px 16px;
    margin-bottom: 22px;
    text-align: center;
    font-size: 15px;
}

/* ------------------------------------------------------------- continue */
.continuar {
    margin: 0;
    font-size: 14px;
}

.continuar a {
    color: var(--cian);
    text-decoration: underline;
    letter-spacing: 1px;
}

.continuar a:hover { color: var(--amarillo); }

.pie {
    margin-top: 26px;
    font-size: 12px;
    color: #8a90c8;
    letter-spacing: 1px;
}

/* -------------------------------------------------- ciudades del juego */
/* Guino del apartado 3: siluetas muy tenues al pie, que no estorban. */
.ciudad {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74px;
    opacity: 0.16;
    pointer-events: none;
    z-index: 0;
}

/* ------------------------------------------------------- modo sobrio */
/* El documento exige poder quitar animaciones y efectos. Mientras no exista
   el ajuste en Administracion, se respeta la preferencia del sistema, que es
   lo que ya pide quien marea con el movimiento. */
@media (prefers-reduced-motion: reduce) {
    .globo, .moneda, .boton { animation: none !important; transition: none !important; }
    .moneda { opacity: 1; }
}

/* Pantallas estrechas */
@media (max-width: 400px) {
    body { padding: 20px 16px; }
    .panel { padding: 18px 15px; }
}

/* ==================================================================== */
/* PANTALLAS CON SESION                                                 */
/* ==================================================================== */

/* Dentro no se centra nada: hay barra arriba y contenido que crece. */
body.dentro {
    display: block;
    padding: 0;
    background-attachment: scroll;
    background-image: linear-gradient(
        180deg,
        var(--noche-1) 0px, var(--noche-1) 300px,
        var(--noche-2) 300px, var(--noche-2) 620px,
        var(--noche-3) 620px);
    background-repeat: no-repeat;
}

/* ------------------------------------------------------------- el HUD */
/* Sticky y no fixed: asi sigue ocupando su sitio y el contenido no se mete
   debajo cuando la barra se parte en dos lineas en un movil. */
.hud {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 12px 18px;
    background: var(--tinta);
    border-bottom: 4px solid var(--borde-luz);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5);
}

.hud-etiqueta {
    display: block;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--cian);
    margin-bottom: 3px;
}

.hud-periodo strong,
.hud-usuario strong {
    font-family: 'Pixel', var(--mono);
    font-size: 11px;
    line-height: 1.5;
    color: var(--blanco);
    letter-spacing: 1px;
}

.hud-periodo { flex: 1 1 auto; }
.hud-marcador { flex: 0 1 auto; text-align: center; }
.hud-usuario { flex: 0 1 auto; text-align: right; }

/* El marcador de puntos: digitos en rojo sobre negro, como la recreativa */
.marcador {
    display: inline-block;
    font-family: 'Pixel', var(--mono);
    font-size: clamp(13px, 3.4vw, 18px);
    color: var(--rojo);
    background: #000;
    border: 3px solid var(--borde-sombra);
    box-shadow: inset 0 0 0 2px #1d0505;
    padding: 7px 12px;
    letter-spacing: 1px;
}

.hud-estado {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    margin-left: 8px;
    border: 2px solid;
}

.hud-estado-sin     { color: var(--amarillo); border-color: var(--amarillo); }
.hud-estado-cerrado { color: var(--verde);    border-color: var(--verde); }

.hud-salir {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--tinta);
    background: var(--amarillo);
    border: 3px solid var(--tinta);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.4);
    padding: 5px 12px;
    margin-top: 6px;
    cursor: pointer;
}

.hud-salir:hover { filter: brightness(1.15); }
.hud-salir:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }

/* ------------------------------------------------------------- el menu */
.menu {
    background: #10142f;
    border-bottom: 3px solid var(--borde-sombra);
    /* En un movil las secciones se pasan de ancho: se desplazan de lado */
    overflow-x: auto;
}

.menu ul {
    display: flex;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0 10px;
    min-width: max-content;
}

.menu a, .menu .apagado {
    display: block;
    font-family: 'Pixel', var(--mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 13px 12px;
    white-space: nowrap;
}

.menu a { color: var(--blanco); }
.menu a:hover { background: var(--noche-3); color: var(--amarillo); }
.menu a.aqui { background: var(--noche-3); color: var(--amarillo); box-shadow: inset 0 -4px 0 var(--amarillo); }
.menu a:focus-visible { outline: 3px solid var(--blanco); outline-offset: -3px; }

/* Lo que aun no existe: se ve, no se pulsa, y se nota que esta apagado */
.menu .apagado { color: #5b608f; cursor: not-allowed; }

/* ---------------------------------------------------------- contenido */
.tablero {
    max-width: 860px;
    margin: 0 auto;
    padding: 26px 16px 60px;
}

.bloque {
    background: var(--panel);
    border: 4px solid var(--tinta);
    box-shadow: inset 3px 3px 0 var(--borde-luz),
                inset -3px -3px 0 var(--borde-sombra);
    padding: 22px 20px;
    margin-bottom: 22px;
}

.bloque h2 {
    font-family: 'Pixel', var(--mono);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amarillo);
    margin: 0 0 16px;
}

.bloque p { margin: 0 0 12px; }
.bloque p:last-child { margin-bottom: 0; }

.bloque-aviso    { border-color: var(--naranja); }
.bloque-aviso h2 { color: var(--naranja); }

.bloque-pendiente    { border-color: var(--cian); }
.bloque-pendiente h2 { color: var(--cian); }

.apunte { font-size: 14px; color: #a7adde; line-height: 1.55; }

/* --------------------------------------------- barra de energia */
/* Segmentada en bloques, como la del juego: no una barra continua. */
.barra {
    display: flex;
    gap: 3px;
    margin-bottom: 9px;
}

.bloque-barra {
    flex: 1 1 0;
    height: 18px;
    background: #2b2f5e;
    border: 2px solid var(--tinta);
}

.bloque-barra.lleno { background: var(--verde); }

/* ------------------------------------------------ globos pendientes */
.globos-lista { list-style: none; margin: 0; padding: 0; }

.globo-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 0;
    border-bottom: 2px solid #232750;
}

.globo-item:last-child { border-bottom: none; }

.globo-mini {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--tinta);
    position: relative;
}

.globo-mini::after {
    content: '';
    position: absolute;
    top: 17%;
    left: 20%;
    width: 25%;
    height: 25%;
    background: var(--blanco);
    opacity: 0.8;
}

.globo-mini.c1 { background: var(--rojo); }
.globo-mini.c2 { background: var(--cian); }
.globo-mini.c3 { background: var(--amarillo); }
.globo-mini.c4 { background: var(--verde); }
.globo-mini.c5 { background: var(--naranja); }

.globo-nombre { flex: 1 1 auto; font-size: 16px; }

.globo-estado {
    flex: 0 0 auto;
    font-size: 13px;
    color: #a7adde;
    text-align: right;
    letter-spacing: 1px;
}

.marca-pendiente {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--naranja);
}

.stage-clear {
    font-family: 'Pixel', var(--mono);
    font-size: clamp(14px, 4vw, 20px);
    color: var(--verde);
    letter-spacing: 2px;
    text-align: center;
    padding: 18px 0 6px;
    text-shadow: 2px 2px 0 var(--tinta);
}

.avisos { margin: 0; padding-left: 22px; }
.avisos li { margin-bottom: 9px; line-height: 1.55; }
.avisos li:last-child { margin-bottom: 0; }

/* Dentro, los botones no ocupan todo el ancho */
.bloque .boton { display: inline-block; width: auto; min-width: 200px; }

@media (max-width: 560px) {
    /* El marcador pasa a ocupar su propia linea, centrado y legible */
    .hud-marcador { order: 3; flex: 1 0 100%; }
    .hud-usuario  { text-align: right; }
    .tablero { padding: 20px 16px 50px; }
}

/* ==================================================================== */
/* INCENTIVOS: TABLAS, SEMAFORO Y FORMULARIOS                           */
/* ==================================================================== */

/* ------------------------------------------------------------ submenu */
.submenu {
    margin-bottom: 22px;
    border-bottom: 3px solid #2b3163;
}

.submenu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.submenu a, .submenu .apagado {
    display: block;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 10px 14px;
}

.submenu a { color: var(--cian); }
.submenu a:hover { color: var(--amarillo); background: #1b2049; }
.submenu a.aqui { color: var(--amarillo); background: #1b2049; box-shadow: inset 0 -3px 0 var(--amarillo); }
.submenu .apagado { color: #5b608f; cursor: not-allowed; }

/* ------------------------------------------------------------- tablas */
/* Se leen cifras: espaciado generoso, contraste alto, numeros alineados
   a la derecha y en monoespaciada para que las columnas cuadren. */
.tabla-envoltorio { overflow-x: auto; margin-bottom: 14px; }

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 520px;
}

.tabla th {
    text-align: left;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cian);
    padding: 10px 12px;
    border-bottom: 3px solid #2b3163;
    white-space: nowrap;
}

.tabla td {
    padding: 13px 12px;
    border-bottom: 2px solid #232750;
    vertical-align: top;
    line-height: 1.5;
}

.tabla tbody tr:last-child td { border-bottom: none; }

.tabla .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tabla .sangrado { padding-left: 28px; color: #a7adde; }

/* Separa visualmente los bloques de la tabla sin meter otra cabecera */
.fila-separada td { border-top: 3px solid #2b3163; }

.fila-total td {
    border-top: 3px solid var(--amarillo);
    font-size: 17px;
    color: var(--amarillo);
    padding-top: 15px;
}

.tabla-total { min-width: 0; }

/* Un aviso pegado al concepto al que se refiere */
.recordatorio {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: var(--naranja);
    margin-top: 4px;
    line-height: 1.45;
}

.origen {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: #8a90c8;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 3px;
}

/* ---------------------------------------------------------- semaforo */
/* El color no va solo: cada luz lleva su palabra, porque un semaforo que
   solo es color no lo lee todo el mundo igual. */
.luz {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 2px solid;
    white-space: nowrap;
}

.luz-cumplido    { color: var(--verde);    border-color: var(--verde);    background: #0d2a12; }
.luz-en_riesgo   { color: var(--amarillo); border-color: var(--amarillo); background: #2e2708; }
.luz-no_cumplido { color: var(--rojo);     border-color: var(--rojo);     background: #2a0c10; }
.luz-sin_dato    { color: #9aa0d0;         border-color: #4a4f85;         background: #191d40; }

/* Un importe que NO se puede calcular. Se dice, no se pone un cero: un cero
   parece una cifra decidida y esto es una cifra que falta. */
.sin-cifra {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--naranja);
    border: 2px dashed var(--naranja);
    padding: 3px 8px;
}

/* ------------------------------------------------------- bloque alarma */
.bloque-alarma    { border-color: var(--rojo); }
.bloque-alarma h2 { color: var(--rojo); }

.alarma {
    color: var(--rojo);
    border-left: 4px solid var(--rojo);
    padding-left: 12px;
}

/* ---------------------------------------------------------- formularios */
.campo-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 18px;
}

.campo-fila label { flex: 1 1 260px; margin-bottom: 0; }
.campo-fila input { flex: 0 1 220px; }

.campo-corto { max-width: 130px; }

.linea-decision {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
}

.linea-decision .campo { flex: 1 1 200px; margin-bottom: 0; }
.linea-decision .boton { flex: 0 0 auto; }

.campo select {
    width: 100%;
    font-family: var(--mono);
    font-size: 16px;
    color: var(--tinta);
    background: var(--blanco);
    border: 3px solid var(--tinta);
    padding: 12px 10px;
}

.campo select:focus-visible,
.campo input:focus-visible { outline: 4px solid var(--amarillo); outline-offset: 2px; }

.campo input:disabled, .campo select:disabled {
    background: #c9cbdd;
    color: #5a5d70;
    cursor: not-allowed;
}

.casilla {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
    cursor: pointer;
}

.casilla input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    accent-color: var(--rojo);
}

/* ------------------------------------------------------ botones chicos */
.en-linea { display: inline-block; margin: 0 5px 5px 0; }

.mini {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--tinta);
    border: 3px solid var(--tinta);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35);
    padding: 7px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.mini:hover { filter: brightness(1.15); }
.mini:focus-visible { outline: 3px solid var(--blanco); outline-offset: 2px; }
.mini-si { background: var(--verde); }
.mini-no { background: #9aa0d0; }

.acciones { white-space: nowrap; }

.lista-simple { margin: 0 0 12px; padding-left: 22px; }
.lista-simple li { margin-bottom: 6px; }

@media (max-width: 560px) {
    .campo-fila input { flex: 1 1 100%; }
    .tabla { font-size: 14px; }
}

/* ================== LIQUIDACIONES ================== */

.migas { margin: -6px 0 18px; font-size: 14px; }
.migas a { color: var(--cian); text-decoration: none; letter-spacing: 1px; }
.migas a:hover { color: var(--amarillo); text-decoration: underline; }

/* Lo que resta va en rojo: en una liquidacion importa de un vistazo si una
   cifra suma o quita. */
.tabla .resta { color: var(--rojo); }

/* Las lineas de descuento, marcadas tambien por la izquierda */
.linea-descuento td:first-child { border-left: 4px solid var(--rojo); padding-left: 10px; }
.linea-complemento td:first-child { border-left: 4px solid var(--verde); padding-left: 10px; }
.linea-incentivo td:first-child { border-left: 4px solid var(--cian); padding-left: 10px; }

.botonera { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.boton:disabled, .mini:disabled {
    background: #6d6f8a;
    color: #24263a;
    cursor: not-allowed;
    box-shadow: inset 3px 3px 0 rgba(255,255,255,0.2);
}

/* En el desglose, el total del bloque de cifras no necesita scroll */
.tabla-total td:first-child { width: 60%; }

/* ==================== FACTURAS ==================== */

.filtros { font-size: 14px; margin: -6px 0 16px; letter-spacing: 1px; }
.filtros a { color: var(--cian); text-decoration: none; }
.filtros a:hover { color: var(--amarillo); text-decoration: underline; }
.filtros a.aqui { color: var(--amarillo); font-weight: bold; }

/* Un valor propuesto por la maquina, no confirmado por nadie todavia */
.campo input.propuesto {
    background: #fff6d6;
    border-color: #8a7420;
    box-shadow: inset 2px 2px 0 rgba(138, 116, 32, 0.25);
}

.campo input[type="file"] {
    background: var(--blanco);
    padding: 11px;
    font-size: 15px;
}

/* ==================== PROFESIONALES ==================== */

.fila-baja td { opacity: 0.55; }

h3.sub {
    font-family: 'Pixel', var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--cian);
    margin: 22px 0 10px;
}

h3.sub:first-of-type { margin-top: 4px; }