/* Estilos de la GUI de validación. Sin framework: la app son tres pantallas.
   El color nunca es la única señal — todo badge lleva texto legible. */

:root {
    --tinta: #1c1f23;
    --tinta-suave: #5b6470;
    --borde: #d9dee4;
    --fondo: #f5f7f9;
    --panel: #ffffff;
    --acento: #1f5fa8;
    --ok-fondo: #e3f4e8;      --ok-tinta: #1c6b34;
    --alerta-fondo: #fdf1dc;  --alerta-tinta: #8a5a09;
    --error-fondo: #fbe4e4;   --error-tinta: #a32020;
    --neutro-fondo: #eceff2;  --neutro-tinta: #5b6470;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    color: var(--tinta);
    background: var(--fondo);
}

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

/* --- barra superior --- */
.barra {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6rem 1rem;
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
}
.marca { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--tinta); }
.usuario { color: var(--tinta-suave); display: flex; align-items: center; gap: .75rem; }
/* Botón gris de la barra, como el "Cerrar Sesión" del sistema de facturas. */
.boton-barra {
    background: #eef0f3; border-color: #eef0f3; color: var(--tinta);
    font-weight: 500;
}
.boton-barra:hover { background: #e2e6ea; border-color: #e2e6ea; }

main { padding: 1rem; }

/* --- login ---
   Replica el login de uf.suministra.com.ar: fondo azul en degradé diagonal a pantalla
   completa y una tarjeta blanca centrada. Es la única pantalla que rompe con el gris
   del resto de la app, a propósito. */
.pantalla-login {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 1.5rem;
    background: linear-gradient(135deg, #4285f4 0%, #2563eb 55%, #1a45c9 100%);
}
.tarjeta-login {
    background: #fff; border-radius: 12px;
    padding: 2.5rem 2.25rem; width: 100%; max-width: 450px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.tarjeta-login h1 {
    font-size: 1.9rem; font-weight: 700; color: #111827;
    text-align: center; margin: 0 0 2rem;
}
.tarjeta-login .campo-login { margin-bottom: 1.25rem; }
.tarjeta-login label {
    display: block; font-size: .875rem; font-weight: 600;
    color: #1f2937; margin-bottom: .4rem;
}
.tarjeta-login input {
    width: 100%; padding: .75rem .875rem; font-size: .95rem; font-family: inherit;
    color: var(--tinta);
    border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
}
.tarjeta-login input::placeholder { color: #9ca3af; }
.tarjeta-login input:focus {
    outline: none; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.tarjeta-login button {
    width: 100%; margin-top: .5rem; padding: .8rem;
    font-size: .95rem; font-weight: 600;
    background: #2563eb; border: 1px solid #2563eb; color: #fff;
    border-radius: 8px;
}
.tarjeta-login button:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* --- avisos --- */
.aviso {
    padding: .5rem .75rem; border-radius: 4px; margin: 0 0 .75rem;
    background: var(--neutro-fondo); color: var(--neutro-tinta);
}
.aviso-error { background: var(--error-fondo); color: var(--error-tinta); }

/* --- paneles y tablas --- */
.panel {
    background: var(--panel); border: 1px solid var(--borde);
    border-radius: 6px; padding: 1rem; margin-bottom: 1rem;
}

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td {
    padding: .5rem .6rem; text-align: left;
    border-bottom: 1px solid var(--borde);
}
.tabla th { font-size: .75rem; text-transform: uppercase; color: var(--tinta-suave); }
.tabla th a { text-decoration: none; color: inherit; }
.tabla tbody tr[data-url]:hover { background: var(--fondo); cursor: pointer; }
/* Va calificado con .tabla porque `.tabla th, .tabla td` (clase+elemento) le gana en
   especificidad a `.numero` sola, y el alineado a la izquierda se imponía. */
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; }
.secundario { display: block; font-size: .78rem; color: var(--tinta-suave); }
.atenuado { color: var(--tinta-suave); }
.crudo { font-family: Consolas, monospace; font-size: .85rem; }

/* Fila con discrepancia en el detalle: fondo + borde, no sólo color de texto. */
.fila-difiere { background: var(--error-fondo); }
.fila-difiere td:first-child { box-shadow: inset 3px 0 0 var(--error-tinta); }

/* --- badges: siempre con texto, nunca sólo color --- */
.badge {
    display: inline-block; padding: .15rem .45rem;
    border-radius: 999px; font-size: .78rem; white-space: nowrap;
    background: var(--neutro-fondo); color: var(--neutro-tinta);
}
.badge-ok     { background: var(--ok-fondo);     color: var(--ok-tinta); }
.badge-alerta { background: var(--alerta-fondo); color: var(--alerta-tinta); }
.badge-error  { background: var(--error-fondo);  color: var(--error-tinta); }
.badge-neutro { background: var(--neutro-fondo); color: var(--neutro-tinta); }

/* --- filtros ---
   Grilla de 6 columnas: los 11 campos entran en 2 filas sin dejar huecos raros,
   y las acciones van en su propia fila abajo. */
.filtros-titulo {
    font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: var(--tinta);
}
.filtros-grilla {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .85rem 1rem;
}
.filtros .campo { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.filtros label { font-size: .78rem; font-weight: 600; color: var(--tinta-suave); }
.filtros input, .filtros select {
    width: 100%; padding: .5rem .6rem; font-size: 14px; font-family: inherit;
    color: var(--tinta);
    border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
.filtros input:focus, .filtros select:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(31, 95, 168, .13);
}

/* Importe y Validez comparten una celda: dos inputs a mitad de ancho cada uno. */
.filtros .par { display: flex; gap: .4rem; }
.filtros .par input { min-width: 0; }

/* Las acciones son una celda más de la grilla y ocupan lo que sobra de la segunda
   fila (9 campos + 3 columnas de acciones = 12 celdas = 2 filas exactas). */
.filtros-acciones {
    grid-column: span 3; align-self: end;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: .5rem;
}
.atajos { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.acciones-principales { display: flex; gap: .35rem; }

@media (max-width: 1400px) {
    .filtros-grilla { grid-template-columns: repeat(4, 1fr); }
    .filtros-acciones { grid-column: 1 / -1; }
}
@media (max-width: 950px) {
    .filtros-grilla { grid-template-columns: repeat(2, 1fr); }
}

button, .boton {
    padding: .45rem .9rem; border: 1px solid var(--borde); border-radius: 8px;
    background: var(--panel); color: var(--tinta);
    cursor: pointer; text-decoration: none; display: inline-block;
    font-size: 14px; font-family: inherit;
}
button:hover, .boton:hover { background: var(--fondo); }
.boton-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton-primario:hover { filter: brightness(1.08); background: var(--acento); }
.boton-ok { background: var(--ok-fondo); border-color: var(--ok-tinta); color: var(--ok-tinta); }
.boton-rechazo { background: var(--error-fondo); border-color: var(--error-tinta); color: var(--error-tinta); }

/* --- paginación --- */
.paginacion {
    display: flex; gap: .5rem; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    margin-top: .75rem; color: var(--tinta-suave);
}
.paginacion .controles { display: flex; gap: .3rem; align-items: center; }
.paginacion form { display: flex; align-items: center; gap: .4rem; }
/* El desplegable del pie queda fuera de .filtros, así que se le da el mismo trato. */
.paginacion select {
    padding: .4rem .5rem; font-size: 14px; font-family: inherit; color: var(--tinta);
    border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}

/* --- pantalla partida del detalle --- */
.partida { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.visor-pdf {
    width: 100%; height: calc(100vh - 9rem);
    border: 1px solid var(--borde); border-radius: 6px; background: var(--panel);
}

@media (max-width: 1100px) {
    .partida { grid-template-columns: 1fr; }
    .visor-pdf { height: 70vh; }
}