/* ==============================================================
   AMIX RADIO PANEL — design system
   Every selector below matches the original file 1:1 so app.js /
   client.js / sidebar.js / account.js / system.js / firewall.js
   keep working with zero changes. Only values changed: palette,
   type, radius, shadow, spacing.
   ============================================================== */
:root{
  /* Propuesta B · Claro — rojo AMIX, fondo claro profesional */
  --accent:#dc2626; --accent2:#b91c1c;
  --rojo:#dc2626; --rojo2:#b91c1c;
  --fondo:#f5f6f8; --panel:#ffffff; --panel2:#f1f3f6;
  --borde:#e6e8ec; --texto:#3a404c; --texto-sec:#5b6270; --texto-ter:#8a91a0;
  --verde:#0f9d58; --amarillo:#c2740c; --gris:#98a2b0; --azul:#2563eb;

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',SFMono-Regular,Consolas,'Liberation Mono',monospace;
  --display:'Inter',var(--sans);

  --accent-soft:#fdecec; --accent-ring:rgba(220,38,38,.28);
  --rojo-soft:#fdecec; --rojo-ring:rgba(220,38,38,.28);
  --verde-soft:#e6f6ee; --amarillo-soft:#fdf3e2; --azul-soft:#eaf1fe;

  --shadow-sm:0 1px 2px rgba(20,23,28,.04),0 4px 14px -6px rgba(20,23,28,.08);
  --shadow-md:0 8px 24px -10px rgba(20,23,28,.12);
  --shadow-lg:0 20px 48px -16px rgba(20,23,28,.18);

  /* Sidebar claro (mismo lenguaje que el contenido) */
  --rack:#ffffff; --rack-line:#eceef2; --rack-text:#5b6270;
  --rack-text-dim:#8a91a0; --rack-hover:#f5f6f8; --rack-active:#fdecec;

  --radius-sm:10px; --radius-md:12px; --radius-lg:16px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{color-scheme:light dark;}
body{background:var(--fondo);color:var(--texto);font-family:var(--sans);min-height:100vh;font-size:13px;-webkit-font-smoothing:antialiased;}
::selection{background:var(--rojo-soft);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:var(--borde);border-radius:8px;}
::-webkit-scrollbar-track{background:transparent;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}}

header{background:var(--panel);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid var(--accent);}
header .brand{display:flex;align-items:center;gap:10px;}
header .brand img{height:28px;width:auto;display:block;}
header .brand .titles{display:flex;flex-direction:column;line-height:1.25;}
header h1{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:1px;color:var(--texto);text-transform:uppercase;}
header .titles small{font-size:10px;opacity:.7;font-weight:500;color:var(--texto);letter-spacing:1px;text-transform:uppercase;}
header span.clock{font-size:11px;color:var(--texto-sec);letter-spacing:.5px;font-family:var(--mono);}
header .header-right{display:flex;align-items:center;gap:16px;}
header .header-right .meta{font-size:11px;color:var(--texto-sec);}
header .header-right a.link, header .header-right button.link{background:none;border:none;color:var(--texto-sec);font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;padding:6px 2px;border-bottom:2px solid transparent;text-decoration:none;cursor:pointer;font-family:var(--mono);}
header .header-right a.link:hover, header .header-right button.link:hover{color:var(--texto);border-color:var(--accent);}
header .header-right a.backlink{display:inline-flex;align-items:center;color:var(--texto);font-size:12px;font-weight:700;text-decoration:none;padding-bottom:2px;border-bottom:2px solid var(--accent);font-family:var(--mono);}
header .header-right a.backlink:hover{color:var(--accent);}
header .header-right .signout-btn{background:var(--texto);color:var(--panel);padding:8px 16px;border-radius:var(--radius-sm);border:none;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;cursor:pointer;font-family:var(--mono);}
header .header-right .signout-btn:hover{background:var(--accent);color:#fff;}

main{max-width:1280px;margin:0 auto;}
.app-content main{padding:0;}

/* KPI strip — top of the dashboard, above the toolbar. Each card is a
   number plus an optional trend sparkline; cards with no real historical
   data (see renderKpis() in app.js) just omit the <svg>, no fake line. */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--radius-md);overflow:hidden;margin-bottom:18px;box-shadow:var(--shadow-sm);}
.kpis.cols-3{grid-template-columns:repeat(3,1fr);}
.kpis:empty{display:none;}
.kpi{background:var(--panel);padding:15px 18px;}
.kpi .kpi-l{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--texto-sec);margin-bottom:6px;font-weight:600;}
.kpi .kpi-v{font-family:var(--display);font-size:1.5rem;font-weight:700;display:flex;align-items:baseline;gap:5px;color:var(--texto);}
.kpi .kpi-v .unit{font-size:.8rem;color:var(--texto-ter);font-weight:500;}
.kpi svg.kpi-spark{width:100%;height:22px;margin-top:7px;display:block;}
@media (max-width:720px){ .kpis{grid-template-columns:repeat(2,1fr);} }

/* capacity ring — listeners ÷ plan max, next to the listener count */
.cap-gauge{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.cap-gauge .inner{width:19px;height:19px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:7.5px;font-family:var(--mono);color:var(--texto-sec);font-weight:700;}

.toolbar{display:flex;align-items:stretch;margin-bottom:18px;border:1px solid var(--borde);border-radius:var(--radius-md);overflow:hidden;overflow-x:auto;background:var(--panel);box-shadow:var(--shadow-sm);}
.toolbar .statpill{display:flex;align-items:center;gap:8px;padding:13px 20px;border-right:1px solid var(--borde);font-size:12px;color:var(--texto-sec);white-space:nowrap;}
.toolbar .statpill .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.toolbar .statpill b{font-family:var(--display);font-weight:700;font-size:18px;color:var(--texto);}
.toolbar .spacer{flex:1;}
.toolbar .tbtn{border:none;border-left:1px solid var(--borde);background:var(--panel);color:var(--texto-sec);padding:0 20px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:600;cursor:pointer;font-family:var(--mono);}
.toolbar .tbtn:hover{background:var(--panel2);color:var(--texto);}
.toolbar .tbtn.primary{background:var(--accent);color:#fff;border-left:none;}
.toolbar .tbtn.primary:hover{background:var(--accent2);}

button, .btn-primary, .btn-ghost, .btn-icon{cursor:pointer;border:1px solid var(--borde);border-radius:var(--radius-sm);font-weight:600;font-size:13px;padding:10px 16px;transition:.12s ease;background:var(--panel);color:var(--texto-sec);text-transform:none;letter-spacing:0;font-family:var(--sans);}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);}
.btn-primary:disabled{opacity:.6;cursor:default;}
.btn-ghost:hover{border-color:var(--texto-sec);color:var(--texto);}
.btn-sm{padding:6px 10px;font-size:10px;border-radius:6px;}

.table-scroll{overflow-x:auto;border-radius:var(--radius-md);}
table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--borde);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);}
th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:1.1px;color:var(--texto-sec);padding:11px 14px;border-bottom:1px solid var(--borde);background:var(--panel2);font-weight:700;}
td{padding:12px 14px;border-bottom:1px solid var(--borde);font-size:12.5px;vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tr:hover{background:var(--panel2);}
.mono{font-family:var(--mono);font-size:11px;color:var(--texto-sec);}
.spark{width:90px;height:22px;}
.spark svg{display:block;}
.spark.empty{color:var(--texto-ter);font-size:10px;display:flex;align-items:center;height:22px;}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:4px 10px;border-radius:20px;}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.badge.activo{color:var(--verde);background:var(--verde-soft);}
.badge.activo::before{box-shadow:0 0 0 0 rgba(14,159,99,.5);animation:live-blip 1.8s infinite;}
@keyframes live-blip{0%{box-shadow:0 0 0 0 rgba(14,159,99,.5);}70%{box-shadow:0 0 0 6px rgba(14,159,99,0);}100%{box-shadow:0 0 0 0 rgba(14,159,99,0);}}
.badge.vencido{color:var(--rojo);background:var(--rojo-soft);}
.badge.suspendido{color:var(--amarillo);background:var(--amarillo-soft);}

.engine-tag{font-size:9.5px;padding:3px 8px;border-radius:6px;background:var(--panel2);color:var(--texto-sec);border:1px solid var(--borde);letter-spacing:.6px;text-transform:uppercase;display:inline-flex;align-items:center;font-weight:700;}
.engine-tag.shoutcast{color:#177a85;border-color:rgba(58,155,168,.35);background:rgba(58,155,168,.10);}
.engine-tag.icecast{color:#3548a3;border-color:rgba(74,99,181,.35);background:rgba(74,99,181,.10);}

.listeners{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--texto);font-weight:700;font-family:var(--mono);}
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--verde);box-shadow:0 0 6px var(--verde);}
.dot-off{width:6px;height:6px;border-radius:50%;background:var(--gris);}

.listeners-cell{display:flex;align-items:center;gap:7px;}
.listeners-num{font-family:var(--mono);font-weight:700;font-size:14px;color:var(--texto-ter);}
.listeners-num.live{color:var(--texto);}
.actions{display:flex;gap:5px;flex-wrap:nowrap;white-space:nowrap;}

.modal-overlay{position:fixed;inset:0;background:rgba(9,10,12,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
.modal-overlay.show{display:flex;}
.modal{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radius-lg);padding:26px;width:420px;max-width:100%;font-family:var(--sans);box-shadow:var(--shadow-lg);}
.modal h2{font-family:var(--display);font-size:19px;margin-bottom:16px;color:var(--texto);font-weight:700;}
.field{margin-bottom:13px;}
.field label{display:block;font-size:11.5px;color:var(--texto-sec);margin-bottom:5px;font-weight:600;}
.field input,.field select{width:100%;background:var(--panel2);border:1px solid var(--borde);border-radius:8px;padding:9px 11px;color:var(--texto);font-size:13px;font-family:var(--sans);}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;}
.credpanel{background:var(--panel2);border:1px solid var(--borde);border-radius:10px;padding:14px;font-size:12px;font-family:var(--mono);color:var(--texto-sec);margin-top:8px;line-height:1.75;}
.credpanel b{color:var(--texto);}
.empty{text-align:center;padding:60px 20px;color:var(--texto-sec);}
.toast{position:fixed;bottom:20px;right:20px;background:var(--texto);border-left:3px solid var(--accent);border-radius:10px;padding:12px 16px;font-size:12px;z-index:100;display:none;color:var(--fondo);font-family:var(--sans);box-shadow:var(--shadow-lg);}
.btn-icon{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;}
.btn-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;}
.btn-icon.danger{color:var(--rojo);border-color:var(--rojo);}
.icon-action{border:1px solid var(--borde);background:var(--panel);padding:0;width:30px;height:30px;flex-shrink:0;border-radius:9px;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--texto-sec);margin-right:2px;}
.icon-action svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;}
.icon-action:hover{color:var(--texto);border-color:var(--texto-sec);}
.icon-action.c-delete{color:var(--rojo);}
.icon-action.c-delete:hover{border-color:var(--rojo);}
.icon-action.c-play{color:var(--accent);background:var(--accent-soft);border-color:transparent;}
.icon-action.c-play:hover{background:var(--accent);color:#fff;}

.rowvu{display:flex;gap:2px;align-items:flex-end;height:18px;width:16px;flex-shrink:0;}
.rowvu span{flex:1;background:var(--verde);border-radius:1px;height:70%;transition:height .3s ease;}
.rowvu.off span{background:var(--borde);height:15% !important;}

/* client table row — compact, aligned columns, no floating inline styles */
.row-name{display:flex;align-items:center;gap:10px;min-width:0;}
.row-name-text{min-width:0;display:flex;flex-direction:column;gap:1px;}
.row-name-text b{font-weight:600;font-size:12.5px;color:var(--texto);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.row-notes{font-size:10.5px;color:var(--texto-ter);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;}
.owner-tag{font-size:10px;color:var(--texto-sec);font-family:var(--mono);white-space:nowrap;}
.owner-tag.me{color:var(--texto-ter);}
.cell-empty{color:var(--texto-ter);}
.row-nowplaying{color:var(--accent);max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row-nowplaying:empty{display:none;}
.icon-action.c-reset{color:#7c3aed;}
.icon-action.c-reset:hover{border-color:#7c3aed;}
.icon-action.c-more{font-size:17px;font-weight:700;line-height:1;letter-spacing:0;}

/* hover-reveal row menu — one shared floating panel, positioned via JS so it
   overlays the page instead of needing extra table width or getting clipped
   by the horizontal-scroll wrapper */
.row-menu{position:fixed;display:none;flex-direction:column;background:var(--panel);border:1px solid var(--borde);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px;min-width:180px;z-index:300;}
.row-menu button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:7px;font-size:12.5px;font-weight:500;letter-spacing:normal;text-transform:none;font-family:var(--sans);color:var(--texto);cursor:pointer;border:none;background:none;width:100%;text-align:left;}
.row-menu button:hover{background:var(--panel2);}
.row-menu button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0;}
.row-menu button.danger{color:var(--rojo);}

.sysbar{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.section-card{border:1px solid var(--borde);border-radius:var(--radius-md);margin-bottom:18px;background:var(--panel);box-shadow:var(--shadow-sm);overflow:hidden;}
.section-head{background:var(--panel2);padding:11px 16px;font-size:12px;font-weight:700;color:var(--texto);border-bottom:1px solid var(--borde);font-family:var(--display);letter-spacing:.3px;font-size:13px;}
.section-card .sysbar{border:none;margin-bottom:0;padding:14px;}
.sysinfo{padding:6px 16px;max-width:480px;}
.sysinfo .row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--panel2);font-size:12px;}
.sysinfo .row:last-child{border-bottom:none;}
.sysinfo .row b{color:var(--texto-sec);font-weight:600;flex-shrink:0;}
.sysinfo .row .val{color:var(--azul);font-weight:600;text-align:right;font-family:var(--mono);}
.sysinfo .row .val.up{color:var(--verde);}
.sysload-card{display:flex;align-items:center;gap:20px;padding:18px;}
.sysload-ring{width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--azul) 0% 0%, var(--panel2) 0% 100%);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sysload-ring .inner{width:46px;height:46px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--texto);font-family:var(--mono);}
.sysload-card .sysinfo{padding:0;max-width:none;flex:1;}
.sysbox{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radius-md);padding:16px;flex:1;min-width:180px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-sm);}
.sysring{width:52px;height:52px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:conic-gradient(var(--verde) 0% var(--p), var(--panel2) var(--p) 100%);}
.sysring.warn{background:conic-gradient(var(--amarillo) 0% var(--p), var(--panel2) var(--p) 100%);}
.sysring.crit{background:conic-gradient(var(--rojo) 0% var(--p), var(--panel2) var(--p) 100%);}
.sysring .inner{width:40px;height:40px;border-radius:50%;background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--mono);}
.syslbl{font-size:10px;color:var(--texto-sec);text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;font-weight:600;}
.syssub{font-size:10.5px;color:var(--texto-ter);font-family:var(--mono);}
.sysnet{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radius-md);padding:16px;flex:2;min-width:220px;display:flex;flex-direction:column;gap:6px;justify-content:center;box-shadow:var(--shadow-sm);}
.sysnetrow{display:flex;justify-content:space-between;gap:14px;font-size:11px;color:var(--texto-sec);font-family:var(--mono);}
.sysnetrow b{font-size:12px;color:var(--texto);}
.sysnetrow .down{color:var(--azul);font-weight:700;}
.sysnetrow .up{color:var(--verde);font-weight:700;}
.sigwrap{display:flex;align-items:center;gap:6px;}
.sigwrap .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.sigwrap .dot.live{background:var(--verde);box-shadow:0 0 5px var(--verde);}
.sigwrap .dot.nosignal{background:var(--amarillo);box-shadow:0 0 5px var(--amarillo);}
.sigwrap .dot.off{background:var(--gris);}
.siglabel{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;}
.siglabel.live{color:var(--verde);}
.siglabel.nosignal{color:var(--amarillo);}
.siglabel.off{color:var(--texto-sec);}
.sub{font-size:10.5px;color:var(--texto-ter);margin-top:2px;}

.playerbar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--rack);color:#fff;padding:11px 16px 11px 11px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:14px;z-index:200;min-width:340px;max-width:90vw;border:1px solid var(--rack-line);}
.playerbar-play{width:36px;height:36px;border-radius:50%;background:var(--accent);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;}
.playerbar-play:hover{background:var(--accent2);}
.playerbar-info{flex:1;min-width:0;}
.playerbar-name{font-size:13px;font-weight:700;font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.playerbar-sub{font-size:10px;color:#34d399;text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono);margin-top:2px;}
.playerbar-bars{display:flex;gap:2px;align-items:flex-end;height:18px;width:50px;flex-shrink:0;}
.playerbar-bars span{flex:1;background:var(--accent);border-radius:1px;min-height:2px;transition:height .25s ease;}
.playerbar-close{background:none;border:none;color:var(--rack-text-dim);font-size:15px;cursor:pointer;padding:0;font-family:var(--mono);}
.playerbar-close:hover{color:#fff;}

/* ===== Responsive: celular y tablet ===== */
@media (max-width: 720px) {
  header{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;}
  header .header-right{width:100%;flex-wrap:wrap;gap:10px;}
  main{padding:0 12px;}
  .toolbar{flex-wrap:wrap;overflow-x:visible;}
  .toolbar .statpill{flex:1 1 45%;justify-content:center;border-right:none;border-bottom:1px solid var(--borde);}
  .toolbar .tbtn{flex:1 1 45%;border-left:none;border-top:1px solid var(--borde);}
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{white-space:nowrap;}
  .credcols{grid-template-columns:1fr !important;}
  .apkwrap, .embedwrap, .pwawrap{flex-direction:column !important;}
  .apkphone, .embedpreview, .pwashare{width:100% !important;position:static !important;}
  .v1grid{grid-template-columns:repeat(2,1fr) !important;}
  .modal{width:94vw !important;}
  .v2-grid, .v3-assets, .v3-grid{grid-template-columns:1fr 1fr !important;}
}
@media (max-width: 420px) {
  .v1icons{gap:12px;}
  .toolbar .statpill{flex:1 1 100%;}
}

/* ==============================================================
   SIDEBAR — "console rack": stays this dark in both light/dark
   content themes, like a physical bezel. Same markup/classes
   sidebar.js already renders, only restyled.
   ============================================================== */
.app-shell{display:flex;min-height:100vh;}

/* Sidebar: collapsed to a narrow icon rail by default, expands into a
   floating panel on hover (doesn't push the page content). */
.app-sidebar{
  width:68px;background:var(--rack);color:var(--rack-text);flex-shrink:0;
  display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;
  overflow:hidden;border-right:1px solid var(--rack-line);z-index:40;
  transition:width .16s ease;
}
.app-sidebar:hover{width:230px;overflow-y:auto;box-shadow:var(--shadow-lg);}
.app-content{flex:1;min-width:0;padding:26px 30px 26px 98px;}
.app-content h2.pagetitle{font-family:var(--display);font-size:20px;margin-bottom:20px;}

.app-sidebar .brand{padding:20px 16px 16px;border-bottom:1px solid var(--rack-line);display:flex;align-items:center;gap:10px;min-height:24px;}
.app-sidebar .brand-mark{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:15px;flex-shrink:0;}
.app-sidebar .brand-full{display:none;height:24px;width:auto;max-width:170px;object-fit:contain;object-position:left center;flex-shrink:0;}
.app-sidebar:hover .brand-mark{display:none;}
.app-sidebar:hover .brand-full{display:block;}
.app-sidebar .brand-text{display:none;flex-direction:column;gap:1px;white-space:nowrap;}
.app-sidebar:hover .brand-text{display:flex;}
.app-sidebar .brand-text b{color:#fff;font-size:14px;letter-spacing:.3px;font-family:var(--display);font-weight:700;display:block;}
.app-sidebar .brand-text small{display:block;color:var(--rack-text-dim);font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;}

.app-sidebar nav{flex:1;padding:10px 0;}
.app-sidebar .cat{font-size:9.5px;text-transform:uppercase;color:var(--rack-text-dim);padding:15px 18px 6px;letter-spacing:1.3px;font-weight:700;white-space:nowrap;opacity:0;height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:opacity .1s ease;}
.app-sidebar:hover .cat{opacity:1;height:auto;padding:15px 18px 6px;}
.app-sidebar a.navitem, .app-sidebar button.navitem{display:flex;align-items:center;gap:14px;padding:11px 0 11px 22px;font-size:12.5px;color:var(--rack-text);cursor:pointer;border-left:3px solid transparent;text-decoration:none;background:none;border-top:none;border-right:none;border-bottom:none;width:100%;text-align:left;font-family:var(--sans);font-weight:500;white-space:nowrap;}
.app-sidebar a.navitem:hover{color:#fff;background:var(--rack-hover);}
.app-sidebar a.navitem.active{background:var(--rack-active);color:#fff;border-left-color:var(--accent);}
.app-sidebar a.navitem svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;flex-shrink:0;opacity:.85;}
.app-sidebar a.navitem.active svg{opacity:1;color:var(--accent);}
.app-sidebar .label{opacity:0;transition:opacity .08s ease;}
.app-sidebar:hover .label{opacity:1;transition-delay:.05s;}

.app-sidebar .sidebar-footer{padding:13px 18px;border-top:1px solid var(--rack-line);font-size:10.5px;color:var(--rack-text-dim);display:flex;flex-direction:column;gap:10px;align-items:flex-start;font-family:var(--mono);}
.app-sidebar .sidebar-footer .label{font-family:var(--mono);}
.app-sidebar .sidebar-footer button{display:flex;align-items:center;gap:12px;background:none;border:none;color:var(--rack-text-dim);font-size:11px;text-transform:none;cursor:pointer;font-family:var(--sans);font-weight:600;letter-spacing:.3px;padding:0;white-space:nowrap;}
.app-sidebar .sidebar-footer button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;flex-shrink:0;}
.app-sidebar .sidebar-footer button:hover{color:#fff;}

/* El botón para elegir vertical/horizontal (id sbLayoutToggle, dentro del
   sidebar-footer que arma renderSidebar() en sidebar.js) es un <button>
   más ahí adentro, así que ya hereda el mismo estilo que "Sign out" de al
   lado sin necesitar reglas propias. La clase layout-toggle-btn queda solo
   como gancho por si en algún momento hay que diferenciarlo. */

/* ==============================================================
   Layout horizontal — misma marca/nav/footer que renderSidebar()
   ya arma, solo reacomodados en una barra fija arriba en vez del
   rail lateral. Se activa con la clase .layout-horizontal en
   .app-shell (toggleLayout() en sidebar.js), guardada en
   localStorage por navegador, no por cuenta.

   Solo aplica en escritorio (min-width:821px): en pantallas angostas
   el sidebar YA se convierte en una barra horizontal envuelta (ver el
   @media max-width:820px de más abajo), y esas reglas ahí abajo tienen
   MENOS especificidad que estas de acá — si no las encerramos en su
   propio media query, en mobile con la preferencia en "horizontal"
   estas reglas le ganan a las de mobile y el footer/nav quedan mal
   acomodados. Dejando esto solo para escritorio, mobile se comporta
   igual sin importar qué haya elegido el usuario ahí arriba.
   ============================================================== */
@media (min-width:821px){
  .app-shell.layout-horizontal{flex-direction:column;}
  .app-shell.layout-horizontal .app-sidebar{
    position:static;width:100%;height:64px;flex-direction:row;align-items:center;
    padding:0 14px;gap:10px;overflow:visible;border-right:none;
    border-bottom:1px solid var(--rack-line);transition:none;
  }
  .app-shell.layout-horizontal .app-sidebar:hover{width:100%;box-shadow:none;}
  .app-shell.layout-horizontal .app-sidebar .brand{border-bottom:none;padding:0 14px 0 0;min-height:auto;flex-shrink:0;border-right:1px solid var(--borde);}
  .app-shell.layout-horizontal .app-sidebar .brand-mark{display:none;}
  .app-shell.layout-horizontal .app-sidebar .brand-full{display:block;height:22px;padding:5px 9px;}
  .app-shell.layout-horizontal .app-sidebar:hover .brand-mark{display:none;}
  .app-shell.layout-horizontal .app-sidebar .brand-text{display:flex;}
  .app-shell.layout-horizontal .app-sidebar nav{display:flex;align-items:center;padding:0;flex:1;height:100%;overflow-x:auto;gap:6px;}
  .app-shell.layout-horizontal .app-sidebar .cat{display:none!important;}
  /* C · Chip redondo — pastilla ícono + texto */
  .app-shell.layout-horizontal .app-sidebar a.navitem,
  .app-shell.layout-horizontal .app-sidebar button.navitem{
    width:auto;height:40px;padding:0 14px 0 12px;gap:8px;border:1px solid var(--borde);
    border-radius:999px;background:var(--panel);color:var(--texto-sec);white-space:nowrap;
    border-left:1px solid var(--borde);font-size:12px;font-weight:600;
  }
  .app-shell.layout-horizontal .app-sidebar a.navitem:hover,
  .app-shell.layout-horizontal .app-sidebar button.navitem:hover{
    background:#fafbfc;color:#14171c;border-color:#cfd6e2;
  }
  .app-shell.layout-horizontal .app-sidebar a.navitem.active{
    border:1px solid var(--accent);background:var(--accent);color:#fff;
    box-shadow:0 6px 14px rgba(220,38,38,.22);
  }
  .app-shell.layout-horizontal .app-sidebar a.navitem.active svg{color:#fff;opacity:1;}
  .app-shell.layout-horizontal .app-sidebar a.navitem svg{width:16px;height:16px;opacity:1;}
  .app-shell.layout-horizontal .app-sidebar .label{opacity:1;}
  .app-shell.layout-horizontal .app-sidebar .sidebar-footer{
    width:auto;border-top:none;flex-direction:row;align-items:center;padding:0 0 0 10px;gap:10px;flex-shrink:0;
  }
  .app-shell.layout-horizontal .app-sidebar .sidebar-footer button{
    height:36px;padding:0 12px;border:1px solid var(--borde);border-radius:999px;background:var(--panel);
    color:var(--texto-sec);gap:7px;font-size:11.5px;font-weight:600;
  }
  .app-shell.layout-horizontal .app-sidebar .sidebar-footer button:hover{color:var(--accent);border-color:#f3c5c5;background:var(--accent-soft);}
  .app-shell.layout-horizontal .app-content{padding:26px 30px;}
}

@media (max-width:820px){
  .app-shell{flex-direction:column;}
  .app-sidebar{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;overflow:visible;}
  .app-sidebar:hover{width:100%;box-shadow:none;}
  .app-sidebar .brand{border-bottom:none;flex:0 0 100%;padding-bottom:10px;}
  .app-sidebar .brand-mark{display:none;}
  .app-sidebar .brand-full{display:block;}
  .app-sidebar .brand-text{display:flex;}
  .app-sidebar nav{display:flex;flex-wrap:wrap;padding:0 8px 8px;flex:0 0 100%;}
  .app-sidebar .cat{display:none;}
  .app-sidebar a.navitem, .app-sidebar button.navitem{
    width:auto;height:36px;padding:0 12px 0 10px;gap:7px;border:1px solid var(--borde);
    border-radius:999px;background:var(--panel);color:var(--texto-sec);font-size:11.5px;font-weight:600;
  }
  .app-sidebar a.navitem.active{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(220,38,38,.2);}
  .app-sidebar a.navitem.active svg{color:#fff;opacity:1;}
  .app-sidebar .label{opacity:1;}
  .app-sidebar .sidebar-footer{width:100%;border-top:1px solid var(--rack-line);flex-direction:row;justify-content:space-between;}
  .app-content{padding:16px;}
}