/* =====================================================================
   INGECOP — GLOBAL THEME (CENTRALIZED)
   ---------------------------------------------------------------------
   Single source of truth for all platform styles.

   Sections:
     0. Fonts
     1. Design tokens (:root variables)
     2. Global base
     2.1 Page shell + flash (ancho global, <x-page-shell> / <x-flash>)
     3. Main navbar (header.blade.php)
     4. Page sub-header (light)
     5. Layout (sidebar + main, used by informe)
     6. Cards
     7. Sticky actions bar
     8. Section headings
     9. Accordions
    10. Subsections
    11. Buttons
    12. Badges
    13. Tables (sheet-wrap)
    14. Sidebar (informe only)
    15. Performance + reduced motion
    16. Severa observación highlight
    17. Inspección cards (registro page)
    18. Utilities (filter inputs, visibility)
    19. Image lightbox + upload thumbnails (informe)
    20. Cover placeholder (detail + listing pages)
    21. Cover image (detail headers)
    22. Cover thumbnail (project form)
    23. Map canvas (Leaflet container)
    24. Filter tags dropdown (listing toolbars)
    25. Clickable cards (listing grids)
    26. Card status pill
    27. Card address line
    28. Tramo cards + PACP calification badges
    29. Tramos location map (Leaflet markers + popups)
    30. Registro de proyectos (two-column layout + Chile map)
    31. Login (pantalla completa, scoped en body.login-page)

   No gradients. Flat colors throughout.
   ===================================================================== */


/* =====================================================================
   0. FONTS
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
:root {
    /* ---- Brand palette (from logo) -------------------------------- */
    --ingecop-navy:        #1A1F4E;
    --ingecop-navy-dark:   #11163A;
    --ingecop-navy-soft:   #EEF0F8;
    --ingecop-red:         #E1251B;
    --ingecop-red-dark:    #B81C12;
    --ingecop-red-soft:    #FDECEB;
    --ingecop-white:       #FFFFFF;

    /* ---- Neutral surfaces ----------------------------------------- */
    --ingecop-bg:          #faf7f5;
    --ingecop-surface:     #FFFFFF;
    --ingecop-border:      #E2E5EE;
    --ingecop-muted:       #5B6478;

    /* ---- Role colors --------------------------------------------- */
    --level-inspeccion:        var(--ingecop-navy);
    --level-inspeccion-soft:   var(--ingecop-navy-soft);
    --level-inspeccion-text:   var(--ingecop-white);

    --level-tramo:             var(--ingecop-red);
    --level-tramo-soft:        var(--ingecop-red-soft);
    --level-tramo-text:        var(--ingecop-white);

    --level-hallazgo:          #B45309;
    --level-hallazgo-soft:     #FEF3E2;
    --level-hallazgo-text:     #FFFFFF;

    --level-observacion:       #0F766E;
    --level-observacion-soft:  #E6F4F2;
    --level-observacion-text:  #FFFFFF;

    --level-evidencia:         #6D28D9;
    --level-evidencia-soft:    #F1ECFD;
    --level-evidencia-text:    #FFFFFF;

    /* ---- Sidebar (informe layout) -------------------------------- */
    --sidebar-width:           280px;
    --sidebar-bg:              var(--ingecop-navy);
    --sidebar-text:            #F1F2F8;
    --sidebar-muted:           #C5C9DC;
    --sidebar-hover:           rgba(225, 37, 27, 0.22);
    --sidebar-active:          var(--ingecop-red);

    /* ---- Page width — fuente única de verdad ---------------------- */
    /* 1400px = 4 tarjetas (1076px) + gap (24px) + mapa (300px).         */
    /* Cambiar acá cambia el ancho de TODA la app.                       */
    --page-width:              1400px;
    --page-width-narrow:       640px;    /* formularios angostos (perfil) */
    --page-gutter:             1.5rem;   /* aire lateral bajo el máximo   */

    /* ---- Layout -------------------------------------------------- */
    --radius-card:             10px;
    --radius-pill:             999px;

    /* ---- Navbar -------------------------------------------------- */
    --navbar-height:           62px;
}


/* =====================================================================
   2. GLOBAL BASE
   ===================================================================== */
body {
    background: var(--ingecop-bg);
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2330;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

.small-muted {
    font-size: 0.85rem;
    color: var(--ingecop-muted);
}

.section-title {
    letter-spacing: 0.2px;
}

.code-pill {
    font-family: "Montserrat", sans-serif;
}


/* =====================================================================
   2.1 PAGE SHELL + FLASH
   ---------------------------------------------------------------------
   .page-shell es el ÚNICO contenedor de ancho de la app. Reemplaza a
   .container y .container-fluid de Bootstrap en todas las vistas.
   Se centra con margin, nunca con padding.

   Vive acá (global) y no en la sección 30, porque ya no es exclusivo del
   listado de proyectos: lo usan el sub-header, los flash y todas las
   vistas. Lo consumen <x-page-shell>, <x-page-header> y <x-flash>.
   ===================================================================== */
.page-shell {
    width: var(--page-width);
    /* Red de seguridad: bajo 1400px nunca provoca scroll horizontal.
       Si se quiere un 1400px duro, borrar esta línea. */
    max-width: calc(100% - (var(--page-gutter) * 2));
    margin-inline: auto;
}

/* Variante angosta: solo redefine la variable, la regla de arriba hace el resto. */
.page-shell-narrow {
    --page-width: var(--page-width-narrow);
}

/* Dentro del layout con sidebar el ancho lo manda .ingecop-main (sección 5),
   que ya resta --sidebar-width y aplica su propio padding. Sin esto, un
   .page-shell de 1400px desbordaría la columna. */
.ingecop-layout .page-shell,
.ingecop-main .page-shell {
    --page-width: 100%;
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   Mensajes flash (<x-flash />). Bootstrap pone el color; acá solo el ritmo
   vertical entre alertas apiladas.
   --------------------------------------------------------------------- */
.page-flash .alert {
    margin-bottom: 0.5rem;
}
.page-flash .alert:last-child {
    margin-bottom: 0;
}


/* =====================================================================
   3. MAIN NAVBAR — dark navy with red accent
   ===================================================================== */
.ingecop-navbar-wrap {
    border-bottom: 3px solid var(--ingecop-red);
    position: relative;
    z-index: 1030;
}
.ingecop-navbar {
    background: var(--ingecop-navy);
    min-height: var(--navbar-height);
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.ingecop-brand {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.ingecop-brand:hover,
.ingecop-brand:focus {
    color: #fff;
}
.ingecop-brand-text {
    font-size: 1rem;
    line-height: 1;
}

/* Hamburger button (mobile) */
.ingecop-navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 0.35rem 0.55rem;
}
.ingecop-navbar-toggler:focus {
    box-shadow: 0 0 0 0.18rem rgba(225, 37, 27, 0.35);
}
.ingecop-navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nav links — clear hover + active states */
.ingecop-nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ingecop-nav-link:hover,
.ingecop-nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.ingecop-navbar .ingecop-nav-link.active,
.ingecop-navbar .nav-item .ingecop-nav-link.active {
    color: #fff;
    background: rgba(225, 37, 27, 0.18);
}
/* Red underline below the active link */
.ingecop-nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: -2px;
    height: 3px;
    background: var(--ingecop-red);
    border-radius: 2px;
}

/* User dropdown trigger */
.ingecop-user-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
}
.ingecop-user-btn:hover,
.ingecop-user-btn:focus {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.28);
}
.ingecop-user-btn::after {
    margin-left: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
}
.ingecop-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ingecop-red);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
}

/* Collapsed (mobile) nav: stack with breathing room */
@media (max-width: 991.98px) {
    .ingecop-navbar .navbar-nav {
        margin-top: 0.5rem;
        margin-left: 0 !important;
        gap: 0.15rem !important;
    }
    .ingecop-nav-link.active::after {
        display: none;
    }
    .ingecop-nav-link.active {
        background: var(--ingecop-red);
    }
}


/* =====================================================================
   4. PAGE SUB-HEADER — light band, used per-page above content
   ===================================================================== */
.ingecop-header {
    background: var(--ingecop-navy-soft);
    border-bottom: 1px solid var(--ingecop-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.ingecop-header h1,
.ingecop-header .h4 {
    color: var(--ingecop-navy);
}
/* El subtítulo del sub-header. El markup vive en <x-page-header>, así que
   ya no hacen falta los overrides de .text-white / .text-white-50 que
   parcheaban las utilidades de Bootstrap heredadas del diseño anterior. */
.ingecop-header .ingecop-header-sub {
    color: var(--ingecop-muted);
    font-size: 0.875rem;
}
.ingecop-header-badge {
    background: var(--ingecop-red);
    color: #fff;
    font-weight: 600;
    padding: 0.4em 0.85em;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}


/* =====================================================================
   5. LAYOUT — SIDEBAR + MAIN (informe only)
   ===================================================================== */
.ingecop-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
    min-height: calc(100vh - var(--navbar-height));
}

.ingecop-main {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    max-width: calc(100% - var(--sidebar-width));
}


/* =====================================================================
   6. CARDS
   ===================================================================== */
.card-ingecop {
    border: 1px solid var(--ingecop-border);
    border-left: 4px solid var(--ingecop-navy);
    border-radius: var(--radius-card);
    background: var(--ingecop-surface);
}
.card-ingecop > .card-header {
    background: var(--ingecop-navy-soft);
    border-bottom: 1px solid var(--ingecop-border);
    color: var(--ingecop-navy);
    font-weight: 600;
}

.card-inspeccion {
    border: 1px solid var(--ingecop-border);
    border-left: 4px solid var(--level-inspeccion);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.card-header-inspeccion {
    background: var(--level-inspeccion);
    color: var(--level-inspeccion-text);
    border-bottom: none;
    padding: 0.85rem 1.1rem;
}
.card-header-inspeccion .h5 { color: #fff; }
.card-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-size: 0.95rem;
}

.card-observacion {
    border: 1px solid var(--ingecop-border);
    border-left: 3px solid var(--level-observacion);
    background: #FCFEFD;
}
.card-evidencia {
    border: 1px solid var(--ingecop-border);
    border-left: 3px solid var(--level-evidencia);
    background: #FDFCFE;
}


/* =====================================================================
   7. STICKY ACTIONS BAR
   ===================================================================== */
.sticky-actions {
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(245, 246, 250, 0.92);
    backdrop-filter: blur(6px);
}
.sticky-actions-ingecop {
    background: #fff;
    border: 1px solid var(--ingecop-border);
    border-radius: var(--radius-card);
    padding: 0.75rem 1rem;
}


/* =====================================================================
   8. SECTION HEADINGS
   ===================================================================== */
.section-title-bar {
    display: inline-block;
    width: 4px;
    height: 22px;
    background: var(--ingecop-red);
    border-radius: 2px;
}
.section-bar {
    display: inline-block;
    width: 4px;
    height: 16px;
    border-radius: 2px;
}
.bar-hallazgo    { background: var(--level-hallazgo); }
.bar-observacion { background: var(--level-observacion); }
.bar-evidencia   { background: var(--level-evidencia); }

.tramos-section-header h2 {
    color: var(--ingecop-navy);
    font-weight: 700;
}


/* =====================================================================
   9. ACCORDIONS — Tramo + Hallazgo
   ===================================================================== */
.accordion-item-tramo {
    border: 1px solid var(--ingecop-border);
    border-left: 5px solid var(--level-tramo);
    border-radius: var(--radius-card) !important;
    margin-bottom: 0.6rem;
    background: var(--ingecop-surface);
    overflow: hidden;
}
.accordion-button-tramo {
    background: #fff;
    padding: 0.85rem 1.1rem;
    font-size: 1rem;
    border: none;
    color: var(--ingecop-navy);
    font-family: "Montserrat", sans-serif;
}
.accordion-button-tramo:not(.collapsed) {
    background: var(--level-tramo-soft);
    color: var(--ingecop-navy);
    box-shadow: inset 0 -2px 0 var(--level-tramo);
}
.accordion-button-tramo:focus {
    box-shadow: 0 0 0 0.18rem rgba(225, 37, 27, 0.20);
    border-color: transparent;
}
.accordion-button-tramo::after {
    filter: brightness(0.4);
}
.accordion-body-tramo {
    padding: 1.1rem 1.1rem 1rem;
    background: #fff;
}
.tramo-body-header {
    background: var(--ingecop-navy-soft);
    border-left: 3px solid var(--ingecop-navy);
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
}

.tramo-number-circle {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--level-tramo);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.65rem;
}

.accordion-item-hallazgo {
    border: 1px solid var(--ingecop-border);
    border-left: 4px solid var(--level-hallazgo);
    border-radius: 8px !important;
    margin-bottom: 0.5rem;
    background: #fff;
    overflow: hidden;
}
.accordion-button-hallazgo {
    background: #fff;
    padding: 0.65rem 0.95rem;
    font-size: 0.95rem;
    border: none;
    color: var(--ingecop-navy);
    font-family: "Montserrat", sans-serif;
}
.accordion-button-hallazgo:not(.collapsed) {
    background: var(--level-hallazgo-soft);
    color: var(--ingecop-navy);
    box-shadow: inset 0 -2px 0 var(--level-hallazgo);
}
.accordion-button-hallazgo:focus {
    box-shadow: 0 0 0 0.18rem rgba(180, 83, 9, 0.22);
    border-color: transparent;
}
.accordion-button-hallazgo::after {
    filter: brightness(0.4);
}
.accordion-body-hallazgo {
    padding: 0.95rem;
    background: #fff;
}


/* =====================================================================
   10. SUBSECTIONS
   ===================================================================== */
.hallazgos-section {
    background: #FAFAFB;
    border: 1px dashed var(--ingecop-border);
    border-radius: var(--radius-card);
    padding: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.subsection {
    background: #fff;
    border: 1px solid var(--ingecop-border);
    border-radius: 8px;
    padding: 0.85rem 0.95rem;
    margin-top: 0.5rem;
}
.subsection-observacion { border-left: 4px solid var(--level-observacion); }
.subsection-evidencia   { border-left: 4px solid var(--level-evidencia); }
.subsection-header {
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--ingecop-border);
    margin-bottom: 0.65rem !important;
}

.form-control.is-invalid ~ .invalid-feedback[data-gps-feedback="1"] {
    display: block;
}


/* =====================================================================
   11. BUTTONS
   ===================================================================== */
.btn-ingecop-primary {
    background: var(--ingecop-red);
    border: 1px solid var(--ingecop-red);
    color: #fff;
    font-weight: 600;
}
.btn-ingecop-primary:hover,
.btn-ingecop-primary:focus {
    background: var(--ingecop-red-dark);
    border-color: var(--ingecop-red-dark);
    color: #fff;
}

.btn-ingecop-success {
    background: var(--ingecop-navy);
    border: 1px solid var(--ingecop-navy);
    color: #fff;
    font-weight: 600;
}
.btn-ingecop-success:hover,
.btn-ingecop-success:focus {
    background: var(--ingecop-navy-dark);
    border-color: var(--ingecop-navy-dark);
    color: #fff;
}

.btn-outline-ingecop-navy {
    background: transparent;
    border: 1px solid var(--ingecop-navy);
    color: var(--ingecop-navy);
    font-weight: 500;
}
.btn-outline-ingecop-navy:hover,
.btn-outline-ingecop-navy:focus {
    background: var(--ingecop-navy);
    color: #fff;
}

.btn-hallazgo {
    background: var(--level-hallazgo);
    border: 1px solid var(--level-hallazgo);
    color: #fff;
    font-weight: 500;
}
.btn-hallazgo:hover,
.btn-hallazgo:focus {
    background: #92400E;
    border-color: #92400E;
    color: #fff;
}

.btn-observacion {
    background: var(--level-observacion);
    border: 1px solid var(--level-observacion);
    color: #fff;
    font-weight: 500;
}
.btn-observacion:hover,
.btn-observacion:focus {
    background: #0B5751;
    border-color: #0B5751;
    color: #fff;
}

.btn-evidencia {
    background: var(--level-evidencia);
    border: 1px solid var(--level-evidencia);
    color: #fff;
    font-weight: 500;
}
.btn-evidencia:hover,
.btn-evidencia:focus {
    background: #531EB0;
    border-color: #531EB0;
    color: #fff;
}


/* =====================================================================
   12. BADGES
   ===================================================================== */
.badge-level-inspeccion {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.badge-level-tramo {
    background: var(--level-tramo);
    color: var(--level-tramo-text);
    font-weight: 600;
    letter-spacing: 0.04em;
}
.badge-level-hallazgo {
    background: var(--level-hallazgo);
    color: var(--level-hallazgo-text);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.badge-soft-hallazgo {
    background: var(--level-hallazgo-soft);
    color: var(--level-hallazgo);
    border: 1px solid #f0d2a4;
    font-weight: 600;
}
.badge-soft-observacion {
    background: var(--level-observacion-soft);
    color: var(--level-observacion);
    border: 1px solid #c9e2dd;
    font-weight: 600;
}
.badge-soft-evidencia {
    background: var(--level-evidencia-soft);
    color: var(--level-evidencia);
    border: 1px solid #ddd1f5;
    font-weight: 600;
}


/* =====================================================================
   13. TABLES — sheet wrapper
   ===================================================================== */
.sheet-wrap {
    background: var(--ingecop-surface);
    border: 1px solid var(--ingecop-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.sheet-toolbar {
    background: var(--ingecop-surface) !important;
    border: 1px solid var(--ingecop-border) !important;
    border-radius: var(--radius-card);
}
.sheet-wrap .table {
    margin-bottom: 0;
}
.sheet-wrap .table > thead.table-light {
    background: var(--ingecop-navy-soft);
}
.sheet-wrap .table > thead.table-light th {
    color: var(--ingecop-navy);
    font-weight: 600;
    border-bottom: 2px solid var(--ingecop-border);
}
.sheet-wrap .table > tbody > tr:hover {
    background: var(--ingecop-navy-soft);
}
.filter-row th {
    background: #fff;
    border-top: 1px solid var(--ingecop-border);
}
.actions-col { white-space: nowrap; }


/* =====================================================================
   14. SIDEBAR (informe only)
   ===================================================================== */
.ingecop-sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    align-self: stretch;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow: hidden;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.ingecop-sidebar-inner {
    height: 100vh;
    overflow-y: auto;
    padding: 1.25rem 1rem 2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.ingecop-sidebar-inner::-webkit-scrollbar { width: 6px; }
.ingecop-sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

.ingecop-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.ingecop-sidebar-title {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    font-weight: 700;
}

.ingecop-sidebar-summary {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 1.25rem;
}
.summary-row {
    display: flex;
    flex-direction: column;
    padding: 0.3rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.10);
}
.summary-row:last-child { border-bottom: 0; }
.summary-label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    font-weight: 600;
}
.summary-value {
    color: var(--sidebar-text);
    font-size: 0.88rem;
    font-weight: 500;
    word-break: break-word;
    line-height: 1.3;
    margin-top: 1px;
}

.ingecop-sidebar-subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    font-weight: 700;
    padding: 0.5rem 0.25rem 0.6rem;
}
.ingecop-badge-count {
    background: var(--ingecop-red);
    color: #fff;
    border-radius: var(--radius-pill);
    padding: 0.25em 0.6em;
    font-size: 0.7rem;
}

.ingecop-tramo-nav {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.ingecop-sidebar-empty {
    color: var(--sidebar-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem 0.5rem;
    font-style: italic;
}
.tramo-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    color: var(--sidebar-text);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    font-size: 0.88rem;
}
.tramo-nav-item:hover {
    background: var(--sidebar-hover);
    border-color: rgba(225, 37, 27, 0.45);
    color: #fff;
}
.tramo-nav-item.active {
    background: var(--sidebar-active);
    border-color: var(--sidebar-active);
    color: #fff;
}
.tramo-nav-circle {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ingecop-red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.78rem;
}
.tramo-nav-item.active .tramo-nav-circle {
    background: #fff;
    color: var(--ingecop-red);
}
.tramo-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.tramo-nav-count {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--sidebar-text);
    background: rgba(255, 255, 255, 0.10);
    padding: 0.1em 0.5em;
    border-radius: var(--radius-pill);
}
.tramo-nav-item.active .tramo-nav-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

@media (max-width: 991.98px) {
    .ingecop-layout { flex-direction: column; }
    .ingecop-sidebar {
        position: relative;
        width: 100%;
        flex: 0 0 auto;
        max-height: none;
    }
    .ingecop-sidebar-inner {
        height: auto;
        max-height: 360px;
    }
    .ingecop-main {
        max-width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* =====================================================================
   15. PERFORMANCE + REDUCED MOTION
   ===================================================================== */
.accordion-button {
    transition: background-color 0.12s linear,
                box-shadow 0.12s linear;
}
.collapsing {
    transition: height 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-button,
    .tramo-nav-item,
    .ingecop-nav-link,
    .collapsing {
        transition: none !important;
    }
    html { scroll-behavior: auto !important; }
}


/* =====================================================================
   16. SEVERA OBSERVACIÓN HIGHLIGHT
   ===================================================================== */
[data-observacion].is-severa {
    border-left-color: var(--ingecop-red) !important;
    background: #FFF7F6;
}
[data-observacion].is-severa input[data-field="descripcion"],
[data-observacion].is-severa input[data-field="descripcionPACP"],
[data-observacion].is-severa select[data-field="codigo_pacp_id"],
[data-observacion].is-severa div[class="data-observacion-preview"] {
    color: var(--ingecop-red);
    font-weight: 500;
}


/* =====================================================================
   17. INSPECCIÓN CARDS (registro page)
   ===================================================================== */
.inspeccion-card {
    background: var(--ingecop-surface);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #e5e7eb;
}
.inspeccion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}

.inspeccion-card-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f3f4f6;
    overflow: hidden;
}
.inspeccion-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.inspeccion-card-cover .cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background: #f3f4f6;
}
.inspeccion-card-cover.no-image {
    background: #f3f4f6;
}
.inspeccion-card-cover.no-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #f3f4f6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='9' cy='9' r='2'/><path d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/></svg>") center no-repeat;
}

.inspeccion-card-menu {
    position: absolute;
    top: 8px;
    right: 8px;
}
.inspeccion-card-menu .btn {
    padding: 4px 8px;
    line-height: 1;
    border-radius: 50%;
}

.inspeccion-card-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.inspeccion-counters {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 600;
}
.inspeccion-counters .counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inspeccion-counters .counter svg {
    flex-shrink: 0;
}

.inspeccion-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.inspeccion-card-title:hover {
    color: var(--ingecop-navy);
    text-decoration: underline;
}

.inspeccion-card-cliente,
.inspeccion-card-fecha {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6b7280;
}
.inspeccion-card-cliente svg,
.inspeccion-card-fecha svg {
    flex-shrink: 0;
}


/* =====================================================================
   18. UTILITIES (filter toolbar inputs, conditional visibility)
   ===================================================================== */
.filter-input-nombre { min-width: 200px; }
.filter-input-fecha  { min-width: 160px; }
.filter-input-cliente { min-width: 180px; }

.is-hidden { display: none; }


/* =====================================================================
   19. IMAGE LIGHTBOX + UPLOAD THUMBNAILS (informe page)
   ===================================================================== */
.imagen-thumb {
    max-height: 80px;
    max-width: 120px;
    border: 1px solid var(--ingecop-border);
    border-radius: 6px;
    padding: 2px;
    background: var(--ingecop-surface);
    object-fit: cover;
    cursor: zoom-in;
}

.img-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(17, 22, 58, 0.85); /* --ingecop-navy-dark @ 85% */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 2rem;
}
.img-lightbox.is-hidden {
    display: none;
}
.img-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-card);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.img-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    color: var(--ingecop-white);
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}


/* =====================================================================
   20. COVER PLACEHOLDER (detail + listing pages)
   ---------------------------------------------------------------------
   Shown when a project/inspection has no portada image.
   Previously duplicated inline in proyecto_detalle, inspeccion_detalle
   and registro_proyectos.
   ===================================================================== */
.cover-placeholder {
    background-color: #f0f2f5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 260px;
    border-radius: 0.375rem 0 0 0.375rem;
}
.cover-placeholder svg {
    width: 64px;
    height: 64px;
    stroke: #adb5bd;
}


/* =====================================================================
   21. COVER IMAGE (project/inspection portada in detail headers)
   ---------------------------------------------------------------------
   Replaces the repeated inline
   style="object-fit:cover;width:100%;height:100%;max-height:260px".
   ===================================================================== */
.cover-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: 260px;
}


/* =====================================================================
   22. COVER THUMBNAIL (current-portada preview in project form)
   ===================================================================== */
.cover-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--ingecop-border);
}


/* =====================================================================
   23. MAP CANVAS (generic Leaflet container — 380px tall)
   ---------------------------------------------------------------------
   Used by #proyecto-map and the partials.tramos_map component.
   ===================================================================== */
.map-canvas,
.tramos-map-canvas {
    height: 380px;
    width: 100%;
}


/* =====================================================================
   24. FILTER TAGS DROPDOWN (listing toolbars)
   ---------------------------------------------------------------------
   Previously duplicated inline in inspecciones + registro.
   ===================================================================== */
.filtro-tags-menu {
    max-height: 16rem;
    overflow-y: auto;
    min-width: 12rem;
}
.filtro-tags-menu .dropdown-item {
    border-radius: 0.3rem;
    cursor: pointer;
}
.filtro-tags-menu .dropdown-item:hover {
    background-color: #eef2ff;
}


/* =====================================================================
   25. CLICKABLE CARDS (listing grids)
   ---------------------------------------------------------------------
   The whole card behaves as a link; the inner menu control keeps the
   default cursor. Previously duplicated inline in inspecciones,
   proyecto_detalle and registro_proyectos.
   ===================================================================== */
.inspeccion-card-wrapper .inspeccion-card,
.inspeccion-card-wrapper .inspeccion-card-title,
.proyecto-card-wrapper .inspeccion-card,
.proyecto-card-wrapper .inspeccion-card-title {
    cursor: pointer;
}
.inspeccion-card-menu,
.inspeccion-card-menu * {
    cursor: default;
}


/* =====================================================================
   26. CARD STATUS PILL (top-left of a card cover)
   ---------------------------------------------------------------------
   Base = neutral pill, shared by inspección + proyecto cards.
   .is-active = solid blue "En curso" variant used on the BD registro.
   ===================================================================== */
.inspeccion-card-status,
.proyecto-card-status {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    background-color: var(--ingecop-bg);
    border-radius: 0.3rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.inspeccion-card-status.is-active {
    color: #fff;
    background-color: #2563eb;
}


/* =====================================================================
   27. CARD ADDRESS LINE (listing cards)
   ===================================================================== */
.inspeccion-card-direccion {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--ingecop-muted);
}
.inspeccion-card-direccion svg {
    flex: 0 0 auto;
}


/* =====================================================================
   28. TRAMO CARDS + PACP CALIFICATION BADGES (inspección detail)
   ---------------------------------------------------------------------
   Informational tramo cards (no hover/click) and the colour-coded
   PACP calification chip. Calification colours are intentionally the
   standard severity palette (green→red), kept as literals.
   ===================================================================== */
.tramo-card {
    border: 1px solid var(--ingecop-border);
}
.tramo-card .tramo-stat + .tramo-stat {
    margin-top: 0.5rem;
}
.tramo-card .tramo-stat .label {
    font-size: 0.72rem;
    color: #6c757d;
}
.tramo-card .tramo-stat .value {
    font-weight: 600;
}
.tramo-num-badge {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ingecop-red);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.tramo-cal {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.cal-OPTIMO      { background: #198754; }
.cal-FUNCIONAL   { background: #0d6efd; }
.cal-REGULAR     { background: #ffc107; color: #212529; }
.cal-DETERIORADO { background: #fd7e14; }
.cal-CRITICO     { background: #dc3545; }
.cal-default     { background: #6c757d; }


/* =====================================================================
   29. TRAMOS LOCATION MAP (Leaflet markers + popups)
   ---------------------------------------------------------------------
   Custom marker pin and popup styles for the partials.tramos_map
   component. Map font stays Arial to match the printed report look.
   ===================================================================== */
.tramo-marker {
    background: #f59e0b;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    font-family: Arial, sans-serif;
    position: relative;
}
.tramo-marker.multi {
    width: 34px !important;
    height: 34px !important;
    font-size: 10px;
}
.tramo-marker .count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    color: #f59e0b;
    border: 1.5px solid #f59e0b;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    line-height: 1;
}
.leaflet-popup-content {
    font-family: Arial, sans-serif;
    font-size: 11px;
    margin: 8px 12px;
}
.leaflet-popup-content .tramo-entry {
    padding: 3px 0;
    border-bottom: 1px solid #eee;
}
.leaflet-popup-content .tramo-entry:last-child {
    border-bottom: none;
}


/* =====================================================================
   30. REGISTRO DE PROYECTOS — layout + Chile map
   ---------------------------------------------------------------------
   Two-column listing: project cards (left) + a fixed-width Chile map
   (right). The map sticks BELOW the sticky page sub-header
   (.ingecop-header, z-index 1020) and fills the remaining viewport
   height. Styles were previously inlined in
   registro_proyectos.blade.php and are now centralized here.
   ===================================================================== */

/* Variables propias del listado. El ancho de página (--page-width) y
   .page-shell ahora viven en la sección 2.1, porque los usa toda la app.
   --subheader-h y --proy-map-h los recalcula el JS de la vista en runtime. */
:root {
    --proy-map-width:   300px;
    --subheader-h:      74px;
    --proy-map-h:       60vh;
    --proy-ghost-h:     240px;
}

/* Bloque de dos columnas — el ancho ya lo da .page-shell */
.proyectos-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.proyectos-content-col {
    flex: 1 1 auto;
    min-width: 0;                 /* evita que el grid interno desborde */
}
.proyectos-map-col {
    flex: 0 0 var(--proy-map-width);
    width: var(--proy-map-width);
}

/* Mapa fijo: alto = 3 filas de tarjetas, sin exceder el viewport disponible.
   Sticky, siempre por DEBAJO del sub-header (.ingecop-header, z-1020). */
.proyectos-map-sticky {
    position: sticky;
    top: calc(var(--subheader-h) + 0.75rem);
    height: min(var(--proy-map-h), calc(100vh - var(--subheader-h) - 1.5rem));
    min-height: 320px;
}
.proyectos-map-frame {
    position: relative;
    height: 100%;
}
#proyectosMap {
    height: 100%;
    width: 100%;
    border-radius: var(--radius-card);
    overflow: hidden;
    z-index: 0;                   /* se mantiene bajo el sub-header (z-1020) */
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    background: #eaf1f7;
}
.proyectos-map-empty {
    position: absolute;
    left: 50%;
    top: 0.75rem;
    transform: translateX(-50%);
    z-index: 500;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--ingecop-border);
    border-radius: 0.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--ingecop-muted);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}
.proyectos-map-empty.is-hidden { display: none; }

/* ---------------------------------------------------------------------
   Hover rojo INGECOP en las tarjetas + vínculo bidireccional con el mapa.
   `:hover`      → cursor sobre la tarjeta.
   `.is-hovered` → lo activa el JS cuando se pasa sobre el punto del mapa.
   --------------------------------------------------------------------- */
.proyecto-card-wrapper .inspeccion-card {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.proyecto-card-wrapper:hover .inspeccion-card,
.proyecto-card-wrapper.is-hovered .inspeccion-card {
    transform: translateY(-2px);
    border-color: var(--ingecop-red);
    box-shadow: 0 6px 16px rgba(225, 37, 27, 0.25) !important;
}
.proyecto-card-wrapper.is-hovered .inspeccion-card {
    outline: 2px solid var(--ingecop-red);
    outline-offset: -1px;
}

/* Punto del mapa resaltado (Leaflet circleMarker) */
.leaflet-interactive.proy-point-hl {
    filter: drop-shadow(0 0 4px rgba(225, 37, 27, 0.6));
}

/* ---------------------------------------------------------------------
   Paginación del listado (8 tarjetas por página, grilla 4×2).
   --------------------------------------------------------------------- */
.proyectos-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1.25rem;
}
.proyectos-pagination.is-hidden { display: none; }
.proy-page-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ingecop-border);
    background: var(--ingecop-surface);
    color: var(--ingecop-navy);
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.proy-page-btn:hover:not(:disabled):not(.active) {
    background: var(--ingecop-navy-soft);
    border-color: var(--ingecop-navy);
}
.proy-page-btn.active {
    background: var(--ingecop-navy);
    border-color: var(--ingecop-navy);
    color: #fff;
    cursor: default;
}
.proy-page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.proy-page-arrow { font-size: 1.05rem; }
.proy-page-gap {
    padding: 0 0.15rem;
    color: var(--ingecop-muted);
    user-select: none;
}

/* ---------------------------------------------------------------------
   Paginación: el paginador de Laravel emite <a> y <span>, no <button>.
   El estilo ya existente sigue aplicando; sólo faltan estos dos casos.
   --------------------------------------------------------------------- */

/* Los <a> traen subrayado y color de enlace por defecto. */
a.proy-page-btn,
a.proy-page-btn:hover,
a.proy-page-btn:focus {
    text-decoration: none;
    color: var(--ingecop-navy);
}

/* Flechas inertes en la primera / última página. `:disabled` no sirve:
   sólo aplica a controles de formulario, y aquí son <span>. */
.proy-page-btn.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Foco visible al navegar con teclado. */
.proy-page-btn:focus-visible {
    outline: 2px solid var(--ingecop-red);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Estado de carga de la grilla mientras vuela la petición AJAX.
   Atenúa sin cambiar el layout: la altura se mantiene, así que el mapa
   sticky de al lado no da un salto.
   --------------------------------------------------------------------- */
.proy-grid-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

@media (prefers-reduced-motion: reduce) {
    .proy-grid-loading { transition: none; }
}

/* ---------------------------------------------------------------------
   Paginador superior (dentro de la barra de herramientas).
   .proyectos-pagination trae margin-top pensado para cuando va DEBAJO de la
   grilla; en la barra hay que quitarlo y alinearlo a la derecha.
   --------------------------------------------------------------------- */
#proyPaginationTop .proyectos-pagination {
    margin-top: 0;
    justify-content: flex-end;
}

/* En pantallas donde la barra se apila, que no quede pegado al título. */
@media (max-width: 991.98px) {
    #proyPaginationTop .proyectos-pagination {
        justify-content: flex-start;
        margin-top: 0.25rem;
    }
}

/* ---------------------------------------------------------------------
   Campo de búsqueda por nombre: ancho acotado.
   Antes ocupaba `col-md` (crecía hasta llenar la fila) y no dejaba sitio
   para el botón "Filtrar". Ahora tiene un ancho cómodo pero contenido.
   --------------------------------------------------------------------- */
.proy-filtro-nombre {
    width: 220px;
    max-width: 100%;
}

/* En móvil la fila se apila: el campo ocupa todo el ancho disponible. */
@media (max-width: 767.98px) {
    .proy-filtro-nombre { width: 100%; }
}

/* Botón "Filtrar": ancho completo apilado en móvil, automático en escritorio. */
@media (min-width: 768px) {
    .btn.w-md-auto { width: auto !important; }
}



/* ---------------------------------------------------------------------
   Tarjetas placeholder: rellenan la página incompleta para que la grilla
   (y el mapa) conserven siempre el mismo tamaño. Sólo un cuadro redondeado
   vacío, sin hover ni interacción.
   --------------------------------------------------------------------- */
.proyecto-card-placeholder { pointer-events: none; }
.inspeccion-card-ghost {
    height: 100%;
    min-height: var(--proy-ghost-h, 240px);
    border-radius: 8px;
    background: #f5f6f8;
    border: 1px solid var(--ingecop-border);
}

/* ---------------------------------------------------------------------
   Altura de tarjeta uniforme (listado de proyectos).
   Se reservan siempre el título (2 líneas, recorte con "…") y las filas
   de cliente / inspector / fecha, aunque su valor sea nulo.
   --------------------------------------------------------------------- */
.proyecto-card-wrapper .inspeccion-card-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: calc(1.35em * 2);          /* reserva siempre 2 líneas */
}
.proyecto-card-wrapper .inspeccion-card-cliente,
.proyecto-card-wrapper .inspeccion-card-inspector,
.proyecto-card-wrapper .inspeccion-card-fecha {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 1.3em;                     /* reserva la fila aunque esté vacía */
    max-width: 100%;
}
.proyecto-card-wrapper .inspeccion-card-inspector {
    font-size: 11px;
    color: var(--ingecop-muted);
    margin-top: 1px;
}
/* El texto ocupa el resto de la fila y se recorta con "…" si es largo. */
.proyecto-card-wrapper .inspeccion-card-cliente > span,
.proyecto-card-wrapper .inspeccion-card-inspector > span,
.proyecto-card-wrapper .inspeccion-card-fecha > span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Apilado en pantallas medianas/pequeñas */
@media (max-width: 991.98px) {
    .proyectos-layout { flex-direction: column; }
    .proyectos-map-col {
        flex-basis: auto;
        width: 100%;
    }
    .proyectos-map-sticky {
        position: static;
        height: 60vh;
        min-height: 340px;
    }
}


/* =====================================================================
   31. LOGIN — pantalla de acceso
   ---------------------------------------------------------------------
   Antes era un <style> de ~260 líneas dentro de login.blade.php.

   TODO va scopeado bajo `body.login-page`, y no por prolijidad:

   1. El login trae su propia regla `body` (fondo blanco + fuente del
      sistema) que choca con la de la sección 2 (--ingecop-bg + Montserrat).
   2. `.invalid-feedback` es una clase DE BOOTSTRAP. El login la redefine
      con `display: block`. Sin scope, ese override se filtraría a todos
      los formularios de la app.
   3. `.form-field`, `.form-actions`, `.cert-logos`, `.dev-footer` son
      nombres genéricos con alto riesgo de colisión.

   Los tokens van con prefijo `--login-` por la misma razón: la paleta del
   login (verde #22b573, azul #2f7df0) NO es la de la marca (navy + rojo).
   Se conservan tal cual estaban para no cambiar nada visualmente.

   La imagen del hero usa ruta RELATIVA (`../img/login/…`) porque este
   archivo es CSS estático y no puede resolver `{{ asset() }}` de Blade.
   Funciona porque app.css vive en public/assets/css/ y la imagen en
   public/assets/img/login/.
   ===================================================================== */
body.login-page {
    --login-bg:            #ffffff;
    --login-text:          #1a1a2e;
    --login-text-muted:    #6b7280;
    --login-border:        #d1d5db;
    --login-input-bg:      #ffffff;
    --login-primary:       #22b573;          /* botón de envío (verde) */
    --login-primary-hover: #1ca164;
    --login-link:          #2f7df0;
    --login-danger:        #dc2626;
    --login-hero-overlay:  rgba(15, 23, 42, 0.25);

    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--login-bg);
    color: var(--login-text);
}

/* `* { box-sizing: border-box }` se eliminó: Bootstrap ya lo aplica a
   *, ::before y ::after en su reboot.
   `html, body { height: 100% }` también: .login-shell usa min-height:100vh,
   que no depende de la altura del padre. */

/* ---------------------------------------------------------------------
   Estructura: dos columnas a pantalla completa
   --------------------------------------------------------------------- */
.login-shell {
    display: grid;
    grid-template-columns: minmax(320px, 38%) 1fr;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------
   Izquierda: hero de marca
   --------------------------------------------------------------------- */
.login-hero {
    position: relative;
    padding: 2rem 2rem 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image:
        linear-gradient(var(--login-hero-overlay), var(--login-hero-overlay)),
        url('../img/login/robotizada_vertical_01.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.login-hero__logo {
    display: block;
    width: 220px;
    height: auto;
    max-width: 80%;
}

.login-hero__footer {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
}

.login-hero__footer strong {
    font-weight: 600;
}

/* ---------------------------------------------------------------------
   Derecha: panel del formulario
   --------------------------------------------------------------------- */
.login-form-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login-form {
    width: 100%;
    max-width: 420px;
}

.login-form__title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    color: var(--login-text);
    letter-spacing: -0.01em;
}

.login-form__subtitle {
    color: var(--login-text-muted);
    font-size: 0.95rem;
    margin: 0 0 1.75rem 0;
}

/* Selector de idioma (esquina superior derecha) */
.lang-switch {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
}

.lang-switch select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff
        url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e")
        no-repeat right 0.55rem center / 14px 14px;
    border: 1px solid var(--login-border);
    border-radius: 8px;
    padding: 0.4rem 1.85rem 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: var(--login-text);
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.lang-switch select:focus {
    border-color: var(--login-primary);
}

/* ---------------------------------------------------------------------
   Campos del formulario
   --------------------------------------------------------------------- */
.login-page .form-field {
    margin-bottom: 1.1rem;
}

.login-page .form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--login-text);
    margin-bottom: 0.45rem;
}

.login-page .form-field input {
    width: 100%;
    padding: 0.78rem 0.95rem;
    font-size: 0.95rem;
    background: var(--login-input-bg);
    border: 1px solid var(--login-border);
    border-radius: 8px;
    color: var(--login-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.login-page .form-field input::placeholder {
    color: #adb5bd;
}

.login-page .form-field input:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(34, 181, 115, 0.12);
}

.login-page .form-field input.is-invalid {
    border-color: var(--login-danger);
}

/* Scoped a propósito: `.invalid-feedback` es de Bootstrap. */
.login-page .invalid-feedback {
    display: block;
    color: var(--login-danger);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 2.6rem;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--login-text-muted);
    padding: 0.25rem;
    display: flex;
    align-items: center;
}

.password-toggle:hover {
    color: var(--login-text);
}

/* Alerta de error del login (no usa <x-flash />: otra maqueta y otra paleta) */
.login-page .alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 0.7rem 0.95rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------
   Acciones
   --------------------------------------------------------------------- */
.login-page .form-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-submit {
    background: var(--login-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.78rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

.btn-submit:hover {
    background: var(--login-primary-hover);
}

.btn-submit:active {
    transform: scale(0.99);
}

.forgot-link {
    color: var(--login-link);
    text-decoration: none;
    font-size: 0.9rem;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Certificaciones NASSCO + PACP
   --------------------------------------------------------------------- */
.cert-divider {
    border: none;
    border-top: 1px solid var(--login-border);
    margin: 1.75rem 0 1.25rem 0;
}

.cert-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.cert-logos img {
    height: 44px;
    width: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------------
   Pie "Desarrollado por"
   --------------------------------------------------------------------- */
.login-page .dev-footer {
    position: absolute;
    bottom: 1.25rem;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--login-text-muted);
}

.login-page .dev-footer a {
    color: var(--login-link);
    text-decoration: none;
    margin-left: 0.25rem;
}

.login-page .dev-footer a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
    .login-shell {
        grid-template-columns: 1fr;
    }
    .login-hero {
        min-height: 220px;
        padding: 1.5rem;
    }
    .login-hero__logo {
        width: 170px;
    }
    .login-form-panel {
        padding: 3rem 1.5rem 4.5rem;
    }
    .lang-switch {
        top: 0.75rem;
        right: 1rem;
    }
    .login-page .dev-footer {
        position: static;
        margin-top: 2rem;
    }
}