/* ------------------------------------------------------------------
   Estilos propios del sistema de facturación.
   ------------------------------------------------------------------ */

/*
 * Sistema visual: base neutra zinc, un solo acento esmeralda, Geist para el texto y Geist Mono
 * para códigos, folios y montos. Sin degradados ni brillos: la jerarquía la dan el peso, el
 * color del texto y el espacio. Las sombras llevan el tono del fondo, no negro puro.
 */
:root {
    --fondo: #f6f6f7;
    --panel: #ffffff;
    --panel-2: #fbfbfc;
    --borde: #e7e7ea;
    --borde-fuerte: #d6d6db;
    --texto: #18181b;
    --suave: #5b5b66;
    --tenue: #9a9aa5;

    --acento: #047857;
    --acento-hover: #065f46;
    --acento-suave: #ecf8f3;
    --acento-borde: #a7e3cc;
    --acento-2: #047857;
    --sobre-acento: #ffffff;

    --ok: #15803d;
    --ok-suave: #edf8f0;
    --error: #c2410c;
    --error-suave: #fdf1ec;
    --alerta: #b45309;
    --alerta-suave: #fdf6e8;
    --info-suave: #f0f0f2;

    --sombra: 0 1px 0 rgba(24, 24, 27, .03), 0 12px 32px -18px rgba(24, 24, 27, .16);
    --sombra-alta: 0 24px 60px -24px rgba(24, 24, 27, .28);
    --radio: 18px;
    --radio-chico: 10px;
    --sidebar: 252px;
    --curva: cubic-bezier(.16, 1, .3, 1);
    --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    color-scheme: light;
}

/*
 * Estilos oscuro y negro (tema.js deja en <html data-aspecto> lo que se ve: con «según el
 * sistema» resuelve claro u oscuro). El oscuro es azul pizarra con acento violeta, al modo de
 * los paneles de administración tipo Vuexy; el negro lleva fondo negro puro para pantallas OLED
 * y el mismo acento. Lo que cambia además de los colores está al final de la hoja.
 */
:root[data-aspecto="oscuro"] {
    color-scheme: dark;
    --fondo: #25293c;
    --panel: #2f3349;
    --panel-2: #353a52;
    --borde: #434968;
    --borde-fuerte: #565b78;
    --texto: #dcdaf0;
    --suave: #aeadc6;
    --tenue: #7f7e9a;

    --acento: #7367f0;
    --acento-hover: #685dd8;
    --acento-suave: #3a3b64;
    --acento-borde: #5a52b8;
    --acento-2: #7367f0;
    --sobre-acento: #ffffff;

    --ok: #28c76f;
    --ok-suave: #2e4b4f;
    --error: #ff4c51;
    --error-suave: #50374a;
    --alerta: #ff9f43;
    --alerta-suave: #504448;
    --info-suave: #353a52;

    --sombra: 0 3px 12px rgba(12, 14, 26, .3);
    --sombra-alta: 0 14px 40px rgba(12, 14, 26, .55);
    --radio: 8px;
    --radio-chico: 6px;
}
:root[data-aspecto="negro"] {
    color-scheme: dark;
    --fondo: #000000;
    --panel: #0f0f12;
    --panel-2: #16161b;
    --borde: #24242b;
    --borde-fuerte: #34343d;
    --texto: #ececf1;
    --suave: #a4a4b0;
    --tenue: #6c6c78;

    --acento: #7c71f5;
    --acento-hover: #9188f7;
    --acento-suave: #23213b;
    --acento-borde: #4a43a0;
    --acento-2: #7c71f5;
    --sobre-acento: #ffffff;

    --ok: #28c76f;
    --ok-suave: #0f2a1d;
    --error: #ff4c51;
    --error-suave: #2c1416;
    --alerta: #ff9f43;
    --alerta-suave: #2c1f10;
    --info-suave: #16161b;

    /* Sobre negro una sombra no se ve: el borde marca el contorno */
    --sombra: 0 0 0 1px #1c1c22;
    --sombra-alta: 0 0 0 1px #2a2a32, 0 20px 50px rgba(0, 0, 0, .8);
    --radio: 8px;
    --radio-chico: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-feature-settings: "ss01", "cv11";
    background: var(--fondo);
    color: var(--texto);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }

h1, h2, h3 { line-height: 1.3; }

/* ---------------- Login ---------------- */

.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(1000px 500px at 15% -10%, var(--acento-suave), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, var(--info-suave), transparent 55%),
        var(--fondo);
}

.login {
    width: 100%;
    max-width: 400px;
    padding: 34px 30px;
}

.login h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }
.login .sub { margin: 0 0 24px; color: var(--suave); font-size: 13px; }
.login label + label { margin-top: 14px; }
.login button { width: 100%; margin-top: 20px; padding: 11px; }
.login .error { margin: 14px 0 0; text-align: center; }

.marca-login {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--acento);
    color: var(--sobre-acento); font-weight: 700; font-size: 18px;
    margin-bottom: 16px;
}

/* ---------------- Estructura ---------------- */

.layout { display: flex; min-height: 100vh; }

.lateral {
    width: var(--sidebar);
    flex: 0 0 var(--sidebar);
    background: var(--panel);
    border-right: 1px solid var(--borde);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; }

.marca .logo {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--acento);
    color: var(--sobre-acento);
    display: grid; place-items: center;
    font-weight: 700;
}

.marca .nombre { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.marca .nombre small { display: block; font-weight: 500; font-size: 11px; color: var(--tenue); }

.tabs { display: flex; flex-direction: column; gap: 2px; }

.tabs .grupo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tenue);
    padding: 14px 10px 6px;
}

.tabs button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    border-radius: var(--radio-chico);
    padding: 9px 10px;
    color: var(--suave);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.tabs button svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .85; }
.tabs button:hover { background: var(--fondo); color: var(--texto); }

.tabs button.activo {
    background: var(--acento-suave);
    color: var(--acento);
    font-weight: 600;
}

.pie-lateral { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--borde); }
.pie-lateral p { margin: 0; font-size: 11.5px; color: var(--tenue); }

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    background: var(--panel);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 5;
}

.barra .titulo { font-size: 16px; font-weight: 600; }
.espaciador { flex: 1; }

.usuario {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--texto);
}

.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--acento);
    color: var(--sobre-acento); display: grid; place-items: center;
    font-size: 13px; font-weight: 600;
}

.usuario .rol { display: block; font-size: 11px; color: var(--tenue); }

.badge {
    background: var(--acento-suave);
    color: var(--acento);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
}

main { padding: 24px 26px 60px; max-width: 1240px; width: 100%; }

/* ---------------- Tarjetas ---------------- */

.tarjeta {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px 24px;
    margin-bottom: 20px;
}

.tarjeta h2 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tarjeta h2 .icono {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--acento-suave);
    color: var(--acento);
    display: grid; place-items: center;
    flex: 0 0 34px;
}

.tarjeta h3 {
    margin: 22px 0 8px;
    font-size: 12px;
    color: var(--tenue);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
}

.ayuda { color: var(--suave); font-size: 13px; margin: 6px 0 18px; }
.ayuda code { background: var(--fondo); padding: 1px 5px; border-radius: 5px; font-size: 12px; }

/* ---------------- Formularios ---------------- */

.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

label { display: block; font-size: 12.5px; color: var(--suave); font-weight: 500; }

input, select {
    width: 100%;
    margin-top: 5px;
    padding: 9px 12px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    background: var(--panel);
    color: var(--texto);
    font-size: 14px;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

input:hover, select:hover { border-color: var(--tenue); }

input:focus, select:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}

input[type=file] { padding: 7px 10px; background: var(--fondo); }
.fila input { width: auto; min-width: 210px; margin-top: 0; }
/* Sin esto los desplegables se estiran al 100% y rompen la fila en varias líneas */
.fila select { width: auto; min-width: 180px; margin-top: 0; }
/* El mínimo de ancho es para los campos de texto: una casilla de 210 px dejaba su texto lejos */
.fila input[type="checkbox"], .fila input[type="radio"] { min-width: 0; }

button {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radio-chico);
    padding: 10px 18px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, box-shadow .15s, transform .05s;
}

button:active { transform: translateY(1px); }

/*
 * Un botón apagado tiene que verse apagado.
 *
 * Hasta aquí ninguno lo hacía: el de «Crear cuenta» se veía igual de vivo con
 * el formulario vacío que con él lleno, así que la persona hacía clic, no
 * pasaba nada, y no tenía cómo saber por qué. El cursor prohibido y el color
 * gastado dicen «todavía no» sin una sola palabra.
 */
button:disabled,
button:disabled:hover {
    background: var(--fondo);
    border-color: var(--borde);
    color: var(--tenue);
    box-shadow: none;
    filter: none;
    cursor: not-allowed;
}
button:disabled:active { transform: none; }

.primario {
    background: var(--acento);
    color: var(--sobre-acento);
}

.primario:hover { filter: brightness(1.06); }

.secundario { background: var(--panel); border-color: var(--borde-fuerte); color: var(--texto); }
.secundario:hover { background: var(--fondo); border-color: var(--tenue); }

.peligro { color: var(--error); border-color: var(--error); background: transparent; }
.peligro:hover { background: var(--error-suave); }

.chico { padding: 5px 11px; font-size: 12.5px; border-radius: 8px; }

.acciones { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.check { display: flex; align-items: center; gap: 7px; color: var(--texto); font-size: 13.5px; }
.check input { width: auto; margin: 0; accent-color: var(--acento); }

/* ---------------- Tablas ---------------- */

.tabla { width: 100%; border-collapse: separate; border-spacing: 0; margin: 10px 0; font-size: 13.5px; }

.tabla th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tenue);
    font-weight: 600;
    background: var(--fondo);
    padding: 9px 12px;
    white-space: nowrap;
}

.tabla th:first-child { border-radius: 8px 0 0 8px; }
.tabla th:last-child { border-radius: 0 8px 8px 0; }
.tabla td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover td { background: var(--fondo); }
.tabla input { margin: 0; }
.tabla td button + button { margin-left: 6px; }

/* ---------------- Resultados y estados ---------------- */

.resultado {
    margin-top: 16px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 14px 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--texto);
}

.resultado:empty { display: none; }
.resultado.error { background: var(--error-suave); border-color: transparent; color: var(--error); }
.error { color: var(--error); font-size: 13.5px; }
.ok { color: var(--ok); }

.pastilla {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    display: inline-block;
}

.p-ok { background: var(--ok-suave); color: var(--ok); }
.p-mal { background: var(--error-suave); color: var(--error); }
.p-espera { background: var(--alerta-suave); color: var(--alerta); }

/* ---------------- Aviso flotante ---------------- */

.aviso {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--texto);
    color: var(--panel);
    padding: 11px 20px;
    border-radius: var(--radio-chico);
    font-size: 13.5px;
    box-shadow: 0 10px 30px rgba(24, 24, 27, .25);
    max-width: 90vw;
    z-index: 20;
}

/* ---------------- Responsivo ---------------- */

/* Botón de tema (tema.js) y del menú: solo ícono, mismo tamaño que un botón chico */
.btn-tema, .btn-menu {
    display: inline-grid; place-items: center; flex: none;
    width: 34px; height: 34px; padding: 0; margin: 0; cursor: pointer;
    background: var(--panel); color: var(--suave);
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
}
.btn-tema:hover, .btn-menu:hover { color: var(--texto); border-color: var(--acento); }
.btn-tema:focus-visible, .btn-menu:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn-tema svg, .btn-menu svg { width: 17px; height: 17px; display: none; }
.btn-menu svg,
:root:not([data-tema]) .btn-tema .i-sistema,
:root[data-tema="claro"] .btn-tema .i-claro,
:root[data-tema="oscuro"] .btn-tema .i-oscuro,
:root[data-tema="negro"] .btn-tema .i-oscuro { display: block; }
.btn-menu, .tema-movil { display: none; }
.tema-movil { margin-left: auto; margin-right: 8px; }
.login-wrap { position: relative; }
.login-tema { position: absolute; top: 16px; right: 16px; z-index: 1; }


/* ---------------- Productos ---------------- */

.indicadores { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; }
.indicadores .check { padding: 8px 12px; background: var(--fondo); border-radius: var(--radio-chico); }

.ancho-completo { display: block; width: 100%; }
.ancho-completo textarea {
    width: 100%;
    font-family: inherit;
    font-size: 14px;
    color: var(--texto);
    background: var(--panel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    padding: 10px 12px;
    resize: vertical;
}

.col-codigo { display: flex; gap: 6px; align-items: center; min-width: 150px; }
.col-codigo input { flex: 1; min-width: 80px; }
.buscar-producto { line-height: 1; font-size: 15px; }

.con-iva { color: var(--suave); font-variant-numeric: tabular-nums; }

/* ---------------- Modal ---------------- */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(24, 24, 27, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px;
    z-index: 50;
}

.modal-caja {
    background: var(--panel);
    border-radius: var(--radio);
    padding: 24px 26px;
    width: min(760px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(24, 24, 27, .3);
}

.modal-caja h2 { margin: 0 0 14px; }
.modal-caja > input { width: 100%; margin-bottom: 12px; }
.tabla-scroll { overflow-y: auto; flex: 1; }

/* ---------------- Selección de empresa ---------------- */

.selector-empresa {
    width: 100%;
    max-width: 620px;
    padding: 34px 30px;
}

.selector-empresa h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.02em; }

.lista-empresas { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }

.empresa-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nombre estado" "rut estado";
    gap: 2px 14px;
    text-align: left;
    width: 100%;
    padding: 14px 16px;
    background: var(--panel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    align-items: center;
}

.empresa-item:hover { border-color: var(--acento); background: var(--acento-suave); }
.empresa-nombre { grid-area: nombre; font-weight: 600; color: var(--texto); font-size: 15px; }
.empresa-rut { grid-area: rut; color: var(--suave); font-size: 12.5px; font-weight: 500; }
.empresa-item .pastilla { grid-area: estado; justify-self: end; }

.badge-empresa { background: var(--info-suave); color: var(--texto); letter-spacing: 0; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Ficha de empresa por pestañas ---------------- */

.pestanas {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 18px;
}

.pestana {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 10px 14px;
    color: var(--suave);
    font-size: 13.5px;
    font-weight: 600;
}

.pestana:hover { color: var(--texto); background: var(--fondo); }
.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }

.grilla-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: start;
}

.campo { min-width: 0; }
.campo-ancho { grid-column: 1 / -1; }

.etiqueta { display: block; font-size: 12.5px; color: var(--suave); font-weight: 500; }
.obligatorio { color: var(--error); font-weight: 700; }

.pista { display: block; margin-top: 5px; font-size: 12px; color: var(--tenue); line-height: 1.45; }

.error-campo { margin: 5px 0 0; font-size: 12px; color: var(--error); font-weight: 500; }

.campo-malo { border-color: var(--error) !important; }
.campo-malo:focus { box-shadow: 0 0 0 3px var(--error-suave) !important; }

.campo .opciones { display: flex; flex-direction: column; gap: 8px; margin-top: 7px; }
.campo .opciones .check { font-size: 13.5px; }

.fila-acteco { display: flex; gap: 10px; margin-top: 5px; }
.fila-acteco input:first-child { flex: 0 0 110px; }
.fila-acteco input:last-child { flex: 1; }

.firma { margin-top: 5px; }
.firma .fila { margin: 8px 0 0; }
.firma-vista {
    display: block;
    max-width: 260px;
    max-height: 90px;
    padding: 8px;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
}

.documentos-dte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
}

.documento {
    padding: 9px 12px;
    background: var(--fondo);
    border: 1px solid transparent;
    border-radius: var(--radio-chico);
    font-size: 13px;
}

.documento:hover { border-color: var(--borde-fuerte); }
.documento strong { font-variant-numeric: tabular-nums; }

.modal-caja.ancha { width: min(940px, 100%); }
.ancho { width: 100%; }

input[readonly] { background: var(--fondo); color: var(--suave); cursor: not-allowed; }

/* En el modal, los campos hacen scroll y las pestañas y los botones quedan siempre a la vista */
.modal-caja .form-empresa { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal-caja .form-empresa [data-campos] { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.modal-caja .form-empresa .acciones {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

::placeholder { color: var(--tenue); opacity: 1; }

.boton-archivo {
    display: inline-block;
    width: auto;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--texto);
    background: var(--panel);
    border: 1px solid var(--borde-fuerte);
    border-radius: 8px;
    cursor: pointer;
}

.boton-archivo:hover { background: var(--fondo); border-color: var(--tenue); }
.nombre-archivo { display: block; margin-top: 6px; font-size: 12px; color: var(--suave); }

/* ---------------- Detalle del documento ---------------- */

/* Con la columna de unidad la tabla ya no cabe en pantallas angostas: que haga su
   propio scroll en vez de deformar el panel. */
.tabla-ancha { overflow-x: auto; }
.tabla-ancha .tabla { min-width: 860px; }

#tabla-lineas td:nth-child(2) input { min-width: 190px; }
#tabla-lineas td:nth-child(3) input { max-width: 100px; }
#tabla-lineas td:nth-child(4) select { min-width: 145px; }
#tabla-lineas td:nth-child(5) input { max-width: 120px; }
#tabla-lineas td:nth-child(6) input { max-width: 90px; }

.plantilla {
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--fondo);
    border-radius: var(--radio-chico);
}

.plantilla .fila { margin-bottom: 0; }
.plantilla select { width: auto; min-width: 280px; margin-top: 0; }
.plantilla .ayuda { margin: 10px 0 0; }

/* ---------------- Ficha de producto ---------------- */

.ficha-cabecera {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ficha-cabecera h2 { margin: 0; flex: 1; }
.ficha-cabecera-fin { display: flex; align-items: center; gap: 10px; }

/* La pastilla de estado es el interruptor del producto: tiene que invitar a pulsarla */
.pastilla-boton {
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: box-shadow .12s, border-color .12s;
}
.pastilla-boton:hover { border-color: currentColor; }
.pastilla-boton:active { transform: translateY(1px); }
.pastilla-boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------------- Filas que abren algo ---------------- */

/*
 * La fila entera es el objetivo del clic —no un botón «Editar» de 60px—, así que
 * tiene que verse pulsable: cursor de mano, realce al pasar y foco visible para
 * quien navega con el teclado.
 */
.tabla tr.fila-abrible { cursor: pointer; }
.tabla tr.fila-abrible:hover td { background: var(--acento-suave); }
.tabla tr.fila-abrible:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: -2px;
}
.tabla tr.fila-abrible:active td { background: var(--borde-fuerte); }

.chip-subgrupo {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 3px 9px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
    font-size: 11.5px;
    color: var(--texto);
    cursor: pointer;
}
.chip-subgrupo:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }

/* Las descripciones son lo que el cliente lee en el documento: van arriba y anchas */
.descripciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 20px 0 6px;
    align-items: start;      /* cada columna a su alto: el contador queda pegado a su campo */
}

.campo-desc { position: relative; }

.campo-desc textarea {
    width: 100%;
    margin-top: 5px;
    padding: 10px 12px 22px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--panel);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    resize: vertical;
}

.campo-desc textarea:focus {
    outline: none;
    border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}

.contador {
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.contador-cerca { color: var(--alerta); }
.contador-lleno { color: var(--error); }

.tag-dte {
    background: var(--fondo);
    border-radius: 5px;
    padding: 1px 5px;
    font-size: 10.5px;
    color: var(--tenue);
    font-weight: 500;
}

.ficha-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
    gap: 28px;
    align-items: start;
}

.col-lateral {
    padding: 4px 18px 18px;
    background: var(--fondo);
    border-radius: var(--radio);
}

.col-lateral h3:first-child { margin-top: 18px; }

/* ---- Interruptores ---- */

.interruptores { display: flex; flex-direction: column; gap: 4px; }

.interruptor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--texto);
    cursor: pointer;
}

.interruptor:hover { background: var(--panel); }

/* El input queda encima de la palanca, invisible pero con su tamaño: así conserva
   el foco de teclado y el área de clic en vez de desaparecer del todo. */
.interruptor { position: relative; }
.interruptor input {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 19px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;          /* por encima de la palanca, que va después en el DOM */
}

.palanca {
    flex: 0 0 34px;
    height: 19px;
    border-radius: 999px;
    background: var(--borde-fuerte);
    position: relative;
    transition: background .15s;
}

.palanca::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(24, 24, 27, .3);
    transition: transform .15s;
}

.interruptor input:checked + .palanca { background: var(--acento); }
.interruptor input:checked + .palanca::after { transform: translateX(15px); }
.interruptor input:focus-visible + .palanca { box-shadow: 0 0 0 3px var(--acento-suave); }

.subpanel {
    margin: 6px 0 4px 12px;
    padding: 14px;
    background: var(--panel);
    border-left: 2px solid var(--acento);
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
}

.subpanel .grilla-campos { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }

/* ---- Imagen ---- */

.imagen-producto { margin-bottom: 6px; }

.imagen-vista, .imagen-vacia {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: var(--panel);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-chico);
}

.imagen-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--tenue);
    font-size: 13px;
}

.imagen-producto .fila { margin: 10px 0 0; }

/* ---- Bloque plegable ---- */

.plegable {
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--fondo);
    border-radius: var(--radio-chico);
}

.plegable summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
}

.plegable summary small { color: var(--tenue); font-weight: 500; margin-left: 6px; }
.plegable[open] summary { margin-bottom: 14px; }
.plegable .ayuda { margin-bottom: 0; }

/* La barra superior es fija: sin este margen tapa el campo al que se salta */
.interruptor, .campo, .tarjeta h3, .plegable { scroll-margin-top: 90px; }

.barra-ficha { border-top: 1px solid var(--borde); padding-top: 18px; }
.barra-ficha .espaciador { flex: 1; }

@media (max-width: 1100px) {
    .descripciones, .ficha-columnas { grid-template-columns: 1fr; }
}

/* ---------------- Buscador de productos ---------------- */

.hero-busqueda { padding: 34px 30px 26px; text-align: center; }

.omnibox-caja {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
}

.omnibox-caja input {
    width: 100%;
    margin: 0;
    padding: 15px 44px 15px 46px;
    font-size: 16px;
    border-radius: 999px;
    box-shadow: var(--sombra);
}

.omnibox-caja input::-webkit-search-cancel-button { display: none; }

.omnibox-lupa {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: var(--tenue);
    pointer-events: none;
}

.omnibox-limpiar {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: var(--fondo);
    color: var(--suave);
    font-size: 12px;
    line-height: 1;
}

.omnibox-limpiar:hover { background: var(--borde); color: var(--texto); }

.omnibox-pista {
    max-width: 680px;
    margin: 10px auto 0;
    text-align: left;
    min-height: 18px;
}

/* Resultados flotantes: no empujan la página, se superponen */
.omnibox-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 420px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 18px 48px rgba(24, 24, 27, .18);
}

.omnibox-cabecera,
.omnibox-fila {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 110px 110px;
    gap: 14px;
    align-items: center;
    width: 100%;
    text-align: left;
}

.omnibox-cabecera {
    padding: 10px 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tenue);
    background: var(--fondo);
    position: sticky;
    top: 0;
}

.omnibox-fila {
    padding: 12px 18px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--borde);
    border-radius: 0;
    font-size: 14px;
    color: var(--texto);
}

.omnibox-fila:hover, .omnibox-fila.marcada { background: var(--acento-suave); }

.omnibox-codigo { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.omnibox-desc { min-width: 0; }
.omnibox-desc small { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 2px; }
.omnibox-precio { text-align: right; font-variant-numeric: tabular-nums; color: var(--suave); }
.omnibox-precio small { display: block; margin-top: 3px; }

.omnibox-panel mark {
    background: var(--alerta-suave);
    color: var(--texto);
    font-weight: 700;
    border-radius: 3px;
    padding: 0 1px;
}

.omnibox-vacio { padding: 24px 18px; text-align: center; color: var(--suave); font-size: 13.5px; }

.acciones-hero {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}

/* Estado vacío */
.vacio { text-align: center; padding: 56px 30px; }
.vacio svg { width: 54px; height: 54px; color: var(--tenue); opacity: .55; }
.vacio-titulo { margin: 16px 0 4px; font-size: 16px; font-weight: 600; color: var(--texto); }
.vacio .ayuda { max-width: 420px; margin: 0 auto; }

/* ---------------- Importación de productos ---------------- */

.pasos {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 18px 0 22px;
    flex-wrap: wrap;
}

.pasos li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    background: var(--fondo);
    color: var(--suave);
    font-size: 13px;
    font-weight: 500;
}

.pasos li span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--borde-fuerte);
    color: var(--panel);
    font-size: 11.5px;
    font-weight: 700;
}

.pasos li.actual { background: var(--acento-suave); color: var(--acento); }
.pasos li.actual span { background: var(--acento); color: var(--sobre-acento); }
.pasos li.hecho { color: var(--ok); }
.pasos li.hecho span { background: var(--ok); color: var(--panel); }

/* La zona de soltar es un <label>: el clic en cualquier parte abre el buscador de archivos */
.zona-soltar {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 38px 20px;
    border: 2px dashed var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--fondo);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.zona-soltar svg { width: 34px; height: 34px; color: var(--tenue); }
.zona-soltar strong { font-size: 14.5px; color: var(--texto); }
.zona-soltar .ayuda { margin: 0; }
.zona-soltar:hover, .zona-soltar.encima { border-color: var(--acento); background: var(--acento-suave); }
.zona-soltar.encima svg, .zona-soltar.con-archivo svg { color: var(--acento); }
.zona-soltar.con-archivo { border-style: solid; border-color: var(--ok); background: var(--ok-suave); }

.interruptor-linea {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--texto);
    margin: 14px 0;
    cursor: pointer;
}
.interruptor-linea input { width: auto; margin: 0; }

.opciones-modo { display: grid; gap: 10px; margin-bottom: 18px; }

.opcion-modo {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-chico);
    cursor: pointer;
    color: var(--texto);
}
.opcion-modo input { width: auto; margin: 2px 0 0; }
.opcion-modo span { display: grid; gap: 2px; }
.opcion-modo small { color: var(--suave); font-size: 12.5px; }
.opcion-modo:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }

/* Marcadores del resumen previo a la carga */
.marcadores { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.marcador {
    flex: 1 1 130px;
    padding: 14px 16px;
    border-radius: var(--radio-chico);
    background: var(--fondo);
    display: grid;
    gap: 2px;
}
.marcador strong { font-size: 24px; font-weight: 650; line-height: 1.1; }
.marcador span { font-size: 12.5px; color: var(--suave); }
.marcador.ok { background: var(--ok-suave); }
.marcador.ok strong { color: var(--ok); }
.marcador.mal { background: var(--error-suave); }
.marcador.mal strong { color: var(--error); }

/* ---------------------------------------------------------------------
   Enlaces a la representación impresa de cada documento de un envío.
   Se ven como fichas y no como una lista de enlaces subrayados porque
   son veinte o treinta en un envío del set de pruebas.
   --------------------------------------------------------------------- */
.enlaces-dte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.enlaces-dte:empty { margin-top: 0; }
.etiqueta-enlaces { font-size: 12px; color: var(--tenue); margin-right: 2px; }
.enlace-dte {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 7px;
    background: var(--panel);
    color: var(--texto);
    font-size: 12px;
    text-decoration: none;
}
.enlace-dte:hover { border-color: var(--acento); color: var(--acento); }

/* ---------------------------------------------------------------------
   Pasos de la prueba de conexión con el SII
   --------------------------------------------------------------------- */
.pasos-sii { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.paso-sii { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px;
            border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); }
.paso-sii .marca { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid;
                   place-items: center; font-size: 12px; font-weight: 700; color: var(--panel); }
.paso-sii.ok .marca { background: var(--ok); }
.paso-sii.falla { border-color: var(--error); background: var(--error-suave); }
.paso-sii.falla .marca { background: var(--error); }
.paso-sii strong { font-size: 13px; }
.paso-sii .detalle { font-size: 13px; color: var(--suave); margin-top: 2px; }

/* Aviso sobre un envío que espera algo: un reintento, o que alguien revise en el SII */
.aviso-envio {
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde);
    border-left: 4px solid var(--alerta);
    background: var(--alerta-suave);
}
.aviso-envio.serio { border-left-color: var(--error); background: var(--error-suave); }
.aviso-envio p { margin: 0 0 8px; }
.aviso-envio button { margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Asistente de certificación                                          */
/* ------------------------------------------------------------------ */
.asistente-progreso .barra-progreso {
    height: 8px;
    border-radius: 99px;
    background: var(--borde);
    overflow: hidden;
    margin: 4px 0 8px;
}
.asistente-progreso .relleno { height: 100%; background: var(--ok); border-radius: 99px; transition: width .3s; }
.asistente-pasos { display: flex; flex-direction: column; gap: 10px; }
.grupo-pasos {
    margin: 14px 4px 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--suave);
}
.paso-cert {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.paso-cert[open] { border-color: var(--borde-fuerte); }
.cabeza-paso {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
}
.cabeza-paso::-webkit-details-marker { display: none; }
.titulo-paso { flex: 1; font-weight: 600; min-width: 0; }
.numero-paso {
    flex: none;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 600;
    background: var(--acento-suave); color: var(--acento);
}
.estado-hecho .numero-paso { background: var(--ok-suave); color: var(--ok); }
.estado-bloqueado .numero-paso { background: var(--borde); color: var(--tenue); }
.estado-bloqueado .titulo-paso { color: var(--suave); }
.p-tenue { background: var(--borde); color: var(--suave); }
.cuerpo-paso { padding: 0 18px 16px 58px; }
.chequeos { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chequeos li { display: flex; gap: 10px; align-items: flex-start; }
.chequeos .marca { flex: none; width: 18px; text-align: center; font-weight: 700; }
.chequeos .ok .marca { color: var(--ok); }
.chequeos .falla .marca { color: var(--error); }
.chequeos .info .marca { color: var(--tenue); }
.chequeos .detalle { color: var(--suave); font-size: 13px; margin-top: 2px; }
.falta-sistema {
    margin: 10px 0;
    padding: 10px 12px;
    border-radius: var(--radio-chico);
    background: var(--alerta-suave);
    border-left: 4px solid var(--alerta);
    font-size: 14px;
}
.cuerpo-paso .acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.nota-paso { flex: 1 1 240px; min-width: 0; }
a.boton {
    display: inline-flex; align-items: center;
    padding: 8px 14px;
    border-radius: var(--radio-chico);
    border: 1px solid var(--borde-fuerte);
    color: var(--texto);
    text-decoration: none;
    font-weight: 500;
}
a.boton:hover { border-color: var(--acento); color: var(--acento); }
@media (max-width: 640px) {
    .cuerpo-paso { padding-left: 18px; }
}
.chequeos li.ok, .chequeos li.falla, .chequeos li.info { color: var(--texto); background: none; }

.resultado-libro { margin-top: 10px; }
.resultado-libro p { margin: 4px 0; }

.opciones-nota { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; align-items: center; }
.opciones-nota button.activo { border-color: var(--acento); color: var(--acento); background: var(--acento-suave); }
.opciones-nota p { flex-basis: 100%; margin: 0; }
#tabla-lineas-nota input { width: 100%; min-width: 60px; }
#tabla-lineas-nota input[type=checkbox] { width: auto; min-width: 0; }
#ficha-documento .boton { margin: 6px 0; }

.opciones-decision { display: flex; flex-wrap: wrap; gap: 16px; margin: 6px 0 10px; }
#ficha-recibido .boton { margin: 6px 8px 6px 0; }
a.boton.primario { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.caja-sii { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.caja-sii p { margin: 4px 0; }
.aviso-plazo { color: var(--alerta); font-size: 14px; }

/* ------------------------------------------------------------------ */
/* Cobranza                                                            */
/* ------------------------------------------------------------------ */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.cifra { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 10px 12px; background: var(--panel); }
.cifra .etiqueta { font-size: 12px; color: var(--suave); }
.cifra .valor { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cifra.destacada .valor { color: var(--acento); }
.cifra.mala .valor { color: var(--error); }
.caja-cobro { border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 12px; }
.caja-cobro .pagos-anulados td { color: var(--tenue); text-decoration: line-through; }
.form-pago { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; margin-top: 10px; }
.form-pago .acciones { grid-column: 1 / -1; }
.grilla .completo { grid-column: 1 / -1; }
#caja-recordatorio textarea { width: 100%; font: inherit; line-height: 1.45; resize: vertical; }

/* Stock en el buscador de productos */
.omnibox-cabecera .derecha { text-align: right; }
.omnibox-stock { text-align: right; font-variant-numeric: tabular-nums; }
.stock { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock small { display: block; font-size: 11px; font-weight: 600; margin-top: 2px; }
.stock-sin { color: var(--error); }
.stock-bajo { color: var(--alerta); }
.stock-na { color: var(--tenue); font-size: 12px; }
@media (max-width: 640px) {
    .omnibox-cabecera, .omnibox-fila { grid-template-columns: 90px minmax(0, 1fr) 80px 80px; gap: 8px; }
}

/* Tablas ordenables */
.tabla th button.orden {
    all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap;
}
.tabla th button.orden:hover { color: var(--acento); }
.tabla th button.orden:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
.tabla th button.orden .flecha { font-size: 10px; opacity: .35; }
.tabla th button.orden.activa { color: var(--acento); }
.tabla th button.orden.activa .flecha { opacity: 1; }
.barra-tabla { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 8px 0 10px; }
.barra-tabla label { display: inline-flex; align-items: center; gap: 8px; }
.barra-tabla .derecha { margin-left: auto; }
.barra-tabla label, .barra-tabla select { margin: 0; }
.barra-tabla select { width: auto; }

/* Caja */
#caja-codigo { font-size: 18px; flex: 1; }
.caja-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.caja-total { font-size: 20px; margin-bottom: 10px; }
.caja-total strong { font-size: 32px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.caja-cant { width: 90px; }

/* Cotizaciones y notas de venta */
.aviso-comercial { border-left: 4px solid var(--acento); background: var(--acento-suave);
                   padding: 10px 12px; border-radius: var(--radio-chico); margin: 10px 0; display: flex; gap: 10px;
                   align-items: center; flex-wrap: wrap; }
.aviso-comercial.oculto { display: none; }
.fc-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.fc-cabecera h2 { margin: 0; }
.fc-botones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fc-cliente { display: flex; gap: 6px; }
.fc-cliente input { flex: 1; }
.fc-buscador { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 10px; margin: 8px 0; }
.fc-buscador input { width: 100%; }
.fc-buscador button.item { display: block; width: 100%; text-align: left; margin-top: 6px; }
label.bloque { display: block; margin: 12px 0; }
label.bloque textarea { width: 100%; display: block; margin-top: 5px; padding: 9px 12px; font: inherit; font-size: 14px;
    color: var(--texto); background: var(--panel); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); resize: vertical; }
label.bloque textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
#tabla-fc-lineas [name=nombre] { min-width: 320px; }
.fc-pie { align-items: flex-start; margin-top: 8px; }
/* Listado de cotizaciones: buscar y crear arriba, filtros plegados */
.com-busqueda { margin: 14px 0 6px; }
.com-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.com-barra .busca-tercero { flex: 1 1 260px; max-width: 420px; }
.com-barra .busca-tercero input { width: 100%; margin: 0; }
#com-btn-filtros { display: inline-flex; align-items: center; gap: 7px; }
#com-btn-filtros svg { width: 16px; height: 16px; }
#com-btn-filtros[aria-expanded="true"] { border-color: var(--acento); color: var(--acento); }
.com-contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; font-size: 11.5px; font-weight: 700;
    display: inline-grid; place-items: center; background: var(--acento); color: var(--sobre-acento); }
.com-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 14px; align-items: end;
    margin-top: 12px; padding: 14px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--panel-2); }
.com-filtros select { width: 100%; }
.com-filtros #com-limpiar { justify-self: start; }
/* En el teléfono: crear arriba (dos botones mitad y mitad), abajo el buscador con «Filtros»
   al lado, y el panel de filtros se abre justo debajo de ese botón */
@media (max-width: 600px) {
    .com-barra .espaciador { display: none; }
    .com-barra [data-nuevo-comercial] { order: -1; flex: 1 1 40%; padding-left: 8px; padding-right: 8px; }
    .com-barra .busca-tercero { flex: 1 1 50%; min-width: 0; max-width: none; }
}

/* Buscar otra por N° sin salir de la ficha: arriba a la derecha, compacto */
.fc-ir { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.fc-migas { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px 6px 2px; background: none; border: 0;
    color: var(--suave); font-size: 13px; font-weight: 500; cursor: pointer; }
.fc-migas:hover { color: var(--acento); }
.fc-migas svg { width: 16px; height: 16px; }
.fc-ir input { width: 200px; margin: 0; }
.fc-ir button { display: inline-flex; align-items: center; gap: 6px; }
.fc-ir svg { width: 15px; height: 15px; }
@media (max-width: 600px) {
    .fc-ir input { flex: 1; width: auto; min-width: 0; }
    .fc-migas span, .fc-ir .espaciador { display: none; }   /* en el teléfono la miga queda en la flecha */
}
/* Ficha de producto: tipo (producto o servicio) y exención arriba de todo */
.ficha-tipo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 18px;
    padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--panel-2); }
.ficha-tipo .interruptor { margin: 0; }
.ficha-tipo .ayuda { flex-basis: 100%; margin: 0; }
#form-producto.es-servicio [data-solo-producto] { display: none !important; }

.fc-guardar {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; justify-content: flex-end; gap: 10px;
    margin: 18px -26px 0; padding: 12px 26px;
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--borde);
}
.fc-guardar .primario { min-width: 140px; }
.fc-totales { margin-left: auto; min-width: 240px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.fc-totales .total { font-weight: 700; font-size: 1.1em; border-top: 1px solid var(--borde-fuerte); padding-top: 4px; }
#form-vendedor input:not([type=checkbox]) { width: auto; flex: 1 1 160px; margin-top: 0; }
#form-vendedor .check input { min-width: 0; }

/* Ficha de clientes */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Listado */
.cli-lista-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cli-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.cli-filtros select { width: auto; margin: 0; }
.cli-buscar { flex: 1 1 320px; position: relative; display: block; }
.cli-buscar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }
.cli-buscar input { margin: 0; padding-left: 36px; font-size: 15px; }
.segmentado { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); overflow: hidden; }
.segmentado label { position: relative; }
.segmentado input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; min-width: 0; }
.segmentado span { display: block; padding: 9px 14px; font-size: 13.5px; color: var(--texto); }
.segmentado label + label span { border-left: 1px solid var(--borde-fuerte); }
.segmentado input:checked + span { background: var(--acento-suave); color: var(--acento); font-weight: 600; }
.segmentado input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--acento); }
#tabla-clientes .cli-nombre { font-weight: 600; color: var(--texto); }
#tabla-clientes small { color: var(--suave); }
.cli-vacio-lista { text-align: center; padding: 36px 12px; color: var(--suave); }
.cli-vacio-lista p { margin: 0 0 12px; }

/* Ficha: cabecera fija con la acción principal siempre a mano */
.cli-ficha { padding-top: 0; }
.cli-cabecera { position: sticky; top: 61px; z-index: 4; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: var(--panel); margin: 0 -24px 14px; padding: 14px 24px; border-bottom: 1px solid var(--borde);
    border-radius: var(--radio) var(--radio) 0 0; }
.cli-identidad { flex: 1; min-width: 200px; }
.cli-identidad h2 { margin: 0; font-size: 18px; }
.cli-sub { font-size: 13px; color: var(--suave); margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cli-guardar { display: flex; align-items: center; gap: 10px; }
.cli-sucio { font-size: 12.5px; color: var(--alerta); font-weight: 600; }
.cli-alerta { border-radius: var(--radio-chico); padding: 10px 14px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center;
    flex-wrap: wrap; background: var(--error-suave); color: var(--error); border: 1px solid var(--error); font-size: 14px; }
.cli-alerta.oculto { display: none; }
.cli-alerta button { margin-left: auto; }

/* Resumen de cuenta y accesos */
.cli-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.cli-resumen:empty { display: none; }
.cli-resumen button { text-align: left; border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 10px 12px;
    background: var(--fondo); font: inherit; color: var(--texto); cursor: pointer; }
.cli-resumen button:hover { border-color: var(--acento); }
.cli-resumen .etiqueta { display: block; font-size: 12px; color: var(--suave); }
.cli-resumen .valor { display: block; font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.cli-resumen .mala .valor { color: var(--error); }
.cli-resumen .buena .valor { color: var(--ok); }
.cli-accesos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cli-accesos button { display: inline-flex; align-items: center; gap: 6px; }
.cli-cuenta { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--acento-suave);
    color: var(--acento); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cli-cuenta:empty { display: none; }
.pestana.con-error { color: var(--error); }
.pestana.con-error::after { content: ' •'; }

/* Datos básicos: columna principal y lateral de estado */
.cli-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; }
.cli-lateral { border-left: 1px solid var(--borde); padding-left: 24px; }
.cli-lateral h3:first-child, .cli-principal h3:first-child { margin-top: 6px; }
.cli-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 14px; }
.cli-grid > * { grid-column: span 12; }
.cli-grid .c2 { grid-column: span 2; } .cli-grid .c3 { grid-column: span 3; } .cli-grid .c4 { grid-column: span 4; }
.cli-grid .c6 { grid-column: span 6; } .cli-grid .c8 { grid-column: span 8; } .cli-grid .c9 { grid-column: span 9; }
.cli-grid .c12 { grid-column: span 12; }
.cli-angosto { max-width: 720px; }
.cli-mapa-caja { display: flex; align-items: flex-end; padding-bottom: 2px; }
.cli-mapa-caja a { display: inline-flex; gap: 6px; align-items: center; }
.cli-grid input:invalid:not(:placeholder-shown):not(:focus), .cli-grid input.invalido { border-color: var(--error); }
.pista.error { color: var(--error); }
.pista.ok { color: var(--ok); }
.cli-peligro input:checked + .palanca { background: var(--error); }
.cli-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cli-chips label { position: relative; }
.cli-chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; min-width: 0; }
.cli-chips span { display: inline-block; padding: 6px 12px; border: 1px solid var(--borde-fuerte); border-radius: 999px;
    font-size: 13px; color: var(--texto); }
.cli-chips input:checked + span { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.cli-chips input:checked + span::before { content: '✓ '; }
.cli-chips input:focus-visible + span { box-shadow: 0 0 0 3px var(--acento-suave); }
.cli-vacio { color: var(--suave); font-size: 13.5px; margin: 6px 0 12px; }
#tabla-cli-contactos input, #tabla-cli-despachos input { min-width: 110px; }
@media (max-width: 900px) {
    .cli-columnas { grid-template-columns: 1fr; }
    .cli-lateral { border-left: 0; padding-left: 0; border-top: 1px solid var(--borde); }
    .cli-grid .c2, .cli-grid .c3, .cli-grid .c4 { grid-column: span 6; }
    .cli-grid .c6, .cli-grid .c8, .cli-grid .c9 { grid-column: span 12; }
    /* En pantallas chicas la barra superior ya ocupa el tope: la cabecera no se fija y
       «Guardar» baja a una barra al pie, siempre al alcance del pulgar */
    .cli-cabecera { position: static; margin-top: 0; }
    .cli-guardar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; justify-content: flex-end;
        padding: 10px 16px; background: var(--panel); border-top: 1px solid var(--borde); box-shadow: 0 -4px 16px rgba(24, 24, 27, .08); }
    .cli-ficha { padding-bottom: 72px; }
    #form-cliente .pestanas { flex-wrap: nowrap; overflow-x: auto; }
    #form-cliente .pestana { white-space: nowrap; }
}
.cli-ficha [hidden], .cli-ficha[hidden] { display: none !important; }

/* Consultar datos SII */
.cli-rut { display: flex; gap: 6px; align-items: center; }
.cli-rut input { flex: 1; min-width: 0; }
.cli-rut button { margin-top: 5px; white-space: nowrap; }
.cli-sii { border: 1px solid var(--borde-fuerte); border-left: 4px solid var(--acento); border-radius: var(--radio-chico);
    background: var(--acento-suave); padding: 10px 14px; margin: 0 0 14px; font-size: 13.5px; }
.cli-sii.oculto { display: none; }
.cli-sii.aviso { border-left-color: var(--alerta); background: var(--alerta-suave); }
.cli-sii .cabeza { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.cli-sii .cabeza button { margin-left: auto; }
.cli-sii ul { margin: 8px 0 4px; padding-left: 18px; }
.cli-sii li { margin: 2px 0; }
.cli-sii small { color: var(--suave); }
.cli-sii del { color: var(--suave); }
.cli-cargado { animation: cli-cargado 2.4s ease-out; }
@keyframes cli-cargado { 0%, 40% { background: var(--ok-suave); border-color: var(--ok); } 100% { background: var(--panel); } }
.cli-sii-marcas { margin: 8px 0 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.cli-sii-alerta { margin: 6px 0; color: var(--error); font-weight: 600; }
.cli-sii-act { margin: 8px 0; background: var(--panel); font-size: 13px; }
.cli-sii-act td, .cli-sii-act th { padding: 6px 8px; }

/* Permisos: lo que el perfil no permite no se muestra */
.sin-permiso { display: none !important; }

/* Inicio */
.inicio-cabecera { margin: 4px 0 18px; }
.inicio-cabecera h2 { margin: 0 0 4px; font-size: 22px; }
.inicio-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.inicio-acceso { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 16px; cursor: pointer;
    background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
    font: inherit; color: var(--texto); transition: border-color .15s, transform .15s; }
.inicio-acceso:hover { border-color: var(--acento); transform: translateY(-1px); }
.inicio-acceso:focus-visible { outline: 3px solid var(--acento-suave); border-color: var(--acento); }
.inicio-acceso .icono { flex: 0 0 40px; height: 40px; border-radius: 12px; background: var(--acento-suave); color: var(--acento);
    display: grid; place-items: center; }
.inicio-acceso .icono svg { width: 20px; height: 20px; }
.inicio-acceso b { display: block; font-size: 15px; }
.inicio-acceso small { display: block; color: var(--suave); margin-top: 3px; font-size: 13px; line-height: 1.4; }

/* Usuarios y perfiles */
.usr-vistas { margin-bottom: 16px; background: var(--panel); }
.usr-nuevo { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 12px; margin-bottom: 14px; background: var(--fondo); }
.usr-perfil { width: auto; min-width: 170px; margin: 0; }
.usr-perfiles { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.usr-lista { position: sticky; top: 80px; }
.usr-item { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; font: inherit;
    color: var(--texto); background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.usr-item:hover { border-color: var(--acento); }
.usr-item.activo { border-color: var(--acento); background: var(--acento-suave); }
.usr-item small { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; }
.usr-barra { display: block; height: 4px; background: var(--borde); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.usr-barra span { display: block; height: 100%; background: var(--acento); }
.usr-editor-cabecera { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.usr-datos { flex: 1 1 360px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; }
.usr-acciones { margin: 0; }
.usr-herramientas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.usr-herramientas input { flex: 1 1 220px; margin: 0; min-width: 0; }
.usr-grupos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.usr-grupo { border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); padding: 8px 12px 10px; margin: 0; }
.usr-grupo.usr-vacio { opacity: .75; }
.usr-grupo legend { display: flex; gap: 8px; align-items: center; padding: 0 4px; font-weight: 600; color: var(--texto); font-size: 13.5px; }
.usr-cuenta { color: var(--suave); font-weight: 400; }
.usr-opcion { padding: 4px 0; align-items: flex-start; }
.usr-opcion input { margin-top: 3px; }
.usr-opcion small { color: var(--suave); }
@media (max-width: 900px) {
    .usr-perfiles { grid-template-columns: 1fr; }
    .usr-lista { position: static; }
    .usr-datos { grid-template-columns: 1fr; }
}

/* ---------------- Punto de venta ---------------- */
.pos-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 14px 20px; }
.pos-barra form.fila, .pos-barra .fila { margin: 0; }
.pos-barra select { min-width: 200px; }
.pos-cargar-vale { margin-left: auto !important; }
.pos-cargar-vale input { min-width: 130px; width: 130px; }
.pos-estado { font-size: 13.5px; }
.pos-grilla { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.pos-escaner { display: flex; gap: 10px; }
.pos-buscador { flex: 1; max-width: none; margin: 0; }
.pos-buscador input { box-shadow: none; padding-top: 12px; padding-bottom: 12px; }
.pos-pista { margin: 8px 0 0; min-height: 18px; }
.pos-cobro { position: sticky; top: 16px; }
.pos-doc { margin-bottom: 14px; }
.pos-cliente label { margin-bottom: 10px; }
.pos-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 14px 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); margin: 8px 0 14px; }
.pos-total strong { font-size: 34px; font-variant-numeric: tabular-nums; margin-left: auto; }
.pos-total small { width: 100%; color: var(--suave); font-size: 12px; text-align: right; }
.pos-medios { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pos-pago { display: grid; grid-template-columns: 1fr 110px 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; font-size: 13.5px; }
.pos-pago input { margin: 0; min-width: 0; padding: 7px 9px; }
.pos-saldo { font-size: 15px; margin: 8px 0; min-height: 22px; }
.pos-saldo strong { font-variant-numeric: tabular-nums; }
button.grande { padding: 13px 22px; font-size: 16px; }
.pos-vistas { margin-bottom: 16px; }
.pos-cant { width: 90px !important; min-width: 0 !important; }
.corto { min-width: 120px !important; width: 140px !important; }
.pc-cifras { display: flex; flex-wrap: wrap; gap: 24px; margin: 12px 0; }
.pc-cifras div { font-size: 12.5px; color: var(--suave); }
.pc-cifras b { display: block; font-size: 20px; color: var(--texto); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .pos-grilla { grid-template-columns: 1fr; }
    .pos-cobro { position: static; }
    .pos-cargar-vale { margin-left: 0 !important; }
}
/* En el teléfono la barra de arriba se parte en dos líneas en vez de empujar la página hacia el lado */
@media (max-width: 600px) {
    .barra { flex-wrap: wrap; gap: 6px 8px; }
    .barra .espaciador { display: none; }
    .barra .usuario { margin-left: auto; }
    .barra .titulo { flex-basis: 100%; }
    .barra .usuario { min-width: 0; }
    .barra .usuario > span:not(.avatar) { display: none; }   /* queda el avatar: el nombre partía la barra en tres líneas */
    .badge-empresa { max-width: 125px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 380px) {
    .badge-empresa { max-width: 95px; }
}
#form-pc-cierre > label { margin-top: 14px; }
.pos-buscador .omnibox-cabecera, .pos-buscador .omnibox-fila { grid-template-columns: 96px minmax(0, 1fr) 84px 96px; gap: 10px; }

/* ---------------- Modo simulación ---------------- */
.badge.badge-simulacion { background: var(--alerta-suave); color: var(--alerta); box-shadow: inset 0 0 0 1px var(--alerta); }
.aviso-simulacion { margin: 0 0 16px; padding: 10px 16px; border-radius: var(--radio-chico); font-size: 13.5px;
    background: repeating-linear-gradient(135deg, var(--alerta-suave) 0 14px, transparent 14px 28px), var(--panel);
    border: 1px dashed var(--alerta); color: var(--texto); }
.aviso-simulacion a { margin-left: 6px; }
.p-simulacion { background: var(--alerta-suave); color: var(--alerta); border: 1px dashed var(--alerta); }
#tarjeta-simulacion .interruptor { margin: 6px 0 0; }

/* Buscador de clientes y proveedores dentro de un formulario */
.busca-tercero { position: relative; display: block; }
.fila .busca-tercero { display: inline-block; }
.busca-tercero-panel { top: calc(100% + 4px); min-width: 320px; max-height: 340px; }
.busca-tercero-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%;
    padding: 10px 14px; background: transparent; border: none; border-bottom: 1px solid var(--borde);
    border-radius: 0; text-align: left; color: var(--texto); font-size: 13.5px; cursor: pointer; }
.busca-tercero-fila:last-child { border-bottom: none; }
.busca-tercero-fila:hover, .busca-tercero-fila.marcada { background: var(--acento-suave); }
.busca-tercero-fila small { display: block; color: var(--suave); font-size: 12px; margin-top: 2px; }
.busca-tercero-fila > span:first-child small:first-of-type:not(:last-child) { display: inline; }
.busca-tercero-panel mark { background: var(--alerta-suave); color: inherit; border-radius: 3px; padding: 0 1px; }
.pos-pago input[data-pago], #pc-contado input, [data-entero] { font-variant-numeric: tabular-nums; }
.pos-pago input[data-pago] { text-align: right; }
.pos-um { font-size: 12.5px; color: var(--suave); font-weight: 600; letter-spacing: .03em; }

/* ---------------- Descuentos según el usuario ---------------- */
.pos-desc-linea { width: 64px !important; min-width: 0 !important; text-align: right; padding: 7px 8px; }
.pos-desc-total { max-width: 200px; margin-top: 4px; }
.pos-desc-total input { text-align: right; }
body.sin-desc-linea .pos-desc,
body.sin-desc-linea #form-dte [name=descuentoPct],
body.sin-desc-linea #form-fc [name=descuentoPct] { display: none; }
body.sin-desc-total .pos-desc-total,
body.sin-desc-total label:has(> input[name=descuentoGlobalPct]) { display: none; }
.usr-descuentos { margin: 8px 0 18px; padding: 14px 16px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--fondo); }
.usr-descuentos h3 { margin-top: 0; }

/* ==================================================================
   SISTEMA VISUAL (capa final)
   Neutros zinc, un acento esmeralda, Geist. Todo lo de arriba se
   ajusta aquí sin cambiar dónde está cada cosa.
   ================================================================== */

body { font-size: 14px; letter-spacing: -.003em; font-variant-numeric: tabular-nums; }
h1, h2, h3 { letter-spacing: -.02em; }
::selection { background: var(--acento-suave); color: var(--texto); }
a { color: var(--acento); text-underline-offset: 3px; }

/* Códigos, folios, RUT: monoespaciados, se leen y se comparan de un vistazo */
.omnibox-codigo, .empresa-rut, .resultado, code, .mono { font-family: var(--mono); }

/* ---- Menú lateral ---- */
.lateral { background: var(--panel); padding: 22px 14px 18px; gap: 18px; scrollbar-width: thin; }
.marca { padding: 0 8px 6px; }
.marca .logo {
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--texto); color: var(--panel);
    font-family: var(--mono); font-size: 14px; font-weight: 600;
    position: relative;
}
.marca .logo::after {           /* el punto esmeralda: la marca sin degradados */
    content: ""; position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 2px var(--panel);
}
.marca .nombre { font-size: 15px; font-weight: 650; letter-spacing: -.02em; }
.marca .nombre small { font-size: 11px; font-weight: 500; color: var(--tenue); letter-spacing: 0; }

.tabs .grupo { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--tenue); padding: 16px 12px 6px; }
.tabs button {
    position: relative; padding: 8px 12px; font-size: 13.5px; color: var(--suave); font-weight: 500;
    transition: background .18s var(--curva), color .18s var(--curva);
}
.tabs button svg { width: 17px; height: 17px; flex-basis: 17px; opacity: .7; transition: opacity .18s; }
.tabs button:hover { background: var(--fondo); color: var(--texto); }
.tabs button:hover svg { opacity: 1; }
.tabs button.activo { background: var(--fondo); color: var(--texto); font-weight: 600; }
.tabs button.activo svg { color: var(--acento); opacity: 1; }
.tabs button.activo::before {
    content: ""; position: absolute; left: -14px; top: 7px; bottom: 7px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--acento);
}
.pie-lateral { border-top-color: var(--borde); }

/* ---- Barra superior ---- */
.barra {
    background: color-mix(in srgb, var(--panel) 84%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    padding: 12px 32px; gap: 10px;
}
.barra .titulo { font-size: 15px; font-weight: 650; letter-spacing: -.02em; margin-right: 4px; }
.badge {
    background: var(--panel); color: var(--suave); border: 1px solid var(--borde-fuerte);
    padding: 3px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
}
.badge-empresa { background: var(--fondo); border-color: transparent; color: var(--texto); letter-spacing: 0; font-size: 11.5px; font-weight: 500; }
.avatar {
    background: var(--acento-suave); color: var(--acento);
    box-shadow: inset 0 0 0 1px var(--acento-borde); font-size: 12px; letter-spacing: .02em;
}
.usuario { color: var(--suave); }

main { padding: 28px 32px 80px; max-width: 1320px; }

/* ---- Superficies ---- */
.tarjeta { border-radius: var(--radio); border-color: var(--borde); box-shadow: var(--sombra); padding: 24px 26px; }
.tarjeta h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.02em; gap: 12px; margin-bottom: 6px; }
.tarjeta h2 .icono {
    width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px;
    background: var(--fondo); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde);
}
.tarjeta h3 { font-size: 10.5px; letter-spacing: .1em; color: var(--tenue); margin: 26px 0 10px; }
.ayuda { color: var(--suave); line-height: 1.55; max-width: 78ch; }

/* ---- Formularios ---- */
label { font-size: 12.5px; color: var(--suave); font-weight: 500; }
input, select, textarea {
    margin-top: 6px; padding: 9px 12px; border-radius: var(--radio-chico);
    border-color: var(--borde-fuerte); background: var(--panel); font-size: 14px;
    transition: border-color .18s var(--curva), box-shadow .18s var(--curva), background .18s;
}
input::placeholder, textarea::placeholder { color: var(--tenue); }
input:hover, select:hover { border-color: color-mix(in srgb, var(--tenue) 70%, var(--borde-fuerte)); }
input:focus, select:focus, textarea:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
    outline: none;
}
input:disabled, select:disabled { background: var(--fondo); color: var(--tenue); }
input[type=checkbox], input[type=radio] { accent-color: var(--acento); }
.grilla { gap: 16px 18px; }

/* ---- Botones ---- */
button, a.boton {
    font-weight: 550; letter-spacing: -.005em; border-radius: var(--radio-chico);
    transition: background .18s var(--curva), border-color .18s var(--curva), color .18s, transform .12s var(--curva), box-shadow .18s;
}
button:active:not(:disabled) { transform: scale(.98); }
button:focus-visible, a.boton:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.primario {
    background: var(--acento); color: var(--sobre-acento); border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(24, 24, 27, .14);
}
.primario:hover { background: var(--acento-hover); filter: none; }
.secundario { background: var(--panel); border-color: var(--borde-fuerte); color: var(--texto); box-shadow: 0 1px 0 rgba(24, 24, 27, .03); }
.secundario:hover { background: var(--fondo); border-color: var(--borde-fuerte); }
.peligro { border-color: color-mix(in srgb, var(--error) 45%, var(--borde-fuerte)); }

/* ---- Tablas ---- */
.tabla { font-size: 13.5px; margin: 12px 0 4px; }
.tabla th {
    background: transparent; border-bottom: 1px solid var(--borde);
    font-size: 10.5px; letter-spacing: .08em; color: var(--tenue); padding: 10px 12px;
}
.tabla th:first-child, .tabla th:last-child { border-radius: 0; }
.tabla td { padding: 11px 12px; border-bottom-color: var(--borde); }
.tabla tbody tr { transition: background .15s; }
.tabla tbody tr:hover td { background: var(--panel-2); }
.tabla tr.fila-abrible:hover td { background: var(--acento-suave); }

/* ---- Estados ---- */
.pastilla {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 9px 2px 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
}
.pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.p-tenue { color: var(--suave); background: var(--fondo); }

/* ---- Controles segmentados ---- */
.segmentado { background: var(--fondo); border: 1px solid var(--borde); padding: 3px; gap: 2px; border-radius: 12px; }
.segmentado label + label span { border-left: none; }
.segmentado span { border-radius: 9px; padding: 7px 14px; color: var(--suave); font-weight: 550; transition: background .2s var(--curva), color .2s; }
.segmentado input:checked + span {
    background: var(--panel); color: var(--texto);
    box-shadow: 0 1px 2px rgba(24, 24, 27, .08), inset 0 0 0 1px var(--borde);
}

.pestana { font-weight: 550; color: var(--suave); }
.pestana.activa { color: var(--texto); border-bottom-color: var(--acento); }

/* ---- Aviso flotante ---- */
.aviso {
    background: var(--texto); color: var(--panel); border-radius: 12px; padding: 11px 18px;
    box-shadow: var(--sombra-alta); font-weight: 500;
    animation: aviso-entra .38s var(--curva) both;
}
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, 10px) scale(.98); } }

.modal { background: color-mix(in srgb, var(--texto) 38%, transparent); backdrop-filter: blur(4px); }
.modal-caja { box-shadow: var(--sombra-alta); border: 1px solid var(--borde); }

/* ---- Inicio: accesos en grilla asimétrica, los dos primeros más grandes ---- */
.inicio-cabecera { margin: 6px 0 22px; }
.inicio-cabecera h2 { font-size: 26px; font-weight: 650; letter-spacing: -.03em; }
.inicio-accesos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.inicio-acceso { grid-column: span 2; padding: 18px; border-radius: var(--radio); transition: border-color .2s var(--curva), transform .25s var(--curva), box-shadow .25s; }
.inicio-acceso:nth-child(-n+2) { grid-column: span 3; min-height: 118px; padding: 22px; }
.inicio-acceso:nth-child(-n+2) b { font-size: 17px; }
.inicio-acceso:hover { border-color: var(--acento-borde); transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.inicio-acceso .icono { background: var(--fondo); color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde); border-radius: 11px; }
.inicio-acceso:hover .icono { background: var(--acento-suave); color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento-borde); }
.inicio-acceso b { font-weight: 600; letter-spacing: -.015em; }

/* ---- Estado vacío y carga ---- */
.vacio {
    display: flex; align-items: center; gap: 14px; padding: 22px 18px; margin: 10px 0;
    border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-chico); color: var(--suave); background: var(--panel-2);
}
.vacio svg { width: 22px; height: 22px; flex: none; color: var(--tenue); }
.vacio b { display: block; color: var(--texto); font-weight: 600; font-size: 13.5px; }
.vacio small { font-size: 12.5px; }
/* Vacío con título y ayuda (productos): ícono y título en una línea, la ayuda debajo */
.vacio:has(> .vacio-titulo) { flex-wrap: wrap; text-align: left; gap: 8px 12px; }
.vacio > .vacio-titulo { flex: 1; margin: 0; font-size: 14.5px; }
.vacio > .ayuda { flex-basis: 100%; max-width: none; margin: 0; }

.esqueleto { display: grid; gap: 10px; padding: 12px 0; }
.esqueleto span {
    height: 14px; border-radius: 6px;
    background: linear-gradient(90deg, var(--fondo) 0%, var(--borde) 40%, var(--fondo) 80%);
    background-size: 220% 100%; animation: brillo 1.3s linear infinite;
}
.esqueleto span:nth-child(3n+2) { width: 86%; }
.esqueleto span:nth-child(3n) { width: 64%; }
@keyframes brillo { to { background-position: -220% 0; } }

/* ---- Movimiento: entradas suaves, nunca sobre el trabajo ---- */
.panel:not(.oculto) { animation: panel-entra .42s var(--curva) both; }
@keyframes panel-entra { from { opacity: 0; transform: translateY(6px); } }
.tabla tbody tr { animation: fila-entra .36s var(--curva) both; }
.tabla tbody tr:nth-child(2) { animation-delay: 20ms; }
.tabla tbody tr:nth-child(3) { animation-delay: 40ms; }
.tabla tbody tr:nth-child(4) { animation-delay: 60ms; }
.tabla tbody tr:nth-child(5) { animation-delay: 80ms; }
.tabla tbody tr:nth-child(6) { animation-delay: 100ms; }
.tabla tbody tr:nth-child(7) { animation-delay: 120ms; }
.tabla tbody tr:nth-child(n+8) { animation-delay: 140ms; }
@keyframes fila-entra { from { opacity: 0; transform: translateY(3px); } }
.inicio-acceso { animation: panel-entra .5s var(--curva) both; }
.inicio-acceso:nth-child(2) { animation-delay: 40ms; }
.inicio-acceso:nth-child(3) { animation-delay: 80ms; }
.inicio-acceso:nth-child(4) { animation-delay: 110ms; }
.inicio-acceso:nth-child(n+5) { animation-delay: 140ms; }
/* La caja se repinta al escribir: sus filas no se animan */
#pos-carrito .tabla tbody tr, #pos-pagos * { animation: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Ingreso: pantalla partida, marca a la izquierda ---- */
.login-wrap { background: var(--fondo); }
@media (min-width: 900px) {
    .login-wrap:has(.login-marca) {
        display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        padding: 0; align-items: stretch;
    }
    .login-wrap:has(.login-marca) > .login, .login-wrap:has(.login-marca) > p { grid-column: 2; }
    .login-wrap:has(.login-marca) > .login { align-self: end; justify-self: center; margin-top: 12vh; }
    .login-wrap:has(.login-marca) > p { align-self: start; justify-self: center; }
}
.login-marca {
    grid-row: 1 / span 2; display: none; flex-direction: column; justify-content: space-between;
    padding: 56px 64px; background: #18181b; color: #f4f4f5; position: relative; overflow: hidden;
    border-right: 1px solid var(--borde);
}
@media (min-width: 900px) { .login-marca { display: flex; } }
.login-marca .logo-login { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 10px; }
.login-marca .logo-login i { width: 10px; height: 10px; border-radius: 50%; background: #34d399; }
.login-marca h2 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.035em; font-weight: 650; max-width: 16ch; margin: 0 0 18px; }
.login-marca p { color: #a1a1aa; max-width: 44ch; margin: 0; line-height: 1.6; }
.login-marca ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-family: var(--mono); font-size: 12.5px;
    color: #b4b4bd; }
.login-marca li::before { content: "— "; color: #34d399; }
.login { border-radius: 20px; }
.marca-login { background: var(--texto); color: var(--panel); font-family: var(--mono); font-size: 13px; border-radius: 10px; }

/* ---- Teléfono: todo a una columna ---- */
@media (max-width: 900px) {
    .tabs button.activo::before { left: -16px; }
    .inicio-accesos { grid-template-columns: 1fr; }
    .inicio-acceso, .inicio-acceso:nth-child(-n+2) { grid-column: auto; min-height: 0; }
}
/* La tabla de la caja se desplaza dentro de su tarjeta, no empuja la página */
.pos-grilla > * { min-width: 0; }
#pos-carrito { overflow-x: auto; }
.secundario { font-weight: 500; }
.vacio > span { text-align: left; display: block; }

/* ---------------- Teléfono y tableta (al final: pisa los tamaños de escritorio) ---------------- */

/*
 * Bajo 900 px el menú lateral pasa a ser una franja arriba con la marca y un botón que
 * despliega el menú completo, con sus grupos, a pantalla completa. Es la franja la que
 * queda fija al bajar; la barra con el título y el usuario se desplaza con la página
 * (fijas las dos se comían un sexto de la pantalla del teléfono).
 */
@media (max-width: 900px) {
    .layout { flex-direction: column; }

    .lateral {
        width: 100%;
        flex: none;
        height: auto;
        min-height: 58px;
        position: sticky;
        top: 0;
        z-index: 8;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--borde);
        padding: 11px 16px;
        gap: 0;
    }
    .marca { padding: 0; }
    .btn-menu, .tema-movil { display: inline-grid; }
    .barra .btn-tema { display: none; }     /* en el teléfono va en la franja de arriba */
    .lateral.abierto .btn-menu { color: var(--acento); border-color: var(--acento); }

    .tabs, .pie-lateral { display: none; }
    .lateral.abierto .tabs {
        display: flex;
        position: fixed; top: 58px; left: 0; right: 0; bottom: 0;
        overflow-y: auto; overscroll-behavior: contain;
        background: var(--panel);
        padding: 4px 16px 40px;
        border-top: 1px solid var(--borde);
    }
    .tabs button { padding: 12px; font-size: 15px; }
    body:has(.lateral.abierto) { overflow: hidden; }

    .barra { position: static; padding: 10px 16px; }
    .login-wrap { flex-direction: column; }
    main { padding: 16px 16px 48px; }
    .tarjeta { padding: 16px; }

    /* Tablas: se desplazan dentro de su contenedor en vez de empujar la página */
    div:not(.tarjeta):has(> table.tabla) { overflow-x: auto; }
}

/*
 * Selector de productos (Emitir → ⌕) en el teléfono: la tabla de cinco columnas no cabía y el
 * botón «Usar» quedaba fuera de la pantalla. Cada producto pasa a ser una tarjeta: código arriba,
 * descripción completa, unidad y precio abajo, y «Usar» a la derecha siempre visible.
 */
@media (max-width: 600px) {
    .modal { padding: 12px; }
    .modal-caja { padding: 18px 16px; max-height: calc(100dvh - 24px); }
    #tabla-selector .tabla { margin: 0; }
    #tabla-selector thead { display: none; }
    #tabla-selector tbody tr {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "cod cod usar" "desc desc usar" "um precio usar";
        gap: 2px 10px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--borde);
    }
    #tabla-selector td { display: block; padding: 0; border: 0; }
    #tabla-selector td:nth-child(1) { grid-area: cod; font-family: var(--mono); font-size: 12px; color: var(--suave); overflow-wrap: anywhere; }
    #tabla-selector td:nth-child(2) { grid-area: desc; font-weight: 600; color: var(--texto); }
    #tabla-selector td:nth-child(3) { grid-area: um; font-size: 12.5px; color: var(--suave); }
    #tabla-selector td:nth-child(4) { grid-area: precio; font-size: 12.5px; font-variant-numeric: tabular-nums; }
    #tabla-selector td:nth-child(5) { grid-area: usar; }
    #tabla-selector td:nth-child(5) button { padding: 10px 16px; }
}

/*
 * Buscador de productos (Vender y Productos) en el teléfono: las cuatro columnas dejaban la
 * descripción en cero de ancho y el precio fuera. Cada resultado va en dos líneas: código y
 * stock arriba, descripción y precio abajo. En Vender el campo ocupa todo el ancho (la lista
 * mide lo mismo que el campo) y «Agregar» baja a su propia línea.
 */
@media (max-width: 600px) {
    .omnibox-panel .omnibox-cabecera { display: none; }
    .omnibox-panel .omnibox-fila {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "cod stock" "desc precio";
        gap: 3px 12px; padding: 12px 14px; align-items: start;
    }
    .omnibox-panel .omnibox-codigo { grid-area: cod; font-size: 12px; color: var(--suave); overflow-wrap: anywhere; }
    .omnibox-panel .omnibox-desc { grid-area: desc; font-weight: 600; }
    .omnibox-panel .omnibox-stock { grid-area: stock; font-size: 12.5px; }
    .omnibox-panel .omnibox-precio { grid-area: precio; }
    .pos-escaner { flex-wrap: wrap; }
    .pos-escaner .pos-buscador { flex-basis: 100%; }
    .pos-escaner > button { flex: 1; }
}

/* Ficha de cotización en el teléfono: la barra de Guardar ocupa el ancho de la tarjeta y los
   dos botones se reparten el espacio, al alcance del pulgar */
@media (max-width: 900px) {
    .fc-guardar { margin: 16px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
    .fc-guardar button { flex: 1; }
}

/* ---------------- Menú de estilo (tema.js) ---------------- */
.menu-tema {
    position: absolute; z-index: 60; min-width: 196px; padding: 6px;
    background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-chico);
    box-shadow: var(--sombra-alta);
}
.menu-tema[hidden] { display: none; }
.menu-tema button {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px;
    background: none; border: 0; border-radius: var(--radio-chico);
    color: var(--texto); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.menu-tema button:hover, .menu-tema button:focus-visible { background: var(--panel-2); outline: none; }
.menu-tema button[aria-checked="true"] { color: var(--acento); font-weight: 600; }
.menu-tema button[aria-checked="true"]::after { content: "✓"; margin-left: auto; }
.menu-tema .muestra { width: 16px; height: 16px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(127, 127, 140, .45); }
.muestra-claro { background: #f6f6f7; }
.muestra-oscuro { background: linear-gradient(135deg, #2f3349 50%, #7367f0 50%); }
.muestra-negro { background: linear-gradient(135deg, #000 50%, #7c71f5 50%); }
.muestra-sistema { background: linear-gradient(90deg, #f6f6f7 50%, #25293c 50%); }

/*
 * ---------------- Oscuro y negro: la forma, no solo el color ----------------
 * Barra superior flotante y redondeada, tarjetas sin borde con sombra, y la entrada activa del
 * menú lateral como una pastilla violeta llena.
 */
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) body {
    font-family: "Public Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .lateral { border-right: 0; box-shadow: var(--sombra); }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .tabs button { border-radius: var(--radio-chico); }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .tabs button:hover { background: var(--panel-2); }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .tabs button.activo {
    background: linear-gradient(270deg, color-mix(in srgb, var(--acento) 70%, transparent), var(--acento));
    color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--acento) 45%, transparent);
}
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .tabs button.activo svg { color: #fff; }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .tabs button.activo::before { display: none; }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .barra {
    margin: 14px 26px 0; top: 14px; border: 0; border-radius: var(--radio);
    background: color-mix(in srgb, var(--panel) 90%, transparent); box-shadow: var(--sombra);
}
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) :is(.tarjeta, .inicio-acceso) { border-color: transparent; }
:root[data-aspecto="negro"] :is(.tarjeta, .inicio-acceso) { border-color: var(--borde); }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .primario { box-shadow: 0 2px 6px color-mix(in srgb, var(--acento) 35%, transparent); }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) :is(input, select, textarea) { background: transparent; }
:root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) select option { background: var(--panel); }
@media (max-width: 900px) {
    :root:is([data-aspecto="oscuro"], [data-aspecto="negro"]) .barra { margin: 12px 16px 0; }
}