* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Segoe UI, Arial, sans-serif;
    background: #f2f4f7;
    color: #1f2a37;
}

/* --- Login --- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1b3a63, #274b7a);
}
.login-box {
    background: #fff;
    padding: 2.5rem;
    border-radius: 8px;
    width: 340px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.login-box h1 { font-size: 1.25rem; margin: 0 0 0.25rem; }
.login-box .subtitulo { margin: 0 0 1.5rem; color: #6b7280; font-size: 0.9rem; }
.login-box label { display: block; margin-top: 1rem; font-size: 0.85rem; font-weight: 600; }
.login-box input {
    width: 100%; padding: 0.5rem; margin-top: 0.25rem;
    border: 1px solid #d1d5db; border-radius: 4px;
}
.login-box button {
    margin-top: 1.5rem; width: 100%; padding: 0.6rem;
    background: #1b3a63; color: #fff; border: none; border-radius: 4px;
    font-weight: 600; cursor: pointer;
}
.login-box button:hover { background: #274b7a; }
.alert-error {
    background: #fee2e2; color: #991b1b; padding: 0.5rem 0.75rem;
    border-radius: 4px; font-size: 0.85rem; margin-bottom: 0.5rem;
}

/* --- App principal --- */
.syscl-app { min-height: 100vh; display: flex; flex-direction: column; }
.syscl-topbar {
    background: #1b3a63; color: #fff; padding: 0.6rem 1rem;
    display: flex; justify-content: space-between; align-items: center;
}
.syscl-brand { font-weight: 700; }
.syscl-usuario { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.syscl-logout {
    background: transparent; border: 1px solid #fff; color: #fff;
    padding: 0.25rem 0.75rem; border-radius: 4px; cursor: pointer;
}
.syscl-logout:hover { background: rgba(255,255,255,0.15); }

.syscl-menu { background: #274b7a; }
.syscl-menu-top {
    list-style: none; display: flex; margin: 0; padding: 0; flex-wrap: wrap;
}
.syscl-menu-top li button {
    background: transparent; border: none; color: #fff; padding: 0.6rem 1rem;
    cursor: pointer; font-size: 0.85rem;
}
.syscl-menu-top li.activo button, .syscl-menu-top li button:hover { background: #1b3a63; }

.syscl-menu-sub {
    list-style: none; margin: 0; padding: 0.4rem 1rem; background: #eef1f6;
    display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
    border-bottom: 1px solid #d1d5db;
}
.syscl-menu-sub li a {
    display: inline-block;
    color: #1b3a63;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: "Segoe UI Semibold", Segoe UI, Arial, sans-serif;
    padding: 0.3rem 0.7rem;
    border-radius: 5px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.syscl-menu-sub li a:hover {
    background-color: #d6e4f5;
    text-decoration: none;
}
.syscl-menu-sub li a.active {
    background-color: #2563eb;
    color: #ffffff;
}
.syscl-menu-sub li.deshabilitado {
    color: #9ca3af;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    cursor: not-allowed;
}

.syscl-main { padding: 1.5rem; flex: 1; }
/* El h3 de titulo ("Modulo » Pantalla") es siempre el primer
   elemento de cada pantalla -- se le quita el margen superior por
   defecto del h3 para que quede una linea mas pegado al menu, en
   vez de sumarse al padding-top de .syscl-main. Al ser una regla
   global, aplica a todas las pantallas (actuales y futuras) sin
   tocar cada .razor. */
.syscl-main > h3:first-child { margin-top: 0; }

.alert-info {
    background: #e0f2fe; border: 1px solid #7dd3fc; padding: 1rem;
    border-radius: 6px; max-width: 640px;
}
.alert-info code { background: #fff; padding: 0.1rem 0.4rem; border-radius: 3px; }
.nota-legacy {
    margin-top: 0.75rem; font-size: 0.85rem; color: #7c5a00;
    background: #fff7e6; border: 1px solid #ffe08a; padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

/* --- Pantallas CRUD de modulos migrados --- */
.tabla-grilla {
    border-collapse: collapse;
    width: 100%;
    max-width: 900px;
    background: #fff;
    font-size: 0.9rem;
}
.tabla-grilla th {
    background: #1b3a63; color: #fff; text-align: left;
    padding: 0.5rem 0.75rem; font-weight: 600;
}
.tabla-grilla td {
    padding: 0.45rem 0.75rem; border-bottom: 1px solid #e5e7eb; cursor: pointer;
}
.tabla-grilla tr:hover td { background: #eef1f6; }
.tabla-grilla tr.seleccionada td { background: #d6e4f5; }

/* Modificador: quita el max-width:900px por defecto para grillas con
   columnas de texto libre (descripcion, proveedor) que necesitan mas
   ancho para no cortar linea. */
.tabla-grilla.tabla-ancha { max-width: none; }
/* Modificador por columna: evita el salto de linea (usar junto con
   tabla-ancha, que le da a la columna espacio real donde desplegarse). */
.tabla-grilla td.col-ancha, .tabla-grilla th.col-ancha { white-space: nowrap; }

/* --- Grillas largas: alto fijo (~15 filas) con scroll interno, para
   que los botones de accion queden siempre visibles debajo sin tener
   que bajar por miles de registros. Convencion para toda pantalla de
   listado (Mantencion de Productos, Stock de Productos, y las que
   vengan): envolver la <table class="tabla-grilla"> en un
   <div class="grilla-contenedor">. El alto (32rem) es aproximado para
   "unos 15" registros; varia un poco segun si hay filas con texto que
   ocupa 2 lineas. */
.grilla-contenedor {
    position: relative;
    min-height: 10rem; /* evita que el loader quede aplastado/cortado
                           cuando la tabla esta vacia (p.ej. mientras
                           carga la primera vez, antes de tener filas) */
    max-height: 32rem;
    overflow-y: auto;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.grilla-contenedor .tabla-grilla { margin: 0; }
.grilla-contenedor .tabla-grilla th { position: sticky; top: 0; }

/* Loader centrado mientras carga una grilla o un panel: se superpone
   sobre su contenedor (.grilla-contenedor o .panel-form, ambos con
   position:relative). flex-direction:column + align/justify:center
   centra tanto el spinner como el texto, horizontal y verticalmente. */
.loader-overlay {
    position: absolute; inset: 0; background: rgba(255,255,255,0.85);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.75rem; z-index: 2;
}
/* Spinner estilo Apple/iOS: 12 barras alrededor de un centro, cada una
   con el mismo ciclo de fade pero desfasado en el tiempo (animation-delay
   escalonado), lo que da la ilusión de giro sin rotar nada literalmente. */
.spinner-apple {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
}
.spinner-apple i {
    position: absolute;
    top: 50%; left: 50%;
    width: 12%; height: 28%;
    margin-top: -14%; margin-left: -6%;
    background: #1b3a63;
    border-radius: 999px;
    transform-origin: 50% 0%;
    opacity: 0.15;
    animation: syscl-apple-fade 1s linear infinite;
}
.spinner-apple i:nth-child(1)  { transform: rotate(0deg)   translateY(-100%); animation-delay: -1.000s; }
.spinner-apple i:nth-child(2)  { transform: rotate(30deg)  translateY(-100%); animation-delay: -0.916s; }
.spinner-apple i:nth-child(3)  { transform: rotate(60deg)  translateY(-100%); animation-delay: -0.833s; }
.spinner-apple i:nth-child(4)  { transform: rotate(90deg)  translateY(-100%); animation-delay: -0.750s; }
.spinner-apple i:nth-child(5)  { transform: rotate(120deg) translateY(-100%); animation-delay: -0.666s; }
.spinner-apple i:nth-child(6)  { transform: rotate(150deg) translateY(-100%); animation-delay: -0.583s; }
.spinner-apple i:nth-child(7)  { transform: rotate(180deg) translateY(-100%); animation-delay: -0.500s; }
.spinner-apple i:nth-child(8)  { transform: rotate(210deg) translateY(-100%); animation-delay: -0.416s; }
.spinner-apple i:nth-child(9)  { transform: rotate(240deg) translateY(-100%); animation-delay: -0.333s; }
.spinner-apple i:nth-child(10) { transform: rotate(270deg) translateY(-100%); animation-delay: -0.250s; }
.spinner-apple i:nth-child(11) { transform: rotate(300deg) translateY(-100%); animation-delay: -0.166s; }
.spinner-apple i:nth-child(12) { transform: rotate(330deg) translateY(-100%); animation-delay: -0.083s; }
@keyframes syscl-apple-fade { 0% { opacity: 1; } 100% { opacity: 0.15; } }

.spinner-texto { font-size: 0.85rem; font-weight: 600; color: #1b3a63; }

.panel-form {
    position: relative; /* ancla el .loader-overlay (position:absolute) a este panel */
    max-width: 480px; background: #fff; border: 1px solid #d1d5db;
    border-radius: 6px; padding: 1.25rem; margin-top: 1rem;
}
.panel-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 0.75rem; }
.panel-form input, .panel-form select {
    width: 100%; padding: 0.45rem; margin-top: 0.25rem;
    border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.9rem;
}

.editor-valor-unico {
    max-width: 380px; background: #fff; border: 1px solid #d1d5db;
    border-radius: 6px; padding: 1.25rem; margin-top: 1rem;
}
.editor-valor-unico label { font-weight: 600; font-size: 0.9rem; }
.editor-valor-unico .fila-valor {
    display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem;
}
.editor-valor-unico input { width: 100px; padding: 0.4rem; text-align: center; border: 1px solid #d1d5db; border-radius: 4px; }

.acciones { margin-top: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.btn-primario, .btn-secundario, .btn-peligro {
    padding: 0.45rem 1rem; border: none; border-radius: 4px; font-weight: 600;
    font-size: 0.85rem; cursor: pointer;
}
/* Permite usar estas mismas clases en un <a> (p.ej. un link de descarga
   de archivo) y que se vea igual que un <button>, incluso fuera de un
   contenedor flex como .acciones. */
a.btn-primario, a.btn-secundario, a.btn-peligro {
    display: inline-block; text-decoration: none;
}
.btn-primario { background: #2563eb; color: #fff; }
.btn-primario:hover { background: #1d4ed8; }
.btn-secundario { background: #e5e7eb; color: #1f2a37; }
.btn-secundario:hover { background: #d1d5db; }
.btn-peligro { background: #dc2626; color: #fff; }
.btn-peligro:hover { background: #b91c1c; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.dialogo-confirmacion {
    margin-top: 1rem; padding: 1rem; background: #fff7e6;
    border: 1px solid #ffe08a; border-radius: 6px; max-width: 480px;
}
.dialogo-confirmacion .acciones { margin-top: 0.75rem; }

.alert-exito {
    background: #dcfce7; color: #166534; padding: 0.5rem 0.75rem;
    border-radius: 4px; font-size: 0.85rem; margin-top: 0.5rem;
}

/* --- Overlay modal (confirmar salida, autorizacion de supervisor) --- */
.overlay-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
}
.dialogo-modal {
    background: #fff; max-width: 420px; width: 90%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.dialogo-modal label { display: block; font-size: 0.85rem; font-weight: 600; margin-top: 0.6rem; }
.dialogo-modal input {
    width: 100%; padding: 0.45rem; margin-top: 0.25rem;
    border: 1px solid #d1d5db; border-radius: 4px;
}

/* Variante ancha de .dialogo-modal: para modales de busqueda con una
   grilla de resultados (SelectorProductoModal, SelectorProveedorModal
   y cualquier otro selector que se agregue mas adelante). */
.dialogo-modal-ancho {
    background: #fff; max-width: 820px; width: 92%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    max-height: 85vh; display: flex; flex-direction: column;
}
.dialogo-modal-ancho .fila-busqueda { padding: 1rem 1rem 0 1rem; }
.dialogo-modal-ancho .grilla-contenedor { margin: 0.75rem 1rem 1rem 1rem; max-height: 20rem; }
.dialogo-modal-ancho .acciones { padding: 0 1rem 1rem 1rem; margin-top: 0; }
.dialogo-modal-ancho h4 { margin: 1rem 1rem 0 1rem; }
.tabla-grilla tr.fila-seleccionable { cursor: pointer; }
.tabla-grilla tr.fila-seleccionable:hover { background: #eff6ff; }

/* --- Pantallas de Bodega (busqueda + formularios anchos) --- */
.panel-busqueda {
    background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
    padding: 1rem; margin-bottom: 1rem;
}
.fila-busqueda {
    display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end;
}
.fila-busqueda label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.25rem; }
.fila-busqueda input, .fila-busqueda select {
    padding: 0.4rem; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.85rem;
}

.panel-form-ancho { max-width: 900px; }
/* Variante mas ancha: paneles con grillas de muchas columnas (items de
   Orden de Compra: Nº/Cod.CLP/Cod.Prov/Descripcion/Cantidad/Unid/
   Precio/Moneda/Total) que con 900px quedaban obligadas a scroll
   horizontal aunque sobrara espacio en pantalla. */
.panel-form-xancho { max-width: 1200px; }

/* Columna de ancho acotado que SI hace salto de linea (a diferencia de
   .col-ancha, que fuerza una sola linea) -- para texto libre largo
   (Observacion) en listados, evitando que una fila con mucho texto
   fuerce scroll horizontal en toda la grilla. */
.col-observacion { max-width: 340px; white-space: normal; word-break: break-word; }
/* Pareja de .col-observacion: le resta a Proveedor lo que se le suma a
   Observacion (que en la practica tiene mas texto que leer) para que
   la grilla de Ordenes de Compra quede equilibrada. */
.col-proveedor { max-width: 200px; white-space: normal; word-break: break-word; }
.input-full { width: 100%; }

.grid-2col, .grid-3col {
    display: grid; gap: 0.75rem; margin-top: 0.75rem;
}
.grid-2col { grid-template-columns: 1fr 1fr; }
.grid-3col { grid-template-columns: 1fr 1fr 1fr; }
.grid-2col label, .grid-3col label { display: block; font-size: 0.85rem; font-weight: 600; }
.grid-2col input, .grid-2col select, .grid-3col input, .grid-3col select {
    width: 100%; padding: 0.45rem; margin-top: 0.25rem;
    border: 1px solid #d1d5db; border-radius: 4px;
}

.fila-checks { display: flex; gap: 1.5rem; margin-top: 1rem; }
.fila-checks label { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }