/* RUTA: /sistemainterno2/assets/css/estilo.css
   Demo visual AH Soluciones - inspirado en la linea grafica de HYC Brothers
   pero con la identidad de marca de AH Soluciones (naranja/negro). */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --ah-naranja: #F7941E;
    --ah-naranja-oscuro: #D97B0C;
    --ah-negro: #1A1A1A;
    --ah-gris-texto: #6c757d;
    --ah-gris-claro: #f4f5f7;
    --ah-borde: #e9ecef;
}

body {
    background-color: var(--ah-gris-claro);
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    color: #2b2b2b;
}

/* ---------- FRANJA NEGRA SUPERIOR (igual a la de HYC) ---------- */
.ah-franja-top {
    background: var(--ah-negro);
    height: 5px;
    width: 100%;
}

/* ---------- BARRA SUPERIOR (topbar) - plana, un solo color, como HYC ---------- */
.ah-topbar {
    background: var(--ah-naranja);
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ah-topbar .ah-marca {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Chip blanco detras del logo: asi un logo con fondo transparente
   siempre se ve nitido, sea cual sea el color de la barra. */
.ah-topbar .ah-logo-chip {
    background: #fff;
    border-radius: 8px;
    padding: 4px 12px;
    display: flex;
    align-items: center;
    height: 46px;
}

.ah-topbar .ah-logo-chica {
    height: 36px;
    width: auto;
    display: block;
}

.ah-topbar .ah-config {
    margin-left: 6px;
}

.ah-topbar .ah-config a {
    color: rgba(0,0,0,.45);
    font-weight: 600;
    text-decoration: none;
    margin-right: 18px;
    font-size: .88rem;
}

.ah-topbar .ah-derecha {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ah-topbar .ah-usuario {
    color: #fff;
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
}

.ah-topbar .ah-usuario strong { font-weight: 700; }

.ah-topbar .ah-logout {
    color: #fff;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: .85rem;
    transition: background .2s;
}
.ah-topbar .ah-logout:hover { background: rgba(0,0,0,.15); }

/* ---------- MENU / NAV - plano, texto simple, subrayado en el activo ---------- */
.ah-nav {
    background: #fff;
    border-bottom: 1px solid var(--ah-borde);
    padding: 0 24px;
}

.ah-nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    justify-content: center;
}

.ah-nav li { position: relative; }

.ah-nav .ah-nav-link {
    display: block;
    padding: 14px 16px;
    color: #555;
    font-weight: 500;
    font-size: .9rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: all .15s ease;
    cursor: pointer;
    white-space: nowrap;
}

.ah-nav .ah-nav-link:hover {
    color: var(--ah-naranja-oscuro);
}

.ah-nav .ah-nav-link.activo {
    color: var(--ah-naranja-oscuro);
    font-weight: 700;
    border-bottom-color: var(--ah-naranja);
}

.ah-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    border: 1px solid var(--ah-borde);
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,.08);
    padding: 4px 0;
    display: none;
    z-index: 50;
}

.ah-nav li:hover .ah-dropdown { display: block; }

.ah-dropdown a {
    display: block;
    padding: 9px 16px;
    color: #444;
    text-decoration: none;
    font-size: .86rem;
}

.ah-dropdown a:hover { background: var(--ah-gris-claro); color: var(--ah-naranja-oscuro); }

/* Submódulo actual dentro del desplegable */
.ah-dropdown a.activo {
    color: var(--ah-naranja-oscuro);
    font-weight: 600;
    background: #fff7ee;
    box-shadow: inset 3px 0 0 var(--ah-naranja);
}

/* ---------- CONTENIDO ---------- */
.ah-contenido { padding: 28px 30px; }

.ah-titulo-panel { font-weight: 700; color: #1a1a1a; font-size: 1.3rem; margin-bottom: 18px; }
.ah-titulo-panel small { font-weight: 400; font-size: .78rem; color: var(--ah-gris-texto); }

/* ---------- ENCABEZADO DE PANEL CON ÍCONO (icono en chip + título + subtítulo) ----------
   Reemplaza al <h2 class="ah-titulo-panel"> plano por el patrón "ícono en
   chip de color + título grande + subtítulo gris chico" que se ve en
   paneles con más cuidado visual (Agrícola HP, etc.). Cada pantalla elige
   el color del chip con una de las clases ah-chip-* de abajo, para que de
   un vistazo se distinga de qué módulo se trata. */
.ah-header-panel {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.ah-header-icono {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-top: 1px;
}

.ah-header-textos h2 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.25;
}

.ah-header-textos p {
    margin: 3px 0 0;
    font-size: .85rem;
    color: var(--ah-gris-texto);
}

/* Chips de color (íconos y, cuando haga falta, tarjetas KPI a juego).
   Mismo tono pastel-de-fondo + texto oscuro que ya usan los badges de
   estado (.ah-estado-*), para que todo el sistema hable el mismo idioma
   visual en vez de que cada pantalla invente sus propios colores. */
.ah-chip-naranja { background: #fff3e0; color: var(--ah-naranja-oscuro); }
.ah-chip-azul    { background: #e5f1ff; color: #2f6fed; }
.ah-chip-violeta { background: #f1eaff; color: #7c3aed; }
.ah-chip-verde   { background: #e3f7e8; color: #1e8449; }
.ah-chip-rojo    { background: #fde3e3; color: #c0392b; }

/* ---------- BARRA DE FILTROS/HERRAMIENTAS (buscador + selects + acciones) ----------
   Antes esta fila vivía suelta sobre el fondo gris de la página (sin
   tarjeta, inputs sin estilo propio fuera de los modales). Ahora es una
   tarjeta blanca elegante, igual de "pulida" que las tarjetas de abajo. */
.ah-filtros-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    padding: 14px 18px;
    margin-top: 16px;
    margin-bottom: 18px;
}

/* ---------- CAMPOS ELEGANTES fuera de modales (buscadores y selects de filtro) ----------
   Antes .ah-input-redondo solo tenía estilo real DENTRO de los modales
   (".modal-body .ah-input-redondo"); en el buscador de la tabla y en los
   selects de Gestión de Permisos usaba el look plano de Bootstrap de
   fábrica. Ahora la regla es global, así se ve igual de cuidada en
   cualquier parte de la pantalla. */
.ah-input-redondo {
    background: var(--ah-gris-claro);
    border: 1px solid var(--ah-borde);
    border-radius: 10px;
    padding: .55rem .95rem;
    height: auto;
    font-size: .88rem;
    color: #2b2b2b;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.ah-input-redondo:focus {
    background: #fff;
    border-color: var(--ah-naranja);
    box-shadow: 0 0 0 3px rgba(247,148,30,.16);
    outline: none;
}

.ah-input-redondo[readonly] { background: #eef0f2; color: #666; }
.ah-input-redondo.is-invalid { border-color: #d0342c; background: #fdf1f1; }
.ah-input-redondo.is-valid { border-color: #1e8449; background: #f0faf3; }
.ah-input-redondo.is-valid:focus { box-shadow: 0 0 0 3px rgba(30,132,73,.15); }

/* Antes un campo con disabled se veía IDÉNTICO a uno editable (mismo gris
   de fondo en ambos casos) — se prestaba para pensar que un campo activo
   estaba bloqueado, o al revés. Un campo realmente deshabilitado ahora se
   ve claramente "apagado": rayado sutil, texto tenue, cursor de bloqueado. */
.ah-input-redondo:disabled {
    background: repeating-linear-gradient(135deg, #e9ebee, #e9ebee 6px, #e2e4e8 6px, #e2e4e8 12px);
    border-color: #d7dae0;
    color: #8b9099;
    cursor: not-allowed;
    opacity: 1;
}

select.ah-input-redondo {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236c757d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    padding-right: 2.1rem;
}

/* Buscador con lupa integrada (input dentro de un wrapper con ícono) */
.ah-buscador { position: relative; }
.ah-buscador i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ah-gris-texto);
    font-size: .85rem;
    pointer-events: none;
}
.ah-buscador input.ah-input-redondo { padding-left: 2.35rem; }

/* ---------- TARJETAS KPI / RESUMEN ---------- */
.ah-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    padding: 20px 22px;
    height: calc(100% - 20px);
    margin-bottom: 20px;
}

.ah-card h5 {
    font-size: .95rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ah-card h5 i { color: var(--ah-naranja); }

.ah-kpi-valor { font-size: 1.6rem; font-weight: 700; color: #1a1a1a; }
.ah-kpi-label { color: var(--ah-gris-texto); font-size: .82rem; }

.ah-estado-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 700;
}
.ah-estado-pendiente { background: #fff3e0; color: #d97b0c; }
.ah-estado-vencido { background: #fde3e3; color: #c0392b; }
.ah-estado-pagado { background: #e3f7e8; color: #1e8449; }

.ah-tabla-mini { width: 100%; font-size: .87rem; }
.ah-tabla-mini th { color: var(--ah-gris-texto); font-weight: 600; border-bottom: 2px solid var(--ah-borde); padding: 8px 6px; }
.ah-tabla-mini td { padding: 9px 6px; border-bottom: 1px solid var(--ah-borde); }

/* ---------- LOGIN ---------- */
.ah-login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, #2a2a2a 0%, #111 70%);
}

.ah-login-box {
    background: #fff;
    border-radius: 14px;
    padding: 40px 38px 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    text-align: center;
    animation: ah-fade-up .5s ease;
}

@keyframes ah-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.ah-login-box img { max-width: 220px; margin-bottom: 22px; }

.ah-login-box input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid var(--ah-borde);
    margin-bottom: 14px;
    font-size: .95rem;
}

.ah-login-box input:focus {
    outline: none;
    border-color: var(--ah-naranja);
    box-shadow: 0 0 0 3px rgba(247,148,30,.18);
}

.ah-btn-naranja {
    background: var(--ah-naranja);
    border: none;
    color: #1a1a1a;
    font-weight: 700;
    padding: 11px 0;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    transition: background .2s;
}
.ah-btn-naranja:hover { background: var(--ah-naranja-oscuro); color: #fff; }

.ah-login-error {
    background: #fde3e3;
    color: #c0392b;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: .85rem;
    margin-bottom: 14px;
}

/* ---------- SPLASH / INTRO ----------
   Misma mecánica que el loader de phantom.cl/OHC/: una línea que nace a
   todo el ancho de la pantalla y se va achicando desde ambos extremos
   hacia el centro (scaleX de 1 a 0, origen centrado) hasta desaparecer;
   justo ahí aparece el logo (con fondo transparente) con un fundido suave. */
.ah-splash {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity .6s ease, visibility .6s ease;
}

.ah-splash.ah-splash-oculto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* La linea naranja: parte a ancho completo (100vw) y se achica hacia el
   centro (transform-origin: center => se ve "entrar" desde ambos extremos) */
.ah-splash-linea {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 3px;
    width: 100vw;
    transform: translate(-50%, -50%) scaleX(1);
    transform-origin: center;
    background: var(--ah-naranja);
    animation: ah-linea-achicar 2s cubic-bezier(.65,0,.35,1) forwards;
    animation-delay: .15s;
}

@keyframes ah-linea-achicar {
    0%   { transform: translate(-50%, -50%) scaleX(1); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scaleX(0); opacity: 0; }
}

.ah-splash-marca {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: ah-marca-aparece .5s ease forwards;
    animation-delay: 2.05s;
}

.ah-splash-marca img { width: 240px; }

@keyframes ah-marca-aparece {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- MÓDULOS: autocompletado cliente/proveedor (Facturas) ---------- */
.ah-sugerencias {
    position: absolute;
    z-index: 9999;
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ah-borde);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0,0,0,.12);
    margin-top: 4px;
}

.suggest-element {
    display: block;
    padding: 9px 14px;
    color: #2b2b2b;
    text-decoration: none;
    font-size: .88rem;
    border-bottom: 1px solid var(--ah-borde);
}
.suggest-element:last-child { border-bottom: none; }
.suggest-element:hover {
    background: var(--ah-gris-claro);
    color: var(--ah-naranja-oscuro);
    text-decoration: none;
}

/* ==========================================================================
   MODALES ELEGANTES
   Reemplaza el look "Bootstrap de fábrica" de los modales (Nueva/Editar
   Venta, Nueva/Editar Compra, Detalle, Subir Archivos) por uno con más
   cuidado visual: cabecera oscura con ícono en chip naranja, campos con
   fondo suave y foco naranja, texto de ayuda bajo cada campo, pie con
   fondo distinto y botones con más aire. Es puramente visual — no cambia
   ningún id ni comportamiento de JS.
   ========================================================================== */
.modal-content {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.modal-header {
    background: var(--ah-negro);
    color: #fff;
    padding: 20px 26px;
    border-bottom: none;
}

.modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 700;
}

.ah-modal-icono {
    background: var(--ah-naranja);
    color: #1a1a1a;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.modal-header .close {
    color: #fff;
    opacity: .75;
    text-shadow: none;
    font-weight: 400;
    transition: opacity .15s;
}
.modal-header .close:hover { color: #fff; opacity: 1; }

.modal-body { padding: 26px 26px 8px; }

.modal-footer {
    background: var(--ah-gris-claro);
    border-top: 1px solid var(--ah-borde);
    padding: 16px 26px;
}

.modal-footer .btn {
    border-radius: 10px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: .88rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.modal-footer .btn-secondary {
    background: #fff;
    border: 1px solid var(--ah-borde);
    color: #555;
}
.modal-footer .btn-secondary:hover { background: var(--ah-gris-claro); color: #333; }

.modal-footer .btn-success,
.modal-footer .btn-primary {
    background: var(--ah-negro);
    border: 1px solid var(--ah-negro);
    color: #fff;
}
.modal-footer .btn-success:hover,
.modal-footer .btn-primary:hover {
    background: var(--ah-naranja);
    border-color: var(--ah-naranja);
    color: #1a1a1a;
}

/* ---------- Campos de formulario dentro de los modales ---------- */
.modal-body .form-group label {
    font-weight: 700;
    font-size: .8rem;
    color: #333;
    margin-bottom: 6px;
    display: block;
}

.ah-requerido { color: #d0342c; margin-left: 2px; }

.ah-subtitulo-form {
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ah-naranja-oscuro);
    border-bottom: 2px solid var(--ah-borde);
    padding-bottom: 6px;
    margin-bottom: 14px;
}
.ah-subtitulo-form i { margin-right: 6px; }
.ah-subtitulo-form:not(:first-child) { margin-top: 4px; }
.ah-subtitulo-form .btn {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    font-size: .74rem;
    border-radius: 8px;
}

.ah-form-ayuda {
    display: block;
    font-size: .76rem;
    color: var(--ah-gris-texto);
    margin-top: 5px;
}
.ah-form-ayuda a { color: var(--ah-naranja-oscuro); font-weight: 600; text-decoration: none; }
.ah-form-ayuda a:hover { text-decoration: underline; }

.modal-body .ah-input-redondo,
.modal-body select.ah-input-redondo {
    background: var(--ah-gris-claro);
    border: 1px solid var(--ah-borde);
    border-radius: 10px;
    padding: .5rem .85rem;
    height: auto;
    font-size: .88rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.modal-body .ah-input-redondo:focus {
    background: #fff;
    border-color: var(--ah-naranja);
    box-shadow: 0 0 0 3px rgba(247,148,30,.16);
    outline: none;
}

.modal-body .ah-input-redondo[readonly] {
    background: #eef0f2;
    color: #666;
}

.modal-body .ah-input-redondo.is-invalid {
    border-color: #d0342c;
    background: #fdf1f1;
}

/* Validado OK (ej. RUT con dígito verificador correcto). Las reglas con
   :focus van aparte para que el borde naranja del foco no tape el
   verde/rojo mientras el usuario sigue escribiendo en el campo. */
.modal-body .ah-input-redondo.is-valid,
.modal-body .ah-input-redondo.is-valid:focus {
    border-color: #1e8449;
    background: #f0faf3;
}
.modal-body .ah-input-redondo.is-valid:focus { box-shadow: 0 0 0 3px rgba(30,132,73,.15); }
.modal-body .ah-input-redondo.is-invalid:focus {
    border-color: #d0342c;
    background: #fdf1f1;
    box-shadow: 0 0 0 3px rgba(208,52,44,.14);
}

.modal-body .ah-input-redondo:disabled {
    background: repeating-linear-gradient(135deg, #e9ebee, #e9ebee 6px, #e2e4e8 6px, #e2e4e8 12px);
    border-color: #d7dae0;
    color: #8b9099;
    cursor: not-allowed;
    opacity: 1;
}

.modal-body .custom-control-label { font-size: .86rem; color: #444; }

/* ---------- Zona de subida de archivos (Subir Archivos) ---------- */
.ah-dropzone {
    border: 2px dashed var(--ah-borde);
    border-radius: 12px;
    background: var(--ah-gris-claro);
    padding: 22px;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.ah-dropzone:hover { border-color: var(--ah-naranja); }
.ah-dropzone i { font-size: 1.8rem; color: var(--ah-naranja); margin-bottom: 8px; display: block; }
.ah-dropzone input[type="file"] { margin-top: 10px; }

.ah-columnas-csv {
    background: var(--ah-gris-claro);
    border: 1px solid var(--ah-borde);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: .78rem;
    word-break: break-word;
}