/* ════════════════════════════════════════════════════════════════
   BrainX · Portal de Soporte — estética dark/turquesa (igual a la web)
   Mismos nombres de clase que el sistema original.
   ════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --teal:#3db8b2; --cyan:#4fd1cb;
  --bg:#0a0b0d; --bg-2:#101216; --bg-3:#15181d; --card:#14171c;
  --ink:#f3f5f8; --ink-2:#c4c9d2; --muted:#868d99;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
  --primary:#3db8b2; --primary-d:#4fd1cb; --primary-soft:rgba(61,184,178,.14);
  --alta:#ff8585; --alta-soft:rgba(255,107,107,.14);
  --media:#f0a13a; --media-soft:rgba(240,161,58,.14);
  --baja:#52c894; --baja-soft:rgba(70,192,138,.14);
  --nuevo:#3db8b2; --progreso:#f0a13a; --resuelto:#52c894;
  --shadow:0 24px 60px -28px rgba(0,0,0,.8);
  --radius:16px;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(80% 60% at 80% -10%, rgba(61,184,178,.08), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.55; min-height:100dvh;
}
a{color:inherit;}
::selection{background:rgba(61,184,178,.3);color:#fff;}
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.narrow{max-width:560px;}

/* ── NAV ── */
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.3px; color:#fff; text-decoration:none;}
.brand .logo{height:36px; width:auto; display:block; border-radius:8px; object-fit:contain; filter:brightness(1.12);}
.nav-link{font-size:14px; font-weight:600; color:var(--muted); text-decoration:none; padding:8px 13px; border-radius:9px; transition:background .2s,color .2s;}
.nav-link:hover{background:rgba(255,255,255,.06); color:#fff;}

/* ── BOTONES ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  font-family:var(--font-display);font-size:15px;font-weight:600;padding:13px 24px;border-radius:10px;text-decoration:none;
  transition:transform .2s, box-shadow .25s, background .2s, color .2s;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--teal);color:#06120f;box-shadow:0 10px 30px -10px rgba(61,184,178,.55);}
.btn-primary:hover{background:var(--cyan);transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(79,209,203,.6);}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);}
.btn-ghost:hover{background:rgba(255,255,255,.06);}
.btn-lg{font-size:16px;padding:16px 32px;border-radius:11px;}
.btn-block{width:100%;}
.btn-danger{background:var(--alta-soft);color:var(--alta);border:1px solid rgba(255,107,107,.25);}
.btn-danger:hover{background:rgba(255,107,107,.2);}
.btn-sm{font-size:13px;padding:9px 15px;border-radius:9px;}

/* ── HERO (landing) ── */
.hero{text-align:center; padding:72px 0 40px;}
.hero h1{font-family:var(--font-display); font-size:clamp(30px,5vw,44px); font-weight:800; letter-spacing:-1px; line-height:1.1; max-width:780px; margin:0 auto; color:#fff;}
.hero p{font-size:18px; color:var(--ink-2); margin:18px auto 30px; max-width:560px;}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:48px 0 64px;}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px; text-align:left; transition:transform .3s, border-color .3s;}
.step:hover{transform:translateY(-6px); border-color:rgba(61,184,178,.4);}
.step .n{width:38px;height:38px;border-radius:11px;background:var(--primary-soft);color:var(--teal);
  font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:15px;font-size:17px;}
.step h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin-bottom:6px;color:#fff;}
.step p{font-size:14px;color:var(--muted);}

/* ── CARD genérica ── */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px;}
.card-head{margin-bottom:22px;}
.card-head h2{font-family:var(--font-display);font-size:23px;font-weight:800;letter-spacing:-.4px;color:#fff;}
.card-head p{font-size:14px;color:var(--muted);margin-top:5px;}

/* ── FORM ── */
.field{margin-bottom:17px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:7px;}
.field label .req{color:var(--alta);}
.field input, .field select, .field textarea{
  width:100%;border:1px solid var(--line-2);background:var(--bg);border-radius:10px;padding:13px 15px;
  font-size:16px;font-family:var(--font-body);color:var(--ink);outline:none;transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{color:#5c636e;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(61,184,178,.18);}
.field textarea{resize:vertical;min-height:120px;line-height:1.6;}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23868d99' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;}
.field select option{background:#14171c;color:var(--ink);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.hint{font-size:12.5px;color:var(--muted);margin-top:7px;}

/* ── BANNER modo demo / nube ── */
.demo-banner{background:var(--media-soft);border:1px solid rgba(240,161,58,.35);color:#f0b765;border-radius:11px;
  padding:12px 16px;font-size:13px;font-weight:600;margin:14px 0;display:flex;gap:8px;align-items:center;}
.cloud-banner{background:var(--baja-soft);border:1px solid rgba(70,192,138,.35);color:#6cd3a3;border-radius:11px;
  padding:12px 16px;font-size:13px;font-weight:600;margin:14px 0;display:flex;gap:8px;align-items:center;}

/* ── ÉXITO ── */
.exito{text-align:center;padding:34px 10px;}
.exito .tick{width:78px;height:78px;border-radius:50%;background:var(--baja-soft);color:var(--baja);
  display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 20px;border:1px solid rgba(70,192,138,.3);}
.exito h2{font-family:var(--font-display);font-size:25px;font-weight:800;color:#fff;}
.exito p{color:var(--ink-2);margin:10px auto 26px;max-width:390px;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;white-space:nowrap;}
.b-nuevo{background:var(--primary-soft);color:#5fd0ca;}
.b-progreso{background:var(--media-soft);color:var(--media);}
.b-resuelto{background:var(--baja-soft);color:var(--baja);}
.b-alta{background:var(--alta-soft);color:var(--alta);}
.b-media{background:var(--media-soft);color:var(--media);}
.b-baja{background:var(--baja-soft);color:var(--baja);}
.b-tipo{background:rgba(255,255,255,.07);color:var(--ink-2);}

/* ── BACKOFFICE ── */
.admin-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:22px;}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 22px;}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;}
.stat .num{font-family:var(--font-display);font-size:27px;font-weight:800;letter-spacing:-.5px;color:#fff;}
.stat .lbl{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px;}
.stat.money .num{color:var(--baja);}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.filtros input, .filtros select{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:10px;padding:11px 14px;font-size:14px;font-family:var(--font-body);outline:none;transition:border-color .2s;}
.filtros input::placeholder{color:#5c636e;}
.filtros input:focus, .filtros select:focus{border-color:var(--teal);}
.filtros select option{background:#14171c;}
.filtros .search{flex:1;min-width:180px;}

.ticket{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:14px;border-left:4px solid var(--line-2);transition:border-color .25s;}
.ticket:hover{border-color:var(--line-2);}
.ticket.e-nuevo{border-left-color:var(--nuevo);}
.ticket.e-progreso{border-left-color:var(--progreso);}
.ticket.e-resuelto{border-left-color:var(--resuelto);}
.ticket.facturado{opacity:.62;}
.t-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.t-cliente{font-family:var(--font-display);font-size:17px;font-weight:700;color:#fff;}
.t-empresa{font-size:13px;color:var(--muted);font-weight:500;}
.t-fecha{font-size:12px;color:#5c636e;margin-left:auto;white-space:nowrap;}
.t-badges{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0;}
.t-contacto{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);margin-bottom:8px;}
.t-contacto a{color:var(--teal);text-decoration:none;font-weight:600;}
.t-sistema{font-size:13px;color:var(--muted);margin-bottom:8px;}
.t-sistema b{color:var(--ink);}
.t-desc{font-size:14.5px;line-height:1.6;background:var(--bg-3);border:1px solid var(--line);border-radius:11px;padding:13px 15px;white-space:pre-wrap;word-break:break-word;color:var(--ink-2);}
.t-gestion{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:12px;align-items:end;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.t-gestion .field{margin:0;}
.t-gestion label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);}
.t-gestion input, .t-gestion select{padding:10px 12px;font-size:14px;}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer;user-select:none;padding:11px 0;color:var(--ink-2);}
.chk input{width:20px;height:20px;accent-color:var(--teal);cursor:pointer;}
.t-acciones{display:flex;gap:8px;margin-top:14px;justify-content:flex-end;}
.nota-row{margin-top:12px;}
.nota-row textarea{min-height:56px;font-size:14px;}

/* ── LOGIN ── */
.login-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login{width:100%;max-width:400px;}
.login .logo-xl{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--teal),var(--cyan));
  display:flex;align-items:center;justify-content:center;color:#06120f;font-size:26px;margin:0 auto 18px;box-shadow:0 14px 34px -10px rgba(61,184,178,.5);}

/* ── EMPTY / FOOTER / TOAST ── */
.empty{text-align:center;padding:64px 20px;color:var(--muted);}
.empty .ico{font-size:46px;margin-bottom:12px;}
.empty h3{font-family:var(--font-display);font-size:18px;color:var(--ink);}
.foot{text-align:center;padding:44px 0 34px;font-size:13px;color:#5c636e;}
.foot a{color:var(--muted);text-decoration:none;transition:color .2s;}
.foot a:hover{color:var(--teal);}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#14171c;color:#fff;border:1px solid var(--line-2);
  padding:13px 24px;border-radius:12px;font-size:14px;font-weight:600;z-index:999;box-shadow:var(--shadow);}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:#07080a;}
::-webkit-scrollbar-thumb{background:#23272e;border-radius:6px;border:2px solid #07080a;}
::-webkit-scrollbar-thumb:hover{background:var(--teal);}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}

/* ════════════════════════════════════════════════════════════════
   PANEL DE GESTIÓN (panel.html) — pestañas, tablas, fichas
   ════════════════════════════════════════════════════════════════ */
.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:22px;border-bottom:1px solid var(--line);}
.tab{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);
  font-family:var(--font-display);font-weight:600;font-size:15px;padding:12px 18px;cursor:pointer;
  transition:color .2s, border-color .2s;margin-bottom:-1px;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--teal);border-bottom-color:var(--teal);}

.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.bar .search{flex:1;min-width:180px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);
  border-radius:10px;padding:11px 14px;font-size:14px;font-family:var(--font-body);outline:none;}
.bar .search:focus{border-color:var(--teal);}
.bar select{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:10px;
  padding:11px 14px;font-size:14px;font-family:var(--font-body);outline:none;}
.bar select option{background:#14171c;}

/* Formulario emergente (alta / edición) */
.form-card{background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:24px;margin-bottom:22px;}
.form-card h3{font-family:var(--font-display);font-size:18px;font-weight:700;color:#fff;margin-bottom:16px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.form-actions{display:flex;gap:10px;margin-top:8px;}

/* Tarjeta de cliente */
.cli{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:12px;
  cursor:pointer;transition:border-color .2s, transform .2s;}
.cli:hover{border-color:rgba(61,184,178,.4);transform:translateY(-2px);}
.cli-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.cli-nombre{font-family:var(--font-display);font-size:17px;font-weight:700;color:#fff;}
.cli-sub{font-size:13px;color:var(--muted);}
.cli-metrics{display:flex;gap:22px;margin-top:12px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
.cli-metrics b{color:var(--ink);font-family:var(--font-display);}

/* Tablas (gastos, modificaciones, ranking) */
.tbl-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:640px;}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
  font-weight:600;padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap;}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover td{background:rgba(255,255,255,.02);}
.tbl .n{text-align:right;font-family:var(--font-display);font-weight:700;color:var(--ink);white-space:nowrap;}
.tbl .acc{text-align:right;white-space:nowrap;}
.pos{color:var(--baja)!important;}
.neg{color:var(--alta)!important;}
.mini{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);border-radius:8px;
  padding:6px 9px;font-size:13px;cursor:pointer;transition:background .2s,color .2s;}
.mini:hover{background:rgba(255,255,255,.06);color:#fff;}
.mini.del:hover{background:rgba(255,107,107,.18);color:var(--alta);border-color:rgba(255,107,107,.3);}
.tbl select{border:1px solid var(--line-2);background:var(--bg);color:var(--ink);border-radius:8px;
  padding:7px 10px;font-size:13px;font-family:var(--font-body);outline:none;}
.tbl select option{background:#14171c;}

/* Ficha de cliente */
.ficha-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:4px 0 18px;}
.ficha-head h2{font-family:var(--font-display);font-size:24px;font-weight:800;color:#fff;letter-spacing:-.4px;}
.ficha-sec{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);
  margin:26px 0 12px;display:flex;align-items:center;gap:8px;}
.back-link{background:transparent;border:none;color:var(--teal);font-size:14px;font-weight:600;cursor:pointer;padding:0;}
.tag-lite{font-size:12px;color:var(--muted);}

@media (max-width:720px){
  .hero{padding:44px 0 24px;}
  .steps{grid-template-columns:1fr;gap:12px;margin:32px 0 44px;}
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .t-gestion{grid-template-columns:1fr 1fr;}
  .card{padding:22px;}
  .tab{padding:11px 13px;font-size:14px;}
}

/* ════════════════════════════════════════════════════════════════
   1) ALERTA DE PEDIDO NUEVO  (alerta.js)
   ════════════════════════════════════════════════════════════════ */
[hidden]{display:none!important;}

.alerta-cartel{
  position:fixed; right:22px; bottom:22px; z-index:1000;
  display:flex; align-items:center; gap:9px;
  background:#14171c; color:var(--ink); border:1px solid rgba(61,184,178,.45);
  border-radius:14px; padding:13px 18px; cursor:pointer;
  font-family:var(--font-body); font-size:14px; font-weight:600;
  box-shadow:0 22px 54px -20px rgba(0,0,0,.9);
  animation:cartel-in .5s cubic-bezier(.16,1,.3,1) both;
  transition:transform .25s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.alerta-cartel:hover{transform:translateY(-2px); border-color:var(--teal);}
.alerta-cartel b{font-family:var(--font-display); color:var(--cyan); font-size:15px;}
.alerta-cartel .ver{color:var(--teal); font-weight:700; margin-left:4px;}
@keyframes cartel-in{from{opacity:0; transform:translateY(16px) scale(.95);}}

.pulso{width:9px; height:9px; border-radius:50%; background:var(--teal); flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(61,184,178,.55); animation:pulso 1.9s ease-out infinite;}
@keyframes pulso{70%{box-shadow:0 0 0 13px rgba(61,184,178,0);} 100%{box-shadow:0 0 0 0 rgba(61,184,178,0);}}

.campana.pide{border-color:rgba(240,161,58,.5); color:#f0b765;}
.campana.ok{border-color:rgba(61,184,178,.4); color:#7fdcd7;}
.campana-test{margin-left:6px;}
#campana{display:flex; align-items:center; gap:0;}

/* ════════════════════════════════════════════════════════════════
   2) PLAN DE TRABAJO — cola de prioridades (tareas.html)
   La posición ES la prioridad: se arrastra con el mouse o se mueve
   con ↑ ↓ del teclado.
   ════════════════════════════════════════════════════════════════ */
.plan-hint{display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  font-size:13px; color:var(--muted); margin:2px 0 16px;}
.plan-hint kbd{font-family:var(--font-display); font-size:11px; font-weight:700;
  background:rgba(255,255,255,.07); border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:6px; padding:2px 6px; color:var(--ink-2);}

/* alta de tarea propia */
.q-add{display:flex; gap:8px; align-items:center; background:var(--card);
  border:1px dashed var(--line-2); border-radius:14px; padding:8px 8px 8px 16px; margin-bottom:16px;
  transition:border-color .2s, background .2s;}
.q-add:focus-within{border-color:var(--teal); border-style:solid; background:#15191f;}
.q-add input{flex:1; min-width:120px; background:transparent; border:none; outline:none;
  color:var(--ink); font-family:var(--font-body); font-size:15px; padding:8px 0;}
.q-add input::placeholder{color:#5c636e;}
.q-add input + input{border-left:1px solid var(--line); padding-left:14px;}

/* la cola */
.plan{display:flex; flex-direction:column; gap:10px;}
.q-row{position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px;
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .2s, background .2s, opacity .25s;}
.q-row:hover{border-color:var(--line-2);}
.q-line{display:grid; grid-template-columns:30px 18px 1fr auto; align-items:center; gap:12px;
  grid-template-areas:"num grip body side";
  padding:13px 15px 13px 10px; cursor:grab; -webkit-user-select:none; user-select:none;}
.q-num{grid-area:num;} .q-grip{grid-area:grip;} .q-body{grid-area:body;} .q-side{grid-area:side;}
.q-num{font-family:var(--font-display); font-size:15px; font-weight:800; letter-spacing:-.5px;
  color:#4b525d; text-align:right; font-variant-numeric:tabular-nums;}
.q-grip{color:#454c56; font-size:15px; line-height:1; text-align:center; border-radius:6px; padding:5px 0;
  cursor:grab; touch-action:none; transition:color .2s;}
.q-row:hover .q-grip{color:var(--teal);}
.q-grip:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.q-titulo{font-family:var(--font-display); font-size:15.5px; font-weight:600; letter-spacing:-.2px;
  color:#fff; overflow-wrap:break-word;}
.q-meta{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px;}
.q-side{display:flex; gap:3px; align-items:center;}
.q-btn{background:transparent; border:1px solid transparent; color:#69707c; width:30px; height:30px;
  border-radius:8px; display:grid; place-items:center; cursor:pointer; font-size:13.5px; line-height:1;
  transition:background .18s, color .18s, border-color .18s;}
.q-btn:hover{background:rgba(255,255,255,.07); color:#fff; border-color:var(--line-2);}
.q-btn.ok:hover{background:var(--baja-soft); color:var(--baja); border-color:rgba(70,192,138,.3);}
.q-btn.del:hover{background:var(--alta-soft); color:var(--alta); border-color:rgba(255,107,107,.3);}

/* chips de contexto */
.chip{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap;
  background:rgba(255,255,255,.06); color:var(--muted);}
.chip.tk{background:var(--primary-soft); color:#6fd8d2;}
.chip.alta{background:var(--alta-soft); color:var(--alta);}
.chip.media{background:var(--media-soft); color:var(--media);}
.chip.baja{background:var(--baja-soft); color:var(--baja);}
.chip.hoy{background:var(--media-soft); color:#f0b765;}
.chip.vencida{background:var(--alta-soft); color:var(--alta);}
.chip.nuevo{background:rgba(61,184,178,.18); color:#7fdcd7;}
.chip.ahora{background:var(--teal); color:#06120f; font-weight:700; letter-spacing:.3px;}

/* detalle desplegado */
.q-det{border-top:1px solid var(--line); padding:14px 16px 16px; display:grid; gap:12px;}
.q-det .fila{display:grid; grid-template-columns:1fr 190px; gap:12px;}
.q-det label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--muted); margin-bottom:6px; font-weight:600;}
.q-det input, .q-det textarea{width:100%; background:var(--bg); border:1px solid var(--line-2);
  border-radius:10px; padding:10px 12px; color:var(--ink); font-family:var(--font-body); font-size:14px;
  outline:none; transition:border-color .2s;}
.q-det textarea{min-height:70px; resize:vertical; line-height:1.55;}
.q-det input:focus, .q-det textarea:focus{border-color:var(--teal);}
.q-desc{font-size:14px; line-height:1.6; background:var(--bg-3); border:1px solid var(--line);
  border-radius:11px; padding:12px 14px; white-space:pre-wrap; word-break:break-word; color:var(--ink-2);}
.q-links{display:flex; gap:14px; flex-wrap:wrap; font-size:13px;}
.q-links a{color:var(--teal); text-decoration:none; font-weight:600;}
.q-links a:hover{text-decoration:underline;}

/* estados */
.q-row.hecha{opacity:.5;}
.q-row.hecha .q-titulo{text-decoration:line-through; color:var(--muted); font-weight:500;}
.q-row.arrastrando{transition:none!important; z-index:40; cursor:grabbing;
  border-color:rgba(61,184,178,.55); background:#171b21;
  box-shadow:0 30px 64px -22px rgba(0,0,0,.95);}
.q-row.arrastrando .q-line{cursor:grabbing;}
.q-row.destacada{border-color:var(--teal); box-shadow:0 0 0 3px rgba(61,184,178,.15);}

/* ── SIGNATURE MOVE — border beam sobre la tarea #1 ──
   (mecánica de componentes/15-card-border-beam, re-teñida en turquesa BrainX)
   No es un adorno: el haz marca "esto es lo que estás haciendo ahora". */
@property --beam-ang{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.q-row.top{border-color:rgba(61,184,178,.26);
  background:linear-gradient(180deg, rgba(61,184,178,.055), rgba(61,184,178,0) 70%), var(--card);}
.q-row.top .q-num{color:var(--teal);}
.q-row.top .q-titulo{font-size:16.5px; font-weight:700;}
.q-row.top::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--beam-ang) at 50% 50%,
    transparent 0turn, transparent .80turn,
    rgba(61,184,178,0) .82turn,
    #3db8b2 .94turn,
    #86f2ea 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:beam-girar 3.6s linear infinite;
}
@keyframes beam-girar{to{--beam-ang:1turn;}}
@media (prefers-reduced-motion:reduce){
  .q-row.top::after{animation:none; background:rgba(61,184,178,.45);}
  .pulso{animation:none;} .alerta-cartel{animation:none;}
}

/* separador de sección dentro del plan */
.q-sep{display:flex; align-items:center; gap:12px; margin:30px 0 12px;
  font-family:var(--font-display); font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.7px; color:var(--muted);}
.q-sep::after{content:""; flex:1; height:1px; background:var(--line);}
.q-sep button{background:none; border:none; color:var(--teal); font-family:var(--font-body);
  font-size:12.5px; font-weight:600; cursor:pointer;}

/* ════════════════════════════════════════════════════════════════
   3) FORMULARIO CORTO (ticket.html) — saludo con datos pre-cargados
   ════════════════════════════════════════════════════════════════ */
.saludo{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--bg-3);
  border:1px solid var(--line); border-radius:12px; padding:12px 15px; margin-bottom:18px;
  font-size:14px; color:var(--ink-2);}
.saludo b{color:#fff; font-family:var(--font-display);}
.saludo .cambiar{background:none; border:none; color:var(--teal); font-family:var(--font-body);
  font-size:13px; font-weight:600; cursor:pointer; margin-left:auto;}
.saludo .cambiar:hover{text-decoration:underline;}

/* aviso de "falta correr el SQL" */
.sql-aviso{background:var(--media-soft); border:1px solid rgba(240,161,58,.35); border-radius:12px;
  padding:16px 18px; margin:0 0 18px; font-size:13.5px; color:#f0b765; line-height:1.6;}
.sql-aviso b{color:#ffd39b;}
.sql-aviso .acciones{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}

@media (max-width:720px){
  .alerta-cartel{right:14px; left:14px; bottom:14px; justify-content:center;}
  /* los botones bajan a su propia línea: el título se queda con todo el ancho */
  .q-line{grid-template-columns:26px 20px 1fr; grid-template-areas:"num grip body" "side side side";
    gap:4px 8px; padding:12px 12px 10px 8px;}
  .q-side{justify-content:flex-end; padding-top:2px;}
  .q-btn{width:34px; height:34px; font-size:15px;}
  .q-det .fila{grid-template-columns:1fr;}
  .q-titulo{font-size:15px;}
  .q-add{flex-wrap:wrap; padding:10px;}
  .q-add input{min-width:0; flex:1 1 100%!important; padding:8px 4px;}
  .q-add input + input{border-left:none; border-top:1px solid var(--line); padding-left:4px;}
  .q-add .btn{width:100%;}
  .plan-hint{font-size:12px;}
}

/* ── admin.html: contexto editable del ticket (sistema / tipo / urgencia) ── */
.t-ctx{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:12px; align-items:end;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.t-ctx .field{margin:0;}
.t-ctx label{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted);}
.t-ctx input, .t-ctx select{padding:10px 12px; font-size:14px;}
.ticket.destacado{border-color:var(--teal); box-shadow:0 0 0 3px rgba(61,184,178,.15);}
@media (max-width:720px){ .t-ctx{grid-template-columns:1fr;} }

/* ── cartel de error del login (un toast de 2s se pierde) ── */
.login-err{background:var(--alta-soft); border:1px solid rgba(255,107,107,.35); color:#ff9d9d;
  border-radius:11px; padding:12px 15px; margin-bottom:15px;
  font-size:13.5px; font-weight:600; line-height:1.5;}

/* ── ticket.html: copia del pedido para el cliente ── */
.resumen-box{background:var(--bg-3); border:1px solid var(--line); border-radius:12px;
  margin:4px 0 18px; overflow:hidden;}
.resumen-top{font-family:var(--font-display); font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; color:var(--muted); padding:12px 15px 0;}
.resumen{margin:0; padding:8px 15px 15px; font-family:var(--font-body); font-size:14px;
  line-height:1.65; color:var(--ink-2); white-space:pre-wrap; word-break:break-word;}
.ok-acciones{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px;}
.campo-mal{border-color:rgba(255,107,107,.7)!important; box-shadow:0 0 0 3px rgba(255,107,107,.14)!important;}