:root {
    --color-fondo: #f4f6f8;
    --color-texto: #1f2933;
    --color-suave: #52606d;
    --color-primario: #1f6f4e;
    --color-primario-oscuro: #164d37;
    --color-borde: #d7dde3;
    --color-error: #b3261e;
    --color-error-fondo: #fdecea;
    --color-ok-fondo: #e6f4ea;
    --color-ok-texto: #1e4620;
    --color-aviso-fondo: #fff4e5;
    --color-aviso-texto: #7a4100;
    --radio: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
}

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

/* ---------- Barra superior ---------- */
.topbar { background: #fff; border-bottom: 1px solid var(--color-borde); }
.topbar-inner {
    max-width: 1280px; margin: 0 auto; padding: 8px 16px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--color-texto); font-weight: 700; }
.marca img { height: 34px; width: auto; }
.marca span { font-size: 0.95rem; color: var(--color-primario); }
.menu { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.menu a { text-decoration: none; color: var(--color-texto); font-size: 0.9rem; padding: 6px 9px; border-radius: 6px; }
.menu a:hover { background: #eef3f0; color: var(--color-primario); }
.menu a.activo { background: var(--color-primario); color: #fff; }
.usuario-actual { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--color-suave); }
.usuario-actual a { text-decoration: none; }

.contenedor { max-width: 1000px; margin: 24px auto; padding: 0 16px 60px; }
.contenedor.ancho { max-width: 1280px; }

h1 { font-size: 1.4rem; margin: 0 0 18px; }
h2 { font-size: 1.12rem; margin: 30px 0 12px; }
h3 { font-size: 1rem; margin: 18px 0 10px; }
.subtitulo { color: var(--color-suave); margin: -10px 0 18px; font-size: 0.92rem; }

/* ---------- Formularios ---------- */
.formulario, .tarjeta {
    background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 18px 20px; margin-bottom: 18px;
}
.fila { display: flex; gap: 16px; flex-wrap: wrap; }
.fila > label { flex: 1; min-width: 160px; }
.fila > label.angosto { flex: 0 1 130px; min-width: 110px; }

label { display: block; font-size: 0.83rem; color: #3e4c59; margin-bottom: 12px; font-weight: 600; }
input, select, textarea {
    display: block; width: 100%; margin-top: 5px; padding: 8px 10px;
    border: 1px solid var(--color-borde); border-radius: 6px;
    font-size: 0.95rem; font-family: inherit; font-weight: 400; color: var(--color-texto); background: #fff;
}
input[readonly] { background: #f3f5f7; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(31,111,78,0.15); }
input[type="checkbox"], input[type="radio"] { display: inline-block; width: auto; margin: 0; }

.boton, .boton-primario, button[type="submit"] {
    display: inline-block; background: var(--color-primario); color: #fff; border: none;
    padding: 10px 20px; border-radius: 6px; font-size: 0.93rem; font-weight: 600; cursor: pointer;
    text-decoration: none; font-family: inherit;
}
.boton:hover, .boton-primario:hover, button[type="submit"]:hover { background: var(--color-primario-oscuro); }
.boton-secundario, button[type="submit"].boton-secundario { background: #fff; color: var(--color-primario); border: 1px solid var(--color-primario); }
.boton-secundario:hover, button[type="submit"].boton-secundario:hover { background: #eef3f0; color: var(--color-primario-oscuro); }
.boton-peligro, button[type="submit"].boton-peligro { background: var(--color-error); }
.boton-peligro:hover, button[type="submit"].boton-peligro:hover { background: #8c1d17; }
.boton-chico, button[type="submit"].boton-chico { padding: 5px 11px; font-size: 0.82rem; }
button[type="submit"].enlace { background: none; color: var(--color-primario); padding: 0; font-weight: 400; font-size: 0.85rem; }
button[type="submit"].enlace.peligro { color: var(--color-error); }
.botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

button.enlace {
    background: none; border: none; color: var(--color-primario); padding: 0;
    font-size: 0.85rem; cursor: pointer; text-decoration: underline; font-family: inherit;
}
button.enlace.peligro { color: var(--color-error); }
form.en-linea { display: inline; margin: 0; padding: 0; border: 0; background: none; }

.oculto { display: none !important; }

/* ---------- Alertas ---------- */
.alerta { padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
.alerta-ok { background: var(--color-ok-fondo); color: var(--color-ok-texto); }
.alerta-error { background: var(--color-error-fondo); color: var(--color-error); }
.alerta-aviso { background: var(--color-aviso-fondo); color: var(--color-aviso-texto); }

/* ---------- Login ---------- */
.pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.caja-login { background: #fff; padding: 32px; border-radius: var(--radio); border: 1px solid var(--color-borde); width: 100%; max-width: 360px; }
.caja-login img { display: block; max-width: 220px; margin: 0 auto 10px; }
.caja-login h1 { font-size: 1.05rem; text-align: center; margin-bottom: 20px; color: var(--color-suave); }
.caja-login button { width: 100%; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; border: 1px solid var(--color-borde); border-radius: var(--radio); background: #fff; margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
.tabla-scroll table { border: 0; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--color-borde); text-align: left; font-size: 0.87rem; vertical-align: middle; }
th { background: #f0f2f5; font-weight: 600; white-space: nowrap; }
tbody tr:hover { background: #fafbfc; }
tr:last-child td { border-bottom: none; }
tr.total td { font-weight: 700; background: #f6f8f7; }
tr.total-general td { font-weight: 700; background: #e6f0eb; }
tr.seleccionada td { background: #e6f4ea; }
tr.sub td { color: var(--color-suave); font-size: 0.82rem; background: #fbfcfd; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.centro { text-align: center; }
.vacio { color: var(--color-suave); text-align: center; padding: 18px; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.tag-granel { background: #fff4e5; color: #7a4100; }
.tag-pt { background: #e6f4ea; color: #1e4620; }
.tag-iqf { background: #e3f0fb; color: #0b4a7d; }
.tag-abierto { background: #fff4e5; color: #7a4100; }
.tag-cerrado { background: #eceff1; color: #455a64; }
.tag-listo { background: #e3f0fb; color: #0b4a7d; }
.tag-despachado { background: #f3e5f5; color: #6a1b9a; }

/* ---------- Indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi { background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 14px 16px; }
.kpi .etiqueta { font-size: 0.78rem; color: var(--color-suave); text-transform: uppercase; letter-spacing: .03em; }
.kpi .valor { font-size: 1.5rem; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi .detalle { font-size: 0.8rem; color: var(--color-suave); margin-top: 2px; }
.kpi.pt .valor { color: #1e6b3a; }
.kpi.iqf .valor { color: #0b4a7d; }
.kpi.merma .valor { color: var(--color-error); }

.barra-filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; background: #fff; padding: 14px; border: 1px solid var(--color-borde); border-radius: var(--radio); }
.barra-filtros label { flex: 1; min-width: 150px; margin-bottom: 0; }

.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--color-borde); }
.pestanas a { padding: 8px 14px; text-decoration: none; color: var(--color-suave); border-bottom: 2px solid transparent; font-size: 0.92rem; }
.pestanas a.activo { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: 600; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 18px; font-size: 0.9rem; }
.datos div span { display: block; font-size: 0.75rem; color: var(--color-suave); text-transform: uppercase; }

.piefirma { text-align: center; color: #9aa5b1; font-size: 0.8rem; padding: 20px; }
.acciones-fila { display: flex; gap: 10px; flex-wrap: wrap; }

.barra-fija { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--color-borde); padding: 12px 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; box-shadow: 0 -2px 8px rgba(0,0,0,.05); }
.barra-fija strong { font-variant-numeric: tabular-nums; }

/* ---------- Packing list imprimible ---------- */
.pl-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.pl-cabecera img { height: 60px; }
.pl-cabecera h1 { margin: 0; font-size: 1.6rem; letter-spacing: .05em; }
.pl-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 16px; font-size: 0.85rem; margin-bottom: 14px; background: #fff; border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 12px; }
.pl-datos b { display: inline-block; min-width: 120px; color: var(--color-suave); font-weight: 600; }
.tabla-pl th, .tabla-pl td { font-size: 0.78rem; padding: 5px 6px; border: 1px solid var(--color-borde); }

@media (max-width: 800px) {
    .dos-columnas { grid-template-columns: 1fr; }
    .pl-datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .topbar-inner { flex-direction: column; align-items: flex-start; }
    .usuario-actual { width: 100%; justify-content: space-between; }
}

@media print {
    .topbar, .piefirma, .no-imprimir, .alerta { display: none !important; }
    body { background: #fff; }
    .contenedor, .contenedor.ancho { max-width: none; margin: 0; padding: 0; }
    .pl-datos { border: 0; padding: 0; }
    .tabla-scroll { overflow: visible; border: 0; }
    @page { size: landscape; margin: 10mm; }
}