@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1B2A3D;
  --ink-2:#2A3F57;
  --paper:#F5F6F4;
  --paper-2:#FFFFFF;
  --gold:#C99A3B;
  --gold-dark:#9C7526;
  --green:#2F6D5C;
  --red:#B4453A;
  --line:#DDE1E2;
  --muted:#6B7686;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Inter', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{ text-decoration:none; }

/* ============ LOGIN ============ */
.screen-login{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(201,154,59,.10), transparent 60%),
    linear-gradient(180deg,#16233350,#0F1826 80%),
    var(--ink);
  padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:var(--paper-2);
  border-radius:14px; padding:44px 38px 34px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  position:relative;
}
.login-logo{ display:flex; justify-content:center; margin:0 0 14px; }
.logo-lm{ display:block; }
.login-card .sub{
  text-align:center; color:var(--muted); font-size:13px; margin:0 0 30px;
}
.field{ margin-bottom:16px; }
.field label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.field input{
  width:100%; padding:11px 13px; border-radius:8px;
  border:1.5px solid var(--line); font-family:'Inter'; font-size:14px;
  background:#FBFBFA; transition:.15s;
}
.field input:focus{ outline:none; border-color:var(--gold); background:#fff; }
.row-between{ display:flex; justify-content:space-between; align-items:center; margin:2px 0 22px; flex-wrap:wrap; gap:8px 16px; }
.row-between label{ font-size:13px; color:var(--muted); display:flex; gap:6px; align-items:center; }
.row-between a{ font-size:13px; color:var(--gold-dark); text-decoration:none; font-weight:600; }
.btn-primary{
  width:100%; padding:13px; border-radius:8px; border:none; cursor:pointer;
  background:var(--ink); color:#fff; font-family:'Inter'; font-weight:600;
  font-size:14.5px; letter-spacing:.01em; transition:.15s;
}
.btn-primary:hover{ background:var(--ink-2); }
.login-foot{
  text-align:center; margin-top:22px; font-size:12.5px; color:var(--muted);
}
.alert-error{
  background:#F6E7E5; color:var(--red); border:1px solid #E3BDB6; border-radius:8px;
  padding:10px 14px; font-size:13px; margin-bottom:16px;
}
.alert-success{
  background:#E5F0EC; color:var(--green); border:1px solid #BFDBD1; border-radius:8px;
  padding:12px 16px; font-size:13.5px; margin-bottom:20px;
}

/* ============ LAYOUT INTERNO (dashboard / formularios) ============ */
#dash{ display:flex; min-height:100vh; background:var(--paper); color:var(--ink); }
.sidebar{
  width:230px; background:#16233A; color:#D7DEE8; flex-shrink:0;
  display:flex; flex-direction:column; padding:22px 16px;
}
.brand{ display:flex; align-items:center; padding:2px 6px 26px; }

/* Botón hamburguesa y fondo del menú: ocultos en escritorio, se activan
   en la media query móvil de más abajo. */
.menu-toggle{
  display:none; position:fixed; top:14px; left:14px; z-index:300;
  width:38px; height:38px; border-radius:8px; border:none;
  background:var(--ink); color:#fff; font-size:16px; cursor:pointer;
  align-items:center; justify-content:center;
}
.sidebar-backdrop{
  display:none; position:fixed; inset:0; z-index:250;
  background:rgba(15,24,38,.5);
}
.sidebar-backdrop.show{ display:block; }
.nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px;
  font-size:13.5px; font-weight:500; color:#AEBBCC; cursor:pointer; margin-bottom:2px;
}
.nav-item .dot{ width:6px; height:6px; border-radius:50%; background:#4A5B72; }
.nav-item.active{ background:rgba(201,154,59,.14); color:#F3D9A0; }
.nav-item.active .dot{ background:var(--gold); }
.nav-item.disabled{ cursor:default; opacity:.55; }
.nav-item.sub{ margin-left:20px; padding:7px 12px; font-size:12.5px; }
.nav-item.sub .dot{ width:4px; height:4px; }
.sidebar .user{
  margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; gap:10px; align-items:center;
}
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--gold);
  display:flex; align-items:center; justify-content:center; font-weight:700;
  color:#1B2A3D; font-size:13px; flex-shrink:0;
}
.user .who{ font-size:12.5px; }
.user .who b{ display:block; color:#fff; font-size:13px; }

.main{ flex:1; padding:30px 38px; overflow-x:auto;}
.topbar{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; flex-wrap:wrap; gap:14px;}
.topbar h2{ font-family:'Fraunces'; font-weight:600; font-size:26px; margin:0; }
.topbar .eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.btn-gold{
  background:var(--gold); color:#1B2A3D; border:none; padding:11px 20px;
  border-radius:8px; font-weight:700; font-size:13.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}

.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px; }
.kpi{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.kpi .lbl{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.kpi .val{ font-family:'Fraunces'; font-size:26px; font-weight:600; }
.kpi .val.g{ color:var(--green); } .kpi .val.r{ color:var(--red); } .kpi .val.gold{ color:var(--gold-dark); }

.panel{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
.panel-head h3{ font-family:'Fraunces'; font-size:16px; margin:0; font-weight:600; }
.search{ display:flex; gap:8px; align-items:center; }
.search input{ padding:8px 12px; border:1px solid var(--line); border-radius:7px; font-size:13px; width:200px; }
.search button{
  padding:8px 14px; border:none; border-radius:7px; background:var(--ink); color:#fff;
  font-family:'Inter'; font-size:12.5px; font-weight:600; cursor:pointer;
}
.search button:hover{ background:var(--ink-2); }
.search .clear{ font-size:12px; color:var(--muted); font-weight:600; }
.search .clear:hover{ color:var(--ink); }

.paginacion{
  display:flex; justify-content:center; align-items:center; gap:16px;
  padding:16px 20px; border-top:1px solid var(--line);
}
.pg-btn{
  font-size:12.5px; font-weight:600; color:var(--ink); padding:7px 14px;
  border:1px solid var(--line); border-radius:7px;
}
a.pg-btn:hover{ border-color:var(--muted); background:var(--paper); }
.pg-btn.disabled{ color:var(--muted); opacity:.5; cursor:default; }
.pg-info{ font-size:12.5px; color:var(--muted); font-weight:600; }

table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); padding:12px 20px; border-bottom:1px solid var(--line); font-weight:600;
}
tbody td{ padding:14px 20px; border-bottom:1px solid var(--line); font-size:13.5px; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#FAFAF8; }
.fol{ font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--muted); }
.cliente b{ display:block; font-size:13.5px; } .cliente span{ font-size:12px; color:var(--muted); }
.monto{ font-family:'IBM Plex Mono'; font-weight:600; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:600; }
.badge.pend{ background:#FBF1DC; color:var(--gold-dark); }
.badge.apr{ background:#E5F0EC; color:var(--green); }
.badge.rej{ background:#F6E7E5; color:var(--red); }
.badge.neutral{ background:#EAEDF2; color:var(--ink-2); }
.badge .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }

.icon-btn{ width:30px; height:30px; border-radius:6px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--muted); font-size:13px; }

/* ============ NUEVA COTIZACIÓN ============ */
.form-grid{ display:grid; grid-template-columns:2fr 1fr; gap:20px; align-items:start; }
.form-grid > div{ min-width:0; }
.card-block{ background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:22px 24px; margin-bottom:20px; }
.card-block h3{ font-family:'Fraunces'; font-size:15.5px; font-weight:600; margin:0 0 16px; display:flex; align-items:center; gap:8px; }
.card-block h3 .idx{ width:20px; height:20px; border-radius:5px; background:var(--gold); color:#1B2A3D; font-size:11px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-family:'Inter';}
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.field-sm label{ display:block; font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.field-sm input, .field-sm select, .field-sm textarea{
  width:100%; padding:9px 11px; border-radius:7px; border:1.5px solid var(--line);
  font-family:'Inter'; font-size:13.5px; background:#FBFBFA;
}
.field-sm input:focus, .field-sm select:focus, .field-sm textarea:focus{ outline:none; border-color:var(--gold); background:#fff; }
.field-sm{ margin-bottom:14px; }
.field-sm input:disabled{ background:#F1F1EF; color:var(--muted); }

.autocomplete-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20;
  background:#fff; border:1.5px solid var(--line); border-radius:9px;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.18); max-height:220px; overflow-y:auto;
  display:none;
}
.autocomplete-list.show{ display:block; }
.ac-item{ padding:10px 13px; cursor:pointer; border-bottom:1px solid var(--line); }
.ac-item:last-child{ border-bottom:none; }
.ac-item:hover, .ac-item.hl{ background:#FBF1DC; }
.ac-item b{ display:block; font-size:13.5px; color:var(--ink); }
.ac-item span{ font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono'; }
.ac-empty{ padding:12px 13px; font-size:12.5px; color:var(--muted); }
.ac-new{ padding:10px 13px; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--gold-dark); border-top:1px solid var(--line); }
.ac-new:hover{ background:#FBF1DC; }

.ac-form{ padding:14px; border-top:1px solid var(--line); background:#FBFBFA; }
.ac-form .grid-2{ margin-bottom:10px; }
.ac-form-actions{ display:flex; justify-content:flex-end; gap:8px; }
.ac-form-actions button{ font-family:'Inter'; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:6px; cursor:pointer; }
.ac-form-actions .ac-cancel{ background:none; border:1.5px solid var(--line); color:var(--muted); }
.ac-form-actions .ac-guardar{ background:var(--gold); border:none; color:#1B2A3D; }
.ac-form-error{ color:var(--red); font-size:12px; margin:0 0 8px; }

.items-table{ width:100%; border-collapse:collapse; margin-top:4px; }
.items-table th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 8px; border-bottom:1.5px solid var(--line); font-weight:600; }
.items-table td{ padding:8px 8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.items-table input{ width:100%; padding:7px 9px; border-radius:6px; border:1.5px solid var(--line); font-size:13px; font-family:'Inter'; background:#FBFBFA; }
.items-table input:focus{ outline:none; border-color:var(--gold); background:#fff; }
.items-table input[readonly]{ background:#F1F1EF; color:var(--ink-2); }
.items-table .pn{ width:88px; } .items-table .pn input{ font-family:'IBM Plex Mono'; font-size:12px; }
.items-table .qty{ width:48px; } .items-table .costo{ width:84px; } .items-table .margen{ width:58px; }
.items-table .price{ width:88px; } .items-table .sub{ width:92px; }
.items-table th, .items-table td{ padding-left:5px; padding-right:5px; }
/* Detalle adicional opcional de cada línea (botón "＋ Detalle") */
.items-table td.acciones{ text-align:right; white-space:nowrap; }
.items-table .detalle-toggle{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin:0 6px 0 0; padding:0; vertical-align:middle; border:1.5px solid #1F9D55; border-radius:50%; background:#1F9D55; color:#fff; font-size:16px; font-weight:700; line-height:1; cursor:pointer; }
.items-table .detalle-toggle:hover{ background:#178046; border-color:#178046; }
.items-table .detalle-toggle.abierto{ background:#fff; color:#1F9D55; }
.items-table .detalle-toggle.abierto:hover{ background:#E8F6EE; }
.items-table .detalle-input{ display:block; width:100%; margin-top:4px; padding:7px 9px; border-radius:6px; border:1.5px solid var(--line); font-size:13px; font-family:'Fraunces', Georgia, serif; font-style:italic; color:var(--ink-2); background:#FBFBFA; resize:vertical; }
.items-table .detalle-input:focus{ outline:none; border-color:var(--gold); background:#fff; }
.items-table .detalle-input[hidden]{ display:none; }
.items-table .sub-val{ font-family:'IBM Plex Mono'; font-weight:600; font-size:13px; }

.grid-4{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; }
@media (max-width: 900px){ .grid-4{ grid-template-columns:1fr 1fr; } }

.toggle-group{ display:flex; gap:8px; background:#F1F1EF; padding:4px; border-radius:8px; }
.toggle-group button{ flex:1; padding:8px; font-size:12.5px; font-weight:600; border:none; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font-family:'Inter'; }
.toggle-group button.sel{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.row-del{ width:26px; height:26px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--red); cursor:pointer; font-size:13px; }
.add-row{ margin-top:12px; background:none; border:1.5px dashed var(--line); color:var(--muted); font-weight:600; font-size:12.5px; padding:9px 14px; border-radius:8px; cursor:pointer; width:100%; }
.add-row:hover{ border-color:var(--gold); color:var(--gold-dark); }

.totales{ margin-top:6px; }
.tot-row{ display:flex; justify-content:space-between; padding:8px 0; font-size:13.5px; color:var(--muted); }
.tot-row.final{ border-top:1.5px solid var(--ink); margin-top:6px; padding-top:14px; font-size:17px; font-weight:700; color:var(--ink); }
.tot-row.final .v{ font-family:'Fraunces'; }
.tot-row .v{ font-family:'IBM Plex Mono'; color:var(--ink); }

.sidenote{ background:#FBF1DC; border:1px solid #EEDBAE; border-radius:9px; padding:12px 14px; font-size:12.5px; color:var(--gold-dark); margin-top:16px; display:flex; gap:8px; }

.form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:8px; }
.btn-ghost{ background:none; border:1.5px solid var(--line); color:var(--ink); padding:11px 20px; border-radius:8px; font-weight:600; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; }
.btn-ghost:hover{ border-color:var(--muted); }

@media (max-width: 900px){ .form-grid{ grid-template-columns:1fr; } .grid-3{ grid-template-columns:1fr 1fr; } }

/* ============ REPORTES ============ */
.filtros-bar{
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; display:flex; gap:14px; align-items:flex-end; margin-bottom:22px; flex-wrap:wrap;
}
.filtros-bar .field-sm{ margin-bottom:0; flex:1; min-width:150px; }
.filtros-bar .btn-aplicar{
  padding:9px 18px; border:none; border-radius:7px; background:var(--ink); color:#fff;
  font-family:'Inter'; font-size:12.5px; font-weight:600; cursor:pointer;
}
.filtros-bar .btn-aplicar:hover{ background:var(--ink-2); }

.chart-wrap{ padding:18px 20px; }
.chart-bars{ display:flex; gap:16px; align-items:flex-end; height:160px; }
.chart-mes{ flex:1; display:flex; flex-direction:column; height:100%; justify-content:flex-end; }
.chart-par{ flex:1; display:flex; align-items:flex-end; gap:4px; }
.chart-par span{ flex:1; border-radius:3px 3px 0 0; min-height:2px; }
.bar-cotizado{ background:var(--ink-2); }
.bar-aprobado{ background:var(--gold); }
.chart-lbl{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:6px; }
.chart-leyenda{ display:flex; gap:14px; font-size:12px; color:var(--muted); align-items:center; }
.chart-leyenda i{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; font-style:normal; vertical-align:-1px; }
.chart-vacio{ text-align:center; color:var(--muted); padding:40px 0; font-size:13px; }

@media print{
  .sidebar, .filtros-bar .btn-aplicar, .topbar .no-print, .menu-toggle, .sidebar-backdrop{ display:none !important; }
  .main{ padding:0; }
}

/* ============ RESPONSIVE (tablet / móvil) ============ */
@media (max-width: 800px){
  .kpis{ grid-template-columns:repeat(2,1fr); }
  .main{ padding:64px 16px 22px; }

  /* El sidebar pasa a ser un panel deslizable sobre el contenido, en vez de
     desaparecer sin dejar forma de reabrirlo. */
  .menu-toggle{ display:flex; }
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:260; width:250px;
    max-width:80vw; transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
  .sidebar.open{ transform:translateX(0); }

  /* Tablas: se conservan como tabla (no se convierten en tarjetas) pero se
     desplazan horizontalmente en vez de desbordar o achicar el texto. */
  table, .items-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }

  .panel-head{ flex-wrap:wrap; gap:10px; }
  .search{ flex-wrap:wrap; width:100%; }
  .search input{ width:auto; flex:1; min-width:0; }
  .paginacion{ flex-wrap:wrap; }

  .chart-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chart-bars{ min-width:520px; }

  .card-block{ padding:18px 16px; }
  .modal-overlay{ padding:0; }
  .modal-box{ max-width:none; width:100%; height:100%; border-radius:0; }
}

@media (max-width: 480px){
  .kpis{ grid-template-columns:1fr; }
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .form-actions{ flex-wrap:wrap; }
  .topbar{ align-items:flex-start; }
}

/* ============ MODAL (ver documento sin salir de la página) ============ */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(27,42,61,.6);
  align-items:center; justify-content:center; padding:26px;
}
.modal-overlay.show{ display:flex; }
.modal-box{
  display:flex; flex-direction:column;
  width:100%; max-width:960px; height:90vh;
  background:var(--paper-2); border-radius:12px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.modal-toolbar{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; border-bottom:1px solid var(--line); background:var(--paper);
}
.modal-toolbar a{ font-size:12.5px; font-weight:600; color:var(--gold-dark); }
.modal-toolbar a:hover{ text-decoration:underline; }
.modal-aviso{
  flex:none; padding:10px 16px; font-size:12.5px;
  background:#FBF1DC; color:var(--gold-dark); border-bottom:1px solid var(--line);
}
.modal-box iframe{ flex:1; width:100%; border:none; display:block; }
.modal-close{
  width:28px; height:28px; border-radius:50%; border:none;
  background:var(--ink); color:#fff; font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background:var(--gold-dark); }


/* ============ CONFIRMAR (eliminar línea, aprobar cotización) — js/confirmar.js ============ */
.confirmar-overlay{
  position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(27,42,61,.45); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s;
}
.confirmar-overlay.show{ opacity:1; visibility:visible; }
.confirmar-box{
  width:100%; max-width:380px; padding:26px 26px 22px; text-align:center;
  background:var(--paper-2); border-radius:14px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
  transform:translateY(8px) scale(.97); transition:transform .15s ease;
}
.confirmar-overlay.show .confirmar-box{ transform:none; }
.confirmar-icono{
  width:48px; height:48px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#F8E7E5; color:var(--red);
}
.confirmar-box h4{ margin:0 0 8px; font-family:'Fraunces'; font-size:19px; font-weight:600; color:var(--ink); }
.confirmar-box p{ margin:0 0 22px; font-size:13.5px; line-height:1.55; color:var(--muted); }
.confirmar-box p b{ color:var(--ink); font-weight:600; }
.confirmar-acciones{ display:flex; gap:10px; justify-content:center; }
.confirmar-acciones button{ flex:1; justify-content:center; }
.btn-eliminar{
  background:var(--red); color:#fff; border:none; padding:11px 20px;
  border-radius:8px; font-weight:700; font-size:13.5px; cursor:pointer;
}
.btn-eliminar:hover{ background:#963A30; }
.confirmar-box[data-tipo="aprobar"] .confirmar-icono{ background:#E5F0EC; color:var(--green); }
.btn-aprobar{
  background:var(--green); color:#fff; border:none; padding:11px 20px;
  border-radius:8px; font-weight:700; font-size:13.5px; cursor:pointer;
}
.btn-aprobar:hover{ background:#24564A; }
.confirmar-acciones button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media print{
  .modal-overlay{ display:none !important; }
  .confirmar-overlay{ display:none !important; }
}

/* ============ DEMO (solo cuando config/entorno.php activa MODO_DEMO) ============ */
/* Franja fija arriba en todas las páginas internas. */
.demo-franja{
  position:fixed; top:0; left:0; right:0; z-index:240; height:34px;
  display:flex; align-items:center; justify-content:center; gap:10px; padding:0 16px;
  background:var(--gold); color:#1B2A3D; font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.demo-franja b{ font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:11.5px; }
.demo-franja span{ overflow:hidden; text-overflow:ellipsis; }
#dash:has(> .demo-franja){ padding-top:34px; }
#dash:has(> .demo-franja) .sidebar{ min-height:calc(100vh - 34px); }
@media (max-width: 800px){
  .demo-franja span{ display:none; }
  #dash:has(> .demo-franja) .menu-toggle{ top:48px; }
}

/* Etiqueta "Demo" en la pantalla de inicio de sesión. */
.demo-etiqueta{
  display:block; width:max-content; margin:-4px auto 10px; padding:3px 12px; border-radius:999px;
  background:#FBF1DC; color:var(--gold-dark); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}

/* Fieldset sin estilo propio (Configuración en solo lectura dentro de la demo). */
.fieldset-limpio{ border:0; padding:0; margin:0; min-width:0; }
.fieldset-limpio:disabled input, .fieldset-limpio:disabled select, .fieldset-limpio:disabled textarea{ background:#F1F1EF; color:var(--ink-2); cursor:not-allowed; }