/* ==========================================================
   PAGE LOADER — barra superior + overlay con spinner
   ========================================================== */

.page-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 3px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}
.page-loader.active { opacity: 1; }
.page-loader-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #D35400, #F2A900, #FFC857);
    border-radius: 0 3px 3px 0;
    animation: none;
    transition: width .25s ease;
}
.page-loader.active .page-loader-bar {
    animation: loaderBar 1.8s ease-in-out infinite;
}
@keyframes loaderBar {
    0%   { width: 0%;   margin-left: 0; }
    50%  { width: 70%;  margin-left: 0; }
    100% { width: 0%;   margin-left: 100%; }
}

.page-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    backdrop-filter: blur(1px);
}
.page-loader-overlay.active {
    opacity: 1;
    pointer-events: all;
}
.page-loader-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.6rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    font-size: .9rem;
    color: #2C2A28;
    font-weight: 500;
    min-width: 220px;
}
.page-loader-spinner {
    width: 22px; height: 22px;
    border: 3px solid #E0D8CE;
    border-top-color: #D35400;
    border-radius: 50%;
    animation: loaderSpin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes loaderSpin {
    to { transform: rotate(360deg); }
}
[data-theme="dark"] .page-loader-card {
    background: #1c2128;
    color: #cdd9e5;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
[data-theme="dark"] .page-loader-spinner {
    border-color: #30363d;
    border-top-color: #FF8C42;
}
[data-theme="dark"] .page-loader-overlay {
    background: rgba(0,0,0,.4);
}

/* ==========================================================
   SISTEMA JIC HIVACO POSTVENTA - Estilos personalizados
   Paleta institucional:
     Primario:   #D35400  (naranja de obra)
     Oscuro:     #A04000
     Acento:     #F2A900  (amarillo casco de seguridad)
     Fondo:      #F7F3EE
     Texto:      #2C2A28  (carbón)
   ========================================================== */

:root{
    --bg:           #FFFFFF;
    --text:         #2C2A28;
    --primary:      #D35400;
    --primary-dark: #A04000;
    --primary-light:#FBEEE6;
    --secondary:    #5D6D7E;
    --accent:       #F2A900;
    --border:       #E5DED3;
    --light:        #F7F3EE;
    --surface:      #FFFFFF;
    --sidebar-w:      260px;
    --sidebar-w-rail: 64px;
}

*{ box-sizing:border-box; }

html, body{
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
    font-size: 14px;
}

a{ color: var(--primary); text-decoration:none; }
a:hover{ color: var(--primary-dark); }

/* Bootstrap overrides */
.btn-primary{ background: var(--primary); border-color: var(--primary); color:#fff; }
.btn-primary:hover, .btn-primary:focus{ background: var(--primary-dark); border-color: var(--primary-dark); color:#fff; }
.btn-outline-primary{ color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover{ background: var(--primary); border-color: var(--primary); color:#fff; }
.btn-outline-secondary{ color: var(--secondary); border-color: var(--secondary); }
.btn-outline-secondary:hover{ background: var(--secondary); border-color: var(--secondary); color:#fff; }
.text-primary{ color: var(--primary) !important; }
.bg-primary{ background-color: var(--primary) !important; }

.card, .table-responsive, .form-control, .form-select{
    box-shadow: none !important;
}
.card{ border:1px solid var(--border); border-radius: 8px; }
.form-control, .form-select{
    border:1px solid var(--border);
    border-radius: 6px;
}
.form-control:focus, .form-select:focus{
    border-color: var(--primary);
    box-shadow: 0 0 0 .15rem rgba(211,84,0,.15);
}

/* ==================== LAYOUT ==================== */
.layout{ display:flex; min-height:100vh; }

.sidebar{
    width: var(--sidebar-w);
    background: #26241F;
    color: #d8d1c6;
    border-right: none;
    display:flex;
    flex-direction: column;
    position: fixed; top:0; bottom:0; left:0;
    transform: translateX(0);
    transition: transform .25s ease, width .25s ease;
    z-index: 1040;
}
.sidebar-header{
    padding: 1.1rem 1.2rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
    display:flex; justify-content: space-between; align-items:center;
    min-height: 64px;
}
.brand{ display:flex; align-items:center; gap:.55rem; min-width:0; }
.brand-logo{ height: 30px; width: auto; flex-shrink:0; }
.brand-name{
    font-size: .95rem; font-weight: 700; letter-spacing:.03em;
    color: #F2A900;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-logo-rail{ display:none; }
.brand-logo-chip{
    background: #fff; border-radius: 6px;
    padding: 3px 5px; box-sizing: border-box;
}

.sidebar-nav{
    flex:1; overflow-y:auto;
    padding: .5rem 0;
}
.sidebar-nav::-webkit-scrollbar{ width:4px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius:4px; }

.nav-link-main{
    display:flex; align-items:center; gap:.6rem;
    padding: .65rem 1.2rem;
    color: #d8d1c6;
    border-left: 3px solid transparent;
    font-size: .92rem;
    transition: background .15s, color .15s;
}
.nav-link-main:hover{
    color:#fff;
    background: rgba(255,255,255,.08);
    border-left-color: var(--accent);
}
.nav-group{ }
.nav-group-toggle{
    width: 100%;
    background: transparent;
    border: none;
    text-align:left;
    color:#d8d1c6;
    padding: .65rem 1.2rem;
    display:flex; align-items:center; gap:.6rem;
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.nav-group-toggle:hover{
    color:#fff; background: rgba(255,255,255,.08);
    border-left-color: var(--accent);
}
.nav-group-toggle .chev{ margin-left:auto; transition: transform .2s; font-size:.75rem; }
.nav-group-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.nav-group-items{
    background: rgba(0,0,0,.18);
    overflow: hidden;
    max-height: 600px;
    transition: max-height .28s ease;
}
.nav-group-items--closed{
    max-height: 0;
}
.nav-link-sub{
    display:flex; align-items:center; gap:.55rem;
    padding: .52rem 1.2rem .52rem 2.4rem;
    color:#F2A900; font-size:.88rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s;
}
.nav-link-sub:hover{
    background: rgba(255,255,255,.07); color:#ffd670;
    border-left-color: #F2A900;
}
.nav-link-sub.active{
    background: rgba(242,169,0,.18);
    color: #ffe4a3;
    border-left-color: #F2A900;
    font-weight: 600;
}
.nav-group-toggle.active{
    color: #fff;
    background: rgba(255,255,255,.06);
    border-left-color: var(--accent);
}

.sidebar-footer{
    padding: .9rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,.1);
}
.user-info{ display:flex; gap:.6rem; align-items:center; color:#fff; padding:.4rem; border-radius:6px; }
.user-info:hover{ background: rgba(255,255,255,.08); color:#fff; }
.user-info img{ flex-shrink:0; }
.user-info .u-name{ font-weight:600; font-size:.9rem; color:#fff; line-height:1.1; }
.user-info .u-rol{ font-size:.75rem; color: #b8ada0; }
.user-info .u-dist{
    display:inline-flex; align-items:center; gap:.3rem;
    margin-top:.35rem; font-size:.72rem; font-weight:600;
    background: rgba(255,255,255,.15); color:#fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius:20px; padding:.15rem .6rem;
    line-height:1.4; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis; max-width:160px;
}

.btn-close-sidebar{
    background: transparent; border:0; color:#fff; font-size:1.1rem;
}
.btn-outline-light{ border-color: rgba(255,255,255,.3); color:#fff; }
.btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color:#fff; }

/* ==================== MAIN ==================== */
.main-wrapper{
    flex:1;
    margin-left: var(--sidebar-w);
    transition: margin-left .25s ease;
    min-height: 100vh;
    display:flex; flex-direction:column;
    background: var(--light);
}
.topbar{
    height: 60px;
    background: #fff;
    border-bottom: 1px solid var(--border);
    display:flex; align-items:center;
    padding: 0 1.2rem; gap:.8rem;
    position: sticky; top:0; z-index: 1020;
    box-shadow: 0 1px 4px rgba(211,84,0,.06);
}
.btn-toggle-sidebar{
    background: transparent; border:1px solid var(--border);
    width:38px; height:38px; border-radius:6px;
    color: var(--text); font-size: 1.1rem;
    display:inline-flex; align-items:center; justify-content:center;
}
.topbar-title{ font-weight: 600; color: var(--primary); font-size: 1rem; }
.topbar-user{ margin-left:auto; gap:.5rem; align-items:center; color: var(--secondary); }
.topbar-user i{ color: var(--primary); font-size: 1.3rem; }

.content{
    flex:1;
    padding: 1.5rem;
}
.footer{
    border-top:1px solid var(--border);
    padding: .8rem 1.5rem;
    color: var(--secondary);
    background: #fff;
    text-align:center;
}

/* ==================== UTILIDADES ==================== */
.page-header{
    display:flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--border);
}
.page-header h1{
    font-size: 1.3rem; margin:0; color: var(--primary); font-weight: 600;
}

.table thead th{
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}
.table td, .table th{ vertical-align: middle; }

.badge-rol-admin{ background: var(--primary); }
.badge-rol-user{ background: var(--secondary); }

/* ==================== AUTH ==================== */
.auth-body{ min-height: 100vh; margin: 0; background: var(--light); }
.auth-card{
    width: 100%; max-width: 400px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.4rem 2rem 2rem;
    box-shadow: 0 12px 40px rgba(44,42,40,.10);
}
.auth-empresa-nombre{
    text-align:center;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #2C2A28;
    margin-bottom: .6rem;
}
.auth-logo{
    display:block; margin: 0 auto 1.8rem;
    height: auto; max-height: 110px;
    width: auto; max-width: 260px;
}
.auth-title{
    text-align:center;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}
.auth-subtitle{ text-align:center; font-size:.85rem; color: var(--secondary); margin: -1.1rem 0 1.5rem; }
.auth-divider{ border:none; border-top:1px solid var(--border); margin: 1.4rem 0 1.1rem; }

/* Inputs con ícono flotante */
.auth-input-wrap{ position:relative; margin-bottom: .9rem; }
.auth-input-wrap .auth-icon{
    position:absolute; left:13px; top:50%; transform:translateY(-50%);
    color: var(--secondary); font-size:.95rem; pointer-events:none;
    z-index:2;
}
.auth-input-wrap input.form-control{
    padding-left: 2.5rem;
    background: #f7f1ea;
    border: 1.5px solid transparent;
    border-radius: 8px;
    height: 44px;
    font-size: .93rem;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.auth-input-wrap input.form-control:focus{
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(211,84,0,.12);
}
.auth-input-wrap input.form-control::placeholder{ color: #a89f92; }

/* Toggle mostrar/ocultar contraseña */
.auth-eye{
    position:absolute; right:9px; top:50%; transform:translateY(-50%);
    background: none; border: none; color: var(--secondary);
    cursor: pointer; padding: 5px 7px; border-radius: 5px; z-index:2;
    transition: color .15s;
}
.auth-eye:hover{ color: var(--primary); }

/* Checkbox recordarme */
.auth-remember{ display:flex; align-items:center; gap:.5rem; margin-bottom:1.1rem; }
.auth-remember input[type="checkbox"]{ accent-color: var(--primary); width:15px; height:15px; cursor:pointer; }
.auth-remember label{ font-size:.85rem; color: var(--secondary); margin:0; cursor:pointer; }

/* Botón submit */
.btn-auth{
    display:block; width:100%;
    background: var(--primary); color:#fff;
    border: none; border-radius: 8px;
    padding: .78rem; font-weight: 600;
    font-size: .95rem; letter-spacing: .05em;
    cursor: pointer;
    transition: all .25s ease;
}
.btn-auth:hover{
    background: var(--primary-dark);
    color:#fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}
.btn-auth:active{
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Links de auth */
.auth-link{
    display:block; text-align:center;
    font-size: .84rem; color: var(--secondary);
    text-decoration: none;
    transition: color .15s;
}
.auth-link:hover{ color: var(--primary); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 991.98px){
    .sidebar{
        transform: translateX(-100%);
    }
    .sidebar.open{
        transform: translateX(0);
    }
    .main-wrapper{ margin-left:0; }
    .btn-toggle-sidebar{ display:inline-flex; align-items:center; justify-content:center; }
    .sidebar-overlay{
        position:fixed; inset:0; background: rgba(0,0,0,.45);
        z-index: 1030; display:none;
    }
    .sidebar-overlay.open{ display:block; }
}

/* ==================== SIDEBAR RAIL (colapsado desktop) ==================== */
@media (min-width: 992px) {
    [data-sidebar="rail"] .sidebar          { width: var(--sidebar-w-rail); }
    [data-sidebar="rail"] .main-wrapper     { margin-left: var(--sidebar-w-rail); }

    [data-sidebar="rail"] .sidebar-header   { justify-content: center; padding: 1.1rem .5rem; }
    [data-sidebar="rail"] .brand-logo       { display: none; }
    [data-sidebar="rail"] .brand-logo-rail  { display: block; height: 34px; width: auto; }
    [data-sidebar="rail"] .brand-name       { display: none; }

    [data-sidebar="rail"] .nav-link-main span,
    [data-sidebar="rail"] .nav-group-toggle span,
    [data-sidebar="rail"] .nav-link-sub span,
    [data-sidebar="rail"] .chev             { display: none; }

    [data-sidebar="rail"] .nav-link-main,
    [data-sidebar="rail"] .nav-group-toggle { justify-content: center; padding: .7rem 0; }
    [data-sidebar="rail"] .nav-link-sub     { justify-content: center; padding: .55rem 0; }

    [data-sidebar="rail"] .nav-link-main i,
    [data-sidebar="rail"] .nav-group-toggle i:first-child,
    [data-sidebar="rail"] .nav-link-sub i   { font-size: 1.15rem; margin: 0; }

    [data-sidebar="rail"] .sidebar-footer .user-info > div                        { display: none !important; }
    [data-sidebar="rail"] .sidebar-footer .d-flex.gap-1                           { display: flex !important; justify-content: center; gap: 4px; }
    [data-sidebar="rail"] .sidebar-footer .d-flex.gap-1 .btn                      { flex: 0 0 26px !important; width: 26px !important; height: 26px !important; padding: 0 !important; font-size: 0 !important; display: flex !important; align-items: center; justify-content: center; }
    [data-sidebar="rail"] .sidebar-footer .d-flex.gap-1 .btn i                    { font-size: .85rem !important; }
    [data-sidebar="rail"] .sidebar-footer .user-info    { justify-content: center; padding: .4rem 0; }
    [data-sidebar="rail"] .sidebar-footer               { padding: .7rem .5rem; }

    .sidebar-icon-collapsed                       { display: none; }
    [data-sidebar="rail"] .sidebar-icon-expanded  { display: none; }
    [data-sidebar="rail"] .sidebar-icon-collapsed { display: inline-block; }
}


/* ==================== DARK MODE ==================== */
[data-theme="dark"]{
    --bg:           #16140F;
    --text:         #EDE7DE;
    --primary:      #FF8C42;
    --primary-dark: #E8590C;
    --primary-light:#3A2A1D;
    --secondary:    #A8A196;
    --accent:       #FFC857;
    --border:       #35322B;
    --light:        #1E1B15;
    --surface:      #201D18;
}

/* --- Sidebar --- */
[data-theme="dark"] .sidebar           { background: #17140f; }
[data-theme="dark"] .sidebar-header    { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .nav-link-main     { color: #A8A196; border-left-color: transparent; }
[data-theme="dark"] .nav-link-main:hover {
    background: rgba(255,140,66,.1);
    color: #EDE7DE;
    border-left-color: #FF8C42;
}
[data-theme="dark"] .nav-group-toggle  { color: #A8A196; border-left-color: transparent; }
[data-theme="dark"] .nav-group-toggle:hover {
    background: rgba(255,140,66,.1);
    color: #EDE7DE;
    border-left-color: #FF8C42;
}
[data-theme="dark"] .nav-group-items   { background: rgba(0,0,0,.3); }
[data-theme="dark"] .nav-link-sub      { color: #FFC857; border-left-color: transparent; }
[data-theme="dark"] .nav-link-sub.active {
    background: rgba(255,200,87,.15);
    color: #ffe4a3;
    border-left-color: #FFC857;
}
[data-theme="dark"] .nav-group-toggle.active {
    color: #f1ece3;
    background: rgba(255,140,66,.07);
    border-left-color: #FF8C42;
}
[data-theme="dark"] .nav-link-sub:hover {
    background: rgba(255,200,87,.1);
    color: #ffe4a3;
    border-left-color: #FFC857;
}
[data-theme="dark"] .sidebar-footer    { border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .user-info .u-name { color: #EDE7DE; }
[data-theme="dark"] .user-info .u-rol  { color: #8a8377; }
[data-theme="dark"] .user-info:hover   { background: rgba(255,255,255,.06); }
[data-theme="dark"] .user-info .u-dist { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #dcd6cb; }

/* --- Layout base --- */
[data-theme="dark"] body               { background: var(--bg); color: var(--text); }
[data-theme="dark"] .main-wrapper      { background: var(--bg); }
[data-theme="dark"] .content           { background: var(--bg); }

/* --- Topbar --- */
[data-theme="dark"] .topbar {
    background: #1c1913;
    border-bottom-color: #2c2820;
    box-shadow: 0 1px 0 #2c2820;
}
[data-theme="dark"] .topbar-title      { color: #EDE7DE; }
[data-theme="dark"] .btn-toggle-sidebar { border-color: #35322B; color: #A8A196; background: transparent; }
[data-theme="dark"] .btn-toggle-sidebar:hover { background: #2c2820; color: #EDE7DE; }

/* --- Footer --- */
[data-theme="dark"] .footer {
    background: #1c1913;
    border-top-color: #2c2820;
    color: #8a8377;
}

/* --- Cards --- */
[data-theme="dark"] .card {
    background: #1c1913;
    border-color: #35322B;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
[data-theme="dark"] .card-header {
    background: #201d18 !important;
    border-bottom-color: #2c2820;
    color: #EDE7DE;
    font-weight: 600;
}
[data-theme="dark"] .card-body         { background: #1c1913; color: var(--text); }
[data-theme="dark"] .card-footer       { background: #201d18; border-top-color: #2c2820; color: #A8A196; }

/* --- Listas (dashboard, agenda) --- */
[data-theme="dark"] .list-group-item            { background: transparent; color: var(--text); border-color: #2c2820; }
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus { background: #26221b; color: var(--text); }

/* --- Tablas --- */
[data-theme="dark"] .table {
    color:                   #EDE7DE;
    --bs-table-color:        #EDE7DE;
    --bs-table-striped-color:#EDE7DE;
    --bs-table-hover-color:  #EDE7DE;
    --bs-table-active-color: #EDE7DE;
    --bs-table-bg:           transparent;
    --bs-table-striped-bg:   #17140f;
    --bs-table-hover-bg:     #201d18;
    --bs-table-active-bg:    #201d18;
    --bs-table-border-color: #2c2820;
}
[data-theme="dark"] .table td,
[data-theme="dark"] .table th          { color: #EDE7DE; border-color: #2c2820; }
[data-theme="dark"] .table thead th {
    background: #201d18;
    color: #A8A196;
    border-bottom: 2px solid #35322B;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background: #201d18;
    color: var(--text);
    --bs-table-accent-bg: #201d18;
}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #17140f;
    color: var(--text);
    --bs-table-accent-bg: #17140f;
}

/* --- Formularios --- */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: #16140F;
    border-color: #35322B;
    color: #EDE7DE;
    box-shadow: none !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: #16140F;
    border-color: #FF8C42;
    box-shadow: 0 0 0 3px rgba(255,140,66,.15) !important;
    color: #EDE7DE;
}
[data-theme="dark"] .form-control::placeholder { color: #6b6558; }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly]    { background: #1c1913; color: #8a8377; }
[data-theme="dark"] .form-label                { color: #dcd6cb; }
[data-theme="dark"] .form-text                 { color: #A8A196; }
[data-theme="dark"] .form-check-label          { color: #dcd6cb; }
[data-theme="dark"] .form-check-input          { background-color: #16140F; border-color: #35322B; }
[data-theme="dark"] .form-check-input:checked  { background-color: #FF8C42; border-color: #FF8C42; }
[data-theme="dark"] .input-group-text {
    background: #1c1913;
    border-color: #35322B;
    color: #A8A196;
}

/* --- Botones --- */
[data-theme="dark"] .btn-primary               { background: #E8590C; border-color: #FF8C42; color: #fff; }
[data-theme="dark"] .btn-primary:hover         { background: #FF8C42; border-color: #FFC857; color: #fff; }
[data-theme="dark"] .btn-outline-primary       { color: #FF8C42; border-color: #E8590C; }
[data-theme="dark"] .btn-outline-primary:hover { background: rgba(232,89,12,.15); color: #FFC857; border-color: #FF8C42; }
[data-theme="dark"] .btn-outline-secondary     { color: #A8A196; border-color: #35322B; }
[data-theme="dark"] .btn-outline-secondary:hover { background: #2c2820; color: #dcd6cb; border-color: #A8A196; }
[data-theme="dark"] .btn-outline-danger        { color: #f85149; border-color: #da3633; }
[data-theme="dark"] .btn-outline-danger:hover  { background: rgba(248,81,73,.15); color: #ff7b72; border-color: #f85149; }
[data-theme="dark"] .btn-outline-light         { border-color: rgba(255,255,255,.2); color: #dcd6cb; }
[data-theme="dark"] .btn-outline-light:hover   { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }

/* --- Badges --- */
[data-theme="dark"] .badge.bg-success  { background: #1a4731 !important; color: #3fb950; border: 1px solid #238636; }
[data-theme="dark"] .badge.bg-secondary{ background: #2c2820 !important; color: #A8A196;  border: 1px solid #35322B; }
[data-theme="dark"] .badge.bg-danger   { background: #3d1f1f !important; color: #f85149;  border: 1px solid #da3633; }
[data-theme="dark"] .badge.bg-warning  { background: #2d2008 !important; color: #FFC857 !important;  border: 1px solid #9e6a03; }
[data-theme="dark"] .badge.bg-primary  { background: #3a2410 !important; color: #FF8C42 !important;  border: 1px solid #E8590C; }
[data-theme="dark"] .badge.bg-info     { background: #0d3b45 !important; color: #56d4dd !important;  border: 1px solid #0e7490; }
[data-theme="dark"] .badge.bg-warning.text-dark,
[data-theme="dark"] .badge.bg-info.text-dark   { color: inherit !important; }
[data-theme="dark"] .badge-rol-admin   { background: #3a2410 !important; color: #FF8C42;  border: 1px solid #E8590C; }
[data-theme="dark"] .badge-rol-user    { background: #2c2820 !important; color: #A8A196; }

/* --- Textos, enlaces, bordes --- */
[data-theme="dark"] .text-muted        { color: #A8A196 !important; }
[data-theme="dark"] .text-primary      { color: #FF8C42 !important; }
[data-theme="dark"] a                  { color: #FF8C42; }
[data-theme="dark"] a:hover            { color: #FFC857; }
[data-theme="dark"] .page-header       { border-color: #2c2820; }
[data-theme="dark"] .page-header h1    { color: #EDE7DE; }
[data-theme="dark"] hr                 { border-color: #2c2820; opacity: 1; }
[data-theme="dark"] code               { background: #201d18; color: #FFC857; border: 1px solid #35322B; }
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top        { border-color: #35322B !important; }

/* --- Modales --- */
[data-theme="dark"] .modal-content     { background: #1c1913; color: var(--text); border-color: #35322B; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer      { background: #201d18; border-color: #2c2820; }
[data-theme="dark"] .btn-close         { filter: invert(1) grayscale(1) brightness(2); }

/* --- Dropdowns --- */
[data-theme="dark"] .dropdown-menu     { background: #201d18; border-color: #35322B; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-theme="dark"] .dropdown-item     { color: #dcd6cb; }
[data-theme="dark"] .dropdown-item:hover { background: #2c2820; color: #EDE7DE; }
[data-theme="dark"] .dropdown-divider  { border-color: #2c2820; }

/* --- Alerts --- */
[data-theme="dark"] .alert-info        { background: #1c2d42; border-color: #1f6feb; color: #79c0ff; }
[data-theme="dark"] .alert-success     { background: #1a4731; border-color: #238636; color: #3fb950; }
[data-theme="dark"] .alert-danger      { background: #3d1f1f; border-color: #da3633; color: #ff7b72; }
[data-theme="dark"] .alert-warning     { background: #2d2008; border-color: #9e6a03; color: #FFC857; }

/* --- Misc --- */
[data-theme="dark"] .bg-white          { background: #1c1913 !important; }
[data-theme="dark"] .bg-light          { background: #201d18 !important; }

/* ==================== BOTÓN TEMA SOL / LUNA ==================== */
.theme-icon-btn {
    background: none;
    border: none;
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.05rem;
    color: #5D6D7E;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    padding: 0;
}
.theme-icon-btn:hover                  { background: var(--primary-light); color: var(--primary); }

#themeIconSun                          { display: block; color: #f59e0b; }
#themeIconMoon                         { display: none; }

[data-theme="dark"] .theme-icon-btn    { color: #A8A196; }
[data-theme="dark"] .theme-icon-btn:hover { background: #2c2820; }
[data-theme="dark"] #themeIconSun      { display: none; }
[data-theme="dark"] #themeIconMoon     { display: block; color: #FFC857; }

/* ==================== DATATABLE ==================== */
.dt-toolbar {
    margin-bottom: .75rem;
}
.dt-toolbar-top {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
}
.dt-toolbar-bot {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: space-between;
}

.dt-search-wrap {
    position: relative;
    flex: 1 1 180px;
    max-width: 280px;
}
.dt-search-icon {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary);
    pointer-events: none;
    font-size: .85rem;
}
.dt-search {
    width: 100%;
    padding: .35rem .75rem .35rem 2rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .85rem;
    background: var(--surface);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.dt-search:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(211,84,0,.15);
}

.dt-filters-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.dt-filter-select {
    padding: .35rem .65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .82rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s;
}
.dt-filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

.dt-counter {
    font-size: .8rem;
    color: var(--secondary);
}

.dt-pagesize-wrap {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--secondary);
}
.dt-pagesize-select {
    padding: .25rem .4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: .82rem;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.dt-pagesize-select:focus { outline: none; border-color: var(--primary); }

.dt-pagination {
    display: flex;
    align-items: center;
    gap: .2rem;
}
.dt-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 .4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: .82rem;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    display: inline-flex; align-items: center; justify-content: center;
}
.dt-page-btn:hover:not(:disabled) {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}
.dt-page-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    font-weight: 600;
}
.dt-page-btn:disabled {
    opacity: .4;
    cursor: default;
}
.dt-page-ellipsis {
    font-size: .82rem;
    color: var(--secondary);
    padding: 0 .15rem;
}

.dt-sort-icon { display: inline-block; }

[data-theme="dark"] .dt-search,
[data-theme="dark"] .dt-filter-select,
[data-theme="dark"] .dt-pagesize-select {
    background: #201d18;
    color: #dcd6cb;
    border-color: #35322B;
}
[data-theme="dark"] .dt-search:focus,
[data-theme="dark"] .dt-filter-select:focus,
[data-theme="dark"] .dt-pagesize-select:focus {
    border-color: #FF8C42;
    box-shadow: 0 0 0 3px rgba(255,140,66,.15);
}
[data-theme="dark"] .dt-page-btn {
    background: #201d18;
    color: #dcd6cb;
    border-color: #35322B;
}
[data-theme="dark"] .dt-page-btn:hover:not(:disabled) {
    background: #2c2820;
    border-color: #FF8C42;
    color: #FF8C42;
}
[data-theme="dark"] .dt-page-btn.active {
    background: #E8590C;
    border-color: #E8590C;
    color: #fff;
}
[data-theme="dark"] .dt-counter,
[data-theme="dark"] .dt-pagesize-wrap,
[data-theme="dark"] .dt-page-ellipsis { color: #A8A196; }

/* Botón limpiar filtros (datatable global) */
.dt-clear-btn {
    display: none;
    align-items: center;
    gap: .3rem;
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 6px;
    padding: .28rem .7rem;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    line-height: 1.4;
}
.dt-clear-btn.visible { display: inline-flex; }
.dt-clear-btn:hover   { background: #dc3545; color: #fff; }
[data-theme="dark"] .dt-clear-btn               { border-color: #f87171; color: #f87171; }
[data-theme="dark"] .dt-clear-btn:hover         { background: #f87171; color: #111; }

/* ==========================================================
   LOGIN — Pantalla dividida: panel de marca postventa + acceso
   ========================================================== */
.auth-split{ display:flex; min-height:100vh; }

/* ── Panel de marca ── */
.auth-hero{
    flex: 1 1 55%;
    position: relative; overflow: hidden;
    display:flex; align-items:center; justify-content:center;
    padding: 3rem;
    color: #fff;
    background: linear-gradient(145deg, #A04000 0%, #D35400 55%, #E67E22 100%);
}
.auth-hero::before{                       /* trama de puntos */
    content:''; position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 22px 22px;
}
.auth-hero::after{                        /* halo decorativo */
    content:''; position:absolute;
    width:520px; height:520px; border-radius:50%;
    right:-170px; bottom:-210px;
    background: rgba(255,255,255,.08);
}
.auth-hero-inner{ position:relative; z-index:1; width:100%; max-width:480px; }
.auth-hero-badge{
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.35rem .85rem; border-radius:999px;
    background: rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
    font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.auth-hero-title{ font-size:2.3rem; font-weight:800; line-height:1.15; margin:1.1rem 0 .7rem; }
.auth-hero-title span{ color:#FFE3C2; }
.auth-hero-text{ font-size:1rem; opacity:.92; margin-bottom:1.4rem; }

/* Ilustración de la casa + íconos flotantes */
.auth-illus{ position:relative; max-width:380px; margin:0 auto 1.6rem; }
.auth-illus svg{ display:block; width:100%; height:auto; }
.auth-float{
    position:absolute;
    width:46px; height:46px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; color: var(--primary); font-size:1.35rem;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    animation: authFloat 5s ease-in-out infinite;
}
.auth-float-1{ top:10%; left:0; }
.auth-float-2{ top:0; right:8%;  animation-delay:-1.6s; }
.auth-float-3{ bottom:24%; right:-2%; animation-delay:-3.2s; }
@keyframes authFloat{
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.auth-features{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.auth-features li{ display:flex; align-items:center; gap:.65rem; font-size:.93rem; }
.auth-features i{
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,.16);
}

/* ── Columna de acceso ── */
.auth-main{
    flex: 1 1 45%;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 2rem 1.25rem;
}
.auth-mobile-tag{
    display:none; align-items:center; gap:.4rem;
    margin-bottom:1rem; padding:.3rem .8rem; border-radius:999px;
    background: var(--primary-light); color: var(--primary);
    font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
}
.auth-footer{ margin-top:1.4rem; font-size:.78rem; color: var(--secondary); }

@media (max-width: 991.98px){
    .auth-hero{ display:none; }
    .auth-mobile-tag{ display:inline-flex; }
}
@media (prefers-reduced-motion: reduce){
    .auth-float{ animation:none; }
}

/* ==========================================================
   PORTAL DEL PROPIETARIO — mobile-first + asistente flotante
   ========================================================== */
/* Colores de marca Hivaco (tomados del logo): amarillo #FFB70A + azul marino #1B2435.
   Dentro del portal, "primary" es el marino (texto/íconos) y el amarillo va en los rellenos. */
.portal-body{
    --primary:             #1B2435;
    --primary-dark:        #0F1623;
    --primary-light:       #FFF4D6;
    --portal-amarillo:     #FFB70A;
    --portal-amarillo-osc: #E6A300;
    background: var(--light); min-height:100vh;
}
.portal-body .btn-primary{ background: var(--portal-amarillo); border-color: var(--portal-amarillo); color: var(--primary); }
.portal-body .btn-primary:hover,
.portal-body .btn-primary:focus{ background: var(--portal-amarillo-osc); border-color: var(--portal-amarillo-osc); color: var(--primary); }

/* ── Barra superior ── */
.portal-topbar{
    background: var(--portal-amarillo);
    color: var(--primary);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.portal-topbar-inner{
    max-width:560px; margin:0 auto; padding:.8rem 1rem;
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.portal-marca{ display:flex; align-items:center; gap:.6rem; }
.portal-marca-logo{
    display:flex; align-items:center; justify-content:center;
    height:38px; max-width:110px; padding:4px 8px;
    background:#fff; border-radius:10px; flex-shrink:0;
}
.portal-marca-logo img{ max-height:100%; max-width:100%; object-fit:contain; }
.portal-marca-nombre{ font-weight:700; font-size:.95rem; line-height:1.1; }
.portal-marca-sub{ font-size:.72rem; opacity:.85; text-transform:uppercase; letter-spacing:.06em; }
.portal-salir{
    color: var(--primary); font-size:.85rem; white-space:nowrap;
    padding:.35rem .75rem; border-radius:999px;
    background: rgba(27,36,53,.08); border:1px solid rgba(27,36,53,.25);
}
.portal-salir:hover{ color: var(--primary); background: rgba(27,36,53,.16); }

/* ── Campanita de avisos ── */
.portal-topbar-acciones{ display:flex; align-items:center; gap:.5rem; }
.portal-campana{
    position:relative; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(27,36,53,.08); border:1px solid rgba(27,36,53,.25);
    color: var(--primary); font-size:1.1rem; padding:0;
}
.portal-campana:hover{ background: rgba(27,36,53,.16); }
.portal-campana-num{
    position:absolute; top:-4px; right:-4px;
    min-width:18px; height:18px; padding:0 4px; border-radius:999px;
    background:#dc3545; color:#fff; font-size:.68rem; font-weight:700; line-height:18px;
    border:2px solid var(--portal-amarillo);
}
.portal-avisos{
    position:fixed; top:64px; right:12px; z-index:1060;
    width: min(360px, calc(100vw - 24px)); max-height: min(460px, calc(100vh - 90px));
    overflow-y:auto; background:#fff; border-radius:14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.2); border:1px solid var(--border);
}
.portal-avisos-titulo{
    position:sticky; top:0; background:#fff; padding:.75rem 1rem;
    font-weight:700; border-bottom:1px solid var(--border);
}
.portal-avisos-vacio{ padding:1.2rem 1rem; color: var(--secondary); font-size:.9rem; text-align:center; }
.portal-aviso{ padding:.7rem 1rem; border-bottom:1px solid var(--border); font-size:.9rem; }
.portal-aviso:last-child{ border-bottom:none; }
.portal-aviso.nuevo{ background: var(--primary-light); border-left:3px solid var(--portal-amarillo); }

/* ── Franja "Activa los avisos" ── */
.portal-push{
    display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem;
    padding:.8rem .9rem; border-radius:14px;
    background: var(--primary-light); border:1px solid rgba(255,183,10,.55); color: var(--primary);
}
.portal-push[hidden]{ display:none; }
.portal-push > i{ font-size:1.4rem; color: var(--portal-amarillo-osc); }
.portal-push-cerrar{ background:none; border:none; color: var(--secondary); padding:.2rem .3rem; }

/* ── Contenido ── */
.portal-main{ max-width:560px; margin:0 auto; padding:1.4rem 1rem 7rem; }
.portal-saludo h1{ font-size:1.5rem; font-weight:800; margin:.1rem 0 .4rem; color: var(--text); }
.portal-seccion{
    font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
    color: var(--secondary); margin:1.6rem 0 .75rem;
}
.portal-vivienda{
    display:flex; gap:.9rem; align-items:flex-start;
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:1rem; margin-bottom:.75rem;
    box-shadow: 0 2px 8px rgba(44,42,40,.05);
}
.portal-vivienda-icono{
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background: var(--primary-light); color: var(--primary); font-size:1.3rem;
}
.portal-vacio{
    text-align:center; color: var(--secondary);
    background:#fff; border:1px dashed var(--border); border-radius:14px; padding:1.5rem;
}
.portal-vacio i{ font-size:2rem; display:block; margin-bottom:.5rem; }
.portal-ayuda{
    display:flex; align-items:center; gap:.6rem;
    margin-top:1.4rem; padding:.85rem 1rem; border-radius:12px;
    background: var(--primary-light); color: var(--primary-dark); font-size:.88rem;
}
.portal-ayuda i{ font-size:1.2rem; }

/* ── Reportes por vivienda ── */
.portal-reportes{ margin: -.25rem 0 1.4rem .6rem; padding-left: .9rem; border-left: 2px solid var(--border); }
.portal-reportes-titulo{
    font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color: var(--secondary); margin:.6rem 0 .5rem;
}
.portal-reportes-vacio{ font-size:.85rem; color: var(--secondary); }
.portal-reporte{
    background:#fff; border:1px solid var(--border); border-radius:12px;
    margin-bottom:.5rem; overflow:hidden;
}
.portal-reporte summary{ list-style:none; cursor:pointer; padding:.75rem .9rem; }
.portal-reporte summary::-webkit-details-marker{ display:none; }
.portal-reporte-cat{ font-weight:600; font-size:.92rem; margin:.2rem 0 .1rem; }
.portal-reporte-cat i{ color: var(--primary); }
.portal-reporte-agendar{
    display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:.5rem;
    background: var(--portal-amarillo); color: var(--primary); font-weight:700; font-size:.88rem;
    border-radius:10px; padding:.5rem .75rem; text-decoration:none;
}
.portal-reporte-agendar:hover{ background: var(--portal-amarillo-osc); color: var(--primary); }
.portal-reporte-ver{ display:inline-block; margin-top:.35rem; font-size:.78rem; color: var(--primary); font-weight:600; }
.portal-reporte-ver::after{ content:'\25B8  Ver detalle'; }
.portal-reporte[open] .portal-reporte-ver::after{ content:'\25BE  Ocultar detalle'; }
.portal-reporte-detalle{ padding:.7rem .9rem .85rem; font-size:.9rem; border-top:1px dashed var(--border); }
.portal-reporte-fotos{ display:flex; flex-wrap:wrap; gap:.4rem; }
.portal-reparacion{
    margin-top:.9rem; padding:.75rem .85rem; border-radius:10px;
    background:#eaf6ec; border:1px solid #bfe3c6; color:#1d4d27;
}
.portal-reporte-fotos img{ width:72px; height:72px; object-fit:cover; border-radius:10px; border:1px solid var(--border); }

/* ── Inicio de sesión del portal ── */
.portal-login{
    max-width:400px; margin:1.5rem auto 0; text-align:center;
    background:#fff; border:1px solid var(--border); border-radius:18px;
    padding:2rem 1.5rem 1.6rem;
    box-shadow: 0 10px 30px rgba(44,42,40,.08);
}
.portal-login-logo{
    display:block; margin:0 auto 1.2rem;
    width:auto; max-width:240px; height:auto; max-height:90px;
}
.portal-login h1{ font-size:1.35rem; font-weight:800; margin-bottom:.3rem; }
.portal-login > p{ font-size:.9rem; margin-bottom:1.2rem; }
.portal-login .form-label{ font-size:.85rem; font-weight:600; margin-bottom:.3rem; }
.portal-login-campo{ position:relative; margin-bottom:1rem; }
.portal-login-campo > i{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color: var(--secondary); pointer-events:none;
}
.portal-login-campo input{
    width:100%; height:50px; font-size:1rem;
    padding:0 2.8rem 0 2.6rem;
    background:#f7f1ea; border:1.5px solid transparent; border-radius:12px;
}
.portal-login-campo input:focus{
    outline:none; background:#fff; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255,183,10,.35);
}
.portal-login-ojo{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    background:none; border:none; color: var(--secondary); padding:.4rem .5rem;
}
.portal-login-btn{ height:50px; font-size:1rem; font-weight:700; border-radius:12px; margin-top:.3rem; }
.portal-login-sep{
    display:flex; align-items:center; gap:.75rem; margin:1.3rem 0 1rem;
    color: var(--secondary); font-size:.8rem;
}
.portal-login-sep::before, .portal-login-sep::after{ content:''; flex:1; height:1px; background: var(--border); }
.portal-login-qr{
    display:flex; align-items:center; gap:.7rem; text-align:left;
    font-size:.85rem; color: var(--secondary);
}
.portal-login-qr i{ font-size:1.8rem; color: var(--primary); flex-shrink:0; }

/* ── Chat flotante ── */
.chat-fab{
    position:fixed; right:18px; bottom:18px; z-index:1050;
    width:60px; height:60px; border-radius:50%; border:none;
    background: var(--portal-amarillo); color: var(--primary); font-size:1.6rem;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 22px rgba(255,183,10,.5);
    transition: transform .2s, background .2s;
}
.chat-fab:hover{ background: var(--portal-amarillo-osc); transform: scale(1.06); }
.chat-panel{
    position:fixed; right:18px; bottom:90px; z-index:1050;
    width: min(360px, calc(100vw - 36px));
    max-height: min(520px, calc(100vh - 120px));
    display:flex; flex-direction:column;
    background:#fff; border-radius:18px; overflow:hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,.22);
    opacity:0; visibility:hidden; transform: translateY(12px) scale(.98);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.chat-panel.abierto{ opacity:1; visibility:visible; transform:none; }
.chat-header{
    display:flex; align-items:center; gap:.65rem;
    padding:.85rem 1rem; color: var(--primary);
    background: var(--portal-amarillo);
}
.chat-avatar{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background: rgba(27,36,53,.12); font-size:1.2rem;
}
.chat-estado{ font-size:.75rem; opacity:.9; display:flex; align-items:center; gap:.35rem; }
.chat-estado span{ width:8px; height:8px; border-radius:50%; background:#6ee7a0; display:inline-block; }
.chat-cerrar{ background:none; border:none; color: var(--primary); font-size:1.05rem; padding:.25rem .4rem; }
.chat-body{ padding:1rem; overflow-y:auto; background: var(--light); flex:1; }
.chat-msg-bot{
    background:#fff; border:1px solid var(--border);
    border-radius: 4px 14px 14px 14px;
    padding:.65rem .85rem; font-size:.92rem; max-width:88%;
    margin-bottom:.8rem;
}
.chat-opciones{ display:grid; gap:.5rem; }
.chat-opcion{
    display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
    background:#fff; color: var(--primary); font-weight:600; font-size:.9rem;
    border:1.5px solid var(--primary); border-radius:12px; padding:.6rem .8rem;
}
.chat-opcion:not(:disabled):hover{ background: var(--primary); color:#fff; }
.chat-opcion:disabled{ opacity:.55; cursor:default; }
.chat-opcion i{ font-size:1rem; flex-shrink:0; }
.chat-opcion-sec{ border-color: var(--border); color: var(--secondary); font-weight:500; }
.chat-opcion-sec:not(:disabled):hover{ background: var(--secondary); border-color: var(--secondary); }
.chat-opcion-primaria{ background: var(--portal-amarillo); border-color: var(--portal-amarillo); color: var(--primary); }
.chat-opcion-primaria:not(:disabled):hover{ background: var(--portal-amarillo-osc); border-color: var(--portal-amarillo-osc); color: var(--primary); }
.chat-opciones{ margin-bottom:.8rem; }
.chat-opciones-grid{ grid-template-columns: 1fr 1fr; }
.chat-opciones-grid .chat-opcion{ font-size:.83rem; padding:.55rem .6rem; }
.chat-opciones-grid .chat-opcion-sec{ grid-column: 1 / -1; }

/* Mensajes del propietario */
.chat-msg-user{
    margin: 0 0 .8rem auto; max-width:85%; width:fit-content;
    background: var(--portal-amarillo); color: var(--primary);
    border-radius: 14px 4px 14px 14px;
    padding:.6rem .85rem; font-size:.92rem;
    white-space: pre-wrap; word-break: break-word;
}

/* "Escribiendo…" */
.chat-typing{
    display:inline-flex; gap:4px; margin-bottom:.8rem;
    background:#fff; border:1px solid var(--border);
    border-radius: 4px 14px 14px 14px; padding:.7rem .85rem;
}
.chat-typing span{
    width:7px; height:7px; border-radius:50%; background: var(--secondary);
    animation: chatTyping 1s infinite ease-in-out;
}
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chatTyping{
    0%, 80%, 100% { opacity:.3; transform: translateY(0); }
    40%           { opacity:1;  transform: translateY(-3px); }
}

/* Cuadro de texto */
.chat-composer{
    display:flex; gap:.5rem; align-items:flex-end;
    padding:.6rem; border-top:1px solid var(--border); background:#fff;
}
.chat-composer[hidden]{ display:none; }
.chat-composer textarea{
    flex:1; resize:none; font-size:.92rem;
    border:1.5px solid var(--border); border-radius:12px; padding:.5rem .7rem;
    max-height:120px;
}
.chat-composer textarea:focus{ outline:none; border-color: var(--primary); }
.chat-enviar{
    width:42px; height:42px; border-radius:50%; border:none; flex-shrink:0;
    background: var(--portal-amarillo); color: var(--primary); font-size:1.05rem;
}
.chat-enviar:hover{ background: var(--portal-amarillo-osc); }

/* Miniaturas de fotos */
.chat-fotos{ display:flex; flex-wrap:wrap; gap:.4rem; background:transparent; padding:0; }
.chat-foto{ position:relative; }
.chat-foto img{
    width:68px; height:68px; object-fit:cover; display:block;
    border-radius:10px; border:2px solid var(--primary);
}
.chat-foto-quitar{
    position:absolute; top:-6px; right:-6px;
    width:22px; height:22px; border-radius:50%; border:none;
    background:#dc3545; color:#fff; font-size:.9rem; line-height:1;
    display:flex; align-items:center; justify-content:center; padding:0;
}
.chat-foto-quitar:disabled{ display:none; }

/* Resumen y tarjetas de reportes */
.chat-resumen-fila{ display:flex; gap:.5rem; font-size:.88rem; padding:.15rem 0; }
.chat-resumen-etq{ color: var(--secondary); min-width:62px; flex-shrink:0; }
.chat-reportes{ display:grid; gap:.5rem; margin-bottom:.8rem; }
.chat-reporte{
    background:#fff; border:1px solid var(--border); border-radius:12px;
    padding:.7rem .85rem; font-size:.9rem;
}

@media (prefers-reduced-motion: reduce){
    .chat-panel, .chat-fab{ transition:none; }
    .chat-typing span{ animation:none; }
}