/* STB Command Center — capa visual incremental, sin lógica ni cambio de DOM.
   Base: integration/preview, 2026-10-16. Mantener tras catalog-command-center.css.
   No alterar estados de visibilidad, posicionamiento de modales, permisos ni navegación. */
:root {
  --stb-cc-ink:#091623; --stb-cc-surface:#12273a; --stb-cc-surface-raised:#183149;
  --stb-cc-border:#4b6478; --stb-cc-gold:#e2bd7e; --stb-cc-text:#f4ead9;
  --stb-cc-muted:#b8c8d5;
}
html{scrollbar-color:#627589 #0c1a2b;scroll-padding-top:14px}
body{
  background:radial-gradient(ellipse at 80% -12%,#2a4355 0%,transparent 38%),
  linear-gradient(180deg,#0b1b2b 0%,#081521 100%) fixed;
  color:var(--stb-cc-text);
}
body>header,body>main,body>footer{max-width:1510px}
body>header{
  position:relative;isolation:isolate;overflow:visible;
  padding-block:16px;border-bottom:1px solid #a38457;
  background:linear-gradient(100deg,rgba(8,23,38,.98),rgba(10,29,45,.83)),
    url('/static/stb-command-art.svg') center 55%/cover no-repeat;
  box-shadow:0 12px 34px #0004;
}
body>header::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;inset:5px;
  border:1px solid #d2b17d36;border-radius:10px;
}
.brand{min-width:0}
.brand img{width:clamp(56px,6vw,82px);height:clamp(56px,6vw,82px);object-fit:contain;filter:drop-shadow(0 5px 8px #000a)}
.brand strong{font:700 clamp(28px,3vw,36px)/1.05 Georgia,"Times New Roman",serif;color:#f4d59f;letter-spacing:.11em}
.brand span{font-size:12px;color:#e0d4c3;letter-spacing:.02em}
body>main{padding-top:20px;padding-bottom:42px}
#app{min-width:0}
#app>.stb-main-nav{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px;border:1px solid #596d7b;border-radius:16px;
  background:linear-gradient(130deg,#172d42,#0d2033);
  box-shadow:0 10px 25px #0004;
}
#app>.stb-main-nav .stb-nav-group{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
#app>.stb-main-nav .stb-nav-label{
  color:var(--stb-cc-gold);font-size:11px;letter-spacing:.09em;font-weight:800;text-transform:uppercase
}
#app>.stb-main-nav .stb-nav-buttons{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
#app>.stb-main-nav button{
  font-size:14px;min-height:42px;padding:9px 13px;line-height:1.2;
  background:#1b344b;border:1px solid #4a6175;border-radius:10px;color:#e7eaf0;
}
#app>.stb-main-nav button:hover,#app>.stb-main-nav button:focus-visible{border-color:var(--stb-cc-gold);color:#ffe1ae}
#app>.stb-main-nav button.active{color:#fff0d0;border-color:#caa368;background:#34485c;box-shadow:inset 0 -2px #dbb271}
#app>.stb-main-nav .spacer{flex:1}
#app>.stb-main-nav .stb-nav-actions button{background:#14273a}
#app>.stb-main-nav [hidden],#app>.stb-main-nav button[hidden]{display:none!important}
#status{font-size:12px}
#app>.filters{
  gap:13px;align-items:end;flex-wrap:wrap;
  padding:14px;border:1px solid #40596c;border-radius:15px;
  margin:15px 0 20px;background:linear-gradient(140deg,#13283b,#102134)
}
#app>.filters label{font-size:13px;min-width:125px;flex:1}
#app>.filters .search{flex:1 1 190px}
#app>.filters input,#app>.filters select{font-size:15px;padding:11px 12px;min-height:43px}
#app>.filters button{font-size:14px;min-height:43px}
#cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,370px),1fr));gap:13px}
#cards .clan{border-color:#445b6f;background:linear-gradient(145deg,#172e43,#102437);box-shadow:0 8px 22px #0004}
#cards .clan.selected{border-color:var(--stb-cc-gold)}
#cards .card-head{padding:16px;gap:11px;flex-wrap:wrap}
#cards .identity{min-width:0;flex:1}
#cards .identity img{width:53px;height:53px;flex-shrink:0}
#cards .identity strong{font-size:clamp(18px,1.8vw,22px)}
#cards .identity small{font-size:14px}
#cards .distance-badge{font-size:13px}
#cards .card-head>button:last-child{font-size:13px;padding:9px 12px}
#cards .details{padding:12px 5px 16px;margin:0 12px}
#cards .details dt,#cards .details dd{font-size:14px}
#cards .details dl{gap:9px 13px}
#app>.panel,#app>section.panel,.map-layout>.panel{
  border-color:#40576a;background:linear-gradient(155deg,#172d41,#102235);box-shadow:0 11px 27px #0003
}
#app h1{font-family:Georgia,"Times New Roman",serif;color:#f4dbac;line-height:1.18}
#app h2{color:#eed7b2}
.section-title{gap:13px;flex-wrap:wrap}
.section-title h1{font-size:clamp(24px,2.7vw,34px)}
#map{height:min(64vh,650px);min-height:350px}
.map-layout{grid-template-columns:minmax(225px,290px) minmax(0,1fr)}
#map-list .identity strong{font-size:17px}
#map-list .details dt,#map-list .details dd{font-size:14px}
#login-panel{
  max-width:470px;background:linear-gradient(125deg,#132d44ed,#0a1e30f5),
  url('/static/stb-command-art.svg') center/cover no-repeat;border:1px solid #a08152;
  box-shadow:0 18px 49px #0006
}
#login-panel h1{font-family:Georgia,"Times New Roman",serif}
.header-actions{gap:10px}
.header-msg button,.settings-btn{border-color:#7b704f;background:rgba(8,24,39,.65);min-height:42px}
.header-msg button:hover,.settings-btn:hover{border-color:var(--stb-cc-gold)}
.settings-menu{background:#10283c;border-color:#a38457;box-shadow:0 16px 40px #0009}
#messages-view .msg,#announcements-view .ann-post,#updates-view .ann-post{border-color:#455c6f}
#messages-view .msg-body{line-height:1.55}
#admin-view details.collapsible{border-color:#496075;background:#11283b}
#admin-view details.collapsible summary{color:#f0cf99}
#app :is(input,select,textarea){max-width:100%}
#app :is(button,input,select,textarea):focus-visible{outline:3px solid #f5cf89;outline-offset:2px}
#app button:disabled{cursor:not-allowed}
#app button.gold{background:linear-gradient(115deg,#ce9f5f,#f5d69d);color:#132233;border-color:#f7dda9}
/* Los módulos con diseño propio siguen siendo su fuente de verdad visual. */
#catalogo-view,#recaudacion-body{min-width:0}
@media (max-width:900px){
  body>header,body>main,body>footer{padding-left:16px;padding-right:16px}
  .map-layout{grid-template-columns:minmax(0,1fr)}
  #app>.stb-main-nav{gap:10px}
  #app>.stb-main-nav .spacer{display:none}
}
@media (max-width:600px){
  body>header,body>main,body>footer{padding-left:12px;padding-right:12px}
  body>header{padding-top:13px;padding-bottom:13px}
  .brand{gap:9px}
  .brand img{width:52px;height:52px}
  .brand strong{font-size:25px}
  .brand span{font-size:10px}
  .header-actions{gap:5px}
  .header-msg{gap:4px}
  .header-msg button,.settings-btn{font-size:19px;padding:7px;min-height:40px}
  #app>.stb-main-nav{padding:10px;gap:11px;display:flex;flex-direction:column;align-items:stretch}
  #app>.stb-main-nav .stb-nav-group{align-items:flex-start;flex-direction:column;gap:5px}
  #app>.stb-main-nav .stb-nav-buttons{width:100%;gap:6px}
  #app>.stb-main-nav .stb-nav-buttons button{flex:1 1 auto;font-size:12.5px;min-height:42px;padding:9px 8px}
  #app>.filters{padding:12px;gap:9px}
  #app>.filters label{flex:1 1 130px;font-size:12px}
  #app>.filters .search{flex-basis:100%}
  #cards{grid-template-columns:minmax(0,1fr)}
  #cards .card-head{padding:13px;gap:8px}
  #cards .identity img{width:45px;height:45px}
  #cards .identity strong{font-size:18px}
  #cards .identity small{font-size:12px}
  #cards .distance-badge{font-size:12px}
  #cards .card-head>button:last-child{font-size:12px}
  .map-layout aside{order:2}
  #map{height:55vh;min-height:300px}
  #map-list{max-height:330px}
  #app>.panel,#app>section.panel{padding:16px}
}
@media (prefers-reduced-motion:reduce){
  #app>.stb-main-nav button,#cards .clan{transition:none!important}
}