/* ============================================================
   DTCV Middleware — Panel de administración
   Diseño: moderno y sencillo. Sin frameworks.
   ============================================================ */
:root {
  --espresso:#2d2016;        /* header / primario */
  --caramel:#c8873a;         /* acento */
  --bg:#f7f6f3;              /* fondo app */
  --card:#ffffff;
  --line:#e8e4dd;
  --ink:#221c15;
  --ink-2:#6f6656;           /* texto secundario */
  --ok:#1e8e3e; --warn:#d93025; --closed:#c8873a; --idle:#9aa0a6;
  --radius:14px;
  --shadow:0 1px 2px rgba(30,25,15,.05), 0 4px 16px rgba(30,25,15,.06);
}
* { box-sizing:border-box; margin:0; }
html { -webkit-font-smoothing:antialiased; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,sans-serif;
       background:var(--bg); color:var(--ink); font-size:15px; line-height:1.45; }
.hidden { display:none !important; }
.muted { color:var(--ink-2); font-weight:400; font-size:.85em; }
.err { color:var(--warn); min-height:1.2em; margin-top:10px; font-size:.88em; }

/* ---------- login ---------- */
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
          background:linear-gradient(160deg,#f7f6f3 0%, #efe9df 100%); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
        padding:36px 32px; box-shadow:var(--shadow); width:100%; }
.card h1 { font-size:1.35em; letter-spacing:-.01em; }
.logoMark { width:200px; height:200px; display:block; margin:0 auto 16px; }
.card input { width:100%; margin:18px 0 14px; }
.card button { width:100%; }

/* ---------- estructura ---------- */
header { position:sticky; top:0; z-index:10; display:flex; justify-content:space-between;
         align-items:center; background:var(--espresso); color:#fff; padding:14px 28px; }
header .brand { display:flex; align-items:center; gap:12px; font-size:1.02em; }
header .brand .brandLogo { width:64px; height:64px; flex:none; }
main { max-width:1080px; margin:0 auto; padding:34px 20px 80px; }
section { margin-bottom:44px; }
h2 { font-size:1.06em; letter-spacing:-.01em; margin-bottom:14px; display:flex;
     align-items:baseline; gap:10px; }
h3 { font-size:.85em; margin:8px 0 8px; color:var(--warn); font-weight:600; }

/* ---------- inputs / botones ---------- */
input { padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:.94em;
        background:#fff; flex:1; min-width:130px; transition:border-color .15s, box-shadow .15s; }
input:focus { outline:none; border-color:var(--caramel); box-shadow:0 0 0 3px rgba(200,135,58,.15); }
button { padding:10px 16px; border:none; border-radius:10px; cursor:pointer; font-size:.9em;
         font-weight:600; transition:transform .05s, opacity .15s, background .15s; }
button:active { transform:scale(.98); }
button.primary { background:var(--espresso); color:#fff; }
button.primary:hover { background:#3f2f20; }
button.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
button.ghost:hover { border-color:#fff; }
button.small { padding:6px 11px; font-size:.78em; background:#f0ece5; color:var(--ink); font-weight:500; }
button.small:hover { background:#e6e0d5; }
button.danger { background:transparent; color:var(--warn); border:1px solid #f3c1bd; }
button.danger:hover { background:#fdf0ef; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }

/* ---------- estado en vivo ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.laneCard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
            padding:18px; box-shadow:var(--shadow); }
.laneCard .top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.laneCard .store { font-weight:700; font-size:.95em; letter-spacing:-.01em; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:.74em; font-weight:600;
         padding:4px 11px; border-radius:99px; background:#f0ece5; color:var(--ink-2);
         text-transform:uppercase; letter-spacing:.05em; }
.badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--idle); }
.badge.open { background:#e7f4ea; color:var(--ok); } .badge.open::before { background:var(--ok); }
.badge.closed { background:#faf1e3; color:#9a6516; } .badge.closed::before { background:var(--closed); }
.badge.cancelled { background:#fdecea; color:var(--warn); } .badge.cancelled::before { background:var(--warn); }
.kv { font-size:.84em; color:var(--ink-2); margin:3px 0; display:flex; justify-content:space-between; }
.kv b { color:var(--ink); font-weight:600; }
.simRow { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; padding-top:12px;
          border-top:1px dashed var(--line); }

/* ---------- tiendas ---------- */
.storeBlock { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
              padding:16px 18px; margin-bottom:12px; box-shadow:var(--shadow); }
.storeBlock .head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.lanesRow { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.laneChip { background:#f0ece5; border-radius:99px; padding:5px 7px 5px 14px; font-size:.82em;
            display:flex; gap:8px; align-items:center; font-weight:500; }
.laneChip button { padding:2px 8px; border-radius:99px; }

/* ---------- tablas ---------- */
.tableWrap { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
             overflow:auto; box-shadow:var(--shadow); }
table { width:100%; border-collapse:collapse; font-size:.86em; }
th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
th { background:#faf8f4; font-size:.74em; text-transform:uppercase; letter-spacing:.06em;
     color:var(--ink-2); font-weight:600; position:sticky; top:0; }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .1s; } tbody tr:hover { background:#fbfaf7; }
td.tok { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.8em; max-width:170px;
         overflow:hidden; text-overflow:ellipsis; }
.lvl-warn, .lvl-error { color:var(--warn); font-weight:700; }
td .actions { display:flex; gap:6px; }

@media (max-width:640px) {
  main { padding:22px 12px 60px; }
  .grid { grid-template-columns:1fr; }
}

/* ---------- select ---------- */
select { padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:.94em;
         background:#fff; font-family:inherit; }
select:focus { outline:none; border-color:var(--caramel); box-shadow:0 0 0 3px rgba(200,135,58,.15); }

/* ---------- help contextual (ⓘ) ---------- */
.help { position:relative; display:inline-flex; align-items:center; justify-content:center;
        width:18px; height:18px; border-radius:50%; border:1.5px solid var(--ink-2);
        color:var(--ink-2); font-size:11px; font-weight:700; font-style:normal; cursor:help;
        margin-left:8px; flex:none; user-select:none; vertical-align:middle; transition:all .15s; }
.help:hover, .help.open { background:var(--espresso); color:#fff; border-color:var(--espresso); }
.help .bubble { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-4px);
                width:min(320px, 78vw); background:var(--espresso); color:#f4efe7; font-size:.8rem;
                font-weight:400; line-height:1.5; text-align:left; padding:13px 15px; border-radius:12px;
                box-shadow:0 8px 28px rgba(30,25,15,.22); opacity:0; visibility:hidden; z-index:60;
                transition:opacity .15s, transform .15s; pointer-events:none; letter-spacing:0; }
.help .bubble::before { content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
                border:7px solid transparent; border-bottom-color:var(--espresso); }
.help:hover .bubble, .help.open .bubble { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.help .bubble b { color:var(--caramel); }
@media (max-width:640px) { .help .bubble { left:0; transform:translateX(0) translateY(-4px); }
  .help .bubble::before { left:20px; }
  .help:hover .bubble, .help.open .bubble { transform:translateX(0) translateY(0); } }

/* ---------- panel de diagnóstico (Capa A) ---------- */
.diagCard { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
            padding:18px; box-shadow:var(--shadow); }
.diagTop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.diagDot { width:14px; height:14px; border-radius:50%; flex:none; }
.diagGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; }
.diagMetric { display:flex; flex-direction:column; gap:5px; }
.diagMetric span { font-size:.76em; color:var(--ink-2); }
.diagMetric b { font-size:.9em; }
.diagStores { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.diagStore { font-size:.78em; font-weight:600; padding:5px 12px; border-radius:999px; background:#f0ece5; color:var(--ink-2); }
.diagStore.ok { background:#e7f4ea; color:var(--ok); }
.diagStore.warn { background:#faf1e3; color:#9a6516; }
.diagStore.down { background:#fdecea; color:var(--warn); }

/* ---------- chips de paleta (editor de pantalla) ---------- */
.themeRow { display:flex; flex-wrap:wrap; gap:8px; }
.themeChip { display:flex; align-items:center; gap:6px; padding:8px 12px; border:1.5px solid var(--line);
             border-radius:999px; font-size:.8em; font-weight:600; cursor:pointer; background:#fff; }
.themeChip.sel { border-color:var(--espresso); background:#f6f2ea; }
.themeChip .sw { width:14px; height:14px; border-radius:50%; display:inline-block; }

/* ---------- temas del panel (persisten por dispositivo) ---------- */
[data-theme="azul_valdez"] { --espresso:#2e4260; --caramel:#d0b75d; --bg:#f2f5f9; }
[data-theme="rojo_valdez"] { --espresso:#7e1b20; --caramel:#e4b44c; --bg:#faf6f1; }
[data-theme="crema"]       { --espresso:#5f7b9b; --caramel:#b22126; }
[data-theme="nocturno"]    { --espresso:#141b26; --caramel:#e8b84c; }

/* ---------- editor visual de pantalla (flujo vertical por pantallas) ---------- */
.layGrid { display:flex; flex-direction:column; gap:16px; overflow:auto; flex:1; min-height:0; padding-right:4px; }
.layGlobal { border:1px solid var(--line); border-radius:12px; padding:14px; background:#fbfaf7; flex:none; }
.layGlobalGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:6px 18px; align-items:start; }
.layScreen { border:1px solid var(--line); border-radius:12px; background:#fbfaf7; overflow:hidden; flex:none; }
.flowChip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 14px;
            background:#f0ece5; border-bottom:1px solid var(--line);
            font-size:.8em; font-weight:600; color:var(--ink-2); }
.flowChip b { color:var(--ink); }
.flowChip .scr { color:var(--ink); font-size:1.15em; }
.flowChip input[type=number] { width:70px; flex:none; padding:5px 8px; min-width:0; }
.flowChip input[type=checkbox] { width:auto; min-width:0; flex:none; }
.layScreenBody { display:grid; grid-template-columns:474px minmax(0,1fr); gap:16px; padding:14px; align-items:start; }
.layScreenBody .layControls { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px 16px; align-content:start; }
.layControls { display:flex; flex-direction:column; gap:8px; }
.laySec { font-size:.72em; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-2);
          font-weight:700; margin:12px 0 2px; }
.layRow { display:flex; flex-direction:column; gap:4px; font-size:.84em; color:var(--ink-2); }
.layRow input, .layRow select { width:100%; min-width:0; }
.layRow input[type=range] { padding:0; }
.layInline { display:flex; gap:8px; align-items:center; }
.layInline input { flex:1; }
.layInline select { width:76px; }
.autoChk { display:flex; align-items:center; gap:5px; font-size:.92em; white-space:nowrap; }
.autoChk input { width:auto; min-width:0; flex:none; }
.biGroup { display:flex; gap:6px; }
.biBtn { width:38px; height:34px; border:1px solid var(--line); background:var(--card, #fff); color:var(--ink2);
         border-radius:8px; cursor:pointer; font-size:1em; line-height:1; padding:0; }
.biBtn:hover { border-color:var(--espresso); }
.biBtn.on { background:var(--espresso); color:#fff; border-color:var(--espresso); }
#layPreviewBox { border:1px solid var(--line); border-radius:10px; overflow:hidden; width:454px;
                 background:#faf9f6; margin:0 auto; }
.layPreviewWrap > p { text-align:center; }
#layPreview { transform:scale(0.42); transform-origin:top left; width:1080px; }
#layPreviewBox2 { border:1px solid var(--line); border-radius:10px; overflow:hidden; width:454px;
                  height:176px; background:#faf9f6; margin:0 auto; }
#layPreview2 { transform:scale(0.42); transform-origin:top left; width:1080px; }
#layPreviewBox3 { border:1px solid var(--line); border-radius:10px; overflow:hidden; width:454px;
                  height:176px; background:#faf9f6; margin:0 auto; }
#layPreview3 { transform:scale(0.42); transform-origin:top left; width:1080px; }
#layPreviewBox4 { border:1px solid var(--line); border-radius:10px; overflow:hidden; width:454px;
                  height:290px; background:#faf9f6; margin:0 auto; }
#layPreview4 { transform:scale(0.42); transform-origin:top left; width:1080px; }
#layPreviewBox5 { border:1px solid var(--line); border-radius:10px; overflow:hidden; width:454px;
                  height:176px; background:#faf9f6; margin:0 auto; }
#layPreview5 { transform:scale(0.42); transform-origin:top left; width:1080px; }
@media (max-width:1000px) { .layScreenBody { grid-template-columns:1fr; } }

/* ---------- referencia de la URL del player (sección Players) ---------- */
.urlRef { border:1px solid var(--line); border-radius:12px; background:#fbfaf7; padding:14px 16px; margin:14px 0 4px; }
.urlRefTitle { font-weight:700; font-size:.9em; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.urlRefCode { display:block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86em;
              background:var(--espresso); color:#fff; padding:10px 12px; border-radius:8px;
              word-break:break-all; cursor:copy; }
.urlRefCode b { color:var(--caramel); }
.urlRefList { margin:10px 0 0; padding-left:18px; font-size:.84em; color:var(--ink-2); }
.urlRefList li { margin:5px 0; }
.urlRefList code { background:#efeae1; padding:1px 5px; border-radius:5px;
                   font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; color:var(--ink); }

/* ---------- footer ---------- */
.siteFooter { text-align:center; color:var(--ink-2); font-size:.8em; padding:26px 20px 34px;
              border-top:1px solid var(--line); margin-top:20px; }

/* ---------- banner de modo (simulación / producción) ---------- */
.modeBanner { text-align:center; padding:10px 20px; font-size:.95em; letter-spacing:.02em;
              border-bottom:1px solid rgba(0,0,0,.08); }
.modeBanner.hidden { display:none; }
.modeBanner b { letter-spacing:.04em; }
/* Simulación: ámbar, llamativo, con franjas para que "grite" que no es real */
.modeBanner.sim { color:#7a4a12; font-weight:500;
  background:repeating-linear-gradient(45deg,#fbe6c2,#fbe6c2 14px,#f7dcac 14px,#f7dcac 28px); }
.modeBanner.sim b { color:#8a3a0a; }
/* Producción: verde discreto, confirma sin distraer */
.modeBanner.prod { background:#e7f4e8; color:#1e6b2a; font-weight:500; }
.modeBanner.prod b { color:#155c22; }

/* ---------- modal de configuración ---------- */
.modalBack { position:fixed; inset:0; background:rgba(30,25,15,.45); display:flex;
             align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
         width:100%; max-width:680px; max-height:88vh; padding:22px; display:flex; flex-direction:column; }
.modalHead { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.modal textarea { flex:1; min-height:340px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
                  font-size:.82em; line-height:1.5; padding:14px; border:1px solid var(--line);
                  border-radius:10px; background:#faf9f6; resize:vertical; }
.modal textarea:focus { outline:none; border-color:var(--caramel); }