/* Black & White Jewellery - Estilos principales */

/* Variables */
:root{--bwj-primary:#1a1a1a;--bwj-secondary:#6c757d;--bwj-accent:#c9a050;--bwj-light:#ffffff;--bwj-dark:#1a1a1a;--bs-primary:#a39a85;--bs-primary-rgb:163,154,133;--bs-link-color:#a39a85;--bs-link-color-rgb:163,154,133;--bs-link-hover-color:#8f866f;--bs-link-hover-color-rgb:143,134,111;--bs-light:#ffffff;--bs-light-rgb:255,255,255;--bs-box-shadow-sm:0 0 0.75rem rgba(0,0,0,0.15);--bs-code-color:var(--bs-primary);--bs-warning:#e0b878;--bs-warning-rgb:224,184,120}

/* General */
body{font-family:'PT Sans',sans-serif;font-size:clamp(16px,15.423px + 0.180vw,18px);color:var(--bwj-primary);background-color:#eceae7;letter-spacing:0.2px;display:flex;flex-direction:column;min-height:100vh}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Cormorant',serif}
/* Admin panel: plain PT Sans headings, no serif branding font */
.admin-layout h1,.admin-layout h2,.admin-layout h3,.admin-layout h4,.admin-layout h5,.admin-layout h6,.admin-layout .h1,.admin-layout .h2,.admin-layout .h3,.admin-layout .h4,.admin-layout .h5,.admin-layout .h6{font-family:'PT Sans',sans-serif}
/* Admin panel: same warm neutral card headers as the intranet's manual cards, instead of Bootstrap's plain white/gray */
.admin-layout .card-header{background-color:#f8f6f2;border-bottom:1px solid #e5e0d8}
/* Admin panel tables: smaller text so dense lists (usuarios, garantías, incidencias...) breathe */
.admin-layout .table{font-size:14px}
/* Heading sizes unified with the corporate site's --content-hN-font-size tokens */
h1,.h1{font-size:clamp(36px,29.255px + 1.171vw,46px)}
h2,.h2{font-size:clamp(32px,26.604px + 0.937vw,40px)}
h3,.h3{font-size:clamp(28px,23.953px + 0.703vw,34px)}
h4,.h4{font-size:clamp(22px,19.302px + 0.468vw,26px)}
h5,.h5{font-size:clamp(18px,15.302px + 0.468vw,22px)}
h6,.h6{font-size:clamp(18px,16.651px + 0.234vw,20px)}
/* Sticky footer - main content expands to push footer down */
main{flex:1}

/* Navbar */
.site-header-nav{background:linear-gradient(to right,#dbd6ca,#f3ede5)}
.navbar-brand{font-size:1.1rem;letter-spacing:1px}
.nav-link{font-size:16px;font-weight:300;text-transform:uppercase;letter-spacing:0;padding:0.5rem 1rem !important}
.nav-link:hover,.nav-link.active{color:var(--bwj-primary) !important;font-weight:500}
.navbar-dark .nav-link:not(.dropdown-toggle):hover,.navbar-dark .nav-link.active:not(.dropdown-toggle){color:#fff !important;border-bottom:2px solid var(--bwj-accent)}
.navbar-dark .nav-link.dropdown-toggle:hover{color:#fff !important}

/* Hero */
.hero-section{min-height:70vh;display:flex;align-items:center}
.min-vh-50{min-height:50vh}

/* Buttons */
.btn:not(.rounded-circle):not(.btn-close){border-radius:0;text-decoration:none;text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:400;padding:0.6rem 1.4rem;font-size:19px;font-family:'PT Sans',sans-serif;letter-spacing:0.2px}
.btn:not(.rounded-circle):not(.btn-close):hover,.btn:not(.rounded-circle):not(.btn-close):focus,.btn:not(.rounded-circle):not(.btn-close):active{text-decoration:underline}
.navbar .btn:not(.rounded-circle):not(.btn-close),.navbar .form-control,.navbar .form-select{font-size:14px;padding:6px 12px}
.user-dropdown-menu .dropdown-item{font-size:14px}
.user-dropdown-menu .dropdown-item:active,.user-dropdown-menu .dropdown-item.active,.user-dropdown-menu .dropdown-item:focus{background-color:#a39a85;color:#1a1a1a}
/* Wider container across the intranet, matching the corporate site's --container-max-width */
.intranet-layout .container{max-width:1430px}
.intranet-layout .btn:not(.rounded-circle):not(.btn-close),.intranet-layout .form-control,.intranet-layout .form-select,.admin-layout .btn:not(.rounded-circle):not(.btn-close),.admin-layout .form-control,.admin-layout .form-select{font-size:14px;padding:6px 12px}
.btn-dark{background-color:var(--bwj-primary);border-color:var(--bwj-primary)}
.btn-dark:hover{background-color:#333;border-color:#333}
.btn-outline-dark:hover{background-color:var(--bwj-primary);color:white}
/* .btn-primary / .btn-outline-primary hardcode Bootstrap's blue internally, so --bs-primary alone doesn't reach them; override directly. */
.btn-primary{--bs-btn-color:#1a1a1a;--bs-btn-bg:#a39a85;--bs-btn-border-color:#a39a85;--bs-btn-hover-color:#1a1a1a;--bs-btn-hover-bg:#8f866f;--bs-btn-hover-border-color:#8f866f;--bs-btn-active-color:#1a1a1a;--bs-btn-active-bg:#8f866f;--bs-btn-active-border-color:#8f866f;--bs-btn-disabled-color:#1a1a1a;--bs-btn-disabled-bg:#a39a85;--bs-btn-disabled-border-color:#a39a85}
.btn-outline-primary{--bs-btn-color:#a39a85;--bs-btn-border-color:#a39a85;--bs-btn-hover-color:#1a1a1a;--bs-btn-hover-bg:#a39a85;--bs-btn-hover-border-color:#a39a85;--bs-btn-active-color:#1a1a1a;--bs-btn-active-bg:#a39a85;--bs-btn-active-border-color:#a39a85;--bs-btn-disabled-color:#a39a85;--bs-btn-disabled-border-color:#a39a85}
/* .btn-warning hardcodes Bootstrap's vivid yellow internally too; override with the pastel gold */
.btn-warning{--bs-btn-color:#1a1a1a;--bs-btn-bg:#e0b878;--bs-btn-border-color:#e0b878;--bs-btn-hover-color:#1a1a1a;--bs-btn-hover-bg:#cba15c;--bs-btn-hover-border-color:#cba15c;--bs-btn-active-color:#1a1a1a;--bs-btn-active-bg:#cba15c;--bs-btn-active-border-color:#cba15c;--bs-btn-disabled-color:#1a1a1a;--bs-btn-disabled-bg:#e0b878;--bs-btn-disabled-border-color:#e0b878}
/* .btn-info hardcodes Bootstrap's light blue internally too; replace with a neutral warm gray */
.btn-info{--bs-btn-color:#1a1a1a;--bs-btn-bg:#a9a196;--bs-btn-border-color:#a9a196;--bs-btn-hover-color:#1a1a1a;--bs-btn-hover-bg:#928a7e;--bs-btn-hover-border-color:#928a7e;--bs-btn-active-color:#1a1a1a;--bs-btn-active-bg:#928a7e;--bs-btn-active-border-color:#928a7e;--bs-btn-disabled-color:#1a1a1a;--bs-btn-disabled-bg:#a9a196;--bs-btn-disabled-border-color:#a9a196}
.btn-outline-info{--bs-btn-color:#7a7266;--bs-btn-border-color:#a9a196;--bs-btn-hover-color:#1a1a1a;--bs-btn-hover-bg:#a9a196;--bs-btn-hover-border-color:#a9a196;--bs-btn-active-color:#1a1a1a;--bs-btn-active-bg:#a9a196;--bs-btn-active-border-color:#a9a196;--bs-btn-disabled-color:#a9a196;--bs-btn-disabled-border-color:#a9a196}

/* Cards */

/* User manual pages (tutorial.html / tutorial_minorista.html) */
.manual-header{background-color:#f3ede5;border-left:3px solid #a39a85;padding:1rem 1.25rem}
.manual-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px}
.manual-icon-lg{width:52px;height:52px;background-color:#a39a85;color:#fff}
#manualContent .card{transition:border-color 0.2s ease;border-top:3px solid transparent !important}
#manualContent .card:hover{border-top-color:#a39a85 !important}
#manualSearchInput{box-shadow:0 2px 8px rgba(0,0,0,0.06)}
#manualSearchInput:focus{border-color:#a39a85;box-shadow:0 0 0 0.2rem rgba(163,154,133,0.25)}

/* Sidebar menus (intranet / minorista) */
.list-group-item-action{font-size:14px}
.list-group-item-action.active,.list-group-item-action:hover{background-color:#8f866f;border-color:#8f866f;color:#fff}

/* Floating Buttons */
.floating-buttons{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:1000}
.floating-buttons .btn{width:50px;height:50px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px rgba(0,0,0,0.2)}

/* Footer */
footer.bg-dark .text-muted{color:#adb5bd !important}
footer.bg-dark a.text-muted:hover{color:#fff !important}
/* Keep the footer's own text sizes, unaffected by the global heading/body size unification */
footer.bg-dark{font-size:1rem;letter-spacing:normal}
footer.bg-dark h5{font-size:1.25rem}
footer.bg-dark h6{font-size:1rem}

/* Flash Messages (floating, no layout shift) */
.flash-toast-container{position:fixed;top:100px;right:20px;z-index:1080;width:100%;max-width:380px}
.flash-toast-container .alert{margin-bottom:0.75rem;transition:opacity 0.4s ease,transform 0.4s ease}
.flash-toast-container .alert.flash-hide{opacity:0;transform:translateX(30px)}
@media (max-width:576px){.flash-toast-container{top:auto;bottom:20px;right:10px;left:10px;max-width:none}}

/* Forms */
.form-label,.form-check-label{font-size:16px}
/* Floating show/hide icon inside a password input (see .position-relative wrapper + .pe-5 input) */
.password-toggle-btn,.password-toggle-btn:hover,.password-toggle-btn:focus,.password-toggle-btn:active{text-decoration:none !important;color:#6c757d !important;background:none !important}
/* !important: Bootstrap's .input-group-sm/.input-group-lg > .form-control rules are more specific than a plain .form-control selector and reintroduce radius. */
.form-control,.form-select{border-radius:0 !important}
.form-control:focus{border-color:var(--bwj-primary);box-shadow:0 0 0 0.2rem rgba(26,26,26,0.15)}

/* Modals: flat brand look (sharp corners, subtle shadow) instead of Bootstrap's rounded default */
.modal-content{border:none;border-radius:0;box-shadow:0 10px 40px rgba(0,0,0,0.2)}
.modal-header,.modal-footer{padding:1rem 1.5rem}
.modal-body{padding:1.5rem}
.modal-title{font-family:'PT Sans',sans-serif;font-weight:700;font-size:1.05rem}
.modal-header .btn-close{opacity:0.6}
/* Detail lists inside "view details" modals (dl/dt/dd) */
.modal-body dl dt{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:#6c757d}
.modal-body dl dd{margin-bottom:0.75rem}

/* Alerts */
.alert{border-radius:0;border:none;font-size:14px;padding:10px 3rem 10px 16px}
.alert .btn-close{background:transparent var(--bs-btn-close-bg) center / 10px auto no-repeat;padding:14px}

/* Tables */
.table th{font-weight:600;text-transform:uppercase;font-size:0.8rem;letter-spacing:0.5px}
.datatable-table>tbody>tr>td,.datatable-table>tbody>tr>th,.datatable-table>tfoot>tr>td,.datatable-table>tfoot>tr>th,.datatable-table>thead>tr>td,.datatable-table>thead>tr>th,.intranet-layout table th,.intranet-layout table td{vertical-align:middle !important}

/* Page Header */
.page-header{background:linear-gradient(135deg,var(--bwj-primary) 0%,#333 100%);color:white;padding:3rem 0}
.page-header h1{font-weight:300;letter-spacing:2px}

/* Breadcrumb */
.breadcrumb{background:transparent;padding:0;margin:0}
.breadcrumb-item a{color:rgba(255,255,255,0.7);text-decoration:none}
.breadcrumb-item.active{color:white}

/* Loading */
.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid #f3f3f3;border-top:2px solid var(--bwj-primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Responsive */
@media (max-width:768px){.hero-section{min-height:auto;padding:3rem 0}.floating-buttons{bottom:10px;right:10px}.floating-buttons .btn{width:45px;height:45px}}

/* Intranet / minorista: page header (title + action button) wraps instead of squeezing on narrow screens */
.intranet-layout .d-flex.justify-content-between.align-items-center.mb-4{flex-wrap:wrap;row-gap:0.75rem}
/* Navbar: CTA/auth/language row wraps instead of overflowing on narrow phones */
.site-header-nav .navbar-collapse>.d-flex{flex-wrap:wrap;row-gap:0.5rem}
@media (max-width:576px){
    .site-header-nav .navbar-collapse>.d-flex{justify-content:flex-start}
    /* Large card padding (consulta/registro forms) eats too much width on small phones */
    .intranet-layout .card-body.p-5{padding:1.75rem 1.25rem !important}
}

/* Sidebar column: breathing room from the content above it once it wraps below on tablet/mobile */
@media (max-width:991.98px){
    .intranet-layout .col-lg-4.col-xl-3{margin-top:1.5rem}
}

/* Data tables (garantías / incidencias): stacked cards on mobile instead of horizontal scroll */
@media (max-width:767.98px){
    .bwj-datatable thead{display:none}
    .bwj-datatable,.bwj-datatable tbody,.bwj-datatable tr,.bwj-datatable td{display:block;width:100%}
    .bwj-datatable tr{margin-bottom:1rem;border:1px solid #e5e0d8;border-radius:4px;padding:.25rem .9rem}
    .bwj-datatable td{display:flex;align-items:center;justify-content:space-between;gap:.75rem;text-align:right;border:none;border-bottom:1px solid #f0eee9;padding:.6rem 0}
    .bwj-datatable td:last-child{border-bottom:none}
    .bwj-datatable td::before{content:attr(data-label);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#6c757d;text-align:left;flex-shrink:0}
}

/* Garantía Status Badges */
.badge-validada{background-color:#198754}
.badge-pendiente{background-color:#fdf0c4;color:#8a6d1d}
.badge-rechazada{background-color:#dc3545}
.badge-desactivada{background-color:#6c757d}
.badge-expirada{background-color:#adb5bd}
/* Plain bg-warning badges (outside .bwj-datatable, e.g. sidebar pending counters, status badges on non-datatable pages) get the same soft pastel treatment */
.badge.bg-warning{background-color:#fdf0c4 !important;color:#8a6d1d !important}

/* Admin Dashboard Cards */
.stat-card{border-radius:10px;border:none;box-shadow:0 2px 10px rgba(0,0,0,0.05)}
.stat-card .stat-number{font-size:2.5rem;font-weight:700}

/* Drag & Drop Zone */
.dropzone{border:2px dashed #dee2e6;border-radius:10px;padding:3rem;text-align:center;transition:all 0.3s ease;cursor:pointer}
.dropzone:hover,.dropzone.dragover{border-color:var(--bwj-primary);background-color:#ffffff}

/* Cookie Banner: unified with the corporate site's --cookie-policy-container / --btn-cookie */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#c7bead;color:#582e42;padding:1rem 0;z-index:9999;box-shadow:0 -4px 20px rgba(0,0,0,0.2)}
.cookie-banner p{font-size:0.9rem}
.cookie-banner-link{color:#582e42;text-decoration:underline}
.btn-cookie-accept{background-color:#582e42;border-color:#582e42;color:#fff}
.btn-cookie-accept:hover{background-color:#462535;border-color:#462535;color:#fff}
.btn-cookie-reject{background-color:transparent;border-color:#582e42;color:#582e42}
.btn-cookie-reject:hover{background-color:#582e42;border-color:#582e42;color:#fff}
@media (max-width:768px){.cookie-banner{padding:1.5rem 0}.cookie-banner .btn{width:100%;margin-bottom:0.5rem}}