/*
 * Tema GAIN · iTech (documento de diseño v9).
 * Se carga DESPUÉS de vendor/bootstrap/bootstrap.min.css (Bootstrap 5.3.8) y lo
 * adapta sobrescribiendo sus variables CSS (--bs-*). No se modifica bootstrap.min.css.
 *
 * 1. Paleta propia
 * 2. Variables de Bootstrap
 * 3. Ajustes de componentes de Bootstrap
 * 4. Componentes del panel
 */

/* ------------------------------------------------------------------
 * 1. Paleta propia
 * ------------------------------------------------------------------ */
:root {
    --gain-navy: #1b2e4b;          /* títulos, botón primario, cabecera */
    --gain-navy-dark: #122036;
    --gain-orange: #c7781d;        /* etiquetas de sección (CONSULTAS, INCIDENCIAS...) */
    --gain-ink: #222;              /* texto */
    --gain-muted: #8a8f98;         /* texto secundario */
    --gain-line: #e2e3e6;          /* bordes y separadores */
    --gain-input-line: #d5d7db;
    --gain-surface: #f4f4f2;       /* fondo de indicadores */
    --gain-bg: #fafaf9;            /* fondo de página */

    /* Estados: texto + fondo suave */
    --gain-red: #a3261e;    --gain-red-soft: #fbeaea;
    --gain-amber: #95570e;  --gain-amber-soft: #fcf0dd;
    --gain-green: #3d6b2a;  --gain-green-soft: #e7f1e0;
    --gain-blue-soft: #e9eef6;
    --gain-grey-soft: #eeeeec;

    --gain-focus-ring: 0 0 0 .2rem rgba(27, 46, 75, .15);
}

/* ------------------------------------------------------------------
 * 2. Variables de Bootstrap
 * ------------------------------------------------------------------ */
:root,
[data-bs-theme=light] {
    --bs-primary: #1b2e4b;       --bs-primary-rgb: 27, 46, 75;
    --bs-secondary: #6c717a;     --bs-secondary-rgb: 108, 113, 122;
    --bs-success: #3d6b2a;       --bs-success-rgb: 61, 107, 42;
    --bs-danger: #a3261e;        --bs-danger-rgb: 163, 38, 30;
    --bs-warning: #d99a2b;       --bs-warning-rgb: 217, 154, 43;
    --bs-info: #3f6ea8;          --bs-info-rgb: 63, 110, 168;
    --bs-light: #f4f4f2;         --bs-light-rgb: 244, 244, 242;
    --bs-dark: #122036;          --bs-dark-rgb: 18, 32, 54;

    /* Alertas y fondos "subtle" */
    --bs-primary-text-emphasis: #1b2e4b;  --bs-primary-bg-subtle: #e9eef6;  --bs-primary-border-subtle: #c9d4e6;
    --bs-success-text-emphasis: #3d6b2a;  --bs-success-bg-subtle: #e7f1e0;  --bs-success-border-subtle: #cfe2c3;
    --bs-danger-text-emphasis: #a3261e;   --bs-danger-bg-subtle: #fbeaea;   --bs-danger-border-subtle: #f1c9c6;
    --bs-warning-text-emphasis: #95570e;  --bs-warning-bg-subtle: #fcf0dd;  --bs-warning-border-subtle: #f3dbb3;
    --bs-info-text-emphasis: #1b2e4b;     --bs-info-bg-subtle: #e9eef6;     --bs-info-border-subtle: #c9d4e6;

    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: .9375rem;
    --bs-body-color: #222;               --bs-body-color-rgb: 34, 34, 34;
    --bs-body-bg: #fafaf9;               --bs-body-bg-rgb: 250, 250, 249;
    --bs-emphasis-color: #122036;
    --bs-secondary-color: #8a8f98;       /* .text-body-secondary */
    --bs-heading-color: #1b2e4b;

    --bs-link-color: #1b2e4b;            --bs-link-color-rgb: 27, 46, 75;
    --bs-link-hover-color: #122036;      --bs-link-hover-color-rgb: 18, 32, 54;

    --bs-border-color: #e2e3e6;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: .75rem;

    --bs-focus-ring-color: rgba(27, 46, 75, .15);
    --bs-focus-ring-width: .2rem;
}

/* ------------------------------------------------------------------
 * 3. Ajustes de componentes de Bootstrap
 * ------------------------------------------------------------------ */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; }
small, .small { font-size: .8125rem; }

/* Botones */
.btn {
    --bs-btn-padding-y: .4375rem;
    --bs-btn-padding-x: .875rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 400;
    --bs-btn-focus-box-shadow: var(--gain-focus-ring);
}

.btn:hover { text-decoration: none; }

.btn-sm {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .625rem;
    --bs-btn-font-size: .8125rem;
}

.btn-primary {
    --bs-btn-bg: #1b2e4b;
    --bs-btn-border-color: #1b2e4b;
    --bs-btn-hover-bg: #122036;
    --bs-btn-hover-border-color: #122036;
    --bs-btn-active-bg: #0e1a2c;
    --bs-btn-active-border-color: #0e1a2c;
    --bs-btn-disabled-bg: #1b2e4b;
    --bs-btn-disabled-border-color: #1b2e4b;
}

.btn-outline-secondary {
    --bs-btn-color: #222;
    --bs-btn-border-color: var(--gain-input-line);
    --bs-btn-hover-color: #222;
    --bs-btn-hover-bg: var(--gain-surface);
    --bs-btn-hover-border-color: var(--gain-input-line);
    --bs-btn-active-color: #1b2e4b;
    --bs-btn-active-bg: var(--gain-blue-soft);
    --bs-btn-active-border-color: var(--gain-input-line);
    --bs-btn-disabled-color: var(--gain-muted);
    --bs-btn-disabled-border-color: var(--gain-line);
}

.btn-link { --bs-btn-color: #1b2e4b; --bs-btn-hover-color: #122036; }

/* Formularios */
.form-control,
.form-select { border-color: var(--gain-input-line); }

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

.form-check-input:checked {
    background-color: var(--gain-navy);
    border-color: var(--gain-navy);
}

.form-check-input:focus {
    border-color: var(--gain-navy);
    box-shadow: var(--gain-focus-ring);
}

/* Tarjetas */
.card {
    --bs-card-border-color: var(--gain-line);
    --bs-card-border-radius: .75rem;
    --bs-card-inner-border-radius: calc(.75rem - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
}

/* Etiquetas */
.badge {
    --bs-badge-font-weight: 400;
    --bs-badge-font-size: .75rem;
    --bs-badge-padding-y: .3em;
    --bs-badge-padding-x: .65em;
    --bs-badge-border-radius: .375rem;
}

/* Menús desplegables */
.dropdown-menu {
    --bs-dropdown-border-color: var(--gain-line);
    --bs-dropdown-link-active-bg: var(--gain-blue-soft);
    --bs-dropdown-link-active-color: var(--gain-navy);
}

/* Barra de navegación */
.navbar {
    --bs-navbar-color: rgba(34, 34, 34, .7);
    --bs-navbar-hover-color: var(--gain-navy);
    --bs-navbar-active-color: var(--gain-navy);
}

.nav-link:hover { text-decoration: none; }

/* Paginación, tablas, modales */
.pagination {
    --bs-pagination-color: var(--gain-navy);
    --bs-pagination-active-bg: var(--gain-navy);
    --bs-pagination-active-border-color: var(--gain-navy);
    --bs-pagination-focus-box-shadow: var(--gain-focus-ring);
}

.table { --bs-table-color: var(--gain-ink); }
.table > :not(caption) > * > * { padding: .625rem .75rem; }
.table th { font-weight: 500; }

.modal { --bs-modal-border-radius: .75rem; }

/* ------------------------------------------------------------------
 * 4. Componentes del panel
 * ------------------------------------------------------------------ */

/* --- Estructura --- */
.app-header {
    background: #fff;
    border-bottom: 3px solid var(--gain-navy);
}

.app-main { padding-block: 2rem 4rem; }

.brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-decoration: none !important;
}

.brand__name {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--gain-navy);
    letter-spacing: .02em;
}

.brand__name span { color: var(--gain-orange); margin-left: .35rem; }

.brand__tag {
    font-size: .625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gain-muted);
}

.app-nav .nav-link {
    padding: .5rem .875rem;
    border-radius: var(--bs-border-radius);
}

.app-nav .nav-link.active {
    color: var(--gain-navy);
    background: var(--gain-blue-soft);
    font-weight: 500;
}

.avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--gain-navy);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Tipografía del diseño --- */

/* Etiqueta de sección: CONSULTAS, INCIDENCIAS, 1 · POLÍGONO... */
.eyebrow,
.form-label-eyebrow {
    font-size: .75rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gain-orange);
    font-weight: 400;
    margin: 0;
}

.eyebrow .text-muted,
.eyebrow small { color: var(--gain-muted) !important; letter-spacing: .12em; }

/* La misma etiqueta, usada como <label> de un campo */
.form-label-eyebrow {
    display: block;
    margin-bottom: .375rem;
}

.page-title {
    font-weight: 400;
    font-size: 1.625rem;
    color: var(--gain-navy);
}

/* --- Tarjeta de panel: <section class="card panel"> --- */
.panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    /* Separador interior, sin tocar los bordes de la tarjeta (como en el diseño) */
    padding: 1.25rem 0 1rem;
    margin: 0 1.25rem;
    border-bottom: 1px solid var(--gain-line);
}

.panel__title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--gain-navy); }
.panel__subtitle { font-size: .8125rem; color: var(--gain-muted); margin: .125rem 0 0; }
.panel__body { padding: 1.25rem; }

/* Ayuda al pie de un bloque («Los listados los mantiene GAIN...») */
.panel-note {
    font-size: .75rem;
    color: var(--gain-muted);
    border-top: 1px solid var(--gain-line);
    padding-top: .875rem;
    margin: 0;
}

/* --- Indicadores --- */
.kpi {
    background: var(--gain-surface);
    border-radius: var(--bs-border-radius);
    padding: .875rem 1rem;
    height: 100%;
}

.kpi__label { font-size: .8125rem; color: var(--gain-muted); }
.kpi__value { font-size: 1.5rem; color: var(--gain-navy); line-height: 1.3; }
.kpi--alert .kpi__value { color: var(--gain-red); }

/* --- Filas de listado (listados, incidencias, registro) --- */
.row-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.row-list > li,
.row-list > .row-list__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 0;
    border-top: 1px solid var(--gain-line);
}

.row-list__title { color: var(--gain-ink); margin: 0; }
.row-list__meta { font-size: .8125rem; color: var(--gain-muted); margin: .125rem 0 0; }
.row-list__side { font-size: .8125rem; color: var(--gain-muted); white-space: nowrap; }

.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--gain-muted);
    font-size: .875rem;
    border-top: 1px solid var(--gain-line);
}

/* --- Etiquetas de estado (fondo suave) --- */
.badge-abierta { background: var(--gain-red-soft); color: var(--gain-red); }
.badge-en_curso,
.badge-sin-listado { background: var(--gain-amber-soft); color: var(--gain-amber); }
.badge-resuelta,
.badge-enviado,
.badge-wa { background: var(--gain-green-soft); color: var(--gain-green); }
.badge-ultima-hora,
.badge-tipo { background: var(--gain-blue-soft); color: var(--gain-navy); }
.badge-sms { background: var(--gain-grey-soft); color: #555; }

/* --- Botón de filtro (TIPO ▾, ESTADO ▾...): <button class="btn btn-filter"> --- */
.btn-filter {
    --bs-btn-color: var(--gain-ink);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--gain-input-line);
    --bs-btn-hover-color: var(--gain-ink);
    --bs-btn-hover-bg: var(--gain-surface);
    --bs-btn-hover-border-color: var(--gain-input-line);
    --bs-btn-active-color: var(--gain-navy);
    --bs-btn-active-bg: var(--gain-blue-soft);
    --bs-btn-active-border-color: var(--gain-input-line);
    --bs-btn-disabled-color: var(--gain-muted);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: var(--gain-line);
    --bs-btn-font-size: .8125rem;
}

.btn-filter--caps {
    --bs-btn-font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Selector de canal (pantalla 2) --- */
.channel-option .btn-check + label {
    display: block;
    text-align: left;
    width: 100%;
    height: 100%;
    padding: .75rem .875rem;
    border: 1px solid var(--gain-line);
    border-radius: var(--bs-border-radius);
    background: #fff;
    cursor: pointer;
    color: var(--gain-navy);
}

.channel-option .btn-check + label small {
    display: block;
    color: var(--gain-muted);
    font-size: .75rem;
}

.channel-option .btn-check:checked + label {
    border: 2px solid var(--gain-navy);
    background: var(--gain-blue-soft);
    padding: calc(.75rem - 1px) calc(.875rem - 1px);
}

.channel-option .btn-check:focus-visible + label { box-shadow: var(--gain-focus-ring); }

/* --- Zona de subida (banner 1200×400, adjuntos) --- */
.dropzone {
    border: 1px dashed #cfd1d5;
    border-radius: var(--bs-border-radius);
    padding: 1.25rem;
    text-align: center;
    color: var(--gain-muted);
    font-size: .875rem;
    background: #fff;
    cursor: pointer;
}

.dropzone:hover,
.dropzone.is-dragover { border-color: var(--gain-navy); background: var(--gain-blue-soft); }

.dropzone--banner {
    aspect-ratio: 3 / 1;
    max-height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- Selector de polígonos de cabecera --- */
.poligono-selector {
    /* Se adapta al nombre más largo, sin salirse de la pantalla */
    width: max-content;
    min-width: 18rem;
    max-width: min(32rem, calc(100vw - 2rem));
}

.poligono-selector__list {
    max-height: 50vh;
    overflow-y: auto;
}

/* Bloques normales, no flex: un flex en columna con max-height encoge
   los elementos y los nombres largos se montan unos encima de otros */
.poligono-selector__list .form-check {
    margin-bottom: .375rem;
    line-height: 1.35;
}

.poligono-selector__list .form-check-label {
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* --- Login --- */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%;
    max-width: 24rem;
    border-top: 3px solid var(--gain-navy);
}

/* Aviso visible cuando el login no ha comprobado la contraseña (IP de debug) */
.bypass-banner {
    background: var(--gain-amber-soft);
    color: var(--gain-amber);
    font-size: .8125rem;
    text-align: center;
    padding: .375rem 1rem;
    border-bottom: 1px solid rgba(149, 87, 14, .2);
}