/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    /* Colores Corporativos & UI */
    --primary: #2c3e50; --secondary: #34495e; --accent: #e67e22;
    --bg: #f5f6fa; --card-bg: #ffffff; 
    --text-main: #2d3436; --text-sec: #636e72;
    --border: #dfe6e9; --light-hl: #f8f9fa;
    
    /* Colores de Módulos (Marca) */
    --dronium: #0984e3; --excel: #217346; --process: #8e44ad;
    --metrics: #16a085; --gallery: #d63031; --inventory: #107c41;
    --billing: #27ae60; --holded: #00b8d4; --extra: #9b59b6; 
    --cloud: #3498db; --qr-col: #34495e; --analytics: #6c5ce7;
    --printpal: #e84393; /* NUEVO: PrintPal Fotomatón */

    /* Redes & Status */
    --whatsapp: #25D366; --telegram: #0088cc;
    --ha-color: #03a9f4;
    
    /* Semáforo Impresoras */
    --status-ok: #2ecc71; --status-low: #f1c40f; --status-out: #e74c3c;
    --status-free: #2ecc71; --status-busy: #e67e22; --status-error: #e74c3c;

    /* Áreas Seguras */
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
}

body.dark-mode {
    --primary: #1e272e; --secondary: #d2dae2; --bg: #0f1214;
    --card-bg: #1e272e; --text-main: #d2dae2; --text-sec: #808e9b;
    --border: #353b48; --light-hl: #2f3640;
}
body.dark-mode #w_temp { color: #ffffff !important; }
body.dark-mode .calc-section-orange { background: rgba(230, 126, 34, 0.15); border-color: var(--accent); color: var(--accent); }
body.dark-mode .calc-section-blue { background: rgba(9, 132, 227, 0.15); border-color: var(--dronium); color: #74b9ff; }
body.dark-mode .calc-section-orange .excel-label { color: var(--accent); }
body.dark-mode .calc-section-blue .excel-label { color: #74b9ff; }
body.dark-mode .box-adapt-orange { background: rgba(230, 126, 34, 0.15); border-color: var(--accent); color: var(--accent); }
body.dark-mode .box-adapt-blue { background: rgba(9, 132, 227, 0.15); border-color: var(--dronium); color: #74b9ff; }
body.dark-mode .calc-section-laser { background: rgba(231, 76, 60, 0.15); border-color: #e74c3c; color: #ff7675; }
body.dark-mode .calc-section-laser .excel-label { color: #ff7675 !important; }
body.dark-mode .kanban-card.priority-high { background: linear-gradient(90deg, rgba(231, 76, 60, 0.15) 0%, rgba(30, 39, 46, 0) 100%); border-left-color: #e74c3c !important; }

body.tactical-mode { 
    --primary: #000000; --secondary: #2c0000; --accent: #ff0000; 
    --dronium: #ff0000; --excel: #ff0000; --process: #ff0000; 
    --metrics: #ff0000; --gallery: #ff0000; --inventory: #ff0000; 
    --billing: #ff0000; --holded: #ff0000; --extra: #ff0000;
    --bg: #000000; --card-bg: #110000; --text-main: #ff0000; 
    --text-sec: #990000; --border: #330000; --light-hl: #1a0000; 
    --qr-col: #ff0000; --status-free: #ff0000; --status-busy: #ff0000; 
    --status-warn: #ff0000; --cloud: #ff0000; --ha-color: #ff0000;
    --analytics: #ff0000; --printpal: #ff0000;
}
body.tactical-mode .sidebar { box-shadow: 2px 0 10px #ff0000; border-right: 1px solid #330000; }
body.tactical-mode .nav-item { color: #550000; }
body.tactical-mode .nav-item.active { color: #ff0000; background: #220000; border-left-color: #ff0000; }
body.tactical-mode img { filter: sepia(100%) saturate(1000%) hue-rotate(-50deg); }

body.client-mode .sensitive-data, body.client-mode .billing-tab, body.client-mode .admin-controls { display: none !important; }
body.client-mode .card { box-shadow: none; border: 1px solid #eee; }
body.client-mode .sidebar { background: #111; } 

body { margin:0; font-family:'Segoe UI', system-ui, sans-serif; background:var(--bg); display:flex; height: 100vh; height: 100dvh; overflow:hidden; color:var(--text-main); transition:0.3s; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* =========================================
   2. LAYOUT & SIDEBAR
   ========================================= */
.sidebar { width:260px; background:var(--primary); color:white; display:flex; flex-direction:column; z-index:1000; transition:transform 0.3s; box-shadow: 4px 0 15px rgba(0,0,0,0.1); flex-shrink: 0; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.logo { padding:20px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.05); display: flex; justify-content: center; align-items: center; gap: 10px; } 
.logo img { height: 45px; width: auto; object-fit: contain; }

.nav-links { list-style:none; padding:0; margin:20px 0; flex:1; overflow-y:auto; padding-bottom:100px; }
.nav-item { padding:15px 25px; cursor:pointer; display:flex; align-items:center; gap:12px; color:#b2bec3; border-left:4px solid transparent; transition:0.2s; }
@media (hover: hover) { .nav-item:hover { background:rgba(255,255,255,0.05); color:white; } }
.nav-item.active { background:rgba(230,126,34,0.1); border-left-color:var(--accent); color:white; }
.nav-item.home-tab.active { border-left-color:#ffd32a; } 
.nav-item.excel-tab.active { border-left-color:var(--excel); } 
.nav-item.cloud-tab.active { border-left-color:var(--cloud); }
.nav-item.dronium-tab.active { border-left-color:var(--dronium); } 
.nav-item.qr-tab.active { border-left-color:var(--qr-col); background:rgba(52, 73, 94, 0.4); } 
.nav-item.process-tab.active { border-left-color:var(--process); } 
.nav-item.metrics-tab.active { border-left-color:var(--metrics); } 
.nav-item.gallery-tab.active { border-left-color:var(--gallery); } 
.nav-item.inventory-tab.active { border-left-color:var(--inventory); } 
.nav-item.analytics-tab.active { border-left-color:var(--analytics); }
.nav-item.billing-tab.active { border-left-color:var(--billing); }
.nav-item.purchases-tab.active { border-left-color:#e67e22; }
.nav-item.printpal-tab.active { border-left-color:var(--printpal); background:rgba(232, 67, 147, 0.1); }

.main-content { flex:1; overflow-y:auto; padding:30px; position:relative; scroll-behavior:smooth; padding-top: calc(30px + var(--safe-top)); padding-bottom: calc(30px + var(--safe-bottom)); padding-right: calc(30px + var(--safe-right)); }
.tab-content { display:none; animation:fadeIn 0.4s; } 
.tab-content.active { display:block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.header-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:25px; flex-wrap:wrap; }
.header-info { display:flex; flex-direction:column; align-items:flex-end; } 
.header-title h2 { margin: 0; font-size: 1.8rem; color: var(--text-main); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; } 
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } 
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; } 
.col-span-2 { grid-column:span 2; }

#mobile-menu-btn { display: none; }
.mobile-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; backdrop-filter: blur(2px); }
.mobile-overlay.active { display: block; }

/* =========================================
   3. UI COMPONENTS
   ========================================= */
.card { background:var(--card-bg); border-radius:12px; padding:25px; border:1px solid var(--border); box-shadow:0 4px 15px rgba(0,0,0,0.05); transition:0.3s; }
.card h3 { margin-top:0; border-bottom:2px solid var(--border); padding-bottom:10px; color:var(--text-main); display: flex; justify-content: space-between; align-items: center; }
.card p, .card span { color: var(--text-sec); }
.card h4 { color: var(--text-main) !important; }

button { font-family: inherit; }
.btn-production { width: 100%; margin-top: 15px; padding: 15px; background: var(--process); color: white; border: none; border-radius: 8px; font-weight: 800; font-size: 1rem; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; transition: 0.2s; box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3); }
@media (hover: hover) { .btn-production:hover { transform: translateY(-2px); background: #9b59b6; } }

.btn-whatsapp { background: var(--whatsapp); color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.btn-telegram { background: var(--telegram); color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.btn-packing { background: var(--analytics); color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
@media (hover: hover) { .btn-packing:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(108, 92, 231, 0.3); } }

.btn-tools { background: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 6px; cursor: pointer; font-weight: bold; }

/* Mismo "sobresalto" al pasar el ratón que .btn-production, aplicado solo
   a los botones de Wear (Guardar nube / PDF cliente) y a los iconos de la
   cabecera de Calculadora 3D, tal y como se pidió. */
#wear-save-budget, #wear-pdf, #calculator .header-title button { transition: transform 0.2s; }
@media (hover: hover) {
    #wear-save-budget:hover, #wear-pdf:hover, #calculator .header-title button:hover { transform: translateY(-2px); }
}
.btn-sos { background: #e74c3c; color: white; border: none; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; animation: pulse 2s infinite; }
.btn-tactical { background: #2d3436; color: white; border: 1px solid #636e72; padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold; }

.btn-stock { flex: 0 0 auto; background: var(--light-hl); border: 1px solid var(--border); padding: 8px 12px; border-radius: 15px; font-size: 0.75rem; cursor: pointer; font-weight: bold; color: var(--text-main); transition: 0.2s; white-space: nowrap; }
@media (hover: hover) { .btn-stock:hover { background: var(--card-bg); transform: translateY(-2px); border-color: var(--accent); } }

.btn-archive { background: #27ae60; color: white; border: none; width: 100%; padding: 15px; border-radius: 8px; margin-top: 15px; cursor: pointer; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3); transition: 0.2s; }
.btn-trash { background: #e74c3c; color: white; border: none; width: 100%; padding: 10px; border-radius: 6px; margin-top: 10px; cursor: pointer; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.8rem; opacity: 0.8; }
@media (hover: hover) { .btn-trash:hover { background: #c0392b; opacity: 1; } }

.excel-input { width:100%; padding:8px; border:1px solid var(--border); background:var(--card-bg); color:var(--text-main); border-radius:4px; box-sizing:border-box; margin-bottom:5px; }
.excel-label { font-size:0.75rem; font-weight:bold; text-transform:uppercase; display:block; margin-bottom:3px; }
#kanban-search:focus { border-color: var(--process); outline: none; box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.2); }

.switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--status-ok); }
input:focus + .slider { box-shadow: 0 0 1px var(--status-ok); }
input:checked + .slider:before { transform: translateX(24px); }

.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; height: 100dvh; background-color: rgba(0,0,0,0.6); backdrop-filter: blur(3px); align-items: center; justify-content: center; padding-bottom: var(--safe-bottom); } 
.modal.active { display: flex; }
.modal-content { background: var(--card-bg); padding: 25px; border-radius: 12px; width: 90%; max-width: 400px; border: 1px solid var(--border); position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.2); max-height: 90dvh; overflow-y: auto; }
.close-modal { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: var(--text-sec); }
#modal-packing-config { z-index: 2100; }

#toast { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 30px; padding: 16px; position: fixed; z-index: 9999; left: 50%; bottom: calc(30px + var(--safe-bottom)); transform: translateX(-50%); font-size: 17px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
#toast.show { visibility: visible; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@keyframes fadein { from {bottom: 0; opacity: 0;} to {bottom: calc(30px + var(--safe-bottom)); opacity: 1;} }
@keyframes fadeout { from {bottom: calc(30px + var(--safe-bottom)); opacity: 1;} to {bottom: 0; opacity: 0;} }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }

.skeleton { background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 50%, rgba(190, 190, 190, 0.2) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: 4px; color: transparent !important; user-select: none; min-height: 1.5rem; display: inline-block; width: 80%; }
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =========================================
   4. MÓDULOS ESPECÍFICOS & DASHBOARD
   ========================================= */
.user-profile { padding:15px; font-size:0.85rem; border-top:1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.1); padding-bottom: calc(15px + var(--safe-bottom)); }
.xp-container { margin-bottom: 15px; padding: 5px; }
.xp-bar-bg { height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-top: 5px; overflow: hidden; }
.xp-bar-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.5s ease; box-shadow: 0 0 5px var(--accent); }
.rank-badge { background: var(--accent); padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; color: white; font-weight: bold; }
.profile-actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.action-btn-mini { cursor: pointer; height: 35px; border-radius: 6px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; border: none; color: white; transition: 0.2s; }
@media (hover: hover) { .action-btn-mini:hover { background: rgba(255,255,255,0.25); transform: translateY(-2px); } }
.btn-kiosco { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.btn-end { background: rgba(231, 76, 60, 0.3); color: #ffadad; }
.btn-cloud { background: rgba(52, 152, 219, 0.3); color: #85c1e9; }
.profile-mini-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); display: block; }

.dash-stat { text-align:center; padding:15px; border-top:4px solid; position: relative; }
.badge { padding:4px 10px; border-radius:15px; font-size:0.8rem; font-weight:bold; }
.dash-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; background: var(--light-hl); border-radius: 12px; text-decoration: none; color: var(--text-main); font-weight: bold; transition: 0.2s; border: 1px solid var(--border); cursor: pointer; }
@media (hover: hover) { .dash-btn:hover { transform:translateY(-2px); border-color:var(--accent); } }
.timer-display { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -1px; }
.timer-controls { display: flex; gap: 10px; justify-content: center; margin-top: 5px; }
.timer-btn { border: none; padding: 5px 12px; border-radius: 20px; cursor: pointer; font-size: 0.8rem; font-weight: bold; color: white; }
.t-start { background: #2ecc71; } .t-pause { background: #f1c40f; } .t-reset { background: #e74c3c; }
.batt-control { display:flex; align-items:center; justify-content:center; gap:15px; margin-top:5px; }
.batt-btn { background:var(--light-hl); border:1px solid var(--border); border-radius:50%; width:30px; height:30px; cursor:pointer; font-weight:bold; display:flex; align-items:center; justify-content:center; }
.batt-val { font-size:1.8rem; font-weight:800; color:var(--dronium); }

.printer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px; }
.printer-item { background: var(--light-hl); border: 1px solid var(--border); padding: 10px; border-radius: 8px; text-align: center; cursor: pointer; transition: 0.2s; color: var(--text-main); position:relative; overflow:hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 120px; }
@media (hover: hover) { .printer-item:hover { transform: translateY(-2px); } }
.printer-header { display: flex; justify-content: center; align-items: center; gap: 5px; margin-bottom: 5px; }
.printer-name { font-weight: bold; font-size: 0.95rem; display: block; }
.printer-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-free); display: inline-block; box-shadow: 0 0 5px var(--status-free); transition: 0.3s; flex-shrink: 0; }
.pr-details { font-size: 0.75rem; color: var(--text-sec); margin-bottom: 5px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.pr-state-text { font-weight: bold; text-transform: uppercase; font-size: 0.7rem; opacity: 0.8; margin-bottom: 4px; }
.pr-temps { display: flex; justify-content: center; gap: 8px; font-family: monospace; font-size: 0.8rem; background: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; margin: 4px auto; width: fit-content; }
.pr-file-info { font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: none; }
.pr-time-rem { font-weight: 800; font-size: 1.1rem; color: var(--accent); display: none; margin: 5px 0; }
.p-busy .printer-status-dot { background: var(--status-busy); box-shadow: 0 0 8px var(--status-busy); animation: pulse 1.5s infinite; } 
.p-busy { border-color: var(--status-busy); background: rgba(230, 126, 34, 0.05); }
.p-busy .pr-state-text { color: var(--status-busy); }
.p-error .printer-status-dot { background: var(--status-error); box-shadow: 0 0 5px var(--status-error); }
.p-error { border-color: var(--status-error); background: rgba(231, 76, 60, 0.1); }
.p-error .pr-state-text { color: var(--status-error); }
.printer-history-list { display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; }
.printer-history-item { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 10px; background:var(--light-hl); border:1px solid var(--border); border-radius:7px; font-size:0.78rem; }
.printer-history-item .ph-info { min-width:0; display:flex; flex-direction:column; }
.printer-history-item .ph-file { font-weight:700; color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.printer-history-item .ph-printer { color:var(--text-sec); font-size:0.68rem; }
.printer-history-item .ph-time { color:var(--text-sec); font-size:0.7rem; white-space:nowrap; flex-shrink:0; }
.printer-history-empty { text-align:center; color:var(--text-sec); font-size:0.78rem; padding:10px; }
.p-ok .printer-status-dot { background: var(--status-ok); box-shadow: 0 0 5px var(--status-ok); }
.p-ok { border-color: var(--status-ok); background: rgba(46, 204, 113, 0.05); }
.p-ok .pr-state-text { color: var(--status-ok); }
.pr-progress-bg { width: 100%; height: 6px; background: rgba(0,0,0,0.1); margin-top: auto; border-radius: 3px; overflow: hidden; display: none; }
.pr-progress-fill { height: 100%; background: var(--status-busy); width: 0%; transition: width 1s linear; }

.quick-notes { width: 100%; height: 100px; background: var(--light-hl); border: 1px solid var(--border); border-radius: 8px; padding: 10px; color: var(--text-main); font-family: inherit; resize: none; box-sizing: border-box; margin-top: 5px; }
.quick-notes:focus { outline: 2px solid var(--accent); border-color: transparent; }
.internal-notes-card { border-left: 4px solid var(--secondary); }
.internal-notes-card-header, .internal-notes-modal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.internal-notes-card-header h3, .internal-notes-modal-header h3 { margin:0; color:var(--text-main); }
.internal-notes-card-header h3 small { font-size:0.62rem; color:var(--text-sec); }
.internal-notes-card-header > div { display:flex; gap:5px; }
.internal-notes-card-header .btn-stock { padding:5px 9px; font-size:0.72rem; }
.internal-note-toolbar { display:grid; grid-template-columns:minmax(110px, 1fr) minmax(95px, 0.8fr) minmax(160px, auto); gap:8px; margin-top:8px; align-items:stretch; }
.internal-note-toolbar .excel-input { margin:0; min-width:0; }
.internal-note-save { min-height:40px; white-space:nowrap; padding:8px 12px; }
.internal-note-feed-tabs { display:flex; gap:7px; margin-top:10px; }
.internal-note-feed-tabs button { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; border:1px solid var(--border); border-radius:7px; background:var(--light-hl); color:var(--text-sec); font-weight:800; cursor:pointer; transition:0.2s; }
.internal-note-feed-tabs button.active { background:var(--secondary); border-color:var(--secondary); color:white; }
.internal-note-feed-tabs button span { min-width:20px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,0.18); font-size:0.7rem; }
.internal-note-feed-tabs button:not(.active) span { background:rgba(52,152,219,0.13); color:#2980b9; }
.internal-notes-feed { max-height:280px; overflow-y:auto; margin-top:8px; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--light-hl); }
.internal-note-card { background:var(--card-bg); border:1px solid var(--border); border-left:4px solid var(--secondary); border-radius:8px; padding:10px; margin-bottom:8px; box-shadow:0 2px 5px rgba(0,0,0,0.03); }
.internal-note-card:last-child { margin-bottom:0; }
.internal-note-card.urgent { border-left-color:#e74c3c; }
.internal-note-card.resolved { opacity:0.75; border-left-color:#2ecc71; }
.internal-note-card.deleted { opacity:0.7; border-left-color:#95a5a6; }
.internal-note-card-top, .internal-note-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.internal-note-meta { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.internal-note-badge, .internal-note-priority { display:inline-flex; align-items:center; border-radius:999px; padding:3px 8px; font-size:0.68rem; font-weight:800; line-height:1; }
.internal-note-badge { background:rgba(52,152,219,0.14); color:#2980b9; }
.internal-note-priority { background:rgba(149,165,166,0.14); color:var(--text-sec); }
.internal-note-priority.urgent { background:rgba(231,76,60,0.15); color:#e74c3c; }
.internal-note-text { margin:8px 0; color:var(--text-main); line-height:1.35; white-space:pre-wrap; overflow-wrap:anywhere; }
.internal-note-author { color:var(--text-sec); font-size:0.72rem; }
.internal-note-actions { display:flex; gap:5px; flex-shrink:0; }
.internal-note-actions button { display:inline-flex; align-items:center; gap:5px; border:0; border-radius:5px; padding:5px 8px; cursor:pointer; color:white; }
.internal-note-actions button span { font-size:0.7rem; font-weight:800; }
.internal-note-actions .resolve { background:#2ecc71; }
.internal-note-actions .reopen, .internal-note-actions .restore { background:#3498db; }
.internal-note-actions .trash, .internal-note-actions .purge { background:#e74c3c; }
.internal-note-empty { padding:16px; text-align:center; color:var(--text-sec); font-style:italic; }
.internal-notes-modal { max-width:720px; height:80vh; display:flex; flex-direction:column; }
.internal-notes-modal-header { margin-bottom:12px; }
.internal-notes-modal-header small { color:var(--text-sec); }
.internal-note-filters { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:10px; }
.internal-note-filters .btn-stock.active { background:var(--secondary); color:white; border-color:var(--secondary); }
.internal-notes-history-list { flex:1; overflow-y:auto; border:1px solid var(--border); border-radius:8px; padding:10px; background:var(--light-hl); }
@media (max-width: 700px) {
    .internal-note-toolbar { grid-template-columns:1fr 1fr; }
    .internal-note-save { grid-column:1 / -1; }
    .internal-note-card-bottom { align-items:flex-end; }
}
.ext-link { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; background: var(--light-hl); border-radius: 8px; text-decoration: none; color: var(--text-sec); font-size: 0.75rem; border: 1px solid transparent; transition: 0.2s; }
@media (hover: hover) { .ext-link:hover { background: var(--card-bg); border-color: var(--border); color: var(--text-main); transform: translateY(-2px); } }
.ext-link i { font-size: 1.2rem; margin-bottom: 5px; color: var(--accent); }

/* CALCULADORA */
.calc-section-orange { background:rgba(255,248,225,0.8); border:1px solid #ffeeba; padding:15px; border-radius:8px; margin-bottom:15px; color: #e67e22; }
.calc-section-blue { background:rgba(227,242,253,0.8); border:1px solid #b3e5fc; padding:15px; border-radius:8px; margin-bottom:15px; color: #0984e3; }
.calc-section-laser { background: rgba(231, 76, 60, 0.08); border: 1px solid #e74c3c; padding: 15px; border-radius: 8px; margin-bottom: 15px; color: #c0392b; position: relative; }
.calc-service-selector { background: rgba(142,68,173,0.08); border: 1px solid rgba(142,68,173,0.35); padding: 12px; border-radius: 8px; margin-bottom: 15px; }
.calc-service-selector small { display:block; margin-top:6px; }
.service-mode-hidden { display:none !important; }
.box-adapt-orange { background:rgba(255,248,225,0.8); border:1px solid #ffeeba; padding:15px; border-radius:8px; color:var(--accent); margin-top:10px; }
.box-adapt-blue { background: rgba(227, 242, 253, 0.8); border: 1px solid #b3e5fc; padding: 15px; border-radius: 8px; margin-top: 15px; color: var(--dronium); }
.comp-row { display:flex; gap:5px; margin-bottom:5px; }
.excel-total { text-align:center; padding:20px; background:var(--light-hl); border-radius:10px; border:1px solid var(--border); margin-top:20px; }
.preset-btn { border:1px solid var(--border); padding:4px 8px; border-radius:4px; font-size:0.75rem; cursor:pointer; background:var(--light-hl); transition:0.2s; white-space:nowrap; }
@media (hover: hover) { .preset-btn:hover { background:var(--accent); color:white; border-color:var(--accent); } }

/* Estilos de botones Dronium Budgets añadidos para mejor experiencia */
.saved-budget-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--light-hl); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: 0.2s; }
@media (hover: hover) { .saved-budget-item:hover { background: var(--card-bg); border-color: var(--accent); transform: translateX(5px); } }

.budget-actions button { transition: transform 0.2s, opacity 0.2s; opacity: 0.8; }
@media (hover: hover) { .budget-actions button:hover { transform: scale(1.2); opacity: 1; } }

/* =========================================
   KANBAN & CRM (RESTAURADO)
   ========================================= */
.kanban-board { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-top: 15px; transition: opacity 0.3s ease; }
.kanban-col { background: var(--light-hl); border-radius: 8px; padding: 10px; min-height: 200px; border: 1px solid var(--border); transition: background 0.3s, border 0.3s; }
.kanban-col h4 { text-align: center; margin: 0 0 10px 0; font-size: 0.9rem; text-transform: uppercase; border-bottom: 2px solid var(--border); padding-bottom: 5px; color: var(--text-sec); }
.kanban-card { background: var(--card-bg); padding: 10px; border-radius: 6px; margin-bottom: 8px; border: 1px solid var(--border); cursor: pointer; font-size: 0.85rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: 0.2s; position: relative; user-select: none; }
@media (hover: hover) { .kanban-card:hover { transform: translateY(-2px); border-color: var(--accent); } }
.kb-todo .kanban-card { border-left: 3px solid #f1c40f; } .kb-prog .kanban-card { border-left: 3px solid #0984e3; } .kb-done .kanban-card { border-left: 3px solid #2ecc71; opacity: 0.8; text-decoration: line-through; }
.subtask-indicator { font-size: 0.7rem; color: #0984e3; margin-top: 4px; display: block; font-weight: bold; }
.kanban-card.priority-high { border-left: 4px solid #e74c3c !important; background: linear-gradient(90deg, rgba(231, 76, 60, 0.05) 0%, rgba(255,255,255,0) 100%); }
.priority-icon { color: #e74c3c; animation: firePulse 1.5s infinite; margin-right: 5px; display: inline-block; }
@keyframes firePulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } }

/* DRAG & DROP KANBAN / MAGIC DROP */
.kanban-card.dragging { opacity: 0.5; border: 2px dashed var(--accent); transform: scale(0.95); }
.kanban-col.drag-over { background: rgba(46, 204, 113, 0.1); border: 2px dashed var(--status-ok); }
#calc-drop-zone.drag-active { border: 2px dashed var(--status-ok) !important; transform: scale(1.02); box-shadow: 0 10px 25px rgba(46, 204, 113, 0.2); }
#calc-drop-zone.drag-active #calc-drop-overlay { display: flex !important; animation: pulse 1.5s infinite; }

/* MISC TAREAS */
.timeline-box { scrollbar-width: thin; }
.timeline-box .fa-trash { transition: 0.2s; }
.timeline-box .fa-trash:hover { opacity: 1 !important; transform: scale(1.2); }
.action-bar { display: flex; gap: 10px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.action-bar::-webkit-scrollbar { display: none; }

/* CRM MODAL COMPONENTS */
.crm-tabs { display: flex; gap: 10px; border-bottom: 2px solid var(--border); margin-bottom: 15px; }
.crm-tab-btn { padding: 10px 15px; background: transparent; border: none; color: var(--text-sec); cursor: pointer; font-weight: bold; border-bottom: 3px solid transparent; transition: 0.2s; }
.crm-tab-btn.active { color: var(--process); border-bottom-color: var(--process); }
.crm-panel { display: none; animation: fadeIn 0.3s; }
.crm-panel.active { display: block; }
.crm-status-bar { display: flex; gap: 5px; margin-top: 20px; background: var(--light-hl); padding: 5px; border-radius: 30px; border: 1px solid var(--border); }
.crm-st-btn { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 20px; cursor: pointer; font-size: 0.8rem; font-weight: bold; color: var(--text-sec); transition: 0.2s; text-align: center; }
@media (hover: hover) { .crm-st-btn:hover { background: rgba(0,0,0,0.05); } }
.crm-st-btn.active-0 { background: #f1c40f; color: white; box-shadow: 0 2px 5px rgba(241, 196, 15, 0.4); } 
.crm-st-btn.active-1 { background: #3498db; color: white; box-shadow: 0 2px 5px rgba(52, 152, 219, 0.4); } 
.crm-st-btn.active-2 { background: #2ecc71; color: white; box-shadow: 0 2px 5px rgba(46, 204, 113, 0.4); } 
.crm-st-btn.active-3 { background: #27ae60; color: white; box-shadow: 0 2px 5px rgba(39, 174, 96, 0.4); } 

.team-avatars { display: flex; gap: 15px; justify-content: center; margin-bottom: 15px; }
.avatar-group { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: 0.2s; opacity: 0.6; }
@media (hover: hover) { .avatar-group:hover { opacity: 1; transform: translateY(-2px); } }
.avatar-group.selected { opacity: 1; transform: scale(1.05); }
.avatar-btn { width: 50px; height: 50px; border-radius: 50%; border: 3px solid var(--border); overflow: hidden; background: var(--light-hl); padding: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: 0.2s; }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-name { font-size: 0.75rem; color: var(--text-sec); font-weight: bold; margin-top: 5px; transition: 0.2s; }
.avatar-group.selected .avatar-btn { border-color: var(--process); box-shadow: 0 0 10px rgba(142, 68, 173, 0.4); }
.avatar-group.selected .avatar-name { color: var(--process); }

.task-list { margin-top: 15px; max-height: 200px; overflow-y: auto; }
.task-row { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); gap: 10px; background: var(--card-bg); margin-bottom: 5px; border-radius: 6px; }
.task-row.done span { text-decoration: line-through; opacity: 0.6; }
.task-user-badge { font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; background: var(--process); color: white; text-transform: uppercase; margin-top:3px; display:inline-block; }

/* DRONIUM INTERNAL TABS */
.dronium-panel { display: none; animation: fadeIn 0.3s; }
.dronium-panel.active { display: block; }

/* SMART SUGGESTIONS */
.smart-suggestions { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; margin-bottom: 15px; scrollbar-width: none; -ms-overflow-style: none; }
.smart-suggestions::-webkit-scrollbar { display: none; }

/* DASHBOARDS FINANZAS */
.finance-card { padding: 20px; border-radius: 12px; color: white; text-align: center; position: relative; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.fin-green { background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%); }
.fin-red { background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%); }
.fin-blue { background: linear-gradient(135deg, #2980b9 0%, #3498db 100%); }
.fin-val { font-size: 1.8rem; font-weight: 800; margin: 10px 0; }
.fin-label { font-size: 0.8rem; text-transform: uppercase; opacity: 0.9; letter-spacing: 1px; }
.chart-container { position: relative; height: 250px; width: 100%; display: flex; align-items: center; justify-content: center; }
.holded-link { text-decoration: none; padding: 15px; background: var(--light-hl); border-radius: 10px; font-size: 0.95rem; color: var(--text-main); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; text-align: center; height: 80px; }
@media (hover: hover) { .holded-link:hover { background: var(--card-bg); border-color: var(--holded); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.08); } }
.holded-link i { font-size: 1.5rem; }
.invoice-list-container { display: flex; flex-direction: column; gap: 10px; max-height: 400px; overflow-y: auto; padding-right: 5px; }
.invoice-card { display: flex; align-items: center; justify-content: space-between; background: var(--light-hl); border: 1px solid var(--border); border-radius: 8px; padding: 12px 15px; transition: 0.2s; cursor: default; }
@media (hover: hover) { .invoice-card:hover { transform: translateX(3px); border-color: var(--holded); } }
.inv-left { display: flex; align-items: center; gap: 12px; }
.inv-icon { width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: white; flex-shrink: 0; }
.inv-icon.paid { background: #2ecc71; } .inv-icon.pending { background: #f1c40f; } .inv-icon.overdue { background: #e74c3c; }
.inv-info { display: flex; flex-direction: column; }
.inv-client { font-weight: bold; font-size: 0.9rem; color: var(--text-main); }
.inv-date { font-size: 0.75rem; color: var(--text-sec); }
.inv-right { text-align: right; }
.inv-amount { font-weight: 800; font-size: 1rem; color: var(--text-main); }
.inv-status { font-size: 0.7rem; font-weight: bold; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.st-paid { color: #2ecc71; background: rgba(46, 204, 113, 0.1); } .st-pending { color: #f39c12; background: rgba(241, 196, 15, 0.1); } .st-overdue { color: #e74c3c; background: rgba(231, 76, 60, 0.1); }

#tactical-map { z-index: 1; background: #2d3436; }
.drone-card { background: linear-gradient(135deg, #2d3436 0%, #0984e3 100%); color: white; }
.drone-card.avata { background: linear-gradient(135deg, #2d3436 0%, #e84393 100%); }
.drone-card.avata-360 { background: linear-gradient(135deg, #2d3436 0%, #6c5ce7 100%); }
.drone-card.camera { background: linear-gradient(135deg, #2d3436 0%, #d35400 100%); }
.dronium-calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--light-hl);
    color: var(--text-sec);
    font-size: 0.78rem;
}
.dronium-calendar-toolbar i { color: var(--dronium); }
.dronium-calendar-toolbar button {
    border: 1px solid var(--dronium);
    border-radius: 6px;
    background: transparent;
    color: var(--dronium);
    padding: 5px 9px;
    font-weight: 700;
    cursor: pointer;
}
.dronium-calendar-toolbar button:hover { background: rgba(9, 132, 227, 0.10); }
.step-box { background: var(--light-hl); border-radius: 8px; padding: 12px; margin-bottom: 8px; border-left: 4px solid #b2bec3; }
.golden-rule { text-align: center; padding: 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--light-hl); margin-bottom: 10px; }
.leg-box { background: var(--light-hl); border-left: 4px solid var(--dronium); padding: 12px; margin-bottom: 10px; font-size: 0.9rem; }
.live-status { display: inline-block; width: 10px; height: 10px; background: #00b894; border-radius: 50%; margin-right: 5px; animation: pulse 2s infinite; }
.file-link { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--light-hl); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text-main); font-size: 0.9rem; margin-bottom: 8px; }
.checklist-item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); }
.log-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size:0.9rem; }
.log-table th { text-align: left; border-bottom: 2px solid var(--border); padding: 5px; color:var(--text-sec); }
.log-table td { border-bottom: 1px solid var(--border); padding: 5px; }

.shopping-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.shopping-item { background: var(--light-hl); padding: 10px 15px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--inventory); box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid var(--border); }
.shopping-item.bought { opacity: 0.6; text-decoration: line-through; border-left-color: #b2bec3; }
.shopping-actions { display: flex; gap: 5px; }
.btn-check { background:var(--inventory); color:white; border:none; padding:5px 10px; border-radius:4px; cursor:pointer; }
.btn-trash-list { background:#e74c3c; color:white; border:none; padding:5px 10px; border-radius:4px; cursor:pointer; }
.stock-title { font-size: 0.9rem; text-transform: uppercase; color: var(--text-sec); font-weight: bold; margin-bottom: 10px; border-bottom: 1px dashed var(--border); padding-bottom: 5px; display: block; }
.stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.stock-item { background: var(--light-hl); border: 1px solid var(--border); border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; transition: 0.2s; position: relative; overflow: hidden; }
@media (hover: hover) { .stock-item:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } }
.stock-item.low { border-color: var(--status-low); background: rgba(241, 196, 15, 0.1); }
.stock-item.out { border-color: var(--status-out); background: rgba(231, 76, 60, 0.1); opacity: 0.7; }
.stock-color-dot { width: 15px; height: 15px; border-radius: 50%; display: inline-block; margin-bottom: 5px; border: 1px solid rgba(0,0,0,0.1); }
.stock-name { display: block; font-weight: bold; font-size: 0.85rem; margin-bottom: 5px; }
.stock-qty { font-size: 1.2rem; font-weight: 800; color: var(--text-main); }
.stock-controls { display: flex; justify-content: center; gap: 5px; margin-top: 5px; opacity: 0.2; transition: 0.2s; }
@media (hover: hover) { .stock-item:hover .stock-controls { opacity: 1; } }
@media (hover: none) { .stock-controls { opacity: 1; } }

.st-btn { width: 25px; height: 25px; border-radius: 50%; border: none; cursor: pointer; font-weight: bold; color: white; display: flex; align-items: center; justify-content: center; }
.st-plus { background: var(--dronium); } .st-minus { background: var(--text-sec); }

.extra-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.extra-item { background: var(--light-hl); padding: 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; border-left: 4px solid var(--extra); box-shadow: 0 2px 5px rgba(0,0,0,0.03); border: 1px solid var(--border); transition: 0.2s; }
.extra-item.urgent { border-left-color: #e74c3c; background: rgba(231, 76, 60, 0.05); }
.extra-actions { display: flex; gap: 5px; }
.btn-extra-buy { background: var(--extra); color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 0.8rem; }
.link-badge { background: #3498db; color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; text-decoration: none; margin-left: 5px; }
.link-badge:hover { background: #2980b9; }

/* NUEVOS ESTILOS CENTRO DE COMPRAS */
.purchase-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    border-left: 4px solid #3498db;
    transition: 0.2s;
}
.purchase-card.urgent {
    border-left-color: #e74c3c;
    background: rgba(231, 76, 60, 0.02);
}
.purchase-card.history {
    border-left-color: #2ecc71;
}
.purchase-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
}
.purchase-invoices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}
.purchase-invoice-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--light-hl);
}
.purchase-invoice-name {
    min-width: 0;
    overflow: hidden;
text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    font-weight: bold;
}
.purchase-empty-state {
    text-align: center;
    color: var(--text-sec);
    padding: 24px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}
@media (hover: hover) {
    .purchase-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
}
.pur-panel {
    scrollbar-width: thin;
}
.pur-panel::-webkit-scrollbar {
    width: 6px;
}
.pur-panel::-webkit-scrollbar-track {
    background: transparent;
}
.pur-panel::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: 3px;
}
.nas-invoice-tab-count { display:inline-flex; min-width:18px; justify-content:center; padding:1px 5px; border-radius:999px; background:#e74c3c; color:white; font-size:0.65rem; }
.nas-invoice-panel { min-height:420px; overflow:hidden; }
.nas-invoice-service-row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.nas-invoice-service-actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.nas-invoice-service-actions a { text-decoration:none; }
.nas-invoice-service-status { display:inline-flex; align-items:center; gap:6px; font-size:0.78rem; font-weight:800; padding:6px 9px; border-radius:999px; }
.nas-invoice-service-status.checking { color:#e67e22; background:rgba(230,126,34,0.12); }
.nas-invoice-service-status.online { color:#27ae60; background:rgba(39,174,96,0.12); }
.nas-invoice-service-status.offline { color:#e74c3c; background:rgba(231,76,60,0.12); }
.nas-invoice-upload-button { width:auto; margin:0; padding:8px 12px; background:#27ae60; cursor:pointer; }
.nas-invoice-drop-zone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:105px; border:2px dashed #27ae60; border-radius:10px; background:rgba(39,174,96,0.06); color:var(--text-sec); cursor:pointer; transition:0.2s; text-align:center; padding:14px; }
.nas-invoice-drop-zone i { color:#27ae60; font-size:1.65rem; }
.nas-invoice-drop-zone strong { color:var(--text-main); }
.nas-invoice-drop-zone.dragging { background:rgba(39,174,96,0.16); transform:scale(1.01); }
.nas-invoice-toolbar { display:grid; grid-template-columns:minmax(180px,1fr) minmax(110px,auto) auto auto; gap:7px; align-items:center; }
.nas-invoice-toolbar .excel-input { margin:0; }
.nas-invoice-search { display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid var(--border); border-radius:7px; background:var(--light-hl); }
.nas-invoice-search input { width:100%; padding:9px 0; border:0; outline:0; color:var(--text-main); background:transparent; }
.nas-invoice-active-filter { padding:7px 10px; border-radius:7px; background:rgba(52,152,219,0.1); color:#2980b9; font-size:0.75rem; }
.nas-invoice-list { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.nas-invoice-card { border:1px solid var(--border); border-left:4px solid #27ae60; background:var(--card-bg); border-radius:8px; padding:11px; }
.nas-invoice-card.review { border-left-color:#f39c12; }
.nas-invoice-card.deleted { border-left-color:#95a5a6; opacity:0.72; }
.nas-invoice-card-head, .nas-invoice-card-foot { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.nas-invoice-card-provider { font-weight:900; color:var(--text-main); overflow-wrap:anywhere; }
.nas-invoice-card-meta { color:var(--text-sec); font-size:0.72rem; margin-top:3px; }
.nas-invoice-card-items { margin:8px 0; color:var(--text-main); font-size:0.82rem; line-height:1.35; }
.nas-invoice-card-total { font-weight:900; color:#27ae60; white-space:nowrap; }
.nas-invoice-card-actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.nas-invoice-status-badge { display:inline-flex; padding:3px 7px; border-radius:999px; font-size:0.65rem; font-weight:900; }
.nas-invoice-status-badge.review { color:#d35400; background:rgba(243,156,18,0.14); }
.nas-invoice-status-badge.confirmed { color:#1e8449; background:rgba(39,174,96,0.14); }
.nas-invoice-status-badge.deleted { color:#7f8c8d; background:rgba(149,165,166,0.16); }
.nas-invoice-review-modal { max-width:720px; max-height:90vh; overflow-y:auto; border-top:5px solid #27ae60; }
.nas-invoice-amounts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.nas-invoice-review-source { margin-bottom:12px; padding:9px 11px; border:1px solid var(--border); border-radius:7px; background:var(--light-hl); color:var(--text-sec); font-size:0.78rem; overflow-wrap:anywhere; }
.nas-invoice-confidence { padding:10px; border-radius:7px; background:rgba(52,152,219,0.08); color:var(--text-sec); font-size:0.76rem; margin-top:6px; }
.nas-invoice-review-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
@media (max-width:700px) {
    .nas-invoice-toolbar { grid-template-columns:1fr 1fr; }
    .nas-invoice-search { grid-column:1 / -1; }
    .nas-invoice-card-head, .nas-invoice-card-foot { flex-direction:column; }
    .nas-invoice-card-actions { justify-content:flex-start; }
    .nas-invoice-review-actions { flex-direction:column-reverse; }
    .nas-invoice-amounts { grid-template-columns:1fr; gap:0; }
}

.gallery-filter-btn { padding: 6px 15px; border: 1px solid var(--border); border-radius: 20px; background: var(--card-bg); color: var(--text-main); cursor: pointer; font-size: 0.85rem; margin-right:5px; margin-bottom:5px; white-space: nowrap; }
.gallery-filter-btn.active { background: var(--gallery); color: white; border-color: var(--gallery); }
.gallery-item { position: relative; border-radius: 8px; overflow: hidden; height: 200px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); cursor:pointer; background: #eee; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
@media (hover: hover) { .gallery-item:hover img { transform: scale(1.05); } }
.gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: white; padding: 10px; }
#gallery-modal .modal-content { max-width: 90%; width: auto; background: transparent; border: none; box-shadow: none; display: flex; flex-direction: column; align-items: center; }
#modal-img-display { max-width: 100%; max-height: 80vh; border-radius: 8px; box-shadow: 0 5px 30px rgba(0,0,0,0.8); }
.gallery-actions { display: flex; gap: 15px; margin-top: 20px; }
.gallery-action-btn { padding: 10px 25px; border-radius: 30px; font-weight: bold; text-decoration: none; border: none; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 8px; }
.btn-download { background: white; color: var(--primary); }
@media (hover: hover) { .btn-download:hover { background: #f1f2f6; transform: translateY(-2px); } }
.btn-close-gallery { background: rgba(255,255,255,0.2); color: white; border: 1px solid white; backdrop-filter: blur(5px); }
.btn-close-gallery:hover { background: rgba(255,255,255,0.4); }
.gallery-heading-row { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; }
.gallery-heading-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.gallery-heading-actions .danger { color:#ff7675; border-color:rgba(214,48,49,.5); }
.gallery-filter-row { display:flex; gap:6px; margin-bottom:14px; overflow-x:auto; padding:2px 0 7px; scroll-behavior:smooth; }
.gallery-filters-highlight { animation: gallery-filters-pulse 1.6s ease; border-radius:20px; }
@keyframes gallery-filters-pulse {
    0%, 100% { box-shadow: none; }
    15%, 55% { box-shadow: 0 0 0 3px rgba(9,132,227,.55); }
}
.btn-tactical-disabled { opacity:.45; }
.gallery-toolbar { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.gallery-search-wrap { position:relative; flex:1; }
.gallery-search-wrap i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-sec); pointer-events:none; }
.gallery-search-wrap input { width:100%; box-sizing:border-box; padding:10px 12px 10px 36px; border:1px solid var(--border); border-radius:8px; background:var(--input-bg); color:var(--text-main); }
.gallery-upload-panel { display:grid; grid-template-columns:minmax(180px,1fr) minmax(220px,1.2fr) auto; gap:12px; align-items:end; padding:14px; border:1px solid rgba(9,132,227,.35); background:rgba(9,132,227,.08); border-radius:10px 10px 0 0; }
.gallery-upload-panel > div { display:flex; flex-direction:column; gap:4px; }
.gallery-upload-panel small { color:var(--text-sec); }
.gallery-upload-panel label { display:flex; flex-direction:column; gap:5px; font-size:.78rem; font-weight:700; color:var(--text-sec); text-transform:uppercase; }
.gallery-upload-panel input { padding:9px 10px; border:1px solid var(--border); border-radius:7px; background:var(--input-bg); color:var(--text-main); text-transform:none; }
.gallery-drop-zone { border:2px dashed rgba(9,132,227,.55); border-top:0; border-radius:0 0 10px 10px; min-height:78px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; color:var(--text-sec); transition:.2s; }
.gallery-drop-zone > i { color:var(--gallery); font-size:1.35rem; }
.gallery-drop-zone.dragging { background:rgba(0,184,148,.12); border-color:#00b894; transform:scale(.995); }
.gallery-item { border:1px solid var(--border); }
.gallery-item .gallery-overlay { display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.gallery-item .gallery-overlay small { opacity:.78; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-item .gallery-card-trash { position:absolute; right:8px; top:8px; width:31px; height:31px; border-radius:50%; border:0; background:rgba(214,48,49,.9); color:#fff; cursor:pointer; opacity:0; transition:.2s; }
.gallery-item:hover .gallery-card-trash, .gallery-card-trash:focus { opacity:1; }
.gallery-loading, .gallery-empty { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-sec); text-align:center; }
.gallery-empty[hidden] { display:none; }
.gallery-empty i { font-size:2rem; opacity:.55; }
.gallery-footnote { text-align:center; margin-top:20px; color:var(--text-sec); font-size:.8rem; }
.client-mode .gallery-admin-controls { display:none !important; }
@media (max-width:780px) {
    .gallery-heading-row, .gallery-toolbar { align-items:stretch; flex-direction:column; }
    .gallery-heading-actions { justify-content:flex-start; }
    .gallery-upload-panel { grid-template-columns:1fr; align-items:stretch; }
    .gallery-actions { flex-wrap:wrap; justify-content:center; }
    .gallery-item .gallery-card-trash { opacity:1; }
}

.qr-container { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; background:white; border-radius:8px; width:fit-content; margin:0 auto; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
#qrcode img { display:block; }
.qr-preset { padding:8px 15px; border:1px solid var(--border); border-radius:20px; cursor:pointer; font-size:0.85rem; margin:3px; display:inline-block; transition:0.2s; background:var(--card-bg); color:var(--text-main); }
@media (hover: hover) { .qr-preset:hover { transform:translateY(-2px); } }

/* PDF Hidden */
#invoice-template, #dronium-invoice-template { position: fixed; left: -9999px; top: 0; width: 210mm; min-height: 297mm; background: white; color: #2c3e50; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; z-index: 99999; }
.pdf-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e67e22; padding-bottom: 20px; margin-bottom: 30px; }
.pdf-logo img { height: 60px; }
.pdf-title { text-align: right; }
.pdf-title h1 { margin: 0; font-size: 2.5rem; color: #2c3e50; text-transform: uppercase; letter-spacing: 2px; }
.pdf-title span { font-size: 1rem; color: #7f8c8d; }
.pdf-info-grid { display: flex; justify-content: space-between; margin-bottom: 40px; }
.pdf-box { width: 45%; }
.pdf-box h3 { font-size: 0.9rem; color: #95a5a6; text-transform: uppercase; border-bottom: 1px solid #eee; padding-bottom: 5px; margin-bottom: 10px; }
.pdf-box p { margin: 2px 0; font-size: 0.95rem; font-weight: bold; }
.pdf-box small { font-weight: normal; color: #7f8c8d; }
.pdf-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.pdf-table th { background: #2c3e50; color: white; padding: 12px; text-align: left; font-size: 0.85rem; text-transform: uppercase; }
.pdf-table td { padding: 12px; border-bottom: 1px solid #bdc3c7; color: #2c3e50; font-size: 0.9rem; }
.pdf-table tr:nth-child(even) { background: #f9f9f9; }
.pdf-total-section { display: flex; justify-content: flex-end; margin-top: 10px; }
.pdf-total-box { width: 40%; background: #f1f2f6; padding: 20px; border-radius: 8px; text-align: right; }
.pdf-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.9rem; }
.pdf-row.final { font-size: 1.4rem; font-weight: 800; color: #e67e22; border-top: 2px solid #ccc; padding-top: 10px; margin-top: 10px; }
.pdf-footer { text-align: center; font-size: 0.7rem; color: #95a5a6; border-top: 1px solid #eee; padding-top: 20px; margin-top: auto; }
.pdf-watermark { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 8rem; color: rgba(0,0,0,0.03); font-weight: 900; z-index: -1; pointer-events: none; }

.maint-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; background: var(--light-hl); border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.maint-date { font-weight: bold; font-size: 0.85rem; } 
.maint-bar-container { width: 100%; height: 8px; background: rgba(0,0,0,0.05); border-radius: 4px; overflow: hidden; margin-top: 5px; position: relative; }
.maint-bar-fill { height: 100%; background: var(--status-ok); width: 0%; transition: width 0.5s, background-color 0.5s; }
.maint-bar-fill.warning { background: var(--status-low); }
.maint-bar-fill.critical { background: var(--status-out); }

.printer-select-btn { padding: 20px; background: var(--light-hl); border: 2px solid var(--border); border-radius: 8px; cursor: pointer; text-align: center; font-weight: bold; transition: 0.2s; color: var(--text-main); }
@media (hover: hover) { .printer-select-btn:hover { border-color: var(--accent); background: var(--card-bg); transform: scale(1.02); } }
.printer-select-btn i { font-size: 1.5rem; display: block; margin-bottom: 5px; color: var(--text-sec); }

.xp-history-item { display: flex; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--border); align-items: center; }
.xp-medal { font-size: 1.2rem; margin-right: 10px; }

/* SCANNER UI */
#reader video { width: 100% !important; height: auto !important; border-radius: 8px; }
#reader { border: 1px solid var(--border); overflow: hidden; }

/* =========================================
   17. SMART SCAN & CHAT BOTS
   ========================================= */
.scan-float-btn { position: fixed; bottom: calc(20px + var(--safe-bottom)); right: 95px; width: 60px; height: 60px; border-radius: 50%; background: #2c3e50; border: 2px solid #2ecc71; box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3); z-index: 9998; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #2ecc71; transition: 0.3s; }
@media (hover: hover) { .scan-float-btn:hover { transform: scale(1.1); background: #2ecc71; color: white; box-shadow: 0 0 15px #2ecc71; } }
body.tactical-mode .scan-float-btn { border-color: #ff0000; color: #ff0000; box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3); }

.chat-float-btn { position: fixed; bottom: calc(20px + var(--safe-bottom)); right: 20px; width: 60px; height: 60px; border-radius: 50%; background: #2c3e50; border: 2px solid #00d2d3; box-shadow: 0 4px 15px rgba(0,0,0,0.3); z-index: 9999; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: 0.3s; }
@media (hover: hover) { .chat-float-btn:hover { transform: scale(1.1); box-shadow: 0 0 15px #00d2d3; } }
.chat-float-btn img { width: 100%; height: 100%; object-fit: cover; }
.chat-window { display: none; position: fixed; bottom: calc(90px + var(--safe-bottom)); right: 20px; width: 350px; height: 500px; background: var(--card-bg); border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.3); z-index: 9999; flex-direction: column; border: 1px solid var(--border); overflow: hidden; max-height: 60vh; }
.chat-window.active { display: flex; animation: slideIn 0.3s; }
.chat-header { background: #2c3e50; color: white; padding: 15px; display: flex; justify-content: space-between; align-items: center; font-weight: bold; border-bottom: 2px solid #00d2d3; }
.chat-body { flex: 1; padding: 15px; overflow-y: auto; background: var(--bg); display: flex; flex-direction: column; gap: 10px; }
.chat-footer { padding: 10px; background: var(--card-bg); border-top: 1px solid var(--border); display: flex; gap: 5px; }
.chat-msg { max-width: 80%; padding: 10px 15px; border-radius: 15px; font-size: 0.9rem; line-height: 1.4; word-wrap: break-word; }
.msg-user { align-self: flex-end; background: var(--dronium); color: white; border-bottom-right-radius: 2px; }
.msg-droni { align-self: flex-start; background: var(--light-hl); color: var(--text-main); border: 1px solid var(--border); border-bottom-left-radius: 2px; }
@keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   18. ASISTENTE SALITR3 · FASE 1
   ========================================= */
.assistant-float-btn {
    color: #00d2d3;
    font-size: 1.45rem;
    overflow: visible;
}
.assistant-float-status {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 13px;
    height: 13px;
    border: 2px solid #2c3e50;
    border-radius: 50%;
    background: #f39c12;
}
.assistant-float-status.online { background: #2ecc71; }
.assistant-float-status.offline { background: #e74c3c; }
.assistant-float-status.checking { background: #f39c12; animation: assistantPulse 1.2s infinite; }
.assistant-chat-window { height: min(560px, calc(100vh - 125px)); max-height: 70vh; }
.assistant-chat-window .chat-header > div { display: flex; flex-direction: column; gap: 3px; }
.assistant-service-status { display: block; font-size: 0.68rem; font-weight: 500; color: #f1c40f; }
.assistant-service-status.online { color: #2ecc71; }
.assistant-service-status.offline { color: #ff7675; }
.assistant-close-button {
    border: 0;
    background: transparent;
    color: white;
    font-size: 1.6rem;
    cursor: pointer;
    line-height: 1;
}
.assistant-readonly-banner {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(52, 152, 219, 0.25);
    background: rgba(52, 152, 219, 0.10);
    color: var(--text-sec);
    font-size: 0.73rem;
}
.assistant-input { flex: 1; margin: 0; min-width: 0; }
.assistant-mic-button,
.assistant-send-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: white;
}
.assistant-mic-button { background: #636e72; }
.assistant-mic-button.listening { background: #e74c3c; animation: assistantPulse 1s infinite; }
.assistant-send-button { background: #0984e3; }
.assistant-send-button:disabled { opacity: 0.55; cursor: wait; }
.chat-loading {
    align-self: flex-start;
    padding: 9px 12px;
    border-radius: 12px;
    color: var(--text-sec);
    background: var(--light-hl);
    font-size: 0.8rem;
}
@keyframes assistantPulse { 50% { opacity: 0.45; transform: scale(0.9); } }
/* =========================================
   19. PETS MODULE (FIREBASE)
   ========================================= */
.pet-toolbar { display:flex; gap:10px; margin-bottom:15px; background:var(--light-hl); padding:10px; border-radius:8px; border:1px solid var(--border); }
.pet-search-box { flex:1; position:relative; }
.pet-search-input { width:100%; padding:10px 10px 10px 35px; border-radius:20px; border:1px solid var(--border); background:var(--card-bg); color:var(--text-main); }
.pet-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-sec); }
.pet-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:15px; }
.pet-card { display:flex; gap:15px; background:var(--card-bg); padding:15px; border-radius:12px; border:1px solid var(--border); transition:0.2s; position:relative; overflow:hidden; }
.pet-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 5px 15px rgba(0,0,0,0.05); }
.pet-img-box { width:70px; height:70px; border-radius:50%; overflow:hidden; border:2px solid var(--border); flex-shrink:0; background:#eee; }
.pet-img-box img { width:100%; height:100%; object-fit:cover; }
.pet-info { flex:1; display:flex; flex-direction:column; justify-content:center; }
.pet-name { font-weight:800; font-size:1.1rem; color:var(--text-main); margin-bottom:2px; }
.pet-owner { font-size:0.85rem; color:var(--text-sec); display:flex; align-items:center; gap:5px; }
.pet-code { position:absolute; top:10px; right:10px; background:var(--light-hl); padding:2px 8px; border-radius:4px; font-family:monospace; font-size:0.75rem; border:1px solid var(--border); color:var(--text-sec); }
.pet-status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:5px; }
.pet-active { background:#2ecc71; box-shadow:0 0 5px #2ecc71; }
.pet-expired { background:#e74c3c; box-shadow:0 0 5px #e74c3c; }
.pet-actions { margin-top:10px; display:flex; gap:5px; }
.btn-pet-action { flex:1; padding:5px; border-radius:4px; border:1px solid var(--border); background:transparent; cursor:pointer; color:var(--text-sec); font-size:0.8rem; transition:0.2s; }
.btn-pet-action:hover { background:var(--light-hl); color:var(--text-main); border-color:var(--accent); }

/* =========================================
   21. DRONIUM MISSION PDF
   ========================================= */
#mission-pdf-template { position: fixed; left: -9999px; top: 0; width: 210mm; min-height: 297mm; background: white; padding: 20mm; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; z-index: 99999; box-sizing: border-box; }
.mission-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--dronium); padding-bottom: 20px; margin-bottom: 30px; }
.mission-logo img { height: 60px; }
.mission-eu-logo { text-align: right; }
.mission-eu-logo img { height: 50px; margin-bottom: 5px; }
.mission-eu-text { font-size: 0.7rem; color: var(--dronium); font-weight: bold; display: block; }
.mission-title { text-align: center; background: var(--dronium); color: white; padding: 10px; font-weight: 800; letter-spacing: 2px; margin-bottom: 30px; text-transform: uppercase; font-size: 1.2rem; }
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.mission-box { border: 1px solid #ddd; padding: 15px; border-radius: 4px; background: #fff; }
.mission-label { display: block; font-size: 0.75rem; color: #666; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; }
.mission-val { font-size: 1.1rem; font-weight: bold; color: #2c3e50; }
.mission-map-container { width: 100%; height: 350px; border: 2px solid #333; margin: 20px 0; overflow: hidden; position: relative; background: #eee; }
.mission-map-container img { width: 100%; height: 100%; object-fit: cover; }
.mission-checklist { width: 100%; border-collapse: collapse; margin-top: 20px; }
.mission-checklist td { padding: 10px; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.check-icon { color: var(--billing); margin-right: 10px; font-weight: bold; }
.mission-footer { margin-top: 40px; display: flex; justify-content: space-between; align-items: flex-end; }
.pilot-sign { text-align: center; border-top: 1px solid #333; padding-top: 10px; width: 200px; position: relative; margin-top: 30px; }
.pilot-sign img { height: 90px; display: block; margin: -80px auto 10px auto; position: relative; z-index: 1; mix-blend-mode: multiply; }
.mission-disclaimer { font-size: 0.6rem; color: #999; margin-top: 30px; text-align: center; border-top: 1px solid #eee; padding-top: 10px; }

.mission-history-item { background: var(--light-hl); border: 1px solid var(--border); padding: 10px; border-radius: 6px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.mission-history-info strong { display: block; color: var(--dronium); font-size: 0.9rem; }
.mission-history-info small { color: var(--text-sec); font-size: 0.75rem; }
.mission-actions { display: flex; gap: 5px; }

/* =========================================
   23. NUEVO: MODO VIP TRACKING (Kiosco Camaleónico)
   ========================================= */
/* Cuando el modo VIP está activo, se oculta toda la app normal */
body.vip-mode .sidebar { display: none !important; }
body.vip-mode .main-content { display: none !important; }
body.vip-mode .scan-float-btn { display: none !important; }
body.vip-mode .chat-float-btn { display: none !important; }
body.vip-mode #mobile-menu-btn { display: none !important; }
body.vip-mode {
    background: #0f1214 !important; /* Fondo muy oscuro, elegante */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
}

#vip-tracking-portal {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    margin: auto;
    color: white;
    display: flex;
    flex-direction: column;
    animation: fadeInVIP 0.8s ease-out forwards;
}

@keyframes fadeInVIP {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.vip-header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.vip-header img { height: 60px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); }

.vip-content { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 30px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); backdrop-filter: blur(10px); }
#vip-title { margin: 0 0 5px 0; font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: 1px; }
#vip-desc { margin: 0 0 20px 0; font-size: 0.9rem; color: #808e9b; text-transform: uppercase; letter-spacing: 2px; }

/* Progreso VIP */
.vip-progress-box { margin-top: 30px; background: rgba(0,0,0,0.3); padding: 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); }
.vip-status-text { font-size: 0.9rem; font-weight: bold; margin-bottom: 10px; color: #fff; }
.vip-progress-bar-bg { width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; position: relative; }
.vip-progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #0984e3, #00d2d3); transition: width 1s ease-in-out; box-shadow: 0 0 10px rgba(0, 210, 211, 0.5); }
.vip-progress-pct { font-size: 1.5rem; font-weight: 900; color: #00d2d3; text-align: right; margin-top: 5px; }

/* Botón Descarga VIP */
#vip-download-btn { width: 100%; display: block; text-align: center; text-decoration: none; background: linear-gradient(135deg, #0984e3 0%, #3498db 100%); color: white; padding: 18px; border-radius: 8px; font-weight: 800; font-size: 1.1rem; margin-top: 20px; text-transform: uppercase; box-shadow: 0 5px 20px rgba(9, 132, 227, 0.4); transition: 0.3s; border: 1px solid rgba(255,255,255,0.2); }
#vip-download-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(9, 132, 227, 0.6); filter: brightness(1.1); }

/* Animación Genérica (Plan B) */
@keyframes float {
    0% { transform: translateY(0px) rotate(0deg); text-shadow: 0 5px 15px rgba(255,255,255,0.1); }
    50% { transform: translateY(-15px) rotate(5deg); text-shadow: 0 25px 15px rgba(255,255,255,0.05); }
    100% { transform: translateY(0px) rotate(0deg); text-shadow: 0 5px 15px rgba(255,255,255,0.1); }
}

/* =========================================
   24. NUEVO: SLIDER MANUAL KANBAN
   ========================================= */
input[type=range] { -webkit-appearance: none; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; border: 1px solid var(--border); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 50%; background: var(--process); margin-top: -8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s; }
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
body.dark-mode input[type=range]::-webkit-slider-runnable-track { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.1); }

/* =========================================
   25. VARIANTES VISUALES (CATÁLOGO)
   ========================================= */
.variant-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border);
    display: none; /* Oculto por defecto, se activa por JS */
}

.variant-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: thin;
}

.variant-grid::-webkit-scrollbar {
    height: 6px;
}
.variant-grid::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
}
.variant-grid::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.variant-card {
    flex: 0 0 120px;
    background: var(--card-bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    position: relative;
}

@media (hover: hover) {
    .variant-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border-color: #bdc3c7;
    }
}

.variant-card.selected {
    border-color: var(--dronium);
    box-shadow: 0 0 0 2px rgba(9, 132, 227, 0.3);
}

.variant-img-wrapper {
    width: 100%;
    height: 90px;
    background: #f1f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.variant-name {
    padding: 8px 5px;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.variant-check {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--dronium);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    opacity: 0;
    transform: scale(0.5);
    transition: 0.2s;
}

.variant-card.selected .variant-check {
    opacity: 1;
    transform: scale(1);
}

/* =========================================
   MEDIA QUERIES GLOBALES
   ========================================= */
@media (max-width: 1100px) {
    #mobile-menu-btn { display: block; position: fixed; top: 15px; left: 15px; z-index: 2000; background: var(--primary); color: white; border: none; padding: 10px 15px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); font-size: 1.2rem; margin-top: var(--safe-top); }
    .sidebar { position: fixed; top: 0; left: 0; height: 100%; transform: translateX(-100%); width: 260px; box-shadow: 4px 0 15px rgba(0,0,0,0.3); }
    .sidebar.open { transform: translateX(0); }
    .main-content { padding: 15px; padding-top: calc(70px + var(--safe-top)); }
    .grid-2, .grid-3, .grid-4, .pdf-info-grid, .printer-grid { grid-template-columns: 1fr !important; display: grid !important; }
    .profile-actions-grid { grid-template-columns: repeat(4, 1fr) !important; }
    .header-title { flex-direction: column; align-items: flex-start; gap: 10px; }
    .header-info { align-items: flex-start; margin-top: 5px; }
    .card { padding: 15px; }
    .dash-stat { padding: 10px; }
    .log-table { display: block; overflow-x: auto; white-space: nowrap; }
    .kanban-board { grid-template-columns: 1fr; }
    .pdf-box { width: 100%; margin-bottom: 20px; }
    .pdf-total-box { width: 100%; }
}
@media (max-width: 768px) {
    .scan-float-btn { right: 85px; width: 55px; height: 55px; font-size: 1.4rem; }
    .chat-float-btn { width: 55px; height: 55px; }
}
/* EXPEDIENTE ÚNICO EN LA NUBE */
.nav-item.cases-tab.active { border-left-color:#6c5ce7; }
.case-toolbar { display:grid; grid-template-columns:minmax(220px, 2fr) minmax(160px, 1fr) auto; gap:12px; align-items:end; }
.case-stats { display:grid; grid-template-columns:repeat(4, minmax(130px, 1fr)); gap:12px; margin-bottom:18px; }
.case-stat { background:var(--card-bg); border:1px solid var(--border); border-top:4px solid #6c5ce7; border-radius:9px; padding:14px; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.case-stat small { display:block; color:var(--text-sec); font-weight:bold; font-size:0.7rem; }
.case-stat strong { display:block; color:#6c5ce7; font-size:1.6rem; margin-top:4px; }
.case-list { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }
.case-card { background:var(--card-bg); border:1px solid var(--border); border-left:5px solid #6c5ce7; border-radius:10px; padding:15px; box-shadow:0 3px 10px rgba(0,0,0,0.05); }
.case-card-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.case-card-client { color:var(--text-main); font-size:1.08rem; font-weight:800; }
.case-card-meta { color:var(--text-sec); font-size:0.75rem; margin-top:3px; overflow-wrap:anywhere; }
.case-stage { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:12px; font-size:0.68rem; font-weight:bold; white-space:nowrap; }
.case-journey { display:grid; grid-template-columns:repeat(6, 1fr); gap:4px; margin:14px 0 10px; }
.case-journey-step { height:6px; border-radius:6px; background:var(--border); }
.case-journey-step.done { background:#6c5ce7; }
.case-card-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.case-money { color:var(--accent); font-weight:800; }
.case-timeline { display:flex; flex-direction:column; gap:9px; margin-top:15px; }
.case-event { border-left:3px solid #6c5ce7; padding:8px 10px; background:var(--light-hl); border-radius:0 7px 7px 0; }
.case-event small { display:block; color:var(--text-sec); margin-top:3px; }
@media (max-width:760px) {
    .case-toolbar { grid-template-columns:1fr; }
    .case-stats { grid-template-columns:repeat(2, 1fr); }
    .case-list { grid-template-columns:1fr; }
}
/* CENTRO DE PENDIENTES */
.nav-item.pending-tab.active { border-left-color:#ff7675; }
.pending-nav-badge { margin-left:auto; min-width:22px; padding:2px 6px; border-radius:11px; background:#e74c3c; color:#fff; font-size:0.68rem; font-weight:800; text-align:center; }
.pending-nav-badge:empty { display:none; }
.pending-dashboard-alert { margin-top:20px; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px; border:1px solid #ff7675; border-left:5px solid #ff7675; border-radius:9px; background:rgba(255,118,117,0.10); cursor:pointer; }
.pending-dashboard-alert strong { display:block; color:#d63031; font-size:1.05rem; }
.pending-dashboard-alert small { display:block; color:var(--text-sec); margin-top:4px; }
.pending-control-card { display:flex; justify-content:space-between; align-items:center; gap:16px; border-left:5px solid #229ED9; }
.pending-control-card small { display:block; color:var(--text-sec); margin-top:4px; }
.pending-control-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pending-rules-note { margin:-5px 0 16px; color:var(--text-sec); font-size:0.78rem; }
.pending-stats { display:grid; grid-template-columns:repeat(4, minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.pending-stat { background:var(--card-bg); border:1px solid var(--border); border-top:4px solid #ff7675; border-radius:9px; padding:13px; }
.pending-stat.quote { border-top-color:#8e44ad; }
.pending-stat.work { border-top-color:#00b894; }
.pending-stat.purchase { border-top-color:#e67e22; }
.pending-stat small { display:block; color:var(--text-sec); font-size:0.68rem; font-weight:800; }
.pending-stat strong { display:block; color:var(--text-main); font-size:1.6rem; margin-top:4px; }
.pending-toolbar { display:flex; align-items:end; margin-bottom:14px; }
.pending-toolbar > div { width:min(360px,100%); }
.pending-list { display:grid; gap:10px; }
.pending-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center; padding:14px; background:var(--card-bg); border:1px solid var(--border); border-left:5px solid #f1c40f; border-radius:9px; }
.pending-item.critical { border-left-color:#e74c3c; }
.pending-item.info { border-left-color:#3498db; }
.pending-item-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--light-hl); color:#ff7675; font-size:1.15rem; }
.pending-item-title { color:var(--text-main); font-weight:800; overflow-wrap:anywhere; }
.pending-item-reason { color:var(--text-sec); font-size:0.78rem; margin-top:3px; }
.pending-item-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; font-size:0.7rem; color:var(--text-sec); }
.pending-item-actions { display:flex; gap:7px; align-items:center; }
.pending-item-actions .btn-trash { padding:9px 11px; border-radius:6px; }
@media (max-width:760px) {
    .pending-control-card { align-items:flex-start; flex-direction:column; }
    .pending-control-actions { width:100%; justify-content:flex-start; }
    .pending-stats { grid-template-columns:repeat(2,1fr); }
    .pending-item { grid-template-columns:auto minmax(0,1fr); }
    .pending-item-actions { grid-column:1 / -1; width:100%; }
    .pending-item-actions .pending-open-btn { flex:1; }
}