/* style.css
   Diseño corporativo del sistema ZH LLANTAS: menú lateral grafito, contenido
   claro y el rojo del logo solo como acento (botón principal, elemento
   activo). Se carga desde menu.php, así que aplica a todas las pantallas.

   Las reglas generales usan :where() para no pesar más que los estilos
   propios de cada página (por ejemplo tr.error en productos_importar.php):
   si una página define algo, lo de la página manda. */

:root {
    --acento: #c8231b;
    --acento-oscuro: #a51c15;
    --acento-suave: #fbeceb;

    --lateral: #141a24;
    --lateral-2: #1f2733;
    --lateral-borde: rgba(255, 255, 255, 0.07);
    --lateral-texto: #9aa4b2;

    --fondo: #f3f4f6;
    --superficie: #ffffff;
    --superficie-2: #f9fafb;
    --borde: #e3e6ea;
    --borde-fuerte: #cdd2d9;
    --texto: #111827;
    --texto-2: #374151;
    --texto-suave: #6b7280;

    --verde: #05603a;   --verde-fondo: #ecfdf3;  --verde-borde: #a6f4c5;
    --ambar: #93370d;   --ambar-fondo: #fffaeb;  --ambar-borde: #fedf89;
    --azul: #1849a9;    --azul-fondo: #eff8ff;   --azul-borde: #b2ddff;
    --gris: #475467;    --gris-fondo: #f2f4f7;
    --rojo: #b42318;    --rojo-fondo: #fef3f2;   --rojo-borde: #fecdca;

    --radio: 8px;
    --sombra: 0 1px 2px rgba(16, 24, 40, 0.06);
    --sombra-2: 0 6px 16px rgba(16, 24, 40, 0.08);
    --ancho-menu: 248px;
    --alto-barra: 56px;
}

/* ------------------------------------------------------------ base */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
    margin: 0;
    padding-left: var(--ancho-menu);
    -webkit-font-smoothing: antialiased;
}

table { font-size: inherit; line-height: inherit; color: inherit; }

a { color: var(--acento-oscuro); text-decoration: none; font-weight: 500; }
a:hover { color: var(--acento); text-decoration: underline; }

.contenido {
    max-width: 1400px;
    padding: 28px 32px 56px;
}

/* Título de la página: el primer h1/h2 del contenido, sea cual sea */
h1,
.contenido > h2:first-child {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0 0 6px;
    color: var(--texto);
}
h1 small, .contenido > h2:first-child small { font-size: 0.7em; font-weight: 500; color: var(--texto-suave) !important; }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; color: var(--texto); }
h3 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 26px 0 8px;
    color: var(--texto-suave);
}
/* Línea de apoyo bajo el título (enlaces "Volver", descripción) */
h1 + p, .contenido > h2:first-child + p { margin-top: 0; color: var(--texto-suave); }

.ayuda { color: var(--texto-suave); font-size: 0.9em; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 24px 0; }

/* ------------------------------------------------------------ menú lateral */
.menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ancho-menu);
    background: var(--lateral);
    display: flex;
    flex-direction: column;
    padding: 16px 12px 12px;
    overflow-y: auto;
    z-index: 30;
}
.menu .marca {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--lateral-borde);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-decoration: none;
}
.menu .marca:hover { color: #fff; text-decoration: none; }
.menu .marca img { width: 40px; height: 40px; object-fit: cover; background: #fff; border-radius: 8px; flex: none; }
.menu .marca small { display: block; color: var(--lateral-texto); font-weight: 400; font-size: 11.5px; letter-spacing: 0.01em; }

.menu .grupo { padding: 8px 0 2px; }
.menu .titulo-grupo {
    margin: 8px 10px 6px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #6b7686;
}
.menu .grupo a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 6px;
    color: var(--lateral-texto);
    font-weight: 500;
    text-decoration: none;
    position: relative;
}
.menu svg, .barra-superior svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.menu .grupo a:hover { background: var(--lateral-2); color: #fff; }
.menu .grupo a.activo { background: var(--lateral-2); color: #fff; }
.menu .grupo a.activo::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--acento);
}
.menu .grupo a.activo svg { color: #fff; }

.menu .usuario {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 8px 4px;
    border-top: 1px solid var(--lateral-borde);
    color: #fff;
    font-weight: 600;
}
.menu .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2b3544;
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    font-weight: 600;
    flex: none;
}
.menu .datos-usuario { flex: 1; min-width: 0; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .datos-usuario small { display: block; color: var(--lateral-texto); font-weight: 400; font-size: 12px; }
.menu .salir { color: var(--lateral-texto); padding: 7px; border-radius: 6px; display: flex; }
.menu .salir:hover { color: #fff; background: var(--lateral-2); }

/* ------------------------------------------------------------ barra superior */
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 15;
    height: var(--alto-barra);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.4) blur(6px);
    border-bottom: 1px solid var(--borde);
}
.barra-superior .ruta { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); min-width: 0; }
.barra-superior .ruta strong { color: var(--texto); font-weight: 600; }
.barra-superior .separador { color: var(--borde-fuerte); }
.barra-superior .fecha-hoy { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-size: 13px; white-space: nowrap; }
.barra-superior .fecha-hoy svg { width: 16px; height: 16px; }
.boton-menu { display: none; }

.velo { display: none; }

/* ------------------------------------------------------------ botones y enlaces con forma de botón */
:where(button),
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    color: var(--texto-2);
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: 6px;
    padding: 8px 14px;
    box-shadow: var(--sombra);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
:where(button):hover,
.boton:hover { background: var(--gris-fondo); color: var(--texto); text-decoration: none; }
:where(button[type=submit]),
.boton.primario {
    color: #fff;
    background: var(--acento);
    border-color: var(--acento);
}
:where(button[type=submit]):hover,
.boton.primario:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); color: #fff; }
:where(button:disabled) { opacity: 0.5; cursor: not-allowed; }
/* Grupos de botones en una línea: separación uniforme */
p > .boton + .boton, p > .boton + button, p > button + .boton { margin-left: 6px; }

/* ------------------------------------------------------------ formularios */
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file]), select, textarea) {
    font: inherit;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: 6px;
    padding: 7px 10px;
    min-height: 36px;
    box-shadow: var(--sombra);
    max-width: 100%;
    vertical-align: middle;
}
:where(textarea) { min-height: 72px; }
:where(input, select, textarea)::placeholder { color: #9aa1ab; }
:where(input, select, textarea, button, .boton):focus-visible {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(200, 35, 27, 0.14);
}
:where(input[readonly]) { background: var(--superficie-2); }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--acento); width: 15px; height: 15px; vertical-align: -2px; margin: 0 4px 0 0; }
:where(input[type=file]) { font: inherit; }

:where(fieldset) {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 22px 14px;
    margin: 0 0 20px;
    min-width: 0;
}
:where(legend) {
    float: left;
    width: 100%;
    padding: 0 0 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--borde);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--texto);
}
:where(legend) + * { clear: both; }
:where(label) { color: var(--texto-2); font-weight: 500; }

/* Formulario de filtros (GET) al inicio de los listados: barra de búsqueda */
.contenido > form[method="GET"],
.contenido > form[method="get"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 12px 14px;
    margin: 16px 0 14px;
    color: var(--texto-2);
}
.contenido > form[method="GET"] > label,
.contenido > form[method="get"] > label { display: inline-flex; align-items: center; white-space: nowrap; }
.contenido > form[method="GET"] > a,
.contenido > form[method="get"] > a { font-size: 13px; padding: 0 4px; }

/* ------------------------------------------------------------ tablas de listados (las que tienen border="1") */
:where(table[border]) {
    width: 100%;
    font-size: 13.5px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra);
    overflow: hidden;
    margin: 10px 0 20px;
}
/* Contenedor que agrega assets/js/app.js: la tabla se desliza de lado si no entra */
.tabla-envoltura {
    overflow-x: auto;
    margin: 10px 0 20px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    box-shadow: var(--sombra);
}
.tabla-envoltura > table[border] { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
:where(table[border]) th,
:where(table[border]) td {
    border: 0;
    border-bottom: 1px solid var(--borde);
    padding: 9px 10px;
    vertical-align: middle;
}
:where(table[border]) th {
    background: var(--superficie-2);
    color: var(--texto-suave);
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
}
:where(table[border]) tr:last-child td { border-bottom: 0; }
/* El resaltado va en la fila (no en la celda) para que un <tr style="background:..."> de la página siga viéndose */
:where(table[border]) tr:hover { background: #fafbfc; }
:where(table[border]) .col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Columnas de texto largo (cliente, descripción): ancho mínimo para que no se aplasten */
:where(table[border]) th.col-texto { min-width: 170px; }
:where(table[border]) td:has(> input, > select) { padding-top: 6px; padding-bottom: 6px; }

/* Celda de acciones (la marca assets/js/app.js): enlaces como botones pequeños */
.celda-acciones { white-space: nowrap; text-align: right; }
.celda-acciones > a,
.celda-acciones > form > button,
.celda-acciones > button {
    display: inline-flex;
    align-items: center;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    padding: 5px 10px;
    margin: 2px 0 2px 4px;
    color: var(--texto-2);
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: 6px;
    box-shadow: none;
    text-decoration: none;
}
.celda-acciones > a:hover,
.celda-acciones > form > button:hover,
.celda-acciones > button:hover { background: var(--gris-fondo); color: var(--texto); text-decoration: none; }
.celda-acciones > form { display: inline; }
/* Acciones de riesgo (desactivar, anular): rojo discreto */
.celda-acciones .peligro { color: var(--rojo); }
.celda-acciones .peligro:hover { background: var(--rojo-fondo); color: var(--rojo); border-color: var(--rojo-borde); }

/* Botones dentro de tablas de captura (quitar fila, etc.) */
:where(table[border]) td :where(button) { box-shadow: none; padding: 5px 10px; font-weight: 500; }
:where(table[border]) td :where(button) { color: var(--texto-2); background: var(--superficie); border-color: var(--borde-fuerte); }
:where(table[border]) td :where(button):hover { background: var(--gris-fondo); color: var(--texto); }

/* Fila de totales en tablas de detalle */
:where(table[border]) tr:has(td[colspan]) td { background: var(--superficie-2); }

/* Etiquetas de estado (las crea assets/js/app.js) */
.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; }
.etiqueta.verde { color: var(--verde); background: var(--verde-fondo); border-color: var(--verde-borde); }
.etiqueta.ambar { color: var(--ambar); background: var(--ambar-fondo); border-color: var(--ambar-borde); }
.etiqueta.azul  { color: var(--azul);  background: var(--azul-fondo);  border-color: var(--azul-borde); }
.etiqueta.gris  { color: var(--gris);  background: var(--gris-fondo);  border-color: var(--borde); }
.etiqueta.rojo  { color: var(--rojo);  background: var(--rojo-fondo);  border-color: var(--rojo-borde); }

/* Tabla de datos clave-valor (detalle de venta, compra, cotización) */
table.datos {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border-collapse: separate;
    border-spacing: 0;
    margin: 14px 0 18px;
    min-width: min(560px, 100%);
}
table.datos td { padding: 9px 18px !important; border-bottom: 1px solid var(--borde); vertical-align: top; }
table.datos tr:last-child td { border-bottom: 0; }
table.datos td:first-child { width: 170px; color: var(--texto-suave); background: var(--superficie-2); }
table.datos td:first-child strong { font-weight: 500; }

/* ------------------------------------------------------------ mensajes */
.alerta,
p[style*="color:green"],
p[style*="color: green"],
p[style*="color:red"],
p[style*="color: red"] {
    padding: 11px 14px;
    border-radius: var(--radio);
    border: 1px solid;
    border-left-width: 4px;
}
.alerta.exito,
p[style*="color:green"],
p[style*="color: green"] {
    color: var(--verde) !important;
    background: var(--verde-fondo);
    border-color: var(--verde-borde);
    border-left-color: var(--verde);
}
.alerta.error,
p[style*="color:red"],
p[style*="color: red"] {
    color: var(--rojo) !important;
    background: var(--rojo-fondo);
    border-color: var(--rojo-borde);
    border-left-color: var(--rojo);
}
.alerta.aviso {
    color: var(--ambar);
    background: var(--ambar-fondo);
    border-color: var(--ambar-borde);
    border-left-color: #dc6803;
}

/* ------------------------------------------------------------ pantalla de aviso / error */
.pantalla-aviso {
    max-width: 520px;
    margin: 48px auto;
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 12px;
    box-shadow: var(--sombra-2);
    padding: 40px 32px;
}
.pantalla-aviso h1 { margin-bottom: 8px; }
.pantalla-aviso p { color: var(--texto-2); margin: 0 0 24px; }
.icono-aviso { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: var(--rojo-fondo); color: var(--rojo); display: grid; place-items: center; }
.icono-aviso svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ------------------------------------------------------------ inicio de sesión */
body.sin-menu { padding-left: 0; }
.pantalla-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--superficie);
}
.pantalla-login .portada {
    position: relative;
    background: radial-gradient(1200px 600px at 20% 0%, #232c3a 0%, var(--lateral) 55%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 48px;
    text-align: center;
    overflow: hidden;
}
.pantalla-login .portada::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--acento);
}
.pantalla-login .portada img {
    width: 260px;
    height: auto;
    padding: 14px 18px;
    margin-bottom: 26px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.pantalla-login .portada .nombre-marca {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
}
.pantalla-login .portada p { color: var(--lateral-texto); max-width: 340px; margin: 0; }
.pantalla-login .portada .pie-portada { position: absolute; bottom: 22px; font-size: 12px; color: #6b7686; }
.pantalla-login .formulario { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.tarjeta { width: 100%; max-width: 380px; }
.tarjeta h1 { font-size: 24px; margin-bottom: 4px; }
.tarjeta .ayuda { margin: 0 0 26px; }
.tarjeta form p { margin: 0 0 18px; }
.tarjeta label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.tarjeta input { width: 100%; min-height: 42px; }
.tarjeta button { width: 100%; padding: 12px; font-size: 14.5px; }
.tarjeta .error {
    color: var(--rojo);
    background: var(--rojo-fondo);
    border: 1px solid var(--rojo-borde);
    border-left: 4px solid var(--rojo);
    border-radius: 6px;
    padding: 9px 10px;
}
.tarjeta .pie { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--borde); color: var(--texto-suave); font-size: 12.5px; }

/* ------------------------------------------------------------ panel principal */
.encabezado-pagina { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.encabezado-pagina h1 { margin: 0; }
.encabezado-pagina p { margin: 4px 0 0; color: var(--texto-suave); }
.encabezado-pagina .acciones-pagina { display: flex; flex-wrap: wrap; gap: 8px; }

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.indicador {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 20px;
    color: var(--texto);
    text-decoration: none;
    display: block;
}
a.indicador:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-2); text-decoration: none; color: var(--texto); }
.indicador .rotulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); }
.indicador .valor { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 2px; line-height: 1.2; }
.indicador .valor small { font-size: 14px; font-weight: 600; color: var(--texto-2); margin-left: 6px; }
.indicador .detalle { font-size: 13px; color: var(--texto-suave); }
.indicador.alerta-roja .valor { color: var(--rojo); }
.indicador.alerta-ambar .valor { color: var(--ambar); }

.paneles { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.panel {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    overflow: hidden;
    margin-bottom: 16px;
}
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--borde); }
.panel-cabecera h2 { margin: 0; font-size: 14.5px; }
.panel-cabecera a { font-size: 13px; }
.panel table { width: 100%; border-collapse: collapse; }
.panel th, .panel td { padding: 10px 18px; border-bottom: 1px solid var(--borde); text-align: left; }
.panel th { background: var(--superficie-2); color: var(--texto-suave); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.panel tr:last-child td { border-bottom: 0; }
.panel td.num, .panel th.num { text-align: right; white-space: nowrap; }
.panel td:first-child, .panel td:nth-child(2) { white-space: nowrap; }
.panel .vacio { padding: 26px 18px; color: var(--texto-suave); text-align: center; margin: 0; }

.accesos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 16px 18px;
}
.accesos a {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 12px 14px;
    color: var(--texto);
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}
.accesos a:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); color: var(--texto); }
.accesos svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ celular y tablet: el menú se abre con el botón ☰ */
@media (max-width: 900px) {
    body { padding-left: 0; }
    .contenido { padding: 20px 16px 40px; }
    .barra-superior { padding: 0 12px; gap: 10px; }
    .barra-superior .fecha-hoy { display: none; }
    .menu { transform: translateX(-100%); transition: transform 0.2s; box-shadow: var(--sombra-2); }
    body.menu-abierto .menu { transform: none; }
    body.menu-abierto .velo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 20; }
    .boton-menu { display: flex; background: transparent; border: 0; box-shadow: none; color: var(--texto); padding: 6px; }
    .boton-menu:hover { background: var(--gris-fondo); }
    .boton-menu svg { width: 22px; height: 22px; }
    :where(table[border]) { display: block; overflow-x: auto; }
    :where(label.campo, [class^="form-"] label) { width: auto !important; display: block !important; margin-bottom: 4px; }
    .paneles { grid-template-columns: minmax(0, 1fr); }
    .panel { overflow-x: auto; }
    .indicador .valor { font-size: 21px; }
    .pantalla-login { grid-template-columns: 1fr; }
    .pantalla-login .portada { padding: 32px 24px 36px; }
    .pantalla-login .portada img { width: 180px; padding: 10px 12px; margin-bottom: 14px; border-radius: 18px; }
    .pantalla-login .portada .pie-portada { display: none; }
    table.datos td:first-child { width: auto; }
}

/* ------------------------------------------------------------ impresión: sin menú ni botones */
@media print {
    body { background: #fff; padding-left: 0; }
    .menu, .barra-superior, button, .boton, .celda-acciones { display: none !important; }
    .contenido { padding: 0; max-width: none; }
    :where(table[border]), .tabla-envoltura, .panel, .indicador { box-shadow: none; }
}

/* ------------------------------------------------------------ formularios de alta y edición */
/* Formularios POST de primer nivel (cliente, proveedor, producto...): tarjeta blanca */
.contenido > form[method="POST"][class^="form-"] {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px 24px 18px;
    margin-top: 16px;
    max-width: 980px;
}
/* Si el formulario ya trae sus propios fieldset (tarjetas), no se duplica el marco */
.contenido > form[method="POST"][class^="form-"]:has(> fieldset) {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
}
/* "Guardar  Cancelar": el enlace de cancelar como botón secundario */
button[type=submit] + a,
button[type=submit] ~ a[href$=".php"]:not(.boton) {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 8px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 6px;
    background: var(--superficie);
    color: var(--texto-2);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.2;
    vertical-align: middle;
}
button[type=submit] + a:hover,
button[type=submit] ~ a[href$=".php"]:not(.boton):hover { background: var(--gris-fondo); color: var(--texto); text-decoration: none; }
/* Excepción: en la barra de filtros "Limpiar" sigue como enlace simple */
.contenido > form[method="GET"] button[type=submit] ~ a,
.contenido > form[method="get"] button[type=submit] ~ a { border: 0; background: none; padding: 0 4px; margin-left: 2px; font-weight: 500; font-size: 13px; color: var(--acento-oscuro); }
.celda-acciones > a, .celda-acciones > form > button { padding: 4px 9px !important; }

/* ------------------------------------------------------------ tablas de captura (llantas de una venta, compra o cotización) */
:where(table[border]) td > select { width: 100%; min-width: 240px; max-width: 560px; }
:where(table[border]) td > input.num,
:where(table[border]) td > input[type=number] { width: 100px; text-align: right; }

/* Cuadro de totales: tarjeta alineada a la derecha, como en un comprobante */
table.totales {
    margin: 14px 0 20px auto;
    min-width: 340px;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    border-collapse: separate;
    border-spacing: 0;
    padding: 6px 4px;
}
table.totales td { padding: 7px 14px !important; }
table.totales td:first-child { color: var(--texto-2); }
table.totales tr:last-child td { border-top: 1px solid var(--borde); padding-top: 10px !important; font-size: 1.05em; }
table.totales input { width: 110px; text-align: right; }

/* Listas desplegables con buscador (assets/js/app.js) */
.combo { position: relative; display: inline-block; max-width: 100%; vertical-align: middle; }
.combo .combo-texto { max-width: 100%; }
.combo .combo-original { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.combo-lista { position: fixed; z-index: 1000; max-height: 280px; max-width: min(640px, 95vw); overflow-y: auto; background: var(--superficie);
               border: 1px solid var(--borde-fuerte); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); padding: 4px 0; }
.combo-opcion { padding: 6px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.92em; }
.combo-opcion.activa { background: var(--acento-suave); }
.combo-opcion.elegida { font-weight: 600; }
.combo-vacio { padding: 6px 10px; color: var(--texto-suave); font-size: 0.9em; }