/* =========================================================================
   HOSTAL EL PILLKAY — Variables globales de marca (design tokens)
   -------------------------------------------------------------------------
   UNICA fuente de verdad de los colores de marca. Para cambiar la paleta
   (u otra empresa), basta con editar el bloque --marca-*.

   Paleta tomada del logo y de la recepcion del hostal:
     naranja  #EF801F  circulo del logo
     carbon   #1A1C15  letras "Hostal El Pillkay"
     amarillo #F8CC19  lema "Nuestra satisfaccion es engreirlo dia a dia"
     durazno  #FFE5B8  paredes de la recepcion
     madera   #461602  mostrador

   Los tokens --ir-azul* se conservan como ALIAS porque los usan ~200
   archivos heredados; ya no son azules, apuntan a la marca.

   Uso:  color: var(--marca-primario);
         background: rgba(var(--marca-primario-rgb), .12);

   Se carga en la cabecera comun (partHeadBase.php / TemplateHeader.php),
   por lo que las custom properties quedan disponibles en todo el documento.
   ========================================================================= */

:root {
    /* ── Marca Pillkay ─────────────────────────────────────────────────── */
    --marca-naranja-logo:      #EF801F;
    --marca-primario:          #E0701A;      /* botones, cabeceras, activos   */
    --marca-primario-oscuro:   #B4530C;      /* gradientes / hover            */
    --marca-primario-claro:    #FEF1E4;      /* fondos suaves                 */
    --marca-primario-borde:    #F8D2AE;
    --marca-primario-rgb:      224, 112, 26;

    --marca-carbon:            #1A1C15;      /* menu lateral, textos fuertes  */
    --marca-carbon-2:          #26281F;
    --marca-carbon-3:          #12130E;
    --marca-acento:            #F8CC19;      /* dorado/amarillo del lema      */
    --marca-acento-suave:      #FBE27A;
    --marca-durazno:           #FFE5B8;
    --marca-madera:            #461602;

    /* ── Alias heredados (no renombrar: los consumen los modulos) ───────── */
    --ir-azul:        var(--marca-primario);
    --ir-azul-oscuro: var(--marca-primario-oscuro);
    --ir-azul-claro:  var(--marca-primario-claro);
    --ir-azul-borde:  var(--marca-primario-borde);
    --ir-azul-rgb:    var(--marca-primario-rgb);

    /* Escala de apoyo para los listados (cabecera de tabla, filtros, hover). */
    --ir-azul-tinte:        #FFF8F1; /* fondo mas suave (hover de fila)      */
    --ir-azul-suave:        #FDE3CB; /* fin del degradado del thead          */
    --ir-azul-borde-fuerte: #F3B988; /* borde inferior del thead             */
    --ir-azul-hover:        #FBDDBF; /* thead al pasar el mouse (inicio)     */
    --ir-azul-hover-fin:    #F7CDA5; /* thead al pasar el mouse (fin)        */
    --ir-azul-texto:        #5A2C06; /* texto oscuro sobre fondos de marca   */
}

/* =========================================================================
   Overrides de marca para Bootstrap (una sola paleta en todo el sistema)
   -------------------------------------------------------------------------
   El theme heredado (bootstrap-reset.css) pintaba "primary" en verde y
   "info" en celeste, y Bootstrap 3/5 traen azul por defecto en enlaces,
   pills, list-group, dropdowns, etc. Aqui todo ese "chrome" pasa a la marca.
   Este archivo carga DESPUES de bootstrap.min.css y bootstrap-reset.css, por
   lo que a igual especificidad gana. Los colores semanticos (success,
   warning, danger) NO se tocan.
   ========================================================================= */

/* ── Bootstrap 3: primary = naranja de marca ─────────────────────────────── */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover {
    background-color: var(--marca-primario, #E0701A);
    border: 1px solid var(--marca-primario, #E0701A);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--marca-primario-oscuro, #B4530C);
    border: 1px solid var(--marca-primario-oscuro, #B4530C);
}
.text-primary          { color: var(--marca-primario, #E0701A); }
a.text-primary:hover,
a.text-primary:focus   { color: var(--marca-primario-oscuro, #B4530C); }
.bg-primary            { background-color: var(--marca-primario, #E0701A); color: #fff; }
.label-primary,
.badge-primary         { background-color: var(--marca-primario, #E0701A); }
.panel.panel-primary,
.panel-primary         { border-color: var(--marca-primario, #E0701A); }
.panel.panel-primary .panel-heading,
.panel-primary > .panel-heading {
    background-color: var(--marca-primario, #E0701A);
    border-color: var(--marca-primario, #E0701A);
    color: #fff;
}
.progress-bar,
.progress-bar-primary  { background-color: var(--marca-primario, #E0701A); }
.btn-custom.btn-primary { color: var(--marca-primario, #E0701A) !important; }
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge { color: var(--marca-primario, #E0701A); }

/* ── Bootstrap 3: info (celeste) = tono oscuro de la marca ──────────────── */
.btn-info,
.btn-info:focus,
.btn-info.focus,
.btn-info.disabled,
.btn-info[disabled],
.btn-info.disabled:hover,
.btn-info[disabled]:hover {
    background-color: var(--marca-primario-oscuro, #B4530C);
    border: 1px solid var(--marca-primario-oscuro, #B4530C);
}
.btn-info:hover,
.btn-info:active,
.btn-info.active,
.btn-info:active:hover,
.btn-info:active:focus,
.btn-info.active:hover,
.btn-info.active:focus,
.open > .dropdown-toggle.btn-info {
    background-color: #9A4609;
    border: 1px solid #9A4609;
}
.text-info             { color: var(--marca-primario-oscuro, #B4530C); }
.bg-info               { background-color: var(--marca-primario-borde, #F8D2AE); }
.label-info,
.badge-info            { background-color: var(--marca-primario-oscuro, #B4530C); }
.panel.panel-info .panel-heading,
.panel-info > .panel-heading {
    background-color: var(--marca-primario-oscuro, #B4530C);
    border-color: var(--marca-primario-oscuro, #B4530C);
    color: #fff;
}
.progress-bar-info     { background-color: var(--marca-primario-oscuro, #B4530C); }
.btn-custom.btn-info   { color: var(--marca-primario-oscuro, #B4530C) !important; }
.alert-info {
    background-color: var(--marca-primario-claro, #FEF1E4);
    border-color: var(--marca-primario-borde, #F8D2AE);
    color: var(--ir-azul-texto, #5A2C06);
}
.alert-info .alert-link { color: var(--marca-primario-oscuro, #B4530C); }

/* ── Bootstrap 3: componentes con azul #337ab7 por defecto ───────────────── */
.btn-link,
.btn-link:hover,
.btn-link:focus        { color: var(--marca-primario-oscuro, #B4530C); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: var(--marca-primario, #E0701A);
    border-color: var(--marca-primario, #E0701A);
    color: #fff;
}
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover { color: var(--marca-primario-oscuro, #B4530C); }
.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-dropdown-open.select2-drop-above .select2-choices {
    border-color: var(--marca-primario, #E0701A);
    border-top-color: transparent;
}

/* ── Bootstrap 5 aislado (.hbs5, modulo Hotel) ───────────────────────────────
   bootstrap.scoped.css se inyecta por JS DESPUES de este archivo, asi que se
   sube la especificidad con `html` para ganarle sin tocar la libreria. */
html .hbs5,
html .hbs5 [data-bs-theme=light] {
    --bs-primary: #E0701A;
    --bs-primary-rgb: 224, 112, 26;
    --bs-primary-text-emphasis: #5A2C06;
    --bs-primary-bg-subtle: #FEF1E4;
    --bs-primary-border-subtle: #F8D2AE;
    --bs-link-color: #B4530C;
    --bs-link-color-rgb: 180, 83, 12;
    --bs-link-hover-color: #8A3F09;
    --bs-link-hover-color-rgb: 138, 63, 9;
    --bs-focus-ring-color: rgba(224, 112, 26, .25);
}
html .hbs5 .btn-primary {
    --bs-btn-bg: #E0701A;
    --bs-btn-border-color: #E0701A;
    --bs-btn-hover-bg: #B4530C;
    --bs-btn-hover-border-color: #B4530C;
    --bs-btn-focus-shadow-rgb: 224, 112, 26;
    --bs-btn-active-bg: #B4530C;
    --bs-btn-active-border-color: #9A4609;
    --bs-btn-disabled-bg: #E0701A;
    --bs-btn-disabled-border-color: #E0701A;
}
html .hbs5 .btn-outline-primary {
    --bs-btn-color: #E0701A;
    --bs-btn-border-color: #E0701A;
    --bs-btn-hover-bg: #E0701A;
    --bs-btn-hover-border-color: #E0701A;
    --bs-btn-focus-shadow-rgb: 224, 112, 26;
    --bs-btn-active-bg: #E0701A;
    --bs-btn-active-border-color: #E0701A;
    --bs-btn-disabled-color: #E0701A;
    --bs-btn-disabled-border-color: #E0701A;
}
html .hbs5 .table-primary   { --bs-table-bg: #FEF1E4; }
html .hbs5 .dropdown-menu   { --bs-dropdown-link-active-bg: #E0701A; }
html .hbs5 .nav-pills       { --bs-nav-pills-link-active-bg: #E0701A; }
html .hbs5 .pagination {
    --bs-pagination-active-bg: #E0701A;
    --bs-pagination-active-border-color: #E0701A;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(224, 112, 26, .25);
}
html .hbs5 .progress,
html .hbs5 .progress-stacked { --bs-progress-bar-bg: #E0701A; }
html .hbs5 .list-group {
    --bs-list-group-active-bg: #E0701A;
    --bs-list-group-active-border-color: #E0701A;
}
html .hbs5 .accordion       { --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(224, 112, 26, .25); }
html .hbs5 .btn-close       { --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(224, 112, 26, .25); }
html .hbs5 .form-control:focus,
html .hbs5 .form-select:focus,
html .hbs5 .form-check-input:focus {
    border-color: #F3B988;
    box-shadow: 0 0 0 .25rem rgba(224, 112, 26, .25);
}
html .hbs5 .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(224, 112, 26, .25); }
html .hbs5 .form-check-input:checked,
html .hbs5 .form-check-input[type=checkbox]:indeterminate {
    background-color: #E0701A;
    border-color: #E0701A;
}
html .hbs5 .form-range::-webkit-slider-thumb { background-color: #E0701A; }
html .hbs5 .form-range::-moz-range-thumb     { background-color: #E0701A; }

/* ── SweetAlert2: iconos neutros (info / pregunta) y foco del boton ──────────
   success / error / warning conservan sus colores semanticos. El color del
   boton confirmar ya lo fija vistas/com/util/Dialogos.js. */
.swal2-icon.swal2-info,
.swal2-icon.swal2-question {
    border-color: var(--marca-primario-borde, #F8D2AE);
    color: var(--marca-primario, #E0701A);
}
.swal2-styled.swal2-confirm:focus-visible {
    box-shadow: 0 0 0 3px rgba(var(--marca-primario-rgb, 224, 112, 26), .45);
}