:root{--eu-navy:#123957;--eu-blue:#1178b5;--eu-blue-hover:#0d689d;--eu-bg:#f4f7fa;--eu-card:#fff;--eu-border:#d8e1e8;--eu-text:#172b3c;--eu-muted:#6d8193;--eu-soft:#eef4f8;--danger:#c94343;--success:#2a8a5a;--shadow:0 1px 2px rgba(12,39,58,.04)}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--eu-bg);color:var(--eu-text)}
a{text-decoration:none;color:inherit}
.layout{min-height:100vh;display:flex}
.sidebar{width:238px;background:var(--eu-navy);color:#fff;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:30}
.brand{padding:24px 18px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-logo{display:block;width:100%;max-width:175px;height:auto;margin:0 auto 14px;object-fit:contain;border-radius:4px;background:#fff;padding:8px}
.brand small{display:block;margin-top:8px;color:#aec4d4;font-size:13px}
.sidebar nav{padding:18px 10px;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:9px;padding:11px 13px;margin:3px 0;border-radius:8px;font-size:14px}
.sidebar nav a:hover,.sidebar nav a.active{background:#226487}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#7fa4ba;padding:20px 12px 7px}
.sidebar-user{padding:18px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:5px;font-size:13px}
.sidebar-user span{color:#a9c4d6}
.logout-btn{display:flex;align-items:center;justify-content:center;margin-top:8px;padding:10px 12px;border-radius:8px;background:#0f6d95;color:#fff;font-weight:700;text-decoration:none}
.logout-btn:hover{background:#0d5d80}
.main{margin-left:238px;width:calc(100% - 238px)}
.topbar{min-height:88px;background:transparent;display:flex;align-items:center;gap:12px;padding:24px 28px 12px}
.topbar h1{font-size:28px;margin:0;line-height:1.15}
.page-subtitle{color:var(--eu-muted);font-size:14px;margin-top:5px}
.topbar-actions{margin-left:auto}
.topbar-logout{min-width:130px}
.menu-btn{display:none;border:0;background:transparent;font-size:24px}
.content{padding:10px 28px 30px}
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--eu-card);border:1px solid var(--eu-border);border-radius:13px;padding:18px;box-shadow:var(--shadow)}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-18px -18px 18px;padding:18px 20px;border-bottom:1px solid var(--eu-border)}
.card-header h3{margin:0;font-size:18px}.card-header p{margin:3px 0 0;color:var(--eu-muted);font-size:13px}
.kpi{padding:20px}.kpi .label{font-size:13px;color:var(--eu-muted)}.kpi .value{font-size:28px;font-weight:800;margin-top:8px}
.toolbar-card{padding:16px 18px;margin-bottom:14px}.toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.filters input,.filters select{min-width:220px}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid #c9d5df;border-radius:8px;background:#fff;font:inherit;color:var(--eu-text);outline:none}
input:focus,select:focus,textarea:focus{border-color:#5aa4cf;box-shadow:0 0 0 3px rgba(17,120,181,.10)}
input[readonly],select[disabled]{background:#edf4fa;color:#456}
textarea{min-height:90px;resize:vertical}
label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-group.full{grid-column:1/-1}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;padding:10px 15px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--eu-blue);color:#fff}.btn-primary:hover{background:var(--eu-blue-hover)}
.btn-secondary{background:#e9f0f5;color:#17344c}.btn-danger{background:var(--danger);color:#fff}.btn-success{background:var(--success);color:#fff}
.table-wrap{overflow:auto;border:1px solid var(--eu-border);border-radius:11px;background:#fff}
table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:13px}
th,td{padding:12px 14px;border-bottom:1px solid #e6edf2;text-align:left}
th{background:#f2f6f9;color:#52687a;position:sticky;top:0;z-index:2;font-size:12px}
tbody tr:hover{background:#f7fbfd}
.money{text-align:right;font-variant-numeric:tabular-nums}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#e8edf2}
.badge.en-proceso{background:#fff4bf;color:#725b00}.badge.facturado{background:#dff3ff;color:#145978}.badge.cerrado{background:#dff4e9;color:#17613b}.badge.anulado,.badge.perdido{background:#fde5e5;color:#8c2020}
.status-dot{width:16px;height:26px;border-radius:8px;background:#dff0e7;display:inline-block}
.alert{padding:12px 14px;border-radius:8px;margin-bottom:16px}.alert.success{background:#e3f5eb;color:#17613b}.alert.error{background:#fde7e7;color:#8c2020}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.detail{background:#f7fafc;border:1px solid var(--eu-border);border-radius:8px;padding:12px}.detail .k{font-size:11px;color:#667786;text-transform:uppercase}.detail .v{margin-top:5px;font-weight:700}
.small{font-size:12px;color:var(--eu-muted)}.actions{display:flex;gap:8px;flex-wrap:wrap}
.section-title{margin:0 0 16px;font-size:20px}
.calc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.calc-card{background:#eaf4f8;border-radius:8px;padding:13px}.calc-card .label{font-size:13px;color:#597083}.calc-card .value{margin-top:5px;font-size:19px;font-weight:800}
.modal-shell{position:fixed;inset:0;background:rgba(16,39,55,.50);display:flex;align-items:center;justify-content:center;padding:26px;z-index:100}
.modal{width:min(1080px,96vw);max-height:92vh;background:#fff;border-radius:16px;display:flex;flex-direction:column;box-shadow:0 22px 70px rgba(0,0,0,.25);overflow:hidden}
.modal.small-modal{width:min(760px,96vw)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;border-bottom:1px solid var(--eu-border)}.modal-header h2{margin:0;font-size:24px}.modal-close{border:0;background:#edf3f7;border-radius:8px;width:42px;height:42px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-body{overflow:auto;padding:26px 28px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:18px 28px;border-top:1px solid var(--eu-border);background:#fff}
.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#0d3654,#0d7190);padding:20px}
.login-card{width:min(390px,92vw);background:#fff;border-radius:16px;padding:28px 30px 26px;box-shadow:0 22px 50px rgba(0,0,0,.20)}
.login-logo-img{display:block;width:100%;max-width:205px;height:auto;margin:0 auto 14px;object-fit:contain}
.login-card h2{margin:5px 0 6px}.login-subtitle{color:var(--eu-muted);font-size:14px;margin-bottom:26px}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.detail-grid,.calc-grid{grid-template-columns:repeat(2,1fr)}.form-grid.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){
  .sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}
  .main{margin-left:0;width:100%}.menu-btn{display:block}
  .grid-4,.grid-2,.form-grid,.form-grid.three,.detail-grid,.calc-grid{grid-template-columns:1fr}
  .content{padding:10px 16px 22px}.topbar{padding:18px 16px 8px}.topbar h1{font-size:24px}
  .modal-shell{padding:10px}.modal-body,.modal-header,.modal-footer{padding-left:18px;padding-right:18px}
  .topbar-actions{display:none}
}

.modal-form-note{margin:0 0 16px;color:var(--eu-muted);font-size:13px}
.modal .form-grid{align-items:start}
.modal-footer.sticky{position:sticky;bottom:0;z-index:2}
@media(max-width:760px){
  .login-card{width:min(360px,94vw);padding:24px 22px}
  .login-logo-img{max-width:180px}
}
/* --- Corrección de modales --- */
.modal-shell{
  position:fixed !important;
  inset:0 !important;
  background:rgba(15,35,50,.58) !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  z-index:9999 !important;
  overflow:auto !important;
}
.modal-shell.is-open{display:flex !important}
.modal{
  position:relative !important;
  width:min(1040px,96vw) !important;
  max-height:90vh !important;
  margin:auto !important;
  background:#fff !important;
  border-radius:15px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}
.modal.small-modal{width:min(720px,96vw) !important}
.modal-header{
  flex:0 0 auto !important;
  padding:18px 24px !important;
}
.modal-header h2{font-size:22px !important}
.modal-body{
  flex:1 1 auto !important;
  overflow:auto !important;
  padding:20px 24px !important;
}
.modal-footer{
  flex:0 0 auto !important;
  padding:14px 24px !important;
  background:#fff !important;
}
.modal-close{
  position:static !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
}
@media(max-width:760px){
  .modal-shell{padding:8px !important;align-items:flex-start !important}
  .modal{max-height:96vh !important;margin:8px auto !important}
}
/* =========================================================
   FIX ALTURA MODALES DE OPERACIONES
   El <form> debe participar del layout flex del modal.
   Así el cuerpo hace scroll y los botones quedan siempre visibles.
   ========================================================= */

.modal{
  max-height:calc(100vh - 28px) !important;
}

.modal > form{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:18px 24px !important;
}

.modal-footer{
  flex:0 0 auto !important;
  position:relative !important;
  bottom:auto !important;
  z-index:5 !important;
  border-top:1px solid var(--eu-border) !important;
  box-shadow:0 -4px 12px rgba(18,57,87,.05) !important;
}

.modal-header{
  flex:0 0 auto !important;
}

/* Hace el formulario un poco más compacto sin perder legibilidad */
.modal .form-grid{
  gap:12px !important;
}

.modal .card{
  padding:16px !important;
}

.modal .section-title{
  margin-bottom:12px !important;
}

.modal input,
.modal select,
.modal textarea{
  padding:9px 11px !important;
}

.modal textarea{
  min-height:70px !important;
}

.modal .calc-grid{
  gap:8px !important;
}

.modal .calc-card{
  padding:10px 12px !important;
}

.modal .calc-card .value{
  font-size:17px !important;
}

@media(max-height:720px){
  .modal-shell{
    padding:8px !important;
    align-items:center !important;
  }

  .modal{
    max-height:calc(100vh - 16px) !important;
  }

  .modal-header{
    padding:12px 20px !important;
  }

  .modal-header h2{
    font-size:20px !important;
  }

  .modal-body{
    padding:12px 18px !important;
  }

  .modal-footer{
    padding:10px 18px !important;
  }
}

@media(max-width:760px){
  .modal{
    max-height:calc(100vh - 12px) !important;
  }

  .modal-body{
    overflow-y:auto !important;
  }
}
/* ===== FIX DEFINITIVO MODALES GRANDES ===== */
.modal-shell{
  display:none;
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  overflow:hidden !important;
}

.modal-shell .modal{
  width:min(1080px,96vw) !important;
  height:calc(100vh - 32px) !important;
  max-height:calc(100vh - 32px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  margin:0 auto !important;
}

.modal-shell .modal > form{
  flex:1 1 auto !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

.modal-shell .modal-header{
  flex:0 0 auto !important;
}

.modal-shell .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain !important;
}

.modal-shell .modal-footer{
  flex:0 0 auto !important;
  position:relative !important;
  display:flex !important;
  visibility:visible !important;
  background:#fff !important;
  z-index:20 !important;
  border-top:1px solid var(--eu-border) !important;
  box-shadow:0 -8px 18px rgba(18,57,87,.08) !important;
}

/* En pantallas bajas hacemos la ventana aún más compacta */
@media(max-height:760px){
  .modal-shell{padding:8px !important}
  .modal-shell .modal{
    height:calc(100vh - 16px) !important;
    max-height:calc(100vh - 16px) !important;
  }
  .modal-shell .modal-header{padding:10px 18px !important}
  .modal-shell .modal-body{padding:10px 18px !important}
  .modal-shell .modal-footer{padding:9px 18px !important}
  .modal-shell .card{padding:12px !important}
  .modal-shell .form-grid{gap:9px !important}
  .modal-shell input,
  .modal-shell select,
  .modal-shell textarea{padding:8px 10px !important}
  .modal-shell textarea{min-height:58px !important}
}

.report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:18px}
.report-card{background:#fff;border:1px solid var(--eu-border);border-radius:12px;padding:16px}
.report-card .label{font-size:12px;color:var(--eu-muted);margin-bottom:6px}
.report-card .value{font-size:24px;font-weight:800}
.report-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.report-tabs a{padding:9px 12px;border-radius:8px;background:#e9f0f5;color:#17344c;font-weight:700;font-size:13px}
.report-tabs a.active{background:var(--eu-blue);color:#fff}
@media(max-width:1000px){.report-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.report-grid{grid-template-columns:1fr}}
/* ===== DASHBOARD FINAL GESTIÓNYA ===== */
.dashboard-period{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:16px;flex-wrap:wrap
}
.dashboard-period .period-label{font-size:13px;color:var(--eu-muted)}
.dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dashboard-kpi{background:#fff;border:1px solid var(--eu-border);border-radius:13px;padding:18px}
.dashboard-kpi .k-label{font-size:12px;color:var(--eu-muted);margin-bottom:6px}
.dashboard-kpi .k-value{font-size:27px;font-weight:800;letter-spacing:-.02em}
.dashboard-kpi .k-note{font-size:11px;color:var(--eu-muted);margin-top:5px}
.dashboard-columns{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:16px;margin-top:18px}
.dashboard-list{display:grid;gap:9px}
.dashboard-list-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #e7edf2}
.dashboard-list-row:last-child{border-bottom:0}
.dashboard-list-row .title{font-weight:700}
.dashboard-list-row .meta{font-size:12px;color:var(--eu-muted);margin-top:3px}
.rank-row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #e7edf2}
.rank-row:last-child{border-bottom:0}
.rank-num{width:25px;height:25px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaf4f8;font-size:11px;font-weight:800;color:#175377}
.rank-name{font-weight:700}
.rank-meta{font-size:11px;color:var(--eu-muted);margin-top:2px}
.status-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.status-box{padding:10px;border-radius:9px;background:#f3f7fa;text-align:center}
.status-box strong{display:block;font-size:18px}
.status-box span{font-size:11px;color:var(--eu-muted)}
@media(max-width:1100px){
 .dashboard-kpis{grid-template-columns:repeat(2,1fr)}
 .dashboard-columns{grid-template-columns:1fr}
}
@media(max-width:650px){
 .dashboard-kpis{grid-template-columns:1fr}
 .status-summary{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   GESTIÓNYA - RESPONSIVE GENERAL V1
   ========================================================= */

:root{
  --sidebar-width:228px;
  --content-max:1680px;
}

/* Estructura general */
body{
  overflow-x:hidden;
}

.app-shell,
.layout,
.page-shell{
  min-width:0;
}

.sidebar{
  width:var(--sidebar-width) !important;
  min-width:var(--sidebar-width) !important;
}

.main,
.main-content,
.content,
.page-content{
  min-width:0 !important;
}

.main{
  margin-left:var(--sidebar-width) !important;
  width:calc(100% - var(--sidebar-width)) !important;
}

.content{
  width:100% !important;
  max-width:var(--content-max);
  margin:0 auto;
  box-sizing:border-box;
}

/* Elementos flex/grid no deben provocar desbordes */
.toolbar,
.filters,
.actions,
.form-grid,
.grid,
.dashboard-kpis,
.dashboard-columns,
.report-grid{
  min-width:0;
}

.toolbar{
  gap:12px !important;
  flex-wrap:wrap !important;
}

.toolbar .filters{
  flex:1 1 620px;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.toolbar .actions{
  flex:0 1 auto;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.filters > *{
  min-width:0;
}

.filters input,
.filters select{
  max-width:100%;
}

/* Formularios: 3 -> 2 -> 1 columnas */
.form-grid.three,
.form-grid.three-cols{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

.form-grid.two,
.form-grid.two-cols{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.form-grid > div,
.form-grid .form-group{
  min-width:0;
}

input,
select,
textarea,
button{
  max-width:100%;
  box-sizing:border-box;
}

/* Tablas */
.table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

.table-wrap table{
  width:max-content;
  min-width:100%;
}

.table-wrap th,
.table-wrap td{
  white-space:nowrap;
}

/* Tarjetas */
.card,
.dashboard-kpi,
.report-card{
  min-width:0;
  overflow:hidden;
}

/* Modales */
.modal-shell{
  padding:clamp(8px,2vw,20px) !important;
}

.modal-shell .modal{
  width:min(1120px,96vw) !important;
  max-width:96vw !important;
  max-height:calc(100dvh - 24px) !important;
}

.modal-shell .modal-body{
  overflow:auto !important;
}

.modal-shell .modal-footer{
  flex-wrap:wrap;
}

.modal-shell .modal-footer .btn{
  max-width:100%;
}

/* Sidebar: navegación más robusta */
.sidebar nav,
.sidebar .nav,
.sidebar-menu{
  overflow-y:auto;
  overflow-x:hidden;
  max-height:calc(100vh - 210px);
  padding-bottom:18px;
}

.sidebar a{
  white-space:normal !important;
}

/* Encabezado superior */
.topbar,
.page-header,
.header-row{
  gap:12px;
  flex-wrap:wrap;
}

/* Resoluciones notebook */
@media (max-width: 1440px){
  :root{--sidebar-width:220px;}
  .content{padding-left:20px !important;padding-right:20px !important;}
  .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .report-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}

/* Notebook 1366x768 y similares */
@media (max-width: 1200px){
  :root{--sidebar-width:205px;}
  .content{padding-left:16px !important;padding-right:16px !important;}
  .form-grid.three,
  .form-grid.three-cols{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .dashboard-columns{
    grid-template-columns:1fr !important;
  }
}

/* Tablet / pantallas angostas: menú lateral plegable */
@media (max-width: 900px){
  :root{--sidebar-width:0px;}

  body.sidebar-open{
    overflow:hidden;
  }

  .sidebar{
    position:fixed !important;
    left:0;
    top:0;
    bottom:0;
    z-index:100000;
    width:260px !important;
    min-width:260px !important;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:8px 0 25px rgba(0,0,0,.18);
  }

  body.sidebar-open .sidebar{
    transform:translateX(0);
  }

  .main{
    margin-left:0 !important;
    width:100% !important;
  }

  .content{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  .mobile-menu-btn{
    display:inline-flex !important;
  }

  .sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    z-index:99999;
    background:rgba(8,26,41,.45);
  }

  body.sidebar-open .sidebar-backdrop{
    display:block;
  }

  .toolbar .filters,
  .toolbar .actions{
    flex:1 1 100%;
  }

  .toolbar .actions{
    justify-content:flex-start;
  }

  .dashboard-kpis,
  .report-grid{
    grid-template-columns:1fr 1fr !important;
  }

  .status-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Móvil */
@media (max-width: 640px){
  .content{
    padding:12px !important;
  }

  h1{font-size:24px !important;}
  h2{font-size:21px !important;}

  .form-grid.three,
  .form-grid.three-cols,
  .form-grid.two,
  .form-grid.two-cols,
  .dashboard-kpis,
  .report-grid,
  .status-summary{
    grid-template-columns:1fr !important;
  }

  .toolbar .filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    flex-basis:100%;
  }

  .toolbar .actions{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .toolbar .actions .btn{
    width:100%;
    text-align:center;
  }

  .card{
    border-radius:10px !important;
  }

  .modal-shell{
    padding:6px !important;
  }

  .modal-shell .modal{
    width:100% !important;
    max-width:100% !important;
    max-height:calc(100dvh - 12px) !important;
    border-radius:10px !important;
  }

  .modal-shell .modal-header,
  .modal-shell .modal-body,
  .modal-shell .modal-footer{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .modal-shell .modal-footer{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .modal-shell .modal-footer .btn{
    width:100%;
  }

  .table-wrap{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Monitores grandes: aprovechar espacio sin estirar demasiado */
@media (min-width: 1800px){
  :root{--content-max:1800px;}
  .content{
    padding-left:30px !important;
    padding-right:30px !important;
  }
}

/* Botón hamburguesa: oculto por defecto */
.mobile-menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:0;
  border-radius:9px;
  background:#eaf2f7;
  color:#17344c;
  font-size:22px;
  font-weight:700;
  cursor:pointer;
}

.sidebar-backdrop{
  display:none;
}
/* ===== AJUSTE VISUAL SCROLL SIDEBAR ===== */
.sidebar nav,
.sidebar .nav,
.sidebar-menu{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}

.sidebar nav::-webkit-scrollbar,
.sidebar .nav::-webkit-scrollbar,
.sidebar-menu::-webkit-scrollbar{
  width:7px;
}

.sidebar nav::-webkit-scrollbar-track,
.sidebar .nav::-webkit-scrollbar-track,
.sidebar-menu::-webkit-scrollbar-track{
  background:transparent;
}

.sidebar nav::-webkit-scrollbar-thumb,
.sidebar .nav::-webkit-scrollbar-thumb,
.sidebar-menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:10px;
  border:2px solid transparent;
  background-clip:padding-box;
}

.sidebar nav::-webkit-scrollbar-thumb:hover,
.sidebar .nav::-webkit-scrollbar-thumb:hover,
.sidebar-menu::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.30);
  background-clip:padding-box;
}

/* Scroll horizontal de tablas más discreto */
.table-wrap{
  scrollbar-width:thin;
  scrollbar-color:#9fb1bf #edf3f7;
}

.table-wrap::-webkit-scrollbar{
  height:8px;
}

.table-wrap::-webkit-scrollbar-track{
  background:#edf3f7;
  border-radius:10px;
}

.table-wrap::-webkit-scrollbar-thumb{
  background:#9fb1bf;
  border-radius:10px;
  border:2px solid #edf3f7;
}

.table-wrap::-webkit-scrollbar-thumb:hover{
  background:#7f96a7;
}
/* ===== AJUSTE ÁREA USUARIO / MENÚ LATERAL ===== */

/* El menú ocupa menos alto para dejar un área de usuario más clara abajo */
.sidebar{
  display:flex !important;
  flex-direction:column !important;
}

.sidebar nav,
.sidebar .nav,
.sidebar-menu{
  flex:1 1 auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  padding-bottom:8px !important;
}

/* Área inferior del usuario */
.sidebar-user-footer{
  flex:0 0 auto;
  padding:12px 12px 14px;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.06);
}

.sidebar-user-footer-name{
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
}

.sidebar-user-footer-role{
  margin-top:3px;
  color:rgba(255,255,255,.68);
  font-size:11px;
}

.sidebar-logout-bottom{
  display:inline-flex !important;
  margin-top:8px;
  padding:6px 10px !important;
  border-radius:6px;
  background:rgba(255,255,255,.12);
  color:#fff !important;
  font-size:11px !important;
  font-weight:700;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.16);
}

.sidebar-logout-bottom:hover{
  background:rgba(255,255,255,.20);
}

/* En notebook bajamos un poco la altura visual del encabezado del sidebar */
@media(max-height:780px){
  .sidebar .logo-wrap,
  .sidebar-logo,
  .brand{
    margin-bottom:8px !important;
  }

  .sidebar-user-footer{
    padding-top:9px;
    padding-bottom:10px;
  }

  .sidebar nav,
  .sidebar .nav,
  .sidebar-menu{
    padding-bottom:4px !important;
  }
}
/* ===== CERRAR SESIÓN DESTACADO ===== */
.sidebar-logout-bottom{
  background:#b42318 !important;
  border-color:#b42318 !important;
  color:#fff !important;
}

.sidebar-logout-bottom:hover{
  background:#8f1c13 !important;
  border-color:#8f1c13 !important;
}

.sidebar-logout-bottom:focus{
  outline:2px solid rgba(255,255,255,.65);
  outline-offset:2px;
}
/* ===== DASHBOARD GRÁFICOS ===== */
.chart-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:16px;
  margin-top:18px;
}

.chart-card{
  background:#fff;
  border:1px solid var(--eu-border);
  border-radius:13px;
  padding:18px;
  min-width:0;
}

.chart-card h3{
  margin:0;
}

.chart-card .chart-subtitle{
  margin-top:4px;
  color:var(--eu-muted);
  font-size:12px;
}

.sales-chart{
  display:flex;
  align-items:flex-end;
  gap:12px;
  min-height:250px;
  padding-top:18px;
}

.sales-bar-col{
  flex:1 1 0;
  min-width:46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  height:220px;
}

.sales-bar-value{
  font-size:11px;
  font-weight:700;
  color:#365166;
  margin-bottom:6px;
  white-space:nowrap;
}

.sales-bar-track{
  width:min(54px,70%);
  height:170px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  border-radius:9px 9px 4px 4px;
  background:#edf3f7;
  overflow:hidden;
}

.sales-bar-fill{
  width:100%;
  min-height:3px;
  border-radius:9px 9px 4px 4px;
  background:#1d79ad;
}

.sales-bar-label{
  margin-top:7px;
  font-size:11px;
  color:var(--eu-muted);
  text-align:center;
}

.donut-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  min-height:250px;
  flex-wrap:wrap;
}

.donut-chart{
  width:170px;
  height:170px;
  border-radius:50%;
  position:relative;
  flex:0 0 170px;
}

.donut-chart::after{
  content:"";
  position:absolute;
  inset:33px;
  background:#fff;
  border-radius:50%;
}

.donut-center{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.donut-center strong{
  font-size:25px;
}

.donut-center span{
  font-size:11px;
  color:var(--eu-muted);
}

.chart-legend{
  display:grid;
  gap:9px;
  min-width:170px;
}

.legend-row{
  display:grid;
  grid-template-columns:12px 1fr auto;
  gap:8px;
  align-items:center;
  font-size:12px;
}

.legend-dot{
  width:10px;
  height:10px;
  border-radius:50%;
}

.legend-process{background:#1d79ad}
.legend-invoiced{background:#e0a11a}
.legend-closed{background:#2d8a57}
.legend-lost{background:#b64c45}

.ranking-chart{
  display:grid;
  gap:12px;
  margin-top:16px;
}

.rank-bar-row{
  display:grid;
  grid-template-columns:minmax(120px,180px) 1fr auto;
  gap:10px;
  align-items:center;
}

.rank-bar-name{
  font-size:12px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rank-bar-track{
  height:12px;
  border-radius:10px;
  background:#edf3f7;
  overflow:hidden;
}

.rank-bar-fill{
  height:100%;
  min-width:3px;
  border-radius:10px;
  background:#1d79ad;
}

.rank-bar-value{
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.chart-empty{
  padding:40px 10px;
  text-align:center;
  color:var(--eu-muted);
  font-size:13px;
}

@media(max-width:1100px){
  .chart-grid{grid-template-columns:1fr}
}

@media(max-width:700px){
  .sales-chart{
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:6px;
  }

  .sales-bar-col{
    flex:0 0 70px;
  }

  .donut-wrap{
    flex-direction:column;
  }

  .rank-bar-row{
    grid-template-columns:1fr;
    gap:5px;
  }

  .rank-bar-value{
    justify-self:end;
  }
}
/* =========================================================
   FIX GRÁFICOS DASHBOARD - prioridad alta
   ========================================================= */
.chart-grid{
  display:grid !important;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr) !important;
  gap:16px !important;
  margin-top:18px !important;
}

.chart-card{
  display:block !important;
  background:#fff !important;
  border:1px solid #d7e1e8 !important;
  border-radius:13px !important;
  padding:18px !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.sales-chart{
  display:flex !important;
  align-items:flex-end !important;
  gap:12px !important;
  min-height:250px !important;
  padding-top:18px !important;
}

.sales-bar-col{
  flex:1 1 0 !important;
  min-width:55px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-end !important;
  height:220px !important;
}

.sales-bar-track{
  display:flex !important;
  align-items:flex-end !important;
  width:52px !important;
  height:170px !important;
  background:#eaf1f5 !important;
  border-radius:9px 9px 4px 4px !important;
  overflow:hidden !important;
}

.sales-bar-fill{
  display:block !important;
  width:100% !important;
  background:#167ab3 !important;
  border-radius:9px 9px 4px 4px !important;
}

.donut-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:24px !important;
  min-height:250px !important;
  flex-wrap:wrap !important;
}

.donut-chart{
  display:block !important;
  width:170px !important;
  height:170px !important;
  min-width:170px !important;
  border-radius:50% !important;
  position:relative !important;
}

.donut-chart::after{
  content:"" !important;
  position:absolute !important;
  inset:33px !important;
  background:#fff !important;
  border-radius:50% !important;
}

.donut-center{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

.chart-legend{
  display:grid !important;
  gap:9px !important;
  min-width:170px !important;
}

.legend-row{
  display:grid !important;
  grid-template-columns:12px 1fr auto !important;
  gap:8px !important;
  align-items:center !important;
}

.legend-dot{
  display:block !important;
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
}

.legend-process{background:#1d79ad !important}
.legend-invoiced{background:#e0a11a !important}
.legend-closed{background:#2d8a57 !important}
.legend-lost{background:#b64c45 !important}

.ranking-chart{
  display:grid !important;
  gap:12px !important;
  margin-top:16px !important;
}

.rank-bar-row{
  display:grid !important;
  grid-template-columns:minmax(120px,180px) 1fr auto !important;
  gap:10px !important;
  align-items:center !important;
}

.rank-bar-track{
  display:block !important;
  height:12px !important;
  background:#eaf1f5 !important;
  border-radius:10px !important;
  overflow:hidden !important;
}

.rank-bar-fill{
  display:block !important;
  height:100% !important;
  min-width:3px !important;
  background:#167ab3 !important;
  border-radius:10px !important;
}

@media(max-width:1100px){
  .chart-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:700px){
  .sales-chart{
    overflow-x:auto !important;
    justify-content:flex-start !important;
  }
  .sales-bar-col{
    flex:0 0 70px !important;
  }
  .rank-bar-row{
    grid-template-columns:1fr !important;
  }
}
/* =========================================================
   IMPORTADOR - RESUMEN DE REVISIÓN
   ========================================================= */
.import-review-panel{
  background:#fff;
  border:1px solid #d7e1e8;
  border-radius:13px;
  padding:18px;
  margin:16px 0;
}

.import-review-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.import-review-head h3{
  margin:0 0 4px;
  color:#0f2f4f;
}

.import-review-head p{
  margin:0;
  color:#6c8091;
  font-size:13px;
}

.import-review-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.import-review-status.success{
  background:#eaf7ef;
  color:#217448;
  border:1px solid #bfe4cd;
}

.import-review-status.danger{
  background:#fff0f0;
  color:#b42318;
  border:1px solid #f0c2be;
}

.import-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(150px,1fr)) minmax(250px,1.6fr);
  gap:12px;
}

.import-stat{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:88px;
  padding:14px;
  background:#f8fafc;
  border:1px solid #e2e8ee;
  border-radius:11px;
  min-width:0;
}

.import-stat.file{
  background:#f4f8fb;
}

.import-stat-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:17px;
  font-weight:800;
}

.import-stat-icon.neutral{
  background:#e8f1f7;
  color:#1c668f;
}

.import-stat-icon.success{
  background:#e4f5eb;
  color:#217448;
}

.import-stat-icon.danger{
  background:#fde8e7;
  color:#b42318;
}

.import-stat-icon.file{
  width:54px;
  flex-basis:54px;
  font-size:10px;
  letter-spacing:.4px;
  background:#e8f1f7;
  color:#1c668f;
}

.import-stat-label{
  color:#6c8091;
  font-size:12px;
  margin-bottom:3px;
}

.import-stat-value{
  color:#102f4e;
  font-size:28px;
  font-weight:800;
  line-height:1;
}

.import-stat-value.success{
  color:#217448;
}

.import-stat-value.danger{
  color:#b42318;
}

.import-file-info{
  min-width:0;
}

.import-file-name{
  color:#102f4e;
  font-size:15px;
  font-weight:750;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.import-ok{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#eaf7ef;
  color:#217448;
  font-size:11px;
  font-weight:800;
}

.import-error{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#fff0f0;
  color:#b42318;
  font-size:11px;
  font-weight:800;
}

.import-ok-note{
  color:#5f7b6a;
  font-size:12px;
}

.import-warning{
  color:#9a6700;
  font-weight:700;
}

@media(max-width:1100px){
  .import-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:700px){
  .import-review-head{
    flex-direction:column;
  }

  .import-summary{
    grid-template-columns:1fr;
  }

  .import-stat{
    min-height:76px;
  }
}
/* =========================================================
   GESTIÓNYA - PULIDO FINAL DE INTERFAZ
   ========================================================= */

/* Escala general y monitores grandes */
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  line-height:1.45;
}

.content{
  width:100%;
  max-width:1800px;
  margin-left:auto;
  margin-right:auto;
}

.topbar{
  max-width:1856px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* Botones: misma altura, foco, hover y estados */
.btn{
  min-height:40px;
  gap:7px;
  line-height:1.15;
  transition:background-color .15s ease, box-shadow .15s ease, transform .05s ease, opacity .15s ease;
  white-space:nowrap;
}

.btn:hover{
  box-shadow:0 2px 7px rgba(18,57,87,.10);
}

.btn:active{
  transform:translateY(1px);
}

.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.modal-close:focus-visible,
.mobile-menu-btn:focus-visible{
  outline:3px solid rgba(17,120,181,.22);
  outline-offset:2px;
}

.btn-secondary:hover{
  background:#dce8f0;
}

.btn-danger:hover{
  background:#ad3030;
}

.btn-success:hover{
  background:#23744c;
}

.btn:disabled,
.btn.is-loading,
button:disabled,
input[type="submit"]:disabled{
  opacity:.58;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

/* Mensajes de sistema */
.alert{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:48px;
  padding:13px 44px 13px 15px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:600;
  box-shadow:0 1px 2px rgba(12,39,58,.03);
  transition:opacity .18s ease, transform .18s ease;
}

.alert.success{
  background:#eaf7ef;
  border-color:#bfdfca;
  color:#1d6b43;
}

.alert.error{
  background:#fff0f0;
  border-color:#efc7c4;
  color:#a42d25;
}

.alert.warning{
  background:#fff8e7;
  border-color:#efd99f;
  color:#805c06;
}

.alert.info{
  background:#edf6fb;
  border-color:#c8dfed;
  color:#245d7b;
}

.alert.success::before{content:"✓";font-weight:900}
.alert.error::before{content:"!";font-weight:900}
.alert.warning::before{content:"!";font-weight:900}
.alert.info::before{content:"i";font-weight:900}

.alert-message{
  flex:1;
}

.alert-close{
  position:absolute;
  right:9px;
  top:8px;
  width:30px;
  height:30px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:currentColor;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  opacity:.65;
}

.alert-close:hover{
  background:rgba(0,0,0,.05);
  opacity:1;
}

.alert-hiding{
  opacity:0;
  transform:translateY(-4px);
}

/* Formularios */
label{
  color:#29465d;
}

input,
select,
textarea{
  min-height:42px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

textarea{
  min-height:96px;
}

input::placeholder,
textarea::placeholder{
  color:#98a8b5;
}

input:disabled,
select:disabled,
textarea:disabled{
  cursor:not-allowed;
  opacity:.78;
}

/* Tarjetas y cabeceras */
.card,
.chart-card,
.import-review-panel{
  box-shadow:0 2px 8px rgba(18,57,87,.035);
}

.card-header{
  min-height:62px;
}

.card-header h3,
.section-title{
  color:#173b58;
}

/* Tablas */
.table-wrap{
  scrollbar-width:thin;
  scrollbar-color:#9bb3c4 transparent;
}

.table-wrap::-webkit-scrollbar{
  height:8px;
  width:8px;
}

.table-wrap::-webkit-scrollbar-thumb{
  background:#9bb3c4;
  border-radius:10px;
}

.table-wrap::-webkit-scrollbar-track{
  background:transparent;
}

.table-wrap.has-horizontal-scroll::after{
  content:"Deslice horizontalmente para ver más columnas";
  display:none;
}

th{
  letter-spacing:.01em;
}

tbody tr:last-child td{
  border-bottom:0;
}

/* Modales */
.modal-shell{
  backdrop-filter:blur(1.5px);
}

.modal{
  border:1px solid rgba(19,57,87,.10);
}

.modal-header{
  min-height:72px;
}

.modal-close{
  transition:background-color .15s ease, transform .05s ease;
}

.modal-close:hover{
  background:#e1eaf0;
}

.modal-close:active{
  transform:scale(.97);
}

.modal-footer{
  flex-wrap:wrap;
}

/* Navegación */
.sidebar nav a{
  min-height:42px;
  transition:background-color .15s ease, padding-left .15s ease;
}

.sidebar nav a:hover{
  padding-left:16px;
}

.sidebar nav a.active{
  box-shadow:inset 3px 0 0 rgba(255,255,255,.85);
}

.sidebar-user-footer{
  flex:0 0 auto;
}

/* Un solo botón hamburguesa */
.mobile-menu-btn{
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-width:42px;
  padding:0;
  border:1px solid #d5e0e7;
  border-radius:9px;
  background:#fff;
  color:#173b58;
  cursor:pointer;
}

/* Notebook */
@media (max-width:1366px){
  .topbar{
    padding-left:22px;
    padding-right:22px;
  }

  .content{
    padding-left:22px;
    padding-right:22px;
  }

  .topbar h1{
    font-size:26px;
  }

  .card{
    padding:16px;
  }

  .card-header{
    margin:-16px -16px 16px;
    padding:16px 18px;
  }
}

/* Tablet / menú lateral */
@media (max-width:900px){
  .topbar{
    min-height:76px;
    padding:15px 14px 8px;
  }

  .topbar h1{
    font-size:24px;
  }

  .page-subtitle{
    font-size:13px;
  }

  .menu-btn,
  .mobile-menu-btn{
    display:inline-flex !important;
  }

  .content{
    max-width:none;
  }
}

/* Móvil */
@media (max-width:640px){
  .topbar{
    align-items:flex-start;
  }

  .topbar h1{
    font-size:22px !important;
  }

  .page-subtitle{
    line-height:1.3;
  }

  .toolbar,
  .card-header,
  .dashboard-period{
    align-items:stretch !important;
  }

  .card-header{
    flex-direction:column;
  }

  .card-header > .btn,
  .card-header > a.btn{
    width:100%;
  }

  .actions{
    width:100%;
  }

  .actions .btn{
    flex:1 1 auto;
  }

  .alert{
    font-size:12px;
  }

  table{
    font-size:12px;
  }

  th,td{
    padding:10px 11px;
  }

  .modal-header h2{
    font-size:20px;
  }
}

/* Teléfono pequeño */
@media (max-width:420px){
  .content{
    padding-left:9px !important;
    padding-right:9px !important;
  }

  .topbar{
    padding-left:10px;
    padding-right:10px;
  }

  .card,
  .chart-card,
  .import-review-panel{
    border-radius:9px !important;
  }

  .toolbar .actions,
  .actions{
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .toolbar .actions .btn,
  .actions .btn{
    width:100%;
  }

  .dashboard-kpi .k-value,
  .kpi .value{
    font-size:24px;
  }
}

/* Pantallas anchas: evitar que todo quede excesivamente estirado */
@media (min-width:1900px){
  .content{
    padding-top:16px;
  }

  .card,
  .chart-card{
    border-radius:14px;
  }

  table{
    font-size:13px;
  }
}

/* Accesibilidad: menos movimiento si el sistema lo solicita */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition:none !important;
    animation:none !important;
  }
}

/* ===== GESTIÓNYA WORDMARK ===== */
.brand-wordmark,.login-wordmark{font-weight:800;letter-spacing:-.045em;line-height:1;font-size:28px;color:#14202b}.brand-wordmark strong,.login-wordmark strong{color:#2457d6}.sidebar .brand-wordmark{color:#fff}.sidebar .brand-wordmark strong{color:#8fb0ff}.login-wordmark{text-align:center;font-size:38px;margin:4px 0 18px}.login-wordmark span{color:#14202b}