:root {
    --fondo: #f5f6f3;
    --superficie: #ffffff;
    --texto: #1d241f;
    --texto-suave: #5b665e;
    --borde: #dde2dc;
    --primario: #2f6b3a;
    --primario-hover: #255630;
    --primario-suave: #e6f0e7;
    --suba: #b42318;
    --suba-suave: #fdecea;
    --baja: #1d5fa8;
    --baja-suave: #e8f0fb;
    --igual: #5b665e;
    --alerta: #8a5a00;
    --alerta-suave: #fff4d6;
    --ok: #1f7a3a;
    --ok-suave: #e5f4ea;
    --sombra: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
    --radio: 10px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #141816;
        --superficie: #1d2320;
        --texto: #e7ece8;
        --texto-suave: #a3aea6;
        --borde: #313a35;
        --primario: #5fae6e;
        --primario-hover: #74c183;
        --primario-suave: #233a29;
        --suba: #ff8a7a;
        --suba-suave: #3d2321;
        --baja: #86b4ff;
        --baja-suave: #1f2c42;
        --igual: #a3aea6;
        --alerta: #f3c768;
        --alerta-suave: #3a3020;
        --ok: #7fd394;
        --ok-suave: #1f3526;
        --sombra: none;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
/* Las reglas con display (grid, flex) le ganan al atributo hidden: esto lo respeta siempre. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fondo);
    color: var(--texto);
}
a { color: var(--primario); }
h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
p { margin: .4rem 0; }
.suave { color: var(--texto-suave); }
.chico { font-size: .85rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Barra superior */
.barra {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: .6rem 16px; background: var(--superficie); border-bottom: 1px solid var(--borde);
    position: sticky; top: 0; z-index: 10;
}
.marca { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--texto); text-decoration: none; }
.nav { display: flex; gap: .2rem; flex-wrap: wrap; align-items: center; }
.nav a, .nav .enlace { padding: .35rem .6rem; border-radius: 6px; color: var(--texto-suave); text-decoration: none; font-size: .95rem; }
.nav a.activo { background: var(--primario-suave); color: var(--primario); font-weight: 600; }
.nav a:hover, .nav .enlace:hover { color: var(--texto); }

.contenido { max-width: 1180px; margin: 0 auto; padding: 1.2rem 16px 6rem; }

/* Botones y formularios */
button, .boton {
    font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--borde);
    background: var(--superficie); color: var(--texto); padding: .5rem .9rem; min-height: 38px;
    display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; justify-content: center;
}
button:hover:not(:disabled) { border-color: var(--texto-suave); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primario { background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600; }
.primario:hover:not(:disabled) { background: var(--primario-hover); border-color: var(--primario-hover); }
.peligro { color: var(--suba); }
.enlace { border: none; background: none; padding: 0; min-height: 0; color: var(--primario); text-decoration: underline; }
.chico-btn { padding: .25rem .55rem; min-height: 30px; font-size: .85rem; }
input, select {
    font: inherit; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: 8px;
    background: var(--superficie); color: var(--texto); min-height: 38px; max-width: 100%;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
label { display: block; font-weight: 600; margin: .6rem 0 .2rem; font-size: .9rem; }
.form { max-width: 420px; }
.fila-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.fila-form > div { flex: 1 1 180px; }

/* Tarjetas */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; box-shadow: var(--sombra); }
.tarjeta h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.zona-archivo {
    margin-top: .8rem; border: 2px dashed var(--borde); border-radius: var(--radio); padding: 1.1rem .8rem;
    text-align: center; color: var(--texto-suave); cursor: pointer; transition: border-color .15s, background .15s;
}
.zona-archivo:hover, .zona-archivo.encima { border-color: var(--primario); background: var(--primario-suave); color: var(--texto); }
.zona-archivo input { display: none; }
textarea.pegar {
    width: 100%; margin-top: .6rem; font: inherit; padding: .5rem .6rem; border: 1px solid var(--borde);
    border-radius: 8px; background: var(--superficie); color: var(--texto); resize: vertical;
}

/* Avisos */
.caja { border-radius: var(--radio); padding: .7rem .9rem; margin: .8rem 0; border: 1px solid transparent; }
.caja.alerta { background: var(--alerta-suave); color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 30%, transparent); }
.caja.ok { background: var(--ok-suave); color: var(--ok); }
.caja.info { background: var(--primario-suave); }
.caja ul { margin: .3rem 0 0; padding-left: 1.2rem; }

/* Insignias */
.insignia { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.insignia.suba { background: var(--suba-suave); color: var(--suba); }
.insignia.baja { background: var(--baja-suave); color: var(--baja); }
.insignia.igual, .insignia.neutro { background: var(--fondo); color: var(--igual); border: 1px solid var(--borde); }
.insignia.ok { background: var(--ok-suave); color: var(--ok); }
.insignia.alerta { background: var(--alerta-suave); color: var(--alerta); }

/* Filtros */
.filtros { display: flex; gap: .4rem; flex-wrap: wrap; margin: .8rem 0; }
.filtros button { border-radius: 999px; padding: .3rem .8rem; min-height: 32px; font-size: .9rem; }
.filtros button.activo { background: var(--texto); color: var(--superficie); border-color: var(--texto); }

/* Tablas */
.tabla-envoltorio { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .55rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: middle; text-align: left; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: var(--texto-suave); background: var(--fondo); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: none; }
tr.confirmado td { background: color-mix(in srgb, var(--ok-suave) 70%, transparent); }
tr.rechazado td { opacity: .55; }
tr.manual td { background: color-mix(in srgb, var(--alerta-suave) 60%, transparent); }
.producto-nombre { font-weight: 600; }
.acciones { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.acciones button { min-width: 38px; }
.acciones button.marcado { outline: 2px solid currentColor; outline-offset: -2px; font-weight: 700; }
.btn-si { color: var(--ok); }
.btn-no { color: var(--suba); }
.manual-input { width: 8.5rem; }

/* Barra de acciones fija abajo */
.barra-acciones {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9; background: var(--superficie);
    border-top: 1px solid var(--borde); padding: .7rem 16px; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
}
.barra-acciones .resumen-linea { align-self: center; color: var(--texto-suave); font-size: .9rem; }

/* Mapeo */
.mapeo-item { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; margin-bottom: .7rem; }
.mapeo-item.elegido { border-color: var(--primario); }
.opcion { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem .3rem; border-radius: 6px; font-weight: normal; margin: 0; cursor: pointer; }
.opcion:hover { background: var(--fondo); }
.opcion input { min-height: 0; margin-top: .25rem; }
.opcion .det { flex: 1; }
.buscador { margin-top: .4rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.buscador input { flex: 1 1 220px; }

.cambiar-asociacion { max-height: 60vh; overflow-y: auto; }
.cambiar-asociacion .buscador button { margin: .2rem .2rem 0 0; text-align: left; }
.mapeo-sin { margin: 1rem 0; }
.mapeo-sin summary { cursor: pointer; font-weight: 600; padding: .5rem 0; }

/* Modal */
.fondo-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); display: grid; place-items: center; padding: 16px; z-index: 30; }
.modal { background: var(--superficie); border-radius: var(--radio); padding: 1.2rem; max-width: 520px; width: 100%; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
.modal h2 { margin-top: 0; }
.modal .botones { display: flex; gap: .5rem; justify-content: flex-end; margin-top: 1rem; flex-wrap: wrap; }
.cifra { font-size: 2rem; font-weight: 700; color: var(--primario); }

/* Cargando */
.cargando { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: grid; place-items: center; z-index: 40; }
.cargando-caja { background: var(--superficie); padding: 1.3rem 1.6rem; border-radius: var(--radio); text-align: center; max-width: 320px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--borde); border-top-color: var(--primario); border-radius: 50%; margin: 0 auto .6rem; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.aviso-flotante {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 5.5rem; z-index: 50;
    background: var(--texto); color: var(--superficie); padding: .6rem 1rem; border-radius: 8px; max-width: calc(100% - 32px);
}
.aviso-flotante.error { background: var(--suba); color: #fff; }

/* Login */
.login { max-width: 360px; margin: 8vh auto 0; }

/* Celular: la tabla de revisión pasa a tarjetas */
@media (max-width: 720px) {
    .revision thead { display: none; }
    .revision, .revision tbody, .revision tr, .revision td { display: block; width: 100%; }
    .revision tr { border-bottom: 1px solid var(--borde); padding: .5rem .2rem; }
    .revision td { border: none; padding: .15rem .5rem; }
    .revision td.num { text-align: left; }
    .revision td[data-etiqueta]::before { content: attr(data-etiqueta) ": "; color: var(--texto-suave); font-size: .85rem; }
    .acciones { justify-content: flex-start; margin-top: .3rem; }
    .nav { width: 100%; }
    h1 { font-size: 1.2rem; }
}