/* ============================================================
   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:46px; height:46px; border-radius:12px; background:var(--espresso); color:#fff;
            display:flex; align-items:center; justify-content:center; font-weight:800;
            font-size:1.15em; margin-bottom:18px; }
.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 .dot { width:10px; height:10px; border-radius:50%; background:var(--caramel); }
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); }

/* ---------- 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; }

/* ---------- 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); }