/* ==========================================================================
   Cortinadecor / Hunter Douglas — Brand Guidelines AGO25
   Capa de marca sobre Argon (Bootstrap 4). Se carga DESPUÉS de argon.css.
   Mismos tokens que /fabricantes (resources/sass/_variables.scss).
   ========================================================================== */

/* --- Tipografías (servidas en local desde /fonts) ------------------------ */
@font-face { font-family: 'Gelica'; src: url('/fonts/Gelica/gelica-regular.otf') format('opentype');        font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gelica'; src: url('/fonts/Gelica/gelica-italic.otf') format('opentype');         font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gelica'; src: url('/fonts/Gelica/gelica-lightitalic.otf') format('opentype');    font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Gelica'; src: url('/fonts/Gelica/gelica-semibolditalic.otf') format('opentype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/DM-Sans/DMSans-VariableFont_opsz,wght.ttf') format('truetype');        font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/fonts/DM-Sans/DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype'); font-weight: 100 900; font-style: italic; font-display: swap; }

/* --- Tokens ------------------------------------------------------------- */
:root {
    --dark-wood:     #4E0E0E;
    --dark-wood-700: #923333;
    --dark-wood-800: #701D1D;
    --dark-wood-950: #470606;
    --dark-wood-50:  #FFEEEE;
    --dark-wood-400: #F89494;
    --ivory:         #F7F5EF;
    --ivory-25:      #FCFBF6;
    --ivory-100:     #E3E0D8;
    --ivory-200:     #CECBC1;
    --ivory-300:     #BAB6AB;
    --ivory-500:     #918D81;
    --ivory-700:     #6E6B60;
    --ebony:         #402B2B;
    --shady-tree:    #5A684F;  /* Shady Tree 800: verde de estado (éxito) */
    --blue-sky:      #5B8596;
    --sunbeam:       #F7C662;
    --sunrise:       #F6865A;

    /* Supporting palette (guía de marca) */
    --daylight:      #E8DBC2;
    --dusk:          #DA9CC1;
    --sunset:        #DC8387;
    --morning-glow:  #F8C5A8;
    --sunrise-base:  #F6865A;
    --sunbeam-base:  #F7C662;
    --golden-hour:   #C59845;
    --fireside:      #874435;
    --dappled:       #BCC55F;
    --leafy:         #6B733A;
    --shady-tree-base: #434E3A;
    --light-spring:  #D2DAB5;
    --blue-sky-base: #97CDE3;
    --stormy:        #5A757C;
    --midnight:      #2A467B;
    --twilight:      #D9D0E8;

    --font-headline: 'Gelica', Georgia, serif;
    --font-body:     'DM Sans', 'Aptos', 'Verdana', sans-serif;
}

/* Variables raíz de Argon/Bootstrap → paleta de marca */
:root {
    --primary:   #4E0E0E;
    --secondary: #F7F5EF;
    --success:   #5A684F;
    --info:      #5B8596;
    --warning:   #F7C662;
    --danger:    #923333;
    --default:   #4E0E0E;
    --red:       #4E0E0E;
}

/* --- Base --------------------------------------------------------------- */
html, body, input, select, textarea, button, .btn, .form-control, .dropdown-menu {
    font-family: var(--font-body);
}
body {
    background-color: var(--ivory-25);
    color: var(--ebony);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-header h3, .card-header h4 {
    font-family: var(--font-headline);
    color: var(--dark-wood);
}
/* Títulos sobre fondos de color: no forzar dark wood */
.bg-gradient-primary h1, .bg-gradient-primary h2, .bg-gradient-primary h3,
.bg-gradient-primary h4, .bg-gradient-primary h5, .bg-gradient-primary h6,
.bg-gradient-default h1, .bg-gradient-default h2, .bg-gradient-default h3,
.bg-default h1, .bg-default h2, .bg-default h3,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4,
.bg-danger h1, .bg-danger h2, .bg-danger h3,
.navbar-dark .h4, .navbar-dark h1, .navbar-dark h2, .navbar-dark h3 {
    color: var(--ivory);
}

a { color: var(--dark-wood); }
a:hover { color: var(--dark-wood-700); }

/* --- Colores semánticos (Argon: bg-*, text-*, border-*) ------------------ */
.bg-primary, .bg-default { background-color: var(--dark-wood) !important; }
.bg-gradient-primary,
.bg-gradient-default {
    background: var(--dark-wood) !important;   /* sin degradado: color sólido de marca */
}
.special-gradient,
.bg-gradient-primary.special-gradient { background: var(--dark-wood) !important; }
.bg-secondary { background-color: var(--ivory) !important; }
.bg-danger    { background-color: var(--dark-wood-700) !important; }
.bg-warning   { background-color: var(--sunbeam) !important; }
/* bg-yellow solo se usa en el icono de la 4ª tarjeta (Rango seleccionado): Sunrise,
   para no repetir el Sunbeam de bg-warning (Mes actual) */
.bg-yellow    { background-color: var(--sunrise) !important; }
.bg-success   { background-color: var(--shady-tree) !important; }
.bg-info      { background-color: var(--blue-sky) !important; }
.bg-gradient-success { background: var(--shady-tree) !important; }
.bg-gradient-info    { background: var(--blue-sky) !important; }
.bg-gradient-warning { background: var(--sunrise) !important; }
.bg-gradient-danger  { background: var(--dark-wood-700) !important; }

.text-primary { color: var(--dark-wood) !important; }
.text-danger  { color: var(--dark-wood-700) !important; }
.text-success { color: var(--shady-tree) !important; }
.text-info    { color: var(--blue-sky) !important; }
.text-warning { color: var(--sunrise) !important; }
.text-muted   { color: var(--ivory-700) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--dark-wood-800) !important; }

.border-primary { border-color: var(--dark-wood) !important; }
.border-danger  { border-color: var(--dark-wood-700) !important; }

/* Argon fija el color del texto de cada badge (p.ej. rojo sobre rojo): se define aquí */
.badge-primary { background-color: var(--dark-wood); color: var(--ivory); }
.badge-success { background-color: var(--shady-tree); color: #fff; }
.badge-info    { background-color: var(--blue-sky); color: #fff; }
.badge-warning { background-color: var(--sunbeam); color: var(--ebony); }
.badge-danger  { background-color: var(--dark-wood-700); color: #fff; }

/* --- Barras de progreso (Black Friday) ----------------------------------- */
.progress { background-color: var(--ivory-200); }
.progress-bar { text-shadow: 0 0 2px rgba(0, 0, 0, .45); }
/* Escala por progreso (BlackFridayController::getClassByPercentaje):
   <50% rojo · 50-70% amarillo · 70-90% azul · >=90% verde */
.progress-bar.bg-warning { color: var(--dark-wood); text-shadow: none; }
.progress-label span {
    background-color: var(--dark-wood-50);
    color: var(--dark-wood);
}
.progress-percentage span { color: var(--ivory-700); }

/* --- Esquinas redondeadas (como la web) ---------------------------------- */
/* Botones de acción en pill (40px, igual que .btn-sunbeam-dark-wood de la web);
   tarjetas, campos y menús con radio moderado. */
:root {
    --radius-pill:    40px;
    --radius-control: 8px;
    --radius-card:    12px;
}
.card, .modal-content, .table-responsive { border-radius: var(--radius-card) !important; }
.card-header:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0 !important; }
.form-control, .custom-select, .input-group-text, .dropdown-menu,
.alert, .list-group-item { border-radius: var(--radius-control) !important; }
.input-group > .form-control:not(:last-child), .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group > .form-control:not(:first-child), .input-group > .input-group-append > .input-group-text { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.btn, .badge, .page-link, .nav-pills .nav-link, .progress, .progress-bar { border-radius: var(--radius-pill) !important; }
.icon-shape.rounded-circle { border-radius: var(--radius-control) !important; }
.avatar.rounded-circle, .avatar.rounded-circle img { border-radius: 50% !important; }

/* --- Botones ------------------------------------------------------------- */
/* Botón de acción = Sunbeam + Dark Wood (como .btn-sunbeam-dark-wood en la web);
   en hover se invierte: fondo Dark Wood, texto Sunbeam. */
.btn-primary {
    background-color: var(--sunbeam);
    border: 1px solid var(--sunbeam);
    color: var(--dark-wood);
    font-weight: 700;
    box-shadow: none;
    transition: .4s;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--dark-wood);
    border-color: var(--sunbeam);
    color: var(--sunbeam);
}
.btn-primary:active, .btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #F4B128;
    border-color: #F4B128;
    color: var(--dark-wood);
    box-shadow: none;
}
.btn-outline-primary { color: var(--dark-wood); border-color: var(--dark-wood); }
.btn-outline-primary:hover { background-color: var(--dark-wood); color: var(--ivory); }
.btn-success { background-color: var(--shady-tree); border-color: var(--shady-tree); }
.btn-success:hover { background-color: #434E3A; border-color: #434E3A; }
.btn-info { background-color: var(--blue-sky); border-color: var(--blue-sky); }
.btn-info:hover { background-color: #496E7D; border-color: #496E7D; }
.btn-danger { background-color: var(--dark-wood-700); border-color: var(--dark-wood-700); }
.btn-danger:hover { background-color: var(--dark-wood-800); border-color: var(--dark-wood-800); }
.btn-warning { background-color: var(--sunbeam); border-color: var(--sunbeam); color: var(--ebony); }
.btn-secondary, .btn-neutral { color: var(--dark-wood); }

/* --- Formularios --------------------------------------------------------- */
.form-control { border-color: var(--ivory-300); color: var(--ebony); }
.form-control:focus {
    border-color: var(--dark-wood-400);
    box-shadow: 0 0 0 .2rem rgba(78, 14, 14, .15);
}
.input-group-alternative { box-shadow: 0 1px 3px rgba(64, 43, 43, .12); }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--dark-wood);
    border-color: var(--dark-wood);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(78, 14, 14, .15);
}

/* --- Cards y tablas ------------------------------------------------------ */
.card { border-color: var(--ivory-200); box-shadow: 0 0 1px rgba(64, 43, 43, .15); }
.card-header:not([class*="bg-"]) {
    background-color: var(--ivory);
    border-bottom-color: var(--ivory-200);
    font-family: var(--font-headline);
    color: var(--dark-wood);
}
.card-stats .card-title { color: var(--ivory-700) !important; }
.thead-light th, .table thead th {
    background-color: var(--ivory);
    color: var(--ivory-700);
    border-color: var(--ivory-200);
}
.table td, .table th { border-color: var(--ivory-100); }
.table-hover tbody tr:hover { background-color: var(--ivory); }

/* Sobre el sidebar oscuro el hover invertido (Dark Wood) se perdería: tono más claro */
.navbar-vertical .btn-primary:hover,
.navbar-vertical .btn-primary:focus {
    background-color: var(--dark-wood-800);
}
/* Campos de fecha (readonly) en Ivory en lugar del gris azulado de Argon */
.form-control[readonly], .form-control:disabled,
.navbar-vertical .input-group-text {
    background-color: var(--ivory);
    color: var(--ebony);
}

/* --- Paginación y pestañas ---------------------------------------------- */
.nav-pills .nav-link { color: var(--dark-wood); background-color: var(--white, #fff); }
.page-link { color: var(--dark-wood); border-color: var(--ivory-200); }
.page-item.active .page-link { background-color: var(--dark-wood); border-color: var(--dark-wood); color: var(--ivory); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--dark-wood); color: var(--ivory); }

/* --- Dropdowns ----------------------------------------------------------- */
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--ivory); color: var(--dark-wood); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--dark-wood); color: var(--ivory); }

/* --- Sidebar (Dark Wood, logo Ivory) ------------------------------------- */
.navbar-vertical {
    background-color: var(--dark-wood) !important;
    border-right: 0;
}
.navbar-vertical .navbar-brand {
    display: block;
    width: 100%;
    padding: 1rem 0 !important;
    margin: 0;
    text-align: center;
}
.navbar-vertical .navbar-brand-img {
    display: block;
    width: 210px;
    max-width: 100%;
    max-height: none;
    height: auto;
    margin: 0 auto;
    opacity: .95;
}
.navbar-vertical .navbar-nav .nav-link,
.navbar-vertical.navbar-light .navbar-nav .nav-link {
    color: rgba(255, 255, 255, .75);
}
.navbar-vertical .navbar-nav .nav-link:hover,
.navbar-vertical.navbar-light .navbar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: var(--ivory);
}
.navbar-vertical .navbar-nav .nav-link.active,
.navbar-vertical.navbar-light .navbar-nav .nav-link.active {
    background-color: var(--dark-wood-800);
    color: var(--ivory);
}
.navbar-vertical .navbar-nav .nav-link i,
.navbar-vertical .navbar-nav .nav-link .text-primary { color: inherit !important; }
/* Marca del ítem activo (Argon usa azul #5e72e4) */
.navbar-vertical .navbar-nav .nav-link.active:before { border-left-color: var(--sunbeam) !important; }
/* «Periodo» y demás títulos: mismo tono que los enlaces (text-muted lo dejaba ilegible) */
.navbar-vertical .navbar-heading,
.navbar-vertical .text-muted { color: rgba(255, 255, 255, .75) !important; }
.navbar-vertical .navbar-collapse-header { border-bottom-color: rgba(255, 255, 255, .1); }
.navbar-vertical .navbar-toggler-icon { filter: invert(1) brightness(1.5); }
@media (max-width: 767.98px) {
    .navbar-vertical .navbar-collapse { background-color: var(--dark-wood); }
}

/* --- Cabecera / navbar superior ----------------------------------------- */
.navbar-top { background-color: transparent; }
.navbar-top .navbar-nav .nav-link { color: var(--ivory); }
.header { background-color: var(--dark-wood); }

/* Banda superior de las páginas internas en Ivory: la guía pide evitar grandes
   superficies de Dark Wood. El login (body.bg-default) y la portada del perfil
   (cabecera con imagen) no se tocan. */
body:not(.bg-default) .header.bg-gradient-primary {
    background: var(--ivory) !important;
}
body:not(.bg-default):has(.header.bg-gradient-primary) .navbar-top .navbar-nav .nav-link,
body:not(.bg-default):has(.header.bg-gradient-primary) .navbar-top .text-white,
body:not(.bg-default):has(.header.bg-gradient-primary) .navbar-top .media-body span {
    color: var(--dark-wood) !important;
}
body:not(.bg-default) .header.bg-gradient-primary .card { border-color: var(--ivory-200); }

/* --- Login --------------------------------------------------------------- */
.bg-default { background-color: var(--dark-wood) !important; }
.card.bg-secondary { background-color: var(--ivory) !important; }
.navbar-horizontal .navbar-brand img { height: auto; width: 240px; max-width: 100%; }
.separator .fill-default { fill: var(--dark-wood); }

/* --- Paleta de marca para Chart.js (disponible como variables CSS) ------- */
/* Ejemplo en JS: getComputedStyle(document.documentElement).getPropertyValue('--dark-wood') */