:root {
    --ks-primario: #2563EB;
    --ks-texto: #0F172A;
    --ks-fondo: #F8FAFC;
    --ks-borde: #E2E8F0;
    --ks-sidebar-bg: #1E293B;
    --ks-sidebar-texto: #E2E8F0;
    --ks-sidebar-activo: #2563EB;
    --ks-ancho-sidebar: 235px;
    --ks-alto-header: 64px;
    --ks-alto-footer: 34px;
}

/* Aspecto del sistema (Sistema > Configuracion): cambia estos mismos
   custom properties, asi que se propaga solo a todo lo que ya los usa
   (botones, links, chips activos, foco, sidebar) sin tocar ningun
   componente. html[data-tema] pesa mas que :root, gana sin importar
   el orden. */
html[data-tema="vibrante"] {
    --ks-primario: #7C3AED;
    --ks-sidebar-bg: #3B0764;
    --ks-sidebar-activo: #7C3AED;
}

html[data-tema="ejecutivo"] {
    --ks-primario: #0F172A;
    --ks-sidebar-bg: #09090B;
    --ks-sidebar-activo: #334155;
}

* { box-sizing: border-box; }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ks-texto);
    background: var(--ks-fondo);
}

/* El margen del navegador para <h1> (~0.67em, unos 21px arriba/abajo)
   sumado al padding de .ks-contenido (24px) dejaba el titulo de cada
   pantalla empezando muy abajo -- se recorta solo el margen de
   arriba, el de abajo queda igual. */
h1 { margin-top: 8px; }

/* ---------- Select: un solo estilo para todos los <select> del
   sistema (filtros, formularios, selector de tamano de Grid), en vez
   de que cada pantalla dependa del look nativo del navegador. */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 9px 32px 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ks-texto);
    cursor: pointer;
}

select:hover { border-color: #94A3B8; }

select:focus {
    outline: none;
    border-color: var(--ks-primario);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

select:disabled { background-color: var(--ks-fondo); color: #94A3B8; cursor: not-allowed; }

/* ---------- Encabezado ---------- */
.ks-header {
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--ks-alto-header);
    padding: 0 20px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--ks-borde);
    position: sticky;
    top: 0;
    z-index: 20;
}

.ks-hamburguesa {
    display: none;
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--ks-texto);
    padding: 4px;
}

.ks-header__marca { display: flex; align-items: center; gap: 10px; min-width: 0; }

.ks-header__logo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ks-primario);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.ks-header__empresa { display: flex; flex-direction: column; min-width: 0; }
.ks-header__empresa strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-header__ruc { font-size: 11px; color: #64748B; }

.ks-badge-entorno {
    flex-shrink: 0;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
}

.ks-badge-entorno--dev { background: #FEF3C7; color: #92400E; }
.ks-badge-entorno--prod { background: #DCFCE7; color: #166534; }

.ks-header__derecha { display: flex; align-items: center; gap: 14px; margin-left: auto; }

.ks-accesos-rapidos { display: flex; align-items: center; gap: 8px; }

.ks-boton-rapido {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.ks-boton-rapido--caja { background: #B45309; }
.ks-boton-rapido--caja:hover { background: #92400E; }
.ks-boton-rapido--caja-abierta { background: #B91C1C; }
.ks-boton-rapido--caja-abierta:hover { background: #991B1B; }
.ks-boton-rapido--venta { background: #0F766E; }
.ks-boton-rapido--venta:hover { background: #0B5A54; }

.ks-chip-sede {
    background: #EFF6FF;
    color: var(--ks-primario);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ks-header__usuario { display: flex; flex-direction: column; text-align: right; line-height: 1.3; }
.ks-header__usuario strong { font-size: 13px; }
.ks-header__usuario span { font-size: 11px; color: #64748B; }

.ks-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ks-sidebar-bg);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
}

/* ---------- Cascaron: sidebar + contenido ---------- */
.ks-shell { display: flex; flex: 1; min-height: 0; }

.ks-sidebar {
    display: flex;
    flex-direction: column;
    width: var(--ks-ancho-sidebar);
    flex-shrink: 0;
    background: var(--ks-sidebar-bg);
    color: var(--ks-sidebar-texto);
    padding: 10px 0;
    overflow-y: auto;
    /* body solo tiene min-height:100vh (para poder crecer si el
       contenido central lo exige), asi que .ks-shell nunca llega a
       tener una altura definida por si solo -- sin este sticky+altura
       propia, el menu (cada vez mas largo con nuevos modulos) empuja
       toda la pagina en vez de hacer scroll el solo. */
    position: sticky;
    top: var(--ks-alto-header);
    height: calc(100vh - var(--ks-alto-header));
    align-self: flex-start;
}

.ks-sidebar__fondo { display: none; }

.ks-nav__link, .ks-nav__grupo summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: var(--ks-sidebar-texto);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    list-style: none;
}

.ks-nav__grupo summary::-webkit-details-marker { display: none; }

.ks-nav__grupo summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 11px;
    transition: transform .15s;
}

.ks-nav__grupo[open] > summary::after { transform: rotate(90deg); }

.ks-nav__link:hover, .ks-nav__grupo summary:hover { background: rgba(255, 255, 255, .08); }

.ks-nav__link--activo, .ks-nav__grupo--activo {
    background: var(--ks-sidebar-activo) !important;
    color: #FFFFFF;
    font-weight: 600;
}

.ks-nav__icono { flex-shrink: 0; width: 20px; text-align: center; }

.ks-nav__sublink {
    display: block;
    padding: 8px 18px 8px 46px;
    color: var(--ks-sidebar-texto);
    text-decoration: none;
    font-size: 13px;
}

.ks-nav__sublink:hover { background: rgba(255, 255, 255, .08); }
.ks-nav__sublink--deshabilitado { color: #64748B; cursor: not-allowed; }

.ks-nav__salir {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ks-contenido { flex: 1; min-width: 0; padding: 24px; }

/* ---------- Pie de pagina ---------- */
.ks-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--ks-alto-footer);
    padding: 0 20px;
    background: #FFFFFF;
    border-top: 1px solid var(--ks-borde);
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
}

/* ---------- Responsivo: menu hamburguesa ---------- */
@media (max-width: 899px) {
    :root { --ks-alto-header: 52px; --ks-alto-footer: 26px; }

    .ks-hamburguesa { display: inline-block; }
    .ks-chip-sede, .ks-header__usuario, .ks-accesos-rapidos { display: none; }
    .ks-header { gap: 10px; padding: 0 12px; }

    .ks-shell { position: relative; }

    .ks-sidebar {
        position: fixed;
        top: var(--ks-alto-header);
        bottom: 0;
        left: -100%;
        width: 260px;
        max-width: 80vw;
        z-index: 30;
        transition: left .2s ease;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .2);
    }

    body.ks-sidebar-abierta .ks-sidebar { left: 0; }

    body.ks-sidebar-abierta .ks-sidebar__fondo {
        display: block;
        position: fixed;
        inset: var(--ks-alto-header) 0 0 0;
        background: rgba(15, 23, 42, .5);
        z-index: 25;
    }

    .ks-contenido { padding: 14px; }

    .ks-footer { justify-content: center; }
    .ks-footer span:last-child { display: none; }
}

.ks-login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: var(--ks-fondo);
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}

.ks-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 320px;
    padding: 28px;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 10px;
}

.ks-login h1 { margin: 0; text-align: center; }
.ks-login__subtitulo { margin: 0 0 10px; text-align: center; color: #6B7280; font-size: 13px; }
.ks-login__error { color: #DC2626; font-size: 13px; margin: 0; }
.ks-login__ok { color: #0F766E; font-size: 13px; margin: 0; }
.ks-login__empresa { font-weight: bold; font-size: 13px; margin: 0 0 4px; text-align: center; }

.ks-login input, .ks-login select, .ks-login button {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-size: 14px;
    font-family: inherit;
}

.ks-login button {
    background: var(--ks-primario);
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.ks-login__secundario {
    text-align: center;
    color: var(--ks-primario);
    font-size: 13px;
    text-decoration: none;
}
.ks-login__secundario:hover { text-decoration: underline; }

/* ---------- Botones ---------- */
.ks-boton {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    background: #FFFFFF;
    color: var(--ks-texto);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.ks-boton--primario {
    background: var(--ks-primario);
    border-color: var(--ks-primario);
    color: #FFFFFF;
    font-weight: bold;
}

.ks-boton--exito {
    background: #0F766E;
    border-color: #0F766E;
    color: #FFFFFF;
    font-weight: bold;
}

.ks-boton--exito:hover { background: #115E59; border-color: #115E59; }
.ks-boton--exito:disabled { opacity: .5; cursor: not-allowed; }

.ks-enlace-boton {
    background: none;
    border: none;
    color: var(--ks-primario);
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    text-decoration: underline;
}

/* ---------- Buscador ---------- */
.ks-buscador {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}

.ks-buscador input[type="text"] {
    flex: 1 1 160px;
    min-width: 0;
    max-width: 360px;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
}

.ks-buscador button {
    padding: 9px 16px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    background: #FFFFFF;
    cursor: pointer;
}

/* ---------- Caja de busqueda (Buscador::campo()) ---------- */
.ks-buscador__campo {
    position: relative;
    flex: 1 1 160px;
    min-width: 0;
    max-width: 360px;
}

.ks-buscador__campo .ks-buscador__input {
    width: 100%;
    max-width: none;
    padding: 9px 30px 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
}

.ks-buscador__campo .ks-buscador__limpiar {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #E2E8F0;
    color: #475569;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ks-buscador__campo .ks-buscador__limpiar:hover { background: #CBD5E1; }

/* ---------- Tabla ---------- */
.ks-tabla {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    overflow: hidden;
}

.ks-tabla th {
    text-align: left;
    background: #1E293B;
    color: #F8FAFC;
    padding: 10px 12px;
    font-size: 12px;
}

.ks-tabla td {
    padding: 10px 12px;
    border-top: 1px solid var(--ks-borde);
    font-size: 14px;
}

.ks-tabla tr:nth-child(even) td { background: #F8FAFC; }

.ks-tabla__vacio { text-align: center; color: #6B7280; padding: 20px; }

.ks-tabla__acciones a, .ks-tabla__acciones .ks-enlace-boton { margin-right: 10px; }

/* ---------- Matriz de permisos (Usuarios > Personalizar permisos) ---------- */
.ks-permisos-tabla th, .ks-permisos-tabla td { white-space: nowrap; }
.ks-permisos-tabla th:first-child, .ks-permisos-tabla td:first-child { white-space: normal; min-width: 170px; }
.ks-permisos-tabla input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #0F766E; }

/* ---------- Pestanas de Sistema > Configuracion ---------- */
.ks-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }

.ks-tab {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    background: #EEF1F5;
    color: var(--ks-primario);
    text-decoration: none;
    font-size: 14px;
    border: none;
}

.ks-tab:hover { background: #E2E8F0; }
.ks-tab--activa { background: #0F766E; color: #FFFFFF; font-weight: bold; }
.ks-tab--activa:hover { background: #0F766E; }
.ks-tab--deshabilitada { background: #F1F5F9; color: #94A3B8; cursor: not-allowed; }

/* ---------- Chips de estado ---------- */
.ks-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

.ks-chip--ok { background: #DCFCE7; color: #166534; }
.ks-chip--baja { background: #FEE2E2; color: #991B1B; }
.ks-chip--neutro { background: #E2E8F0; color: #334155; }
.ks-chip--advertencia { background: #FEF3C7; color: #92400E; }

/* ---------- Paginacion ---------- */
.ks-paginacion { margin-top: 16px; display: flex; gap: 6px; }

.ks-paginacion a {
    padding: 6px 11px;
    border: 1px solid var(--ks-borde);
    border-radius: 6px;
    text-decoration: none;
    color: var(--ks-texto);
    background: #FFFFFF;
    font-size: 13px;
}

.ks-paginacion__actual {
    background: var(--ks-primario) !important;
    color: #FFFFFF !important;
    border-color: var(--ks-primario) !important;
}

/* ---------- Grid (listados) ---------- */
.ks-grid__envoltorio { overflow-x: auto; }

/* Click resalta la fila, doble click navega -- ver Grid 'filaUrl' y el
   listener delegado en assets/js/app.js. */
.ks-grid__fila { cursor: pointer; }
.ks-grid__fila:focus { outline: none; }
.ks-grid__fila:focus-visible td:first-child { box-shadow: inset 3px 0 0 0 #94A3B8; }

/* La franja cebra (.ks-tabla tr:nth-child(even) td) pinta el fondo por
   celda, no por fila -- por eso el resaltado tambien va sobre cada
   <td>, si no la cebra lo tapa. El acento azul a la izquierda va solo
   en la primera celda para que se vea como un solo borde de la fila,
   no uno repetido en cada columna. */
.ks-grid__fila--seleccionada td {
    background: #DBEAFE !important;
}

.ks-grid__fila--seleccionada td:first-child {
    box-shadow: inset 3px 0 0 0 var(--ks-primario);
}

.ks-tabla--derecha { text-align: right; }

.ks-grid__orden {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ks-grid__orden:hover { text-decoration: underline; }
.ks-grid__flecha { font-size: 10px; color: var(--ks-primario); }

.ks-grid__pie {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

.ks-grid__total { font-size: 13px; color: #64748B; margin-right: auto; }

.ks-grid__tamano { display: flex; align-items: center; }
.ks-grid__tamano label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #334155; }
.ks-grid__tamano select { padding: 5px 28px 5px 8px; }
.ks-grid__pie .ks-paginacion { margin-top: 0; }

/* Vistas alternas de Grid cuando se le pasa 'tarjeta': la tabla se
   manda igual en el HTML (para pantalla ancha) y la lista de tarjetas
   queda oculta hasta la pantalla angosta -- ver el media query de
   abajo, que invierte cual de las dos se ve. */
.ks-grid__vista-angosta { display: none; }

/* Colapso a tarjetas en pantallas angostas -- cada <td> ya trae su
   propia etiqueta en data-etiqueta, puesta ahi por Grid::render(). */
@media (max-width: 700px) {
    .ks-grid__vista-ancha { display: none; }
    .ks-grid__vista-angosta { display: block; }

    .ks-grid__tabla thead { display: none; }
    .ks-grid__tabla, .ks-grid__tabla tbody, .ks-grid__tabla tr, .ks-grid__tabla td { display: block; width: 100%; }

    .ks-grid__tabla tr {
        margin-bottom: 12px;
        border: 1px solid var(--ks-borde);
        border-radius: 8px;
        padding: 4px 12px;
        background: #FFFFFF;
    }

    .ks-grid__tabla tr:nth-child(even) td { background: transparent; }

    .ks-grid__tabla td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        border-top: 1px solid var(--ks-borde);
        text-align: right;
    }

    .ks-grid__tabla tr > td:first-child { border-top: none; }

    .ks-grid__tabla td::before {
        content: attr(data-etiqueta);
        font-weight: 600;
        font-size: 12px;
        color: #64748B;
        text-align: left;
    }

    .ks-grid__tabla td.ks-tabla__vacio { text-align: center; }
    .ks-grid__tabla td.ks-tabla__vacio::before { content: none; }
}

.ks-ventas__resumen { font-size: 13px; color: #64748B; margin: -6px 0 14px; }

/* ---------- Grid: lista de tarjetas alterna (vista angosta) ---------- */
.ks-grid__orden-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #64748B;
    margin-bottom: 12px;
}

.ks-grid__tarjetas { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Tarjeta de registro: la usa cualquier listado que le pase
   'tarjeta' a Grid (Ventas, Clientes, ...) para su vista angosta -- un
   solo estilo, cada pantalla solo arma su propio HTML con estas clases. */
.ks-tarjeta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 10px;
    padding: 14px 16px;
}

.ks-tarjeta__cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.ks-tarjeta__cuerpo > .ks-chip { align-self: flex-start; }
.ks-tarjeta__fila { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ks-tarjeta__titulo { font-size: 15px; font-weight: bold; color: var(--ks-primario); }
.ks-tarjeta__subtitulo { font-size: 13px; color: var(--ks-texto); }
.ks-tarjeta__meta { font-size: 12px; color: #64748B; }
.ks-tarjeta__datos { font-size: 13px; font-weight: 500; color: #334155; }

.ks-tarjeta__acciones { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }

.ks-tarjeta__acciones a, .ks-tarjeta__acciones button {
    font-size: 17px;
    line-height: 1;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748B;
    padding: 2px;
}

/* ---------- Formularios ---------- */
.ks-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 480px;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    padding: 20px;
}

.ks-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #334155;
}

.ks-form input, .ks-form select, .ks-form textarea {
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-size: 14px;
    font-family: inherit;
}

.ks-form select { padding-right: 32px; }

/* ---------- Campos de formulario reutilizables sin la "caja" de
   .ks-form -- para meter labels/inputs con el mismo look adentro de
   cualquier contenedor que ya tenga su propio fondo/borde (la tarjeta
   de Finalizar venta, por ejemplo), sin anidar una caja dentro de otra. */
.ks-campos {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ks-campos label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #334155;
}

.ks-campos input, .ks-campos select, .ks-campos textarea {
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-size: 14px;
    font-family: inherit;
}

.ks-campos select { padding-right: 32px; }
.ks-campos textarea { resize: vertical; min-height: 60px; }

/* ---------- Campo con leyenda recortada en el borde (<fieldset>/
   <legend>): mismo look que un label arriba del input, pero en menos
   alto -- la leyenda vive sobre la linea del borde en vez de ocupar su
   propia fila, asi que sirve para no alargar tanto los formularios con
   muchos campos apilados (Finalizar venta, Cliente, etc). El navegador
   dibuja el "corte" del borde solo, no hace falta simularlo. Un solo
   estilo para todo el sistema (igual que el <select> global), sin
   depender de que el contenedor tenga .ks-form/.ks-campos -- asi sirve
   tambien dentro de paneles sueltos como el alta rapida de cliente. */
fieldset {
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    border: 1px solid var(--ks-borde);
    border-radius: 6px;
    padding: 0 10px 7px;
    /* Sin esto, en Chrome/Edge el select interno (aunque sin borde
       propio) puede pintar una esquina cuadrada que se asoma por fuera
       de la esquina redondeada del fieldset -- overflow:hidden la
       recorta. El <legend> no se ve afectado: los navegadores lo
       posicionan fuera del área que este overflow recorta. */
    overflow: hidden;
}

legend {
    padding: 0 4px;
    margin-left: 4px;
    font-size: 12px;
    color: #64748B;
}

/* !important en las 3 declaraciones siguientes: cuando un fieldset
   vive adentro de un contenedor .ks-form/.ks-campos (el caso normal --
   son los formularios grandes con caja), esas clases traen su propia
   regla ".ks-form input, .ks-form select, ..." con una clase en el
   selector, que pesa mas que "fieldset select" (0 clases, 2
   elementos) aunque este sea mas especifico en cantidad de
   selectores. Sin el !important el control volvia a dibujar su propio
   borde adentro del borde del fieldset -- se veian dos cajas
   anidadas. */
fieldset input, fieldset select, fieldset textarea {
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    width: 100%;
}

fieldset select {
    padding-right: 22px !important;
    background-position: right 0 center;
}

fieldset input:focus, fieldset select:focus, fieldset textarea:focus {
    box-shadow: none;
    /* El control ya no tiene borde propio (lo dibuja el fieldset), asi
       que el anillo de foco nativo del navegador queda huerfano
       alrededor del control y se ve como un marco negro grueso
       encimado al del fieldset -- el borde azul de
       fieldset:focus-within ya avisa que el campo esta enfocado. */
    outline: none;
}

fieldset:focus-within { border-color: var(--ks-primario); }

fieldset .ks-serie-preview {
    border: none;
    padding: 0;
    background: transparent;
}

.ks-form__checkbox {
    flex-direction: row !important;
    align-items: center;
    gap: 8px !important;
}

.ks-form__acciones { display: flex; gap: 10px; margin-top: 6px; }
.ks-form__error { color: #DC2626; font-size: 13px; }

.ks-form--ancho { max-width: 900px; }

.ks-form__fila {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.ks-form__fila label, .ks-form__fila fieldset { flex: 1; min-width: 160px; }

/* Un <button> suelto al lado de fieldsets en la misma fila (ej. "Ver
   historial", "+ Vendedor"): el fieldset reserva espacio arriba para
   la leyenda, asi que su borde visible queda mas abajo que el tope de
   la celda -- align-items:stretch por defecto estira el boton para
   llenar toda la celda, y su borde (que no tiene leyenda) terminaba
   viendose mas alto que el del fieldset de al lado. flex-end lo baja
   para que ambos bordes terminen a la misma altura. */
.ks-form__fila > button { align-self: flex-end; }

.ks-form__seccion {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748B;
    margin: 18px 0 2px;
    padding-top: 14px;
    border-top: 1px solid var(--ks-borde);
}

.ks-form__seccion:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.ks-form__ayuda { font-size: 12px; color: #64748B; margin: -6px 0 4px; }

.ks-interacciones__item {
    padding: 10px 0;
    border-top: 1px solid var(--ks-borde);
    font-size: 13px;
}

.ks-interacciones__item:first-child { border-top: none; }
.ks-interacciones__meta { font-size: 11px; color: #64748B; margin-top: 2px; }

/* ---------- Detalle de documento ---------- */
.ks-detalle-cabecera {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.ks-detalle-cabecera span { display: block; font-size: 11px; color: #6B7280; }
.ks-detalle-cabecera strong { font-size: 14px; }

.ks-aviso { padding: 10px 14px; border-radius: 6px; font-size: 13px; }
.ks-aviso--ok { background: #DCFCE7; color: #166534; }

/* ---------- Carrito de venta ---------- */
.ks-buscar-caja {
    position: relative;
    /* Cuando es un <fieldset> (caja "Cliente"), el listado de
       resultados vive apenas debajo del marco (position:absolute,
       top:100%) -- el overflow:hidden general de fieldset lo cortaria. */
    overflow: visible;
}

/* Boton "x" para vaciar los buscadores de Cliente/Producto del carrito
   de venta -- mismo look que .ks-buscador__limpiar (el de los listados
   con recarga de pagina), pero con su propio nombre de clase: estos
   dos buscadores son AJAX dentro del <form> grande de la venta, y el
   listener global de .ks-buscador__limpiar hace input.form.submit(),
   lo que mandaria la venta entera de una vez sin querer. */
.ks-buscar-caja__limpiar {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #E2E8F0;
    color: #475569;
    font-size: 14px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ks-buscar-caja__limpiar:hover { background: #CBD5E1; }

#ks-buscar-cliente, #ks-buscar-producto { padding-right: 26px !important; }
#ks-campo-password { padding-right: 24px !important; }

.ks-buscador-resultados {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: 4px;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 6px;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}

.ks-buscador-resultado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}

.ks-buscador-resultado:hover { background: var(--ks-fondo); }
.ks-buscador-resultado--vacio { color: #64748B; cursor: default; }
.ks-buscador-resultado--vacio:hover { background: none; }
.ks-buscador-resultado__precio { color: #64748B; font-size: 12px; white-space: nowrap; }

.ks-buscador-resultado--nuevo { color: #0F766E; font-weight: 600; }

/* Panel de alta rapida de cliente (DNI/RUC no encontrado en el
   sistema): se completa con la consulta a RENIEC/SUNAT y deja
   Celular/Direccion editables antes de crear el cliente. */
.ks-cliente-nuevo {
    margin-top: 10px;
    padding: 14px;
    background: #DCFCE7;
    border: 1px solid #A7F3D0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ks-cliente-nuevo__nombre { font-size: 14px; color: #166534; }
.ks-cliente-nuevo fieldset { background: #FFFFFF; }

/* Celular y Direccion usan un input suelto (etiqueta como
   placeholder, sin fieldset) en vez de leyenda recortada: por un lado
   el navegador dibuja su propio icono de autocompletado de telefono
   sobre "Celular" y choca con la leyenda: por otro, mezclar un
   fieldset (mas alto, por la leyenda) con un input suelto en la misma
   fila con align-items: stretch por defecto estiraba el input suelto
   a esa misma altura -- con los dos campos del mismo tipo no pasa. */
.ks-cliente-nuevo__campo-simple {
    flex: 1;
    min-width: 160px;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-size: 14px;
    font-family: inherit;
    background: #FFFFFF;
}

/* Fila de resultado del buscador de productos en la vista "Lista"
   (Sistema > Configuracion > Vista de busqueda en ventas): codigo
   atenuado, nombre + chips de stock/unidad, precio a la derecha. */
.ks-buscador-resultado--producto {
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
}

.ks-buscador-resultado__codigo {
    font-size: 12px;
    color: #64748B;
    white-space: nowrap;
    padding-top: 2px;
}

.ks-buscador-resultado__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    flex: 1;
}

.ks-buscador-resultado__nombre { font-size: 13px; color: var(--ks-texto); }
.ks-buscador-resultado__chips { display: flex; gap: 6px; flex-wrap: wrap; }

.ks-buscador-resultado--producto .ks-buscador-resultado__precio {
    margin-left: auto;
    font-weight: bold;
    white-space: nowrap;
    padding-top: 2px;
}

/* Vista "Tarjetas (con foto)": grilla de tarjetas con imagen en vez de
   la lista apilada -- mismo contenedor .ks-buscador-resultados, solo
   cambia lo que hay adentro segun VISTA_BUSQUEDA (JS). */
.ks-buscador-resultados--tarjetas { max-height: 320px; }

.ks-buscador-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    padding: 10px;
}

.ks-buscador-tarjeta {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #FFFFFF;
}

.ks-buscador-tarjeta:hover { border-color: #94A3B8; }

.ks-buscador-tarjeta__imagen {
    width: 100%;
    aspect-ratio: 1;
    background: var(--ks-fondo);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ks-buscador-tarjeta__imagen img { width: 100%; height: 100%; object-fit: cover; }
.ks-buscador-tarjeta__sin-foto { font-size: 28px; color: #CBD5E1; }

.ks-buscador-tarjeta__nombre {
    font-size: 12px;
    line-height: 1.3;
    padding: 6px 8px 0;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ks-buscador-tarjeta__precio { font-size: 13px; font-weight: bold; padding: 2px 8px 8px; }

.ks-serie-preview {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    background: var(--ks-fondo);
    font-size: 14px;
    color: #334155;
}

.ks-aviso-comprobante { font-size: 12px; color: #B45309; margin: 6px 0 0; }
.ks-aviso-comprobante:empty { display: none; }

.ks-venta-cuerpo { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; }

.ks-carrito-envoltorio {
    flex: 2 1 460px;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    padding: 16px;
}

.ks-carrito__subtitulo { font-size: 12px; color: #64748B; margin: 2px 0 4px; }

/* Linea de regalo agregada sola por una Bonificacion (Ofertas y
   Promociones) -- de solo lectura (sin stepper/quitar, se recalcula
   entera cada vez que cambia el item que la dispara), con un tinte
   verde suave para distinguirla del resto del carrito. */
.ks-carrito__fila-regalo { background: #F0FDF4; }

.ks-chip--unidad { background: #EFF6FF; color: var(--ks-primario); }

.ks-carrito__stepper { display: flex; align-items: center; gap: 6px; }

.ks-carrito__paso {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    background: #FFFFFF;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.ks-carrito__paso:hover { background: var(--ks-fondo); }

.ks-carrito__cantidad, .ks-carrito__precio {
    width: 80px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-family: inherit;
}

.ks-carrito__quitar {
    background: none;
    border: none;
    color: #DC2626;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

/* Vista de tarjetas del carrito en pantalla angosta (celular) -- mismo
   dato que la tabla (ver .ks-grid__vista-ancha/angosta), nada mas que
   la cantidad/precio/total en vez de ir en columnas van en una fila
   dentro de la tarjeta. */
.ks-carrito-tarjeta {
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.ks-carrito-tarjeta:last-child { margin-bottom: 0; }

.ks-carrito-tarjeta__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.ks-carrito-tarjeta__nombre { font-weight: bold; font-size: 14px; }

.ks-carrito-tarjeta__quitar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid #FECACA;
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ks-carrito-tarjeta__quitar:hover { background: #FEE2E2; }

.ks-carrito-tarjeta__cuerpo {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ks-carrito-tarjeta__cuerpo .ks-carrito__precio { width: 70px; }

.ks-carrito-tarjeta__total { margin-left: auto; font-weight: bold; font-size: 14px; }

/* Lote/vencimiento de una linea del carrito de Compras -- solo se
   pinta cuando el item controla vencimiento (ver bloqueLote() en
   compras/formulario.php), asi que va suelto (sin fieldset) para no
   ensanchar de mas las lineas que no lo necesitan. */
.ks-carrito__lote { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.ks-carrito__lote-input, .ks-carrito__vencimiento-input {
    padding: 5px 8px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-size: 12px;
    font-family: inherit;
}

.ks-carrito__lote-input { width: 110px; }
.ks-carrito__vencimiento-input { width: 130px; }

.ks-venta-totales {
    flex: 1 1 240px;
    align-self: flex-start;
    background: #FFFFFF;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    padding: 16px;
}

.ks-venta-totales label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: #334155;
    margin-bottom: 12px;
}

.ks-venta-totales input {
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-family: inherit;
    font-size: 14px;
}

.ks-venta-totales__fila {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: #334155;
}

.ks-venta-totales__total {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--ks-borde);
    font-weight: bold;
    font-size: 17px;
}

/* Input suelto (sin fieldset) con el mismo aspecto que los demas
   campos de texto -- para cajas de una sola linea que no necesitan
   una etiqueta encima (ej. el buscador de productos de la Orden de
   Compra). */
.ks-campo-simple {
    width: 100%;
    padding: 9px 12px;
    border-radius: 6px;
    border: 1px solid var(--ks-borde);
    font-size: 14px;
    font-family: inherit;
    color: var(--ks-texto);
}

.ks-campo-simple:focus {
    outline: none;
    border-color: var(--ks-primario);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* Lineas pedidas de una Orden de Compra: mas simples que el carrito de
   Compras/Ventas (sin IGV, sin lote) -- una fila por producto con
   cantidad y costo estimado nada mas. */
.ks-oc-lineas { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.ks-oc-linea {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ks-borde);
    border-radius: 8px;
    background: #FFFFFF;
}

/* min-width > 0 a proposito: sin esto flexbox deja que el nombre del
   producto se achique hasta desarmarse letra por letra en pantallas
   angostas con muchos campos al lado (ej. Afectacion + Desc. de
   Cotizaciones) -- mejor que el resto de campos pase a una segunda
   linea (flex-wrap) antes que eso. */
.ks-oc-linea__info { flex: 1 1 180px; min-width: 180px; }
.ks-oc-linea__nombre { font-weight: 600; }
.ks-oc-linea__codigo { font-size: 12px; color: #64748B; }
.ks-oc-linea fieldset { flex: 0 0 90px; }
.ks-oc-linea fieldset.ks-oc-linea__costo { flex: 0 0 110px; }

.ks-oc-total { margin-top: 12px; text-align: right; font-weight: bold; font-size: 15px; }

/* Tarjetas de resumen numerico (ej. Despacho de Mercaderia: ventas
   pendientes, CxC abiertas, monto pendiente) -- el color de alerta es
   deliberado, son todos numeros que representan algo pendiente de
   resolver. */
.ks-metricas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.ks-metrica { flex: 1 1 180px; background: #FFFFFF; border: 1px solid var(--ks-borde); border-radius: 8px; padding: 16px; }
a.ks-metrica { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
a.ks-metrica:hover { border-color: var(--ks-primario); }
.ks-metrica__valor { font-size: 28px; font-weight: bold; color: #DC2626; }
.ks-metrica__etiqueta { font-size: 13px; color: #64748B; margin-top: 4px; }