*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#050505;--bg2:#0d0d0d;--bg3:#111111;--bg4:#1a1a1a;
  --accent:#9cff00;--accent2:#7acc00;
  --text:#ffffff;--text2:#888888;--text3:#555555;
  --border:#1f1f1f;--border2:#2a2a2a;
  --danger:#ff4444;--warning:#ffcc00;--info:#4499ff;--success:#44cc44;
  --red-bg:rgba(255,68,68,.12);--yellow-bg:rgba(255,204,0,.12);
  --green-bg:rgba(68,204,68,.12);--blue-bg:rgba(68,153,255,.12);
}

body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;min-height:100vh;font-size:14px}

/* ── Ocultar flechas en todos los inputs numéricos ── */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}

/* ── NAV DROPDOWN ────────────────────────────────────── */
.nav-dropdown{position:relative}
.nav-drop-btn{
  background:none;border:none;color:var(--text2);padding:.35rem .75rem;
  border-radius:4px;font-size:.8rem;font-weight:500;cursor:pointer;
  transition:all .2s;display:flex;align-items:center;gap:.25rem;white-space:nowrap;
}
.nav-drop-btn:hover,.nav-drop-btn.drop-open{color:var(--accent);background:rgba(156,255,0,.1)}
.nav-drop-btn.drop-active{color:var(--accent)}
.nav-drop-menu{
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  background:var(--bg3);border:1px solid var(--border2);border-radius:6px;
  padding:.35rem 0;min-width:185px;z-index:300;
  box-shadow:0 8px 24px rgba(0,0,0,.5);list-style:none;
}
.nav-drop-menu.drop-open{display:block}
.nav-drop-menu li a{
  display:block;padding:.45rem 1rem;color:var(--text2);
  text-decoration:none;font-size:.8rem;font-weight:500;transition:all .15s;
}
.nav-drop-menu li a:hover,.nav-drop-menu li a.active{color:var(--accent);background:rgba(156,255,0,.08)}
@media(max-width:1199px){
  .nav-dropdown{width:100%}
  .nav-drop-btn{width:100%;padding:.65rem .75rem;font-size:.9rem;justify-content:space-between}
  .nav-drop-menu{
    position:static;border:none;box-shadow:none;border-radius:0;min-width:auto;
    display:block !important;
    max-height:0;overflow:hidden;padding:0 0 0 .75rem;
    transition:max-height .28s ease, padding .28s ease;
  }
  .nav-drop-menu.drop-open{max-height:320px;padding:.15rem 0 .35rem .75rem}
  .nav-drop-menu li a{padding:.5rem .75rem;font-size:.88rem}
  .drop-arrow{display:inline-block;transition:transform .28s ease}
  .nav-drop-btn.drop-open .drop-arrow{transform:rotate(180deg)}
}

/* ── NAVBAR ─────────────────────────────────────────── */
.navbar{
  background:var(--bg3);border-bottom:2px solid var(--accent);
  padding:0 1.5rem;display:flex;align-items:center;gap:1rem;
  min-height:56px;position:sticky;top:0;z-index:200;
  flex-wrap:nowrap;justify-content:flex-start;
}
.nav-brand{display:flex;flex-direction:column;min-width:160px;flex-shrink:0}
.brand-name{color:var(--accent);font-size:.95rem;font-weight:800;letter-spacing:2px}
.brand-sub{color:var(--text3);font-size:.6rem;letter-spacing:3px;text-transform:uppercase}
/* Bootstrap navbar-collapse gets flex:1 so user-area is pushed right */
.navbar-collapse{flex:1}
.nav-links{display:flex;list-style:none;gap:.15rem;padding:0;margin:0;align-items:center}
.nav-links a{
  color:var(--text2);text-decoration:none;padding:.35rem .75rem;
  border-radius:4px;font-size:.8rem;font-weight:500;transition:all .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{color:var(--accent);background:rgba(156,255,0,.1)}

/* ── LAYOUT ──────────────────────────────────────────── */
.main-content{padding:2rem;max-width:1400px;margin:0 auto}
.page-header{margin-bottom:1.75rem}
.page-header h1{font-size:1.3rem;color:var(--accent);font-weight:700;letter-spacing:2px}
.page-header p{color:var(--text2);font-size:.8rem;margin-top:.3rem}

/* ── CARDS ───────────────────────────────────────────── */
.card{
  background:var(--bg3);border:1px solid var(--border2);
  border-radius:8px;padding:1.5rem;margin-bottom:1.25rem;
}
.card-title{
  font-size:.7rem;font-weight:700;color:var(--text2);letter-spacing:2px;
  text-transform:uppercase;margin-bottom:1rem;padding-bottom:.75rem;
  border-bottom:1px solid var(--border);
}

/* ── DASHBOARD ───────────────────────────────────────── */
.dash-title{text-align:center;padding:3rem 0 2rem}
.dash-title h1{font-size:2rem;color:var(--accent);letter-spacing:4px;font-weight:800}
.dash-title p{color:var(--text2);letter-spacing:3px;font-size:.75rem;margin-top:.5rem}
.dashboard-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;max-width:1000px;margin:0 auto;
}
.dash-card{
  background:var(--bg3);border:1px solid var(--border2);border-radius:10px;
  padding:2rem 1rem;text-align:center;text-decoration:none;color:var(--text);
  transition:all .25s;display:block;
}
.dash-card:hover{
  border-color:var(--accent);background:rgba(156,255,0,.06);
  transform:translateY(-3px);box-shadow:0 6px 24px rgba(156,255,0,.12);
}
.dash-card .icon{font-size:2.2rem;display:block;margin-bottom:.75rem}
.dash-card .label{color:var(--accent);font-weight:700;font-size:.85rem;letter-spacing:1.5px}

/* ── FORMS ───────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group label{font-size:.7rem;color:var(--text2);letter-spacing:1px;text-transform:uppercase}
.form-group input,.form-group select,.form-group textarea,.usr-rol-form input{
  background:var(--bg2);border:1px solid var(--border2);border-radius:5px;
  color:var(--text);padding:.55rem .75rem;font-size:.88rem;outline:none;
  transition:border-color .2s;
}
.form-group input:focus,.form-group select:focus,.usr-rol-form input:focus{border-color:var(--accent)}
.form-group select option{background:var(--bg2)}
.form-actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap;align-items:center}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn{
  padding:.55rem 1.1rem;border:none;border-radius:5px;
  font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s;
  letter-spacing:.5px;display:inline-flex;align-items:center;gap:.4rem;
}
.btn-primary{background:var(--accent);color:#000}
.btn-primary:hover{background:var(--accent2)}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}
.btn-danger:hover{background:var(--red-bg)}
.btn-secondary{background:transparent;color:var(--text2);border:1px solid var(--border2)}
.btn-secondary:hover{border-color:var(--text2);color:var(--text)}
.btn-warning{background:transparent;color:var(--warning);border:1px solid var(--warning)}
.btn-warning:hover{background:var(--yellow-bg)}
.btn-info{background:transparent;color:var(--info);border:1px solid var(--info)}
.btn-icon{background:none;border:none;cursor:pointer;color:var(--text3);font-size:.95rem;padding:.2rem .4rem;transition:color .2s}
.btn-icon:hover{color:var(--danger)}

/* ── TABLES ──────────────────────────────────────────── */
.table-wrapper{overflow-x:auto;border-radius:6px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:.83rem}
thead th{
  background:var(--bg2);color:var(--text2);font-size:.68rem;
  letter-spacing:1.5px;text-transform:uppercase;padding:.7rem 1rem;
  text-align:left;border-bottom:1px solid var(--border2);white-space:nowrap;
}
tbody tr{border-bottom:1px solid var(--border);transition:background .15s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:rgba(255,255,255,.025)}
tbody td{padding:.65rem 1rem;color:var(--text)}
.text-right{text-align:right}
.text-center{text-align:center}

/* ── BADGES ──────────────────────────────────────────── */
.badge{padding:.2rem .55rem;border-radius:3px;font-size:.68rem;font-weight:700;letter-spacing:.5px}
.badge-green{background:var(--green-bg);color:var(--success);border:1px solid rgba(68,204,68,.25)}
.badge-red{background:var(--red-bg);color:#ff6666;border:1px solid rgba(255,68,68,.25)}
.badge-yellow{background:var(--yellow-bg);color:var(--warning);border:1px solid rgba(255,204,0,.25)}
.badge-blue{background:var(--blue-bg);color:#66aaff;border:1px solid rgba(68,153,255,.25)}
.badge-gray{background:rgba(128,128,128,.12);color:var(--text2);border:1px solid rgba(128,128,128,.2)}

/* ── KPI CARDS ───────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}
.kpi-card{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:1.2rem;text-align:center}
.kpi-card .kpi-value{font-size:1.4rem;font-weight:800;color:var(--accent)}
.kpi-card .kpi-sub{font-size:.85rem;font-weight:600;color:var(--text2);margin-top:.15rem;font-family:monospace}
.kpi-card .kpi-label{font-size:.68rem;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-top:.3rem}
.kpi-pos .kpi-value{color:var(--success)}
.kpi-neg .kpi-value{color:var(--danger)}

/* ── SEMANA CARDS ────────────────────────────────────── */
.semana-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-bottom:1.5rem}
.semana-card{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:1.25rem}
.semana-card h3{color:var(--accent);font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:.9rem}
.semana-row{display:flex;justify-content:space-between;font-size:.8rem;padding:.3rem 0;border-bottom:1px solid var(--border)}
.semana-row:last-child{border-bottom:none}
.semana-row .val{color:var(--text);font-family:monospace}
.semana-row .val.positive{color:var(--success)}
.semana-row .val.negative{color:var(--danger)}
.semana-periodo{font-size:.7rem;color:var(--text3);margin-bottom:.6rem;font-style:italic}
.btn-periodo{
  display:block;width:100%;text-align:center;
  background:transparent;border:1px solid var(--border2);border-radius:4px;
  color:var(--text2);font-size:.72rem;padding:.25rem .5rem;cursor:pointer;
  margin-bottom:.75rem;transition:all .2s;
}
.btn-periodo:hover{border-color:var(--accent);color:var(--accent)}
.semana-venta-input{
  background:var(--bg2);border:1px solid var(--border2);border-radius:4px;
  color:var(--text);padding:.25rem .5rem;font-size:.8rem;width:100px;text-align:right;
}
.semana-venta-input:focus{border-color:var(--accent);outline:none}

/* ── ACEITE STATUS ───────────────────────────────────── */
.aceite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1.5rem}
.aceite-card{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:1.25rem}
.aceite-card.ok{border-color:rgba(68,204,68,.3)}
.aceite-card.warning{border-color:rgba(255,204,0,.4)}
.aceite-card.danger{border-color:rgba(255,68,68,.5);animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{from{box-shadow:0 0 0 rgba(255,68,68,0)}to{box-shadow:0 0 12px rgba(255,68,68,.3)}}
.aceite-name{font-weight:700;font-size:.9rem;letter-spacing:1px;margin-bottom:.75rem}
.aceite-stat{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.4rem}
.aceite-stat .lbl{color:var(--text2)}
.aceite-stat .val{font-family:monospace;font-weight:600}
.progress-bar-container{background:var(--border);border-radius:4px;height:8px;overflow:hidden;margin:.75rem 0 .5rem}
.progress-bar{height:100%;border-radius:4px;transition:width .5s}
.p-ok{background:var(--success)}
.p-warning{background:var(--warning)}
.p-danger{background:var(--danger)}
.aceite-status{font-size:.75rem;font-weight:700;letter-spacing:.5px}
.s-ok{color:var(--success)}
.s-warning{color:var(--warning)}
.s-danger{color:var(--danger)}
.s-info{color:var(--info)}
.s-clean{color:var(--success)}

/* ── RESUMEN LOCAL CARDS ─────────────────────────────── */
.resumen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.resumen-card{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:1.25rem}
.resumen-card .local-name{color:var(--accent);font-size:.8rem;font-weight:700;letter-spacing:2px;margin-bottom:.75rem}
.resumen-card .local-row{display:flex;justify-content:space-between;font-size:.78rem;padding:.25rem 0;border-bottom:1px solid var(--border)}
.resumen-card .local-row:last-child{border-bottom:none}
.resumen-card .local-row .val{font-family:monospace}

/* ── AUTOCOMPLETE ────────────────────────────────────── */
.autocomplete-wrapper{position:relative}
.autocomplete-list{
  position:absolute;top:100%;left:0;right:0;background:var(--bg2);
  border:1px solid var(--accent);border-top:none;border-radius:0 0 5px 5px;
  z-index:50;max-height:180px;overflow-y:auto;display:none;
}
.autocomplete-list li{
  list-style:none;padding:.45rem .75rem;cursor:pointer;font-size:.83rem;color:var(--text);
}
.autocomplete-list li:hover,.autocomplete-list li.selected{background:rgba(156,255,0,.1);color:var(--accent)}

/* ── TABS ────────────────────────────────────────────── */
.tabs{display:flex;gap:.25rem;margin-bottom:1.5rem;border-bottom:1px solid var(--border2)}
.tab-count-badge{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#000;border-radius:8px;font-size:.62rem;font-weight:800;min-width:17px;height:15px;padding:0 4px;margin-left:4px;vertical-align:middle;line-height:1}
.btn-sm{padding:.28rem .65rem!important;font-size:.78rem!important}
.usr-rol-form{display:flex;gap:.6rem;align-items:center;margin-bottom:.75rem;flex-wrap:wrap}
.usr-rol-form input{flex:1;min-width:160px}
.view-toggle{display:flex;border:1px solid var(--border2);border-radius:7px;overflow:hidden;flex-shrink:0}
.view-toggle-btn{padding:.28rem .75rem;background:none;border:none;color:var(--text2);font-size:.8rem;font-weight:600;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap;line-height:1.4}
.view-toggle-btn.active{background:var(--accent);color:#000}
.view-toggle-btn:not(.active):hover{background:var(--bg3);color:var(--text)}
.tab-btn{
  background:none;border:none;color:var(--text2);padding:.6rem 1.2rem;
  cursor:pointer;font-size:.82rem;font-weight:600;letter-spacing:.5px;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s;
}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-btn:hover{color:var(--text)}
.tab-pane{display:none}.tab-pane.active{display:block}

/* ── TOAST ───────────────────────────────────────────── */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg3);
  border:1px solid var(--accent);color:var(--text);padding:.75rem 1.25rem;
  border-radius:6px;font-size:.85rem;opacity:0;transform:translateY(8px);
  transition:all .3s;z-index:999;pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0)}
.toast.error{border-color:var(--danger)}

/* ── MISC ────────────────────────────────────────────── */
.money{font-family:'Courier New',monospace;color:var(--accent)}
.sep{border:none;border-top:1px solid var(--border);margin:1.25rem 0}
.empty-state{text-align:center;padding:3rem;color:var(--text2)}
.empty-state .ei{font-size:2.5rem;display:block;margin-bottom:.75rem}
.flex-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.chip{
  display:inline-block;background:rgba(156,255,0,.08);color:var(--accent);
  border:1px solid rgba(156,255,0,.2);border-radius:4px;padding:.15rem .5rem;
  font-size:.7rem;font-weight:700;letter-spacing:1px;
}
.table-filter-bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.75rem 1rem;border-bottom:1px solid var(--border2);
}
.table-filter-bar input{
  flex:1;background:var(--bg2);border:1px solid var(--border2);border-radius:6px;
  color:var(--text);padding:.45rem .75rem;font-size:.85rem;
}
.table-filter-bar input:focus{outline:none;border-color:var(--accent)}
.total-bar{
  display:flex;justify-content:flex-end;gap:.5rem;align-items:center;
  padding:.6rem 1rem;background:var(--bg2);border-top:1px solid var(--border2);
  font-size:.82rem;font-weight:700;
}
.total-bar .total-label{color:var(--text2)}
.total-bar .total-value{color:var(--accent);font-family:monospace;font-size:.95rem}

@media(max-width:1199px){
  .main-content{padding:1rem}
  .navbar{flex-wrap:wrap;padding:.35rem 1rem;gap:0;align-items:center}
  .nav-brand{min-width:auto;flex:1;padding:.25rem 0}
  .brand-sub{display:none}
  .form-grid{grid-template-columns:1fr}
  /* Hamburger visible, user-area oculto */
  .nav-toggle{display:flex !important;align-items:center}
  .user-area{display:none !important}
  /* Bootstrap collapse expande en una nueva fila */
  .navbar-collapse{
    flex:none;width:100%;
    border-top:1px solid var(--border2);
    padding:.5rem 0 .75rem;
  }
  .nav-links{flex-direction:column;gap:0}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:.65rem .75rem;font-size:.9rem;border-radius:4px}
  /* Separador y sección de usuario dentro del menú */
  .nav-mobile-sep{display:block;border-top:1px solid var(--border2);margin:.4rem 0}
  .nav-mobile-user{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem}
}

/* ── LIGHT MODE ──────────────────────────────────────────── */
body.light{
  --bg:#f4f4f4;--bg2:#e8e8e8;--bg3:#ffffff;--bg4:#eeeeee;
  --accent:#4f8a00;--accent2:#3d6b00;
  --text:#111111;--text2:#555555;--text3:#888888;
  --border:#d0d0d0;--border2:#cccccc;
  --red-bg:rgba(200,0,0,.08);--yellow-bg:rgba(180,130,0,.1);
  --green-bg:rgba(0,140,0,.08);--blue-bg:rgba(0,80,200,.08);
}
body.light .navbar{border-bottom-color:var(--accent)}
body.light .dash-card:hover{box-shadow:0 6px 24px rgba(80,140,0,.15)}
body.light .toast{border-color:var(--accent)}
body.light .autocomplete-list{border-color:var(--accent)}

/* ── THEME TOGGLE BUTTON ─────────────────────────────────── */
.theme-btn{
  background:none;border:1px solid var(--border2);border-radius:6px;
  color:var(--text2);padding:.3rem .55rem;cursor:pointer;font-size:.9rem;
  transition:all .2s;line-height:1;
}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── SESSION / USER BADGE ────────────────────────────────── */
.user-area{display:flex;align-items:center;gap:.6rem;margin-left:auto;flex-shrink:0}
.user-badge{
  display:flex;align-items:center;gap:.4rem;
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:6px;padding:.3rem .7rem;font-size:.78rem;
}
.user-badge .uname{color:var(--text);font-weight:600}
.role-chip{
  font-size:.62rem;font-weight:800;letter-spacing:1px;padding:.1rem .35rem;
  border-radius:3px;text-transform:uppercase;
}
.role-admin{background:rgba(156,255,0,.15);color:var(--accent);border:1px solid rgba(156,255,0,.3)}
.role-user{background:var(--blue-bg);color:#66aaff;border:1px solid rgba(68,153,255,.3)}
.btn-logout{
  background:none;border:1px solid var(--border2);border-radius:6px;
  color:var(--text2);padding:.3rem .65rem;cursor:pointer;font-size:.78rem;
  transition:all .2s;white-space:nowrap;
}
.btn-logout:hover{border-color:var(--danger);color:var(--danger)}

/* ── LOGIN PAGE ──────────────────────────────────────────── */
.login-wrapper{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);padding:1rem;
}
.login-box{
  background:var(--bg3);border:1px solid var(--border2);border-radius:12px;
  padding:2.5rem 2rem;width:100%;max-width:380px;
}
.login-logo{text-align:center;margin-bottom:2rem}
.login-logo h1{color:var(--accent);font-size:1.5rem;letter-spacing:3px;font-weight:800}
.login-logo p{color:var(--text2);font-size:.75rem;letter-spacing:2px;margin-top:.3rem}
.login-error{
  background:var(--red-bg);border:1px solid rgba(255,68,68,.3);
  color:#ff6666;padding:.6rem .9rem;border-radius:5px;font-size:.82rem;margin-bottom:1rem;
}
.login-box .form-group{margin-bottom:1rem}
.login-box .btn-primary{width:100%;padding:.75rem;font-size:.9rem;margin-top:.5rem}

/* ── ACCION ROW (inline button next to select) ───────────── */
.accion-row{display:flex;gap:.5rem;align-items:center}
.accion-row select{flex:1}

/* ── FILTER INLINE (tabla general) ──────────────────────── */
.filter-inline{display:flex;align-items:center;gap:.5rem}
.filter-label{font-size:.68rem;color:var(--text3);text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.filter-select{
  background:var(--bg2);border:1px solid var(--border2);border-radius:4px;
  color:var(--text);padding:.2rem .5rem;font-size:.75rem;outline:none;cursor:pointer;
}
.filter-select:focus{border-color:var(--accent)}
.table-search{
  background:var(--bg2);border:1px solid var(--border2);border-radius:4px;
  color:var(--text);padding:.25rem .6rem;font-size:.78rem;outline:none;
  width:220px;transition:border-color .2s;
}
.table-search:focus{border-color:var(--accent)}
.table-search::placeholder{color:var(--text3)}

/* ── HAMBURGER TOGGLE ────────────────────────────────────── */
.nav-toggle{
  display:none;background:none;border:1px solid var(--border2);
  border-radius:6px;color:var(--text2);padding:.3rem .55rem;
  cursor:pointer;font-size:1.2rem;line-height:1;transition:all .2s;
}
.nav-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* Sección de usuario dentro del dropdown móvil — oculta en desktop */
.nav-mobile-sep{display:none;list-style:none}
.nav-mobile-user{display:none;list-style:none}
.nav-mobile-userinfo{display:flex;align-items:center;gap:.5rem}
.nav-mobile-actions{display:flex;align-items:center;gap:.4rem}

/* ── MODAL CONFIRMACIÓN ──────────────────────────────────── */
.modal-confirm-box{max-width:360px;text-align:center;padding:2rem 1.75rem 1.5rem}
.modal-confirm-icon{font-size:2rem;margin-bottom:.75rem;line-height:1}
.modal-confirm-msg{
  font-size:.95rem;font-weight:600;color:var(--text);
  margin-bottom:.5rem;line-height:1.4;
}
.modal-confirm-frase{
  font-size:.82rem;color:var(--text2);font-style:italic;
  margin-bottom:1.25rem;min-height:1.2em;
}
.modal-confirm-actions{display:flex;gap:.75rem;justify-content:center}
.modal-confirm-actions .btn{min-width:6rem}

/* ── EDIT MODAL HELPERS ──────────────────────────────────── */
.modal-field{margin-bottom:.75rem}
.modal-actions{margin-top:1.25rem}

/* ── ACTIONS COLUMN (2 buttons) ──────────────────────────── */
.th-acciones{width:5rem;color:transparent;font-size:0;-webkit-user-select:none;user-select:none}
.col-acciones{width:5rem;text-align:center;white-space:nowrap}

/* ── MODAL ────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;
  display:flex;align-items:center;justify-content:center;padding:1rem;
}
.hidden{display:none !important}
.modal-overlay.hidden{display:none}
.modal-box{
  background:var(--bg3);border:1px solid var(--border2);border-radius:10px;
  padding:1.75rem;width:100%;max-width:420px;
}
.modal-box-wide{max-width:680px}
.ic-preview-wrapper{
  max-height:300px;overflow-y:auto;border:1px solid var(--border2);
  border-radius:6px;margin-bottom:.75rem;
}
.ic-preview-wrapper table{width:100%;border-collapse:collapse}
.ic-preview-wrapper th,.ic-preview-wrapper td{
  padding:.4rem .65rem;border-bottom:1px solid var(--border);font-size:.82rem;
}
.ic-preview-wrapper th{background:var(--bg4);color:var(--text2);font-weight:600;position:sticky;top:0}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.modal-header h3{font-size:1rem;color:var(--accent);letter-spacing:1px}
.modal-close{background:none;border:none;color:var(--text2);font-size:1.2rem;cursor:pointer}
.modal-close:hover{color:var(--danger)}

/* ── PRODUCTOS TAB ───────────────────────────────────────── */
.prod-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem;align-items:start}
.prod-top-grid>.card{margin-bottom:0}
@media(max-width:900px){.prod-top-grid{grid-template-columns:1fr}}
.csv-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
.accion-btn-add{margin-top:.4rem;width:100%}
.modal-hint{margin-bottom:.6rem}
.code-hint{color:var(--text2);font-size:.78rem;font-family:monospace}
.resumen-total-row{margin-top:.5rem;border-top:1px solid var(--border2);padding-top:.4rem;font-weight:700;color:var(--text)}
.csv-hint{color:var(--text2);font-size:.82rem}
.csv-hint code{color:var(--accent);font-family:monospace}
.csv-zone-icon{font-size:2rem;display:block;margin-bottom:.5rem}
.csv-zone-sub{font-size:.75rem;color:var(--text3)}
.col-actions{width:3rem;text-align:center}
.th-actions{width:3rem;color:transparent;font-size:0;-webkit-user-select:none;user-select:none}

/* ── CSV IMPORT ZONE ─────────────────────────────────────── */
.csv-zone{
  border:2px dashed var(--border2);border-radius:8px;padding:1.5rem;
  text-align:center;transition:border-color .2s;cursor:pointer;
}
.csv-zone:hover,.csv-zone.dragover{border-color:var(--accent)}
.csv-zone p{color:var(--text2);font-size:.85rem;margin:.3rem 0}
.csv-zone input[type=file]{display:none}
.import-result-container{display:none}
.import-result-container.import-result-visible{display:block}
.import-result{
  margin-top:.75rem;padding:.6rem .9rem;border-radius:5px;font-size:.82rem;
}
.import-ok{background:var(--green-bg);color:var(--success);border:1px solid rgba(68,204,68,.2)}
.import-err{background:var(--red-bg);color:#ff6666;border:1px solid rgba(255,68,68,.2)}

/* ── CONTROL DE GASTOS ───────────────────────────────────── */
.header-actions{display:flex;gap:.5rem;align-items:center}
.deuda-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}
@media(max-width:640px){.deuda-grid{grid-template-columns:1fr}}
.xlsx-import-area{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.5rem 0;
}
.xlsx-file-input{display:none}
.xlsx-hint{color:var(--text3);font-size:.8rem}

/* Chart flex layout */
.chart-layout{display:flex;gap:2rem;align-items:flex-start}
.chart-canvas-wrap{flex:0 0 420px;height:420px}
.chart-legend-panel{flex:1;display:flex;flex-direction:column;gap:0}
.chart-legend-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.4rem .6rem;border-bottom:1px solid var(--border);
}
.chart-legend-item:last-child{border-bottom:none}
.chart-legend-dot{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.chart-legend-nro{flex:1;font-size:.82rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-legend-badge{font-size:.68rem;color:var(--text3);background:var(--bg2);border:1px solid var(--border2);border-radius:3px;padding:.1rem .35rem;white-space:nowrap;flex-shrink:0}
.chart-legend-val{font-size:.82rem;color:var(--accent);font-family:monospace;font-weight:600;white-space:nowrap;flex-shrink:0}

@media(max-width:768px){
  .chart-layout{flex-direction:column}
  .chart-canvas-wrap{flex:none;width:100%;height:300px}
  .chart-legend-panel{max-height:240px}
}

.export-check-list{
  display:flex;flex-direction:column;gap:.4rem;max-height:320px;overflow-y:auto;
  padding:.25rem 0;
}
.export-check-row{
  display:flex;align-items:center;gap:.75rem;padding:.4rem .6rem;
  border-radius:5px;cursor:pointer;transition:background .15s;
}
.export-check-row:hover{background:var(--bg4)}
.export-check-row input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.export-check-total{margin-left:auto;font-family:monospace;color:var(--accent);font-size:.85rem}
.total-sep{margin-left:1.25rem}

/* ── RESPONSABLE CHIP ──────────────────────────────────────── */
.responsable-chip{
  display:inline-block;background:var(--bg2);border:1px solid var(--border2);
  border-radius:4px;padding:.1rem .45rem;font-size:.72rem;color:var(--text2);
  font-weight:600;letter-spacing:.5px;
}

/* ── PERMISOS DE USUARIO ───────────────────────────────────── */
.btn-sm{padding:.3rem .65rem;font-size:.75rem}
.roles-table{margin-top:1rem}
.usuarios-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.form-grid-1col{grid-template-columns:1fr}
@media(max-width:768px){.usuarios-top-grid{grid-template-columns:1fr}}
.perm-lista{display:flex;flex-direction:column;gap:.6rem;margin:.1rem 0}
.perm-grupo{display:flex;flex-direction:column;gap:.35rem}
.perm-grupo-titulo{
  font-size:.68rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--text2);padding:.1rem .1rem .25rem;
  border-bottom:1px solid var(--border);
}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.perm-grupo-admin{
  margin-top:.4rem;padding:.6rem .7rem .5rem;
  border-radius:8px;border:1px solid var(--border2);
  background:var(--bg2);
}
.perm-grupo-admin .perm-grupo-titulo{color:var(--accent)}
.perm-grupo-sub{
  margin-top:-.25rem;margin-left:1rem;
  border-left:2px solid var(--border2);padding-left:.6rem;
  border-top-left-radius:0;border-bottom-left-radius:0;
}
.perm-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.45rem .6rem;border-radius:6px;background:var(--bg3);
  border:1px solid var(--border);
}
.perm-label{flex:1;font-size:.82rem;color:var(--text);line-height:1.2}
.perm-estado{font-size:.7rem;font-weight:700;min-width:1.8rem;text-align:right}
.perm-on{color:var(--success)}
.perm-off{color:var(--danger)}
/* Toggle switch */
.perm-toggle{position:relative;display:inline-block;width:38px;height:20px;flex-shrink:0}
.perm-toggle input{opacity:0;width:0;height:0}
.perm-slider{
  position:absolute;inset:0;background:var(--border2);border-radius:20px;
  cursor:pointer;transition:background .2s;
}
.perm-slider::before{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  background:#fff;left:3px;top:3px;transition:transform .2s;
}
.perm-toggle input:checked + .perm-slider{background:var(--success)}
.perm-toggle input:checked + .perm-slider::before{transform:translateX(18px)}
@media(max-width:520px){.perm-grid{grid-template-columns:1fr}}

/* ── RESUMEN POR LOCALES ───────────────────────────────────── */
.rs-section-label{
  font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:.4rem .25rem .15rem;margin-top:.4rem;border-top:1px solid var(--border);
  color:var(--text2);
}
.rs-section-transfer{color:var(--accent)}
.rs-count-pos{color:var(--success)}
.rs-count-neg{color:var(--danger)}
.rs-valor{color:var(--text2);font-size:.8em;margin-left:.3rem}
.resumen-total-cell{font-weight:700;color:var(--accent);font-family:monospace}

/* ── TRANSFER +/- RESUMEN ──────────────────────────────────── */
.tr-section-label{
  font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  padding:.4rem .25rem .15rem;margin-top:.4rem;border-top:1px solid var(--border);
}
.tr-section-pos{color:var(--success)}
.tr-section-neg{color:var(--danger)}
.tr-row-pos .val{color:var(--success)}
.tr-row-neg .val{color:var(--danger)}
.tr-arrow{color:var(--text3);font-size:.8em}
.tr-neg-total{color:var(--danger);font-family:monospace}
/* Historial: cantidad negativa */
.tr-neg-qty{color:var(--danger);font-family:monospace}

/* ── LABOR ──────────────────────────────────────────────────── */
.labor-header{flex-wrap:wrap;gap:1rem}
.labor-periodo-nav{display:flex;align-items:center;gap:.5rem}
.labor-periodo-sel{background:var(--bg2);border:1px solid var(--border2);color:var(--text1);border-radius:6px;padding:.35rem .6rem;font-size:.85rem;min-width:220px}
.labor-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.labor-tabla-header{margin-bottom:1rem}
.labor-card-title-inline{margin:0;padding:0;border:none}
.labor-periodos-header{margin-bottom:1rem}
.labor-tabla-actions{display:flex;gap:.5rem;align-items:center}
.labor-total-row{font-weight:700;background:var(--bg2);border-top:2px solid var(--border2)}
.labor-total-label{color:var(--accent);font-size:.7rem;letter-spacing:1px;text-transform:uppercase;padding:.7rem 1rem}
.labor-total-kpi{font-weight:800}
.periodo-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem}
.periodo-item.periodo-activo{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.periodo-info{display:flex;flex-direction:column;gap:.2rem;flex:1;min-width:0}
.periodo-nombre{font-size:.95rem}
.periodo-rango{font-size:.8rem;color:var(--accent);font-weight:600}
.periodo-meta{font-size:.75rem;color:var(--text2)}
.periodo-actions{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.btn-sm{font-size:.75rem;padding:.25rem .6rem}
.form-group-full{grid-column:1/-1}

/* ── INSUMOS ────────────────────────────────────────────────── */
.insumo-input{width:82px;background:transparent;border:1px solid transparent;border-radius:4px;padding:.18rem .3rem;color:var(--text);font-size:.78rem;text-align:right}
.insumo-input:hover,.insumo-input:focus{border-color:var(--border2);background:var(--bg2);outline:none}
.insumo-input::-webkit-outer-spin-button,.insumo-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.insumo-input[type=number]{-moz-appearance:textfield}
.insumo-input-expl{width:130px;text-align:left}
.insumo-calc{font-size:.8rem;text-align:right;padding:0 .3rem;font-family:monospace;white-space:nowrap}
.insumo-ro{font-size:.8rem;padding:0 .3rem;white-space:nowrap}
.insumo-dif-neg{color:var(--danger)!important;font-weight:700}
.insumo-dif-pos{color:var(--success)!important;font-weight:700}
.insumo-alert-warn{color:#e6a817;font-weight:600}
.insumo-alert-crit{color:var(--danger);font-weight:700}
.insumo-save-ok{color:var(--success);font-size:.85rem;font-weight:700}
.insumo-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.75rem;margin-bottom:1rem}
.insumo-kpi{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:.7rem 1rem}
.insumo-kpi-label{font-size:.62rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--text2);margin-bottom:.2rem}
.insumo-kpi-value{font-size:1.05rem;font-weight:700;color:var(--accent)}
.insumo-kpi-sub{font-size:.72rem;color:var(--text2)}
.insumo-periodo-badge{font-size:.8rem;color:var(--text2)}
.prod-autocomplete{position:relative}
.prod-suggestions{position:absolute;top:100%;left:0;right:0;max-height:220px;overflow-y:auto;background:var(--bg2);border:1px solid var(--border2);border-radius:0 0 6px 6px;z-index:1000;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.prod-suggestion{padding:.4rem .75rem;font-size:.82rem;cursor:pointer;border-bottom:1px solid var(--border)}
.prod-suggestion:last-child{border-bottom:none}
.prod-suggestion:hover{background:var(--accent);color:#fff}
.prod-selected-info{background:var(--bg2);border-radius:6px;padding:.5rem .75rem;font-size:.8rem;color:var(--text2);margin-top:.4rem;border:1px solid var(--border)}
.insumo-resumen-title{font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.insumo-resumen-table td{padding:.4rem .75rem;font-size:.85rem}
.insumo-header-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.insumo-det-header{flex-wrap:wrap;gap:.75rem}
.insumo-det-info{flex:1;min-width:180px}
.insumo-det-h1{margin:0;font-size:1.1rem}
.insumo-det-sub{margin:0}
.insumo-import-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.3rem}
.insumo-import-filename{font-size:.8rem;color:var(--text2)}
.insumo-import-preview{padding:.45rem .75rem;border-radius:6px;font-size:.82rem;margin-top:.4rem;line-height:1.5}
.insumo-import-ok{background:color-mix(in srgb,var(--success) 10%,transparent);border:1px solid var(--success)}
.insumo-import-warn{border:1px solid #e6a817;color:#e6a817}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.label-hint{color:var(--text2);font-size:.78rem;font-weight:400}
/* Insumos: toolbar (search + tabs + pagination) */
.insumo-table-toolbar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.6rem .75rem;border-bottom:1px solid var(--border)}
.insumo-search-wrap{flex:1;min-width:160px;max-width:280px}
.insumo-search{width:100%;padding:.38rem .65rem;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--text);font-size:.85rem}
.insumo-search:focus{outline:none;border-color:var(--accent)}
.insumo-tab-bar{display:flex;gap:2px;background:var(--bg2);border-radius:6px;padding:3px}
.insumo-tab{padding:.28rem .75rem;border:none;border-radius:4px;background:transparent;color:var(--text2);cursor:pointer;font-size:.82rem;font-weight:500;transition:background .15s,color .15s}
.insumo-tab:hover{background:var(--border);color:var(--text)}
.insumo-tab.insumo-tab-active{background:var(--accent);color:#fff}
.insumo-pagination{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.insumo-pag-btn{padding:.28rem .6rem;border:1px solid var(--border);border-radius:4px;background:var(--bg);color:var(--text);cursor:pointer;font-size:.9rem;line-height:1}
.insumo-pag-btn:hover:not([disabled]){background:var(--bg2)}
.insumo-pag-btn[disabled]{opacity:.35;cursor:default}
.insumo-pag-info{font-size:.8rem;color:var(--text2);white-space:nowrap}
.ins-prod-cell{min-width:140px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── NOVEDADES ───────────────────────────────────────── */
.novedades-layout{display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:start}
.novedades-chat-col{position:sticky;top:calc(72px + 1rem)}
@media(max-width:900px){
  .novedades-layout{grid-template-columns:1fr}
  .novedades-chat-col{
    position:fixed;bottom:0;left:0;right:0;
    z-index:400;padding:0 .75rem .75rem;
    transform:translateY(105%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    pointer-events:none;
  }
  .novedades-chat-col.chat-mobile-open{transform:translateY(0);pointer-events:auto}
  .novedades-chat-col .chat-card{
    border-radius:12px 12px 0 0!important;
    box-shadow:0 -4px 28px rgba(0,0,0,.5)!important;
    height:65vh!important;max-height:65vh!important;
  }
  .chat-fab{display:flex!important}
  .chat-mobile-close-btn{display:flex!important}
}

/* Post cards */
.novedad-card{background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:1rem 1.1rem;margin-bottom:.75rem;transition:border-color .15s}
.novedad-card:hover{border-color:var(--accent)}
.novedad-pinned{border-left:3px solid var(--accent)}
.novedad-card-header{display:flex;align-items:center;gap:.55rem;margin-bottom:.6rem}
.novedad-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:#fff;flex-shrink:0}
.novedad-meta{flex:1;min-width:0}
.novedad-autor-name{font-weight:700;font-size:.88rem;color:var(--text)}
.novedad-fecha{font-size:.73rem;color:var(--text2)}
.novedad-pin-badge{font-size:.72rem;color:var(--accent);white-space:nowrap;font-weight:700;margin-left:auto}
.novedad-card-btns{display:flex;gap:.25rem;flex-shrink:0}
.novedad-titulo{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:.35rem}
.novedad-contenido{font-size:.87rem;color:var(--text2);line-height:1.6;white-space:pre-wrap;word-break:break-word}
.novedad-footer{display:flex;align-items:center;gap:.75rem;margin-top:.65rem;padding-top:.55rem;border-top:1px solid var(--border)}
.novedad-comments-btn{font-size:.8rem;color:var(--text2);background:none;border:none;cursor:pointer;padding:0;transition:color .15s}
.novedad-comments-btn:hover{color:var(--accent)}
.novedad-textarea{width:100%;padding:.6rem .75rem;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:.88rem;resize:vertical;min-height:80px;font-family:inherit;line-height:1.5;transition:border-color .15s;box-sizing:border-box}
.novedad-textarea:focus{outline:none;border-color:var(--accent)}

/* Chat card */
.chat-card{display:flex;flex-direction:column;padding:0!important;height:600px;max-height:calc(100vh - 250px);overflow:hidden}
.chat-card-title{display:flex;align-items:center;gap:.5rem;padding:1.25rem 1.25rem .75rem!important;flex-shrink:0}
.chat-card>.card-title{padding:1.25rem 1.25rem .75rem;margin-bottom:0;flex-shrink:0}
.chat-live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:chat-pulse 2s infinite;margin-left:auto;flex-shrink:0}
@keyframes chat-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.chat-mensajes{flex:1;min-height:0;overflow-y:auto;padding:.5rem 1rem;display:flex;flex-direction:column;gap:.35rem;scroll-behavior:smooth}
.chat-mensajes::-webkit-scrollbar{width:3px}
.chat-mensajes::-webkit-scrollbar-track{background:transparent}
.chat-mensajes::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.chat-empty{text-align:center;color:var(--text3);font-size:.82rem;padding:2rem 1rem;margin:auto}
.chat-date-sep{text-align:center;font-size:.68rem;color:var(--text3);padding:.25rem 0;position:relative;flex-shrink:0}
.chat-date-sep::before,.chat-date-sep::after{content:'';position:absolute;top:50%;width:28%;height:1px;background:var(--border)}
.chat-date-sep::before{left:5%}.chat-date-sep::after{right:5%}

/* Chat messages */
.chat-msg{display:flex;gap:.4rem;align-items:flex-end;flex-shrink:0}
.chat-msg-own{flex-direction:row-reverse}
.chat-avatar-sm{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;color:#fff;flex-shrink:0;align-self:flex-end}
.chat-msg-body{max-width:78%;display:flex;flex-direction:column;gap:.12rem}
.chat-msg-own .chat-msg-body{align-items:flex-end}
.chat-msg-name{font-size:.69rem;color:var(--text2);font-weight:600}
.chat-bubble{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:.38rem .65rem;font-size:.83rem;color:var(--text);line-height:1.45;word-break:break-word;white-space:pre-wrap}
.chat-msg-own .chat-bubble{background:var(--accent);color:#000;border-color:transparent}
.chat-msg-meta{font-size:.67rem;color:var(--text3)}
.chat-msg-own .chat-msg-meta{text-align:right}

/* Chat input */
.chat-input-wrap{display:flex;gap:.4rem;align-items:center;padding:.6rem 1.1rem 1.1rem;border-top:1px solid var(--border);flex-shrink:0}
.chat-input{flex:1;padding:.48rem .7rem;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:.85rem;outline:none;transition:border-color .15s}
.chat-input:focus{border-color:var(--accent)}
.chat-send-btn{width:34px;height:34px;border:none;border-radius:8px;background:var(--accent);color:#000;font-size:1rem;font-weight:800;cursor:pointer;flex-shrink:0;transition:opacity .15s;display:flex;align-items:center;justify-content:center}
.chat-send-btn:hover{opacity:.85}

/* Comments modal */
.novedad-modal-meta{font-size:.82rem;color:var(--text2);margin-bottom:.5rem}
.novedad-modal-contenido{font-size:.9rem;color:var(--text);line-height:1.65;white-space:pre-wrap;word-break:break-word;margin-bottom:1rem}
.novedad-modal-sep{border:none;border-top:1px solid var(--border);margin:.75rem 0}
.novedad-comentarios-header{font-size:.7rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.novedad-comentarios-lista{display:flex;flex-direction:column;gap:.5rem;max-height:260px;overflow-y:auto;margin-bottom:.75rem;padding-right:.25rem}
.novedad-comentario{display:flex;gap:.45rem;align-items:flex-start}
.novedad-comentario-body{flex:1;background:var(--bg3);border-radius:8px;padding:.45rem .65rem}
.novedad-comentario-autor{font-size:.75rem;font-weight:700;color:var(--text);margin-bottom:.15rem;overflow:hidden}
.novedad-comentario-fecha{color:var(--text3);font-weight:400}
.novedad-comentario-texto{font-size:.83rem;color:var(--text2);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.novedad-comentario-form textarea{width:100%;padding:.55rem .7rem;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:.85rem;resize:vertical;min-height:60px;font-family:inherit;line-height:1.5;transition:border-color .15s;box-sizing:border-box}
.novedad-comentario-form textarea:focus{outline:none;border-color:var(--accent)}

/* Novedades — online badge + list header */
.chat-header-right{display:flex;align-items:center;gap:.45rem}
.chat-online-badge{font-size:.72rem;color:var(--success);font-weight:700;white-space:nowrap}
.novedad-list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.65rem}
.novedad-list-title{font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text2)}

/* Chat — imagen adjunta */
.chat-img-btn{width:32px;height:32px;border:1px solid var(--border2);border-radius:8px;background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s,color .15s;padding:0}
.chat-img-btn:hover{border-color:var(--accent);color:var(--accent)}
.chat-img-preview{display:none;align-items:center;gap:.5rem;padding:.4rem .9rem;border-top:1px solid var(--border);flex-shrink:0;background:var(--bg2)}
.chat-img-preview.active{display:flex}
.chat-img-preview img{max-height:56px;max-width:90px;border-radius:6px;object-fit:cover}
.chat-img-preview-cancel{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.85rem;padding:.1rem .25rem;line-height:1;flex-shrink:0;transition:color .15s}
.chat-img-preview-cancel:hover{color:var(--danger)}
.chat-img-wrap{max-width:200px;margin-bottom:.15rem}
.chat-msg-own .chat-img-wrap{margin-left:auto}
.chat-img{width:100%;border-radius:8px;cursor:zoom-in;display:block;transition:opacity .15s}
.chat-img:hover{opacity:.88}

/* Visor de imagen */
.img-viewer-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.img-viewer-overlay.hidden{display:none!important}
.img-viewer-overlay img{max-width:92vw;max-height:90vh;border-radius:8px;object-fit:contain;cursor:default;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.img-viewer-close{position:absolute;top:1.1rem;right:1.25rem;background:rgba(255,255,255,.12);border:none;border-radius:50%;width:36px;height:36px;font-size:1.1rem;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.img-viewer-close:hover{background:rgba(255,255,255,.25)}

/* Chat — menú adjuntar */
.chat-attach-wrap{position:relative;flex-shrink:0}
.chat-attach-menu{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.35);min-width:160px;z-index:200}
.chat-attach-menu button{display:block;width:100%;padding:.5rem .85rem;background:none;border:none;color:var(--text);text-align:left;font-size:.83rem;cursor:pointer;transition:background .12s;white-space:nowrap}
.chat-attach-menu button:hover{background:var(--bg3)}
.chat-attach-menu.hidden{display:none!important}

/* Novedad post — imagen adjunta */
.novedad-card-img{margin:.45rem 0}
.novedad-card-img img{max-width:100%;max-height:320px;width:100%;object-fit:cover;border-radius:8px;cursor:zoom-in;display:block;transition:opacity .15s}
.novedad-card-img img:hover{opacity:.9}

/* ── CHAT MOBILE FAB ─────────────────────────────────── */
.chat-fab{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:450;width:52px;height:52px;border-radius:50%;background:var(--accent);border:none;color:#000;font-size:1.3rem;cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.4);transition:transform .2s,box-shadow .2s;padding:0;line-height:1}
.chat-fab:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.chat-fab-badge{position:absolute;top:-3px;right:-3px;background:#e53935;color:#fff;font-size:.58rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:none;align-items:center;justify-content:center;padding:0 3px;line-height:1;pointer-events:none}
.chat-fab-badge.visible{display:flex}
.chat-mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:390;cursor:pointer}
.chat-mobile-backdrop.active{display:block}
.chat-mobile-close-btn{display:none;background:none;border:none;color:var(--text2);cursor:pointer;font-size:1rem;padding:.1rem .3rem;line-height:1;transition:color .15s;align-items:center;justify-content:center;flex-shrink:0}
.chat-mobile-close-btn:hover{color:var(--danger)}

/* ══════════════════════════════════════════════════════════════
   VISUAL REFRESH
   ══════════════════════════════════════════════════════════════ */

/* ─ Extra variables ─ */
:root{
  --shadow-xs:0 1px 4px rgba(0,0,0,.5);
  --shadow-sm:0 3px 12px rgba(0,0,0,.55);
  --shadow-md:0 6px 24px rgba(0,0,0,.6);
  --shadow-lg:0 12px 44px rgba(0,0,0,.7);
  --accent-rgb:156,255,0;
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}
body.light{--accent-rgb:79,138,0}

/* ─ Scrollbar ─ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent2);opacity:.8}

/* ─ Body ─ */
body{
  background-image:
    radial-gradient(ellipse 80% 40% at 15% 0%, rgba(156,255,0,.03) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(60,120,255,.025) 0%, transparent 70%);
  background-attachment:fixed;
}
body.light{
  background-image:
    radial-gradient(ellipse 80% 40% at 15% 0%, rgba(79,138,0,.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(40,80,200,.025) 0%, transparent 70%);
}

/* ─ Navbar glassmorphism ─ */
.navbar{
  background:rgba(11,12,14,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(156,255,0,.22);
  box-shadow:0 2px 20px rgba(0,0,0,.55);
}
body.light .navbar{
  background:rgba(244,244,244,.88);
  border-bottom-color:rgba(79,138,0,.28);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}

/* ─ Brand gradient ─ */
.brand-name{
  background:linear-gradient(110deg,var(--accent) 0%,#c6ff3d 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
body.light .brand-name{
  background:linear-gradient(110deg,#2c5200 0%,var(--accent2) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ─ Page title gradient ─ */
.page-header h1{
  font-size:1.4rem;
  letter-spacing:3px;
  background:linear-gradient(100deg,var(--accent) 0%,#ccff55 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.dash-title h1{
  background:linear-gradient(100deg,var(--accent) 0%,#ccff55 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
body.light .page-header h1,
body.light .dash-title h1{
  background:linear-gradient(100deg,#234000 0%,var(--accent2) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* ─ Cards ─ */
.card{
  border-radius:12px;
  box-shadow:var(--shadow-xs);
  transition:box-shadow .22s ease;
}
.card:hover{box-shadow:var(--shadow-sm)}

/* ─ KPI cards ─ */
.kpi-card{
  border-radius:12px;
  border-top:3px solid var(--border2);
  box-shadow:var(--shadow-xs);
  padding:1.35rem 1.1rem;
  transition:box-shadow .2s,transform .2s,border-top-color .2s;
  position:relative;overflow:hidden;
}
.kpi-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.022) 0%,transparent 55%);
  pointer-events:none;
}
.kpi-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-top-color:var(--accent);
}
.kpi-pos{border-top-color:var(--success)!important}
.kpi-neg{border-top-color:var(--danger)!important}
.kpi-card .kpi-value{font-size:1.65rem;letter-spacing:-.5px}
body.light .kpi-card{box-shadow:0 1px 6px rgba(0,0,0,.1)}
body.light .kpi-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.15)}

/* ─ Dashboard cards ─ */
.dash-card{
  border-radius:14px;
  box-shadow:var(--shadow-xs);
  transition:all .28s cubic-bezier(.4,0,.2,1);
  padding:2.25rem 1.25rem;
}
.dash-card:hover{
  transform:translateY(-7px);
  box-shadow:0 12px 36px rgba(156,255,0,.2);
  border-color:var(--accent);
  background:rgba(156,255,0,.07);
}
.dash-card .icon{font-size:2.6rem;margin-bottom:.9rem}
.dash-card .label{font-size:.88rem;letter-spacing:1.5px}
body.light .dash-card:hover{box-shadow:0 12px 36px rgba(79,138,0,.2)}

/* ─ Table wrapper ─ */
.table-wrapper{
  border-radius:10px;
  box-shadow:var(--shadow-xs);
}
thead th{
  font-size:.7rem;
  letter-spacing:1.2px;
  padding:.8rem 1rem;
}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(156,255,0,.03)}
body.light tbody tr:hover{background:rgba(0,0,0,.03)}
body.light .table-wrapper{box-shadow:0 1px 6px rgba(0,0,0,.1)}

/* ─ Buttons ─ */
.btn{
  border-radius:8px;
  transition:var(--transition);
}
.btn-primary{
  box-shadow:0 2px 12px rgba(156,255,0,.2);
}
.btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 22px rgba(156,255,0,.35);
}
.btn-primary:active{transform:translateY(0)}
.btn-danger,.btn-secondary,.btn-warning,.btn-info{border-radius:8px}
body.light .btn-primary{box-shadow:0 2px 12px rgba(79,138,0,.22)}
body.light .btn-primary:hover{box-shadow:0 5px 22px rgba(79,138,0,.32)}

/* ─ Badges pill-shaped ─ */
.badge{
  border-radius:99px;
  padding:.22rem .7rem;
  font-size:.69rem;
  letter-spacing:.3px;
}

/* ─ Input focus glow ─ */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(156,255,0,.12);
}
.table-search:focus{box-shadow:0 0 0 2px rgba(156,255,0,.1)}
.filter-select:focus{box-shadow:0 0 0 2px rgba(156,255,0,.1)}

/* ─ Toast ─ */
.toast{
  border-radius:10px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(8px);
}

/* ─ Modal ─ */
.modal-overlay{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.modal-box{
  border-radius:14px;
  box-shadow:0 14px 50px rgba(0,0,0,.75);
}

/* ─ Login ─ */
.login-wrapper{
  background-image:radial-gradient(ellipse 60% 50% at 50% 20%,rgba(156,255,0,.05) 0%,transparent 70%);
}
.login-box{
  border-radius:16px;
  box-shadow:0 14px 50px rgba(0,0,0,.7);
}
body.light .login-wrapper{
  background-image:radial-gradient(ellipse 60% 50% at 50% 20%,rgba(79,138,0,.07) 0%,transparent 70%);
}

/* ─ Misc cards ─ */
.aceite-card,.semana-card,.resumen-card{
  border-radius:12px;
  box-shadow:var(--shadow-xs);
}

/* ─ Novedad cards ─ */
.novedad-card{
  border-radius:12px;
  box-shadow:var(--shadow-xs);
}
.novedad-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

/* ─ Nav dropdown menu ─ */
.nav-drop-menu{
  border-radius:10px;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
}

/* ─ Progress bar ─ */
.progress-bar-container{border-radius:6px;height:9px}
.progress-bar{border-radius:6px}

/* ─ User badge ─ */
.user-badge{border-radius:8px}

/* ─ Role chip ─ */
.role-chip{border-radius:99px}

/* ─ Total bar ─ */
.total-bar{border-radius:0 0 10px 10px}

/* ─ Chip ─ */
.chip{border-radius:7px}

/* ─ Notif dropdown ─ */
.notif-dropdown{border-radius:12px;box-shadow:0 10px 32px rgba(0,0,0,.5)}

/* ══════════════════════════════════════════════════════════════
   PINK MODE 🌸
   ══════════════════════════════════════════════════════════════ */

body.pink{
  --bg:#0e080c;--bg2:#160d12;--bg3:#1e1218;--bg4:#261820;
  --accent:#ff79c6;--accent2:#d4489a;
  --text:#ffe6f0;--text2:#c9a0b8;--text3:#8a6075;
  --border:#2d1520;--border2:#3d1e2a;
  --danger:#ff6060;--warning:#ffcc00;--info:#bd93f9;--success:#50fa7b;
  --red-bg:rgba(255,68,68,.12);--yellow-bg:rgba(255,204,0,.12);
  --green-bg:rgba(80,250,123,.12);--blue-bg:rgba(189,147,249,.12);
  --accent-rgb:255,121,198;
  background-image:
    radial-gradient(ellipse 80% 40% at 15% 0%, rgba(255,121,198,.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 100%, rgba(189,100,255,.04) 0%, transparent 70%);
}

/* ─ Navbar ─ */
body.pink .navbar{
  background:rgba(14,8,12,.9);
  border-bottom-color:rgba(255,121,198,.3);
  box-shadow:0 2px 20px rgba(0,0,0,.6);
}

/* ─ Brand gradient ─ */
body.pink .brand-name{
  background:linear-gradient(110deg,#ff79c6 0%,#ffb3e0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ─ Titles gradient ─ */
body.pink .page-header h1,
body.pink .dash-title h1{
  background:linear-gradient(100deg,#ff79c6 0%,#ffb3e0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ─ Nav hover highlights ─ */
body.pink .nav-drop-btn:hover,
body.pink .nav-drop-btn.drop-open{background:rgba(255,121,198,.1)}
body.pink .nav-drop-menu li a:hover,
body.pink .nav-drop-menu li a.active{background:rgba(255,121,198,.08)}
body.pink .nav-links a:hover,
body.pink .nav-links a.active{background:rgba(255,121,198,.1)}

/* ─ Dash cards ─ */
body.pink .dash-card:hover{
  background:rgba(255,121,198,.07);
  box-shadow:0 12px 36px rgba(255,121,198,.22);
}

/* ─ KPI / table ─ */
body.pink .kpi-card{box-shadow:0 1px 6px rgba(0,0,0,.4)}
body.pink .kpi-card:hover{box-shadow:0 4px 18px rgba(255,121,198,.2)}
body.pink tbody tr:hover{background:rgba(255,121,198,.04)}

/* ─ Buttons ─ */
body.pink .btn-primary{box-shadow:0 2px 12px rgba(255,121,198,.25)}
body.pink .btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 22px rgba(255,121,198,.4);
}

/* ─ Input / search focus glows ─ */
body.pink .form-group input:focus,
body.pink .form-group select:focus,
body.pink .form-group textarea:focus{box-shadow:0 0 0 3px rgba(255,121,198,.15)}
body.pink .table-search:focus{box-shadow:0 0 0 2px rgba(255,121,198,.12)}
body.pink .filter-select:focus{box-shadow:0 0 0 2px rgba(255,121,198,.12)}
body.pink .broadcast-modal-body textarea:focus{box-shadow:0 0 0 3px rgba(255,121,198,.15)}

/* ─ Autocomplete ─ */
body.pink .autocomplete-list{border-color:var(--accent)}
body.pink .autocomplete-list li:hover,
body.pink .autocomplete-list li.selected{background:rgba(255,121,198,.1);color:var(--accent)}

/* ─ Chip / role badge ─ */
body.pink .chip{background:rgba(255,121,198,.08);border-color:rgba(255,121,198,.2)}
body.pink .role-admin{background:rgba(255,121,198,.15);border-color:rgba(255,121,198,.3)}

/* ─ Toast ─ */
body.pink .toast{border-color:var(--accent)}

/* ─ Login ─ */
body.pink .login-wrapper{
  background-image:radial-gradient(ellipse 60% 50% at 50% 20%,rgba(255,121,198,.08) 0%,transparent 70%);
}

/* ── AJUSTES VISUALES ─────────────────────────────────────── */
/* espacio al final para que los botones flotantes no tapen la última fila */
.main-content{padding-bottom:5rem}
.autocomplete-wrapper input{width:100%;box-sizing:border-box}

/* Íconos de fila (editar / eliminar): visibles, y más al pasar por la fila */
.btn-icon{color:var(--text2);border-radius:6px;transition:color .15s,background .15s}
tr:hover .btn-icon{color:var(--text)}
.btn-icon:hover,tr:hover .btn-icon:hover{color:var(--danger);background:var(--red-bg)}
.btn-icon[title="Editar"]:hover,tr:hover .btn-icon[title="Editar"]:hover{color:var(--accent);background:rgba(128,128,128,.14)}

/* Acción destructiva poco frecuente: discreta hasta que se la busca */
.btn-discreto{
  background:transparent;border:1px solid transparent;color:var(--text3);
  font-size:.75rem;padding:.3rem .7rem;font-weight:600;
}
.btn-discreto:hover{color:var(--danger);border-color:var(--danger);background:var(--red-bg)}

/* Tarjetas plegables (formularios de carga): clic en el título para abrir o cerrar */
.card[data-plegable]>.card-title{
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;
}
.card[data-plegable]>.card-title::after{content:"−";font-size:1.15rem;line-height:1;color:var(--accent);letter-spacing:0}
.card[data-plegable]>.card-title:hover{color:var(--text)}
.card[data-plegable].plegada>.card-title{margin-bottom:0;padding-bottom:0;border-bottom:none}
.card[data-plegable].plegada>.card-title::after{content:"+"}
.card[data-plegable].plegada>*:not(.card-title){display:none}

/* Tarjetas de resumen (números grandes arriba de una pantalla) */
.resumen-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.25rem}
.resumen-tile{
  background:var(--bg3);border:1px solid var(--border2);border-radius:12px;
  padding:1rem 1.25rem;border-left:3px solid var(--border2);
}
.resumen-tile .rt-label{font-size:.68rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2)}
.resumen-tile .rt-valor{font-size:1.5rem;font-weight:800;color:var(--text);margin-top:.25rem;letter-spacing:-.5px}
.resumen-tile .rt-detalle{font-size:.72rem;color:var(--text3);margin-top:.15rem}
.resumen-tile.rt-rojo{border-left-color:var(--danger)}
.resumen-tile.rt-amarillo{border-left-color:var(--warning)}
.resumen-tile.rt-azul{border-left-color:var(--info)}


/* ── CELULAR Y TABLET ─────────────────────────────────────── */
@media(max-width:1199px){
  /* El menú desplegable muestra usuario, tema y "Cerrar sesión" (una regla posterior los ocultaba) */
  .nav-mobile-sep{display:block}
  .nav-mobile-user{display:flex;flex-wrap:wrap;gap:.5rem}

  /* La campana queda visible junto al botón del menú */
  .nav-brand{order:1}
  .user-area{display:flex !important;order:2;margin-left:0;gap:0}
  .user-area > *:not(.user-badge):not(.notif-dropdown){display:none !important}
  .user-badge{border:none;background:none;padding:0;box-shadow:none}
  .user-badge .uname,.user-badge .role-chip{display:none}
  .user-badge .notif-bell{font-size:1.15rem;padding:.35rem .5rem}
  .nav-toggle{order:3;margin-left:.35rem}
  .navbar-collapse{order:4}
  .notif-dropdown{position:fixed !important;top:3.6rem !important;left:.5rem;right:.5rem !important;width:auto !important;max-height:70vh !important}
}
@media(max-width:700px){
  /* Evita que iOS haga zoom al tocar un campo */
  .form-group input,.form-group select,.form-group textarea,.chat-input,.novedad-textarea,.table-search,.filter-select{font-size:16px}

  /* Resúmenes compactos: una línea por dato */
  .resumen-tiles{grid-template-columns:1fr;gap:.5rem;margin-bottom:1rem}
  .resumen-tile{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.6rem .9rem}
  .resumen-tile .rt-valor{font-size:1.05rem;margin-top:0;white-space:nowrap}
  .resumen-tile .rt-detalle{display:none}

  /* Dashboard: tarjetas más bajas para que entren más en pantalla */
  .dash-title{padding:1.5rem 0 1.25rem}
  .dash-title h1{font-size:1.45rem;letter-spacing:2px}
  .dash-card{padding:1.2rem .6rem}
  .dash-card .icon{font-size:2rem;margin-bottom:.5rem}
  .dash-card .label{font-size:.78rem;letter-spacing:1px}

  /* Nada debe ser más ancho que la pantalla */
  .table-search{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
  .chart-legend-panel,.chart-legend-item{min-width:0;max-width:100%}
  .chart-legend-nro{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .kpi-card .kpi-value{font-size:1.2rem;overflow-wrap:anywhere}
  .kpi-card .kpi-value.money{font-size:1.05rem}
  .kpi-card:has(.kpi-value.money){grid-column:1/-1}

  .novedades-header .btn{margin-bottom:.9rem}
  .page-header{margin-bottom:1rem}
  body .tutorial-fab{width:38px;height:38px;font-size:1rem;bottom:1rem;left:1rem}
}


/* ── CELULAR: TABLAS COMO TARJETAS Y BOTONES CÓMODOS ──────── */
@media(max-width:700px){
  /* Cada fila de una tabla se ve como una tarjeta: nombre del dato a la izquierda, valor a la derecha */
  .tabla-cards thead{display:none}
  .tabla-cards,.tabla-cards tbody{display:block;width:100%;min-width:0 !important}
  .tabla-cards tr{
    display:block;border:1px solid var(--border2);border-radius:10px;
    margin:0 0 .6rem;padding:.3rem .8rem;background:var(--bg2);
  }
  .tabla-cards tr:hover{background:var(--bg2)}
  .tabla-cards td{
    display:flex;justify-content:space-between;align-items:center;gap:.8rem;
    padding:.4rem 0 !important;border:none !important;text-align:right !important;
    white-space:normal !important;min-width:0 !important;width:auto !important;
  }
  .tabla-cards td + td{border-top:1px solid var(--border) !important}
  .tabla-cards td::before{
    content:attr(data-label);flex-shrink:0;text-align:left;
    font-size:.66rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text3);
  }
  .tabla-cards td[data-label=""]::before{display:none}
  .tabla-cards td[data-label=""]{justify-content:flex-end}
  .tabla-cards td.col-acciones,.tabla-cards td.col-actions{justify-content:flex-end;gap:.4rem}
  .tabla-cards td[colspan]{display:block;text-align:left !important}
  .tabla-cards td[colspan]::before{display:none}
  .tabla-cards td.empty-state{text-align:center !important}
  .table-wrapper:has(> .tabla-cards){border:none;overflow:visible;border-radius:0}
  .tabla-cards .chip,.tabla-cards .badge,.tabla-cards .responsable-chip{white-space:nowrap}

  /* Tarjetas con menos margen interno: más espacio para el contenido */
  .card{padding:1rem}
  .page-header h1{font-size:1.15rem;letter-spacing:1.5px;line-height:1.3}

  /* Todo lo que se toca, de al menos ~40px */
  .btn-icon{min-width:40px;min-height:40px;font-size:1.05rem;display:inline-flex;align-items:center;justify-content:center}
  .insumo-pag-btn{min-width:40px;min-height:40px}
  .view-toggle-btn{min-height:40px;padding-left:.9rem;padding-right:.9rem}
  .btn-sm{min-height:40px}
  .btn{min-height:44px}
  .filter-select,.form-group select,.form-group input:not([type=checkbox]):not([type=radio]),.chat-input{min-height:44px}
  .novedad-comments-btn{min-height:40px}

  /* Filtros y paginación: que se acomoden en varias líneas sin apretarse */
  .card-title.flex-between{flex-direction:column;align-items:stretch;gap:.6rem}
  .card-title.flex-between > *{max-width:100%}
  .filter-inline{flex-wrap:wrap}
  .view-toggle{align-self:flex-start}

  /* El botón para cargar videos tutoriales (solo admin, sin video) no hace falta en el celular */
  body .tutorial-fab--empty{display:none !important}
}

@media(max-width:700px){
  /* Tarjetas más compactas: el producto va arriba como título y se ocultan datos vacíos o internos */
  .tabla-cards tr{display:flex;flex-direction:column;padding:.45rem .8rem}
  .tabla-cards td{font-size:.84rem;padding:.32rem 0 !important}
  .tabla-cards td.td-vacia,
  .tabla-cards td[data-label="#"],
  .tabla-cards td[data-label="Cód."],
  .tabla-cards td.ins-col-exp{display:none !important}
  .tabla-cards td[data-label="Producto"],
  .tabla-cards td[data-label="Nombre"],
  .tabla-cards td[data-label="Usuario"]{
    order:-1;justify-content:flex-start;text-align:left !important;font-weight:700;font-size:.92rem;border-top:none !important;
  }
  .tabla-cards td[data-label="Producto"]::before,
  .tabla-cards td[data-label="Nombre"]::before,
  .tabla-cards td[data-label="Usuario"]::before{display:none}
  .tabla-cards td[data-label="Producto"] + td{border-top:1px solid var(--border) !important}
  .tabla-cards td.col-acciones::before,.tabla-cards td.col-actions::before,
  .tabla-cards td[data-label="Acciones"]::before,.tabla-cards td[data-label="Acc."]::before{display:none}
  .tabla-cards tr.ins-row{cursor:pointer}
  .tabla-cards tr.ins-expand-row{margin-top:-.45rem;border-top-left-radius:0;border-top-right-radius:0}
}