/* ==========================================================================
   Coordinad@s · hoja de estilos
   Sobrescribe y extiende Bootstrap 5.3 con el design system Tenerife volcánica.
   Toca sólo tokens (variables Bootstrap + custom props) y unas pocas clases
   utilitarias; no redefine componentes enteros.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Fuentes auto-hospedadas · públicas estáticas en /public/assets/fonts
   Cargadas con font-display:swap para no bloquear render.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/public-sans-400-nbr4pIL.woff2") format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/public-sans-500-B3ZIS_u.woff2") format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/public-sans-600-unosef8.woff2") format('woff2');
}
@font-face {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/public-sans-700-Tpv1cSN.woff2") format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-400-9Agqu_k.woff2") format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-500-jP9fjUR.woff2") format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-mono-600-PRHED-n.woff2") format('woff2');
}


/* --------------------------------------------------------------------------
   Tokens de diseño
   -------------------------------------------------------------------------- */

:root {
    /* ---- Paleta primaria: azul atlántico Tenerife ------------------------ */
    --color-primary:          #2f6690;
    --color-primary-border:   #285a80;
    --color-primary-hover:    #244e6f;
    --color-primary-dark:     #1c3d5a;
    --color-primary-lt:       #3a7ca5;
    --color-primary-bg:       #e8f0f6;

    /* ---- Acentos Tenerife volcánica ------------------------------------- */
    --color-terracota:        #9a3b3b;
    --color-terracota-hover:  #7e2e2e;
    --color-ocre:             #d8973c;
    --color-ocre-hover:       #b97c27;
    --color-verde-lima:       #bfd200;
    --color-verde-lima-dark:  #8ea200;
    --color-cream-bg:         #f3ebe1;
    --color-surface:          #faf6f1;  /* fondo de página, más suave que crema */

    /* ---- Semánticos ----------------------------------------------------- */
    --color-danger:           #9a3b3b;
    --color-danger-border:    #7e2e2e;
    --color-danger-hover:     #7e2e2e;
    --color-danger-dark:      #642424;

    --color-success:          #8ea200;
    --color-success-border:   #768800;
    --color-success-hover:    #768800;
    --color-success-dark:     #5d6d00;

    --color-warning:          #d8973c;
    --color-warning-border:   #b97c27;
    --color-warning-hover:    #b97c27;
    --color-warning-dark:     #9c6520;

    --color-info:             #3a7ca5;
    --color-info-border:      #2f6690;
    --color-info-hover:       #2f6690;
    --color-info-dark:        #1c3d5a;

    --color-info-panel-bg:    #e8f0f6;
    --color-info-panel-border:#bcd4e2;
    --color-info-panel-text:  #1c3d5a;

    /* ---- Fondo de paneles (card, navbar, sidebar) ----------------------- */
    --color-panel-bg:         #e6edf5;
    --color-panel-hover:      #dae3ed;
    --color-panel-active:     #c5d3e3;

    /* ---- Neutros (paleta Bootstrap 5 por defecto) ----------------------- */
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;

    /* ---- Tipografía ----------------------------------------------------- */
    --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas,
                 'Liberation Mono', 'Courier New', monospace;

    --fs-label:   0.7rem;
    --ls-label:   0.07em;
    --radius:     0.375rem;

    /* ---- Anchos de página para contenido estrecho ----------------------- */
    --ancho-pagina-sm: 480px;
    --ancho-pagina-md: 640px;
    --ancho-pagina-lg: 800px;
    --ancho-pagina-xl: 1200px;

    /* ---- Focus ring ----------------------------------------------------- */
    --focus-ring-primary: 0 0 0 0.2rem rgba(47, 102, 144, 0.25);

    /* ---- Override de tokens Bootstrap ----------------------------------- */
    --bs-body-font-family: var(--font-sans);
    --bs-font-monospace:   var(--font-mono);
    --bs-body-color:       var(--gray-900);
    --bs-body-bg:          var(--gray-100);
    --bs-primary:          var(--color-primary);
    --bs-primary-rgb:      47, 102, 144;
    --bs-link-color:       var(--color-primary);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-border-radius:    var(--radius);
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
    font-family: var(--font-sans), sans-serif;
    background-color: var(--color-surface);
    color: var(--gray-900);
}

code,
pre,
kbd,
samp {
    font-family: var(--font-mono), monospace;
}


/* --------------------------------------------------------------------------
   Navbar · fondo blanco + borde inferior azul, no invertida
   -------------------------------------------------------------------------- */

.navbar {
    background-color: var(--color-panel-bg) !important;
    border-bottom: 2px solid var(--color-primary);
    padding-top: .55rem;
    padding-bottom: .55rem;
}

.navbar .navbar-brand {
    color: var(--color-primary-dark);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.navbar .navbar-brand img {
    height: 34px;
}

.navbar .nav-link {
    color: var(--gray-700);
    font-weight: 500;
    padding-left: .85rem;
    padding-right: .85rem;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--color-primary);
}

.navbar .nav-link.active,
.navbar .show > .nav-link {
    color: var(--color-primary);
}

.navbar-toggler {
    border-color: var(--gray-300);
}


/* --------------------------------------------------------------------------
   Tipografía de títulos · reducidos respecto a Bootstrap default
   -------------------------------------------------------------------------- */

h1, .h1 { font-size: 2rem;     font-weight: 400; }
h2, .h2 { font-size: 1.75rem;  font-weight: 400; }
h3, .h3 { font-size: 1.5rem;   font-weight: 400; }
h4, .h4 { font-size: 1.25rem;  font-weight: 500; }
h5, .h5 { font-size: 1.125rem; font-weight: 500; }


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

.form-label {
    display: block;
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--gray-600);
    margin-bottom: 0.3rem;
}

.form-label.required::after,
legend.required::after {
    content: " *";
    color: var(--color-danger);
    font-weight: 700;
}

.form-check-label {
    font-size: 0.875rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-900);
}

.form-control,
.form-select {
    font-size: 0.9rem;
    color: var(--gray-900);
    background-color: #fff;
    border-color: var(--gray-400);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--gray-300);
    color: var(--gray-700);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-primary);
}

.form-text {
    font-size: 0.75rem;
}

.ql-toolbar.ql-snow,
.ql-container.ql-snow,
.ql-editor {
    background-color: #fff;
}


/* --------------------------------------------------------------------------
   Botones · override de tokens Bootstrap por variante
   -------------------------------------------------------------------------- */

.btn-primary {
    --bs-btn-bg:                 var(--color-primary);
    --bs-btn-border-color:       var(--color-primary-border);
    --bs-btn-hover-bg:           var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-dark);
    --bs-btn-active-bg:          var(--color-primary-hover);
    --bs-btn-disabled-bg:        var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary-border);
}

.btn-danger {
    --bs-btn-bg:                 var(--color-danger);
    --bs-btn-border-color:       var(--color-danger-border);
    --bs-btn-hover-bg:           var(--color-danger-hover);
    --bs-btn-hover-border-color: var(--color-danger-dark);
    --bs-btn-active-bg:          var(--color-danger-hover);
}

.btn-success {
    --bs-btn-bg:                 var(--color-success);
    --bs-btn-border-color:       var(--color-success-border);
    --bs-btn-hover-bg:           var(--color-success-hover);
    --bs-btn-hover-border-color: var(--color-success-dark);
    --bs-btn-active-bg:          var(--color-success-hover);
}

.btn-warning {
    --bs-btn-bg:                 var(--color-warning);
    --bs-btn-border-color:       var(--color-warning-border);
    --bs-btn-hover-bg:           var(--color-warning-hover);
    --bs-btn-hover-border-color: var(--color-warning-dark);
    --bs-btn-active-bg:          var(--color-warning-hover);
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-color:       #fff;
}

.btn-info {
    --bs-btn-bg:                 var(--color-info);
    --bs-btn-border-color:       var(--color-info-border);
    --bs-btn-hover-bg:           var(--color-info-hover);
    --bs-btn-hover-border-color: var(--color-info-dark);
    --bs-btn-active-bg:          var(--color-info-hover);
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-color:       #fff;
}

.btn-secondary {
    --bs-btn-bg:                 #fff;
    --bs-btn-border-color:       var(--gray-400);
    --bs-btn-color:              var(--gray-800);
    --bs-btn-hover-bg:           var(--gray-100);
    --bs-btn-hover-border-color: var(--gray-500);
    --bs-btn-hover-color:        var(--gray-900);
    --bs-btn-active-bg:          var(--gray-200);
    --bs-btn-active-color:       var(--gray-900);
}

/* Outline: forzamos color primario correcto (Bootstrap usa --bs-primary) */
.btn-outline-primary {
    --bs-btn-color:                 var(--color-primary);
    --bs-btn-border-color:          var(--color-primary);
    --bs-btn-hover-bg:              var(--color-primary);
    --bs-btn-hover-border-color:    var(--color-primary);
    --bs-btn-active-bg:             var(--color-primary);
    --bs-btn-active-border-color:   var(--color-primary);
}

.btn-action {
    padding: 0.1rem 0.4rem;
    font-size: 0.8rem;
}


/* --------------------------------------------------------------------------
   Cards · acento superior azul, borde fino
   -------------------------------------------------------------------------- */

.card {
    --bs-card-bg: var(--color-panel-bg);
    border-color: var(--gray-300);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius);
    box-shadow: none;
}

/* Cards anidadas (p.ej. .tab-pane > .card) no repiten el acento */
.card .card {
    border-top: 1px solid var(--gray-300);
}

/* --------------------------------------------------------------------------
   Nav tabs · pestañas distinguibles del fondo, activa fusionada con el card
   -------------------------------------------------------------------------- */

.nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--color-panel-bg);
    --bs-nav-tabs-link-active-color: var(--bs-body-color);
    --bs-nav-tabs-border-color: var(--gray-300);
    --bs-nav-tabs-link-hover-border-color: var(--gray-300);
}

.nav-tabs .nav-link {
    background-color: var(--color-panel-hover);
    border-color: var(--gray-300);
    color: var(--bs-body-color);
}

.nav-tabs .nav-link:hover:not(.active) {
    background-color: var(--color-panel-active);
}

/* Filas de ficha (dl.row): separador sutil entre pares dt/dd.
   El dd nativo trae margin-bottom; lo quitamos para que dt y dd queden
   a la misma altura y la línea inferior coincida en ambos. */
.card-body dl.row > dt,
.card-body dl.row > dd {
    margin-bottom: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-400);
}
.card-body dl.row > dt:first-of-type,
.card-body dl.row > dd:first-of-type {
    padding-top: 0;
}
.card-body dl.row > dt:last-of-type,
.card-body dl.row > dd:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

/* Limita y centra el ancho de páginas con contenido estrecho */
.ancho-pagina {
    max-width: var(--ancho-pagina-md);
    margin-inline: auto;
}
.ancho-pagina--sm { max-width: var(--ancho-pagina-sm); }
.ancho-pagina--lg { max-width: var(--ancho-pagina-lg); }
.ancho-pagina--xl { max-width: var(--ancho-pagina-xl); }


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

.table {
    font-size: 0.875rem;
    margin-bottom: 0;
}

.table thead th,
.table > thead > tr > th {
    background-color: var(--color-primary-bg);
    color: var(--color-primary-dark);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-primary-border);
    white-space: nowrap;
    padding: 0.65rem 0.9rem;
}

.table tbody td {
    padding: 0.7rem 0.9rem;
    vertical-align: middle;
    border-bottom-color: var(--gray-200);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--color-cream-bg);
    --bs-table-accent-bg: var(--color-cream-bg);
}


/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 50rem;
    line-height: 1.1;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-status.alert,
.badge-status--alerta {
    background: #f3dcdc;
    color: var(--color-danger-dark);
}

.badge-status.act,
.badge-status--activo,
.badge-status--alta,
.badge-status--aceptada {
    background: var(--color-success);
    color: #fff;
}

.badge-status.inact,
.badge-status--inactivo,
.badge-status--baja,
.badge-status--rechazada {
    background: var(--color-danger);
    color: #fff;
}

.badge-status--pendiente {
    background: var(--color-primary-lt);
    color: #fff;
}

.badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: inherit;
    color: var(--gray-900);
    padding: 0;
    white-space: nowrap;
    margin-right: 0.5rem;
}

.badge-tag + .badge-tag::before {
    content: "·";
    color: var(--gray-400);
    margin-right: 0.5rem;
    margin-left: -0.25rem;
}

.badge-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-800);
    background: var(--gray-200);
    padding: 0.2rem 0.55rem;
    border-radius: 50rem;
    line-height: 1.2;
    white-space: nowrap;
    margin-right: 0.3rem;
}

/* --------------------------------------------------------------------------
   Alertas · reafinadas con paleta Tenerife
   -------------------------------------------------------------------------- */

.alert-success {
    --bs-alert-bg:           #f0f4c9;
    --bs-alert-color:        var(--color-success-dark);
    --bs-alert-border-color: #d9e28a;
}

.alert-danger {
    --bs-alert-bg:           #f3dcdc;
    --bs-alert-color:        var(--color-danger-dark);
    --bs-alert-border-color: #e3b9b9;
}

.alert-warning {
    --bs-alert-bg:           #faecd6;
    --bs-alert-color:        var(--color-warning-dark);
    --bs-alert-border-color: #f0cf9b;
}

.alert-info {
    --bs-alert-bg:           var(--color-info-panel-bg);
    --bs-alert-color:        var(--color-info-panel-text);
    --bs-alert-border-color: var(--color-info-panel-border);
}


/* --------------------------------------------------------------------------
   Paginación
   -------------------------------------------------------------------------- */

.pagination {
    --bs-pagination-color:                  var(--color-primary);
    --bs-pagination-hover-color:            var(--color-primary-hover);
    --bs-pagination-active-bg:              var(--color-primary);
    --bs-pagination-active-border-color:    var(--color-primary);
    --bs-pagination-focus-box-shadow:       var(--focus-ring-primary);
    margin-bottom: 0;
}


/* --------------------------------------------------------------------------
   Pills · tabs de secciones usuario (edición)
   -------------------------------------------------------------------------- */

.nav-pills {
    --bs-nav-pills-link-active-bg:    var(--color-primary);
    --bs-nav-pills-link-active-color: #fff;
}


/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
    font-size: 0.85rem;
    color: var(--gray-600);
}


/* --------------------------------------------------------------------------
   Sidebar de secciones de usuario (usuario.ver / usuario.editar)
   -------------------------------------------------------------------------- */

.usuario-sidebar {
    background: var(--color-panel-bg);
    border: 1px solid var(--gray-300);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius);
    padding: 0.75rem 0;
}

.usuario-sidebar .sidebar-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gray-600);
    padding: 0 1rem 0.6rem;
}

.usuario-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 1rem;
    color: var(--gray-700);
    border-radius: 0;
    border-left: 3px solid transparent;
    font-size: 0.875rem;
    line-height: 1.3;
}

.usuario-sidebar .nav-link:hover {
    background-color: var(--color-panel-hover);
    color: var(--gray-900);
    border-left-color: var(--gray-300);
}

.usuario-sidebar .nav-link.active {
    background-color: var(--color-panel-active);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
}

.usuario-sidebar .nav-link i {
    font-size: 1rem;
    flex-shrink: 0;
}


/* --------------------------------------------------------------------------
   Filas destacadas de tabla (alerta / inactivo)
   -------------------------------------------------------------------------- */

.table > tbody > tr.alerta > * {
    background-color: #f8e6de;
    --bs-table-accent-bg: #f8e6de;
}

.table > tbody > tr.inactivo {
    color: var(--gray-500);
    font-style: italic;
}

.table > tbody > tr.inactivo .fw-semibold {
    color: var(--gray-600);
}

.tooltip-izquierda .tooltip-inner {
    text-align: left;
}

a {
    text-decoration: none;
}

main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.navbar-brand) {
    font-weight: 600;
}

.form-check-grid {
    column-count: 3;
    column-gap: 1.5rem;
}

.form-check-grid .form-check {
    break-inside: avoid;
}

@media (max-width: 768px) {
    .form-check-grid {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .form-check-grid {
        column-count: 1;
    }
}

.tipo-detalle__item {
    margin-bottom: 0.5rem;
}

.tipo-detalle__texto {
    margin: 0.25rem 0 0.5rem 1.5rem;
}

.mapa-lienzo {
    height: 70vh;
    background: #f2efe9;
}

.mapa-marcador {
    color: #dc3545;
    font-size: 1.75rem;
    line-height: 1;
    text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}