:root{
  --navy:#0B1220; --navy2:#121C2E; --navy3:#1A2740;
  --ambar:#F09024; --ambar2:#FFB25E;
  --texto:#EAF0F8; --suave:#93A4BE; --linea:#22314C;
  --ok:#3FBF8F; --mal:#F26D6D; --info:#5AA9F0;
  --radio:16px; --sombra:0 10px 30px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1100px 600px at 85% -10%, #1B2B47 0%, transparent 60%), var(--navy);
  color:var(--texto); font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{color:var(--ambar2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:20px 18px 60px}

/* cabecera */
header.top{position:sticky;top:0;z-index:30;background:rgba(11,18,32,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px}
.marca{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;color:var(--texto)}
.marca:hover{text-decoration:none}
.logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(160deg,var(--ambar2),var(--ambar));display:grid;place-items:center;box-shadow:0 6px 16px rgba(240,144,36,.35)}
.logo svg{width:20px;height:20px}
.marca small{display:block;font-size:10.5px;font-weight:600;color:var(--suave);letter-spacing:1.6px;text-transform:uppercase}
nav.menu{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
nav.menu a{padding:8px 12px;border-radius:10px;color:var(--suave);font-weight:600;font-size:13.5px}
nav.menu a:hover,nav.menu a.on{background:var(--navy3);color:var(--texto);text-decoration:none}
.quien{font-size:12.5px;color:var(--suave);padding-left:10px;border-left:1px solid var(--linea)}

/* tipografía */
h1{font-size:26px;line-height:1.2;margin:0 0 6px;letter-spacing:-.4px}
h2{font-size:17px;margin:0 0 12px;letter-spacing:-.2px}
.sub{color:var(--suave);margin:0 0 22px;font-size:14px}
.eyebrow{color:var(--ambar);font-weight:800;font-size:11.5px;letter-spacing:2px;text-transform:uppercase;margin:0 0 8px}

/* tarjetas */
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}
@media(max-width:520px){.g4{grid-template-columns:1fr 1fr}}
.card{background:linear-gradient(180deg,var(--navy2),#0F1929);border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.card.tight{padding:14px}
.kpi{font-size:30px;font-weight:850;letter-spacing:-1px;line-height:1}
.kpi.ambar{color:var(--ambar)}
.kpi.ok{color:var(--ok)}
.kpi small{font-size:12px;font-weight:600;color:var(--suave);letter-spacing:0}
.rot{font-size:12px;color:var(--suave);font-weight:650;text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px}

/* barra de cupo */
.barra{height:10px;border-radius:99px;background:#0A1220;border:1px solid var(--linea);overflow:hidden}
.barra i{display:block;height:100%;background:linear-gradient(90deg,var(--ambar),var(--ambar2));border-radius:99px;transition:width .4s}
.barra.full i{background:linear-gradient(90deg,#F26D6D,#FF9B7A)}

/* botones */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--linea);background:var(--navy3);color:var(--texto);padding:10px 16px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;transition:.15s}
.btn:hover{border-color:#33486B;transform:translateY(-1px);text-decoration:none}
.btn.primario{background:linear-gradient(160deg,var(--ambar2),var(--ambar));border-color:transparent;color:#20160A;box-shadow:0 8px 20px rgba(240,144,36,.28)}
.btn.primario:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.peligro{color:#FFD5D5;border-color:#5A2A2A;background:#2A1414}
.btn.mini{padding:6px 10px;font-size:12.5px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* formularios */
label{display:block;font-size:12.5px;font-weight:700;color:var(--suave);text-transform:uppercase;letter-spacing:.6px;margin:0 0 6px}
input[type=text],input:not([type]),input[type=email],input[type=password],input[type=number],select{
  width:100%;background:#0A1220;border:1px solid var(--linea);color:var(--texto);
  padding:11px 13px;border-radius:11px;font-size:15px;outline:none}
input::placeholder{color:#5E6E88}
input:focus,select:focus{border-color:var(--ambar);box-shadow:0 0 0 3px rgba(240,144,36,.15)}
.campo{margin-bottom:14px}
textarea{width:100%;background:#0A1220;border:1px solid var(--linea);color:var(--texto);
  padding:11px 13px;border-radius:11px;font:inherit;font-size:15px;outline:none;resize:vertical;min-height:96px}
textarea:focus{border-color:var(--ambar);box-shadow:0 0 0 3px rgba(240,144,36,.15)}
textarea::placeholder{color:#5E6E88}
.ayuda{font-size:12px;color:var(--suave);margin-top:5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:8px 12px;border:1px solid var(--linea);border-radius:99px;font-size:13px;color:var(--suave);cursor:pointer;user-select:none}
.chip input:checked + span{background:rgba(240,144,36,.14);border-color:var(--ambar);color:var(--ambar2);font-weight:700}

/* avisos */
.aviso{border-radius:12px;padding:12px 14px;font-size:14px;margin-bottom:16px;border:1px solid}
.aviso.ok{background:rgba(63,191,143,.1);border-color:rgba(63,191,143,.4);color:#B9F2DC}
.aviso.mal{background:rgba(242,109,109,.1);border-color:rgba(242,109,109,.4);color:#FFD1D1}
.aviso.info{background:rgba(90,169,240,.1);border-color:rgba(90,169,240,.35);color:#CFE8FF}

/* tabla */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:var(--radio);background:var(--navy2)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:720px}
th{text-align:left;padding:11px 12px;color:var(--suave);font-size:11px;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid rgba(34,49,76,.55);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(26,39,64,.5)}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:800;letter-spacing:.3px}
.pill.movil{background:rgba(63,191,143,.14);color:#7FE3BC}
.pill.fijo{background:rgba(147,164,190,.14);color:#B9C6DA}
.pill.pt{background:rgba(240,144,36,.16);color:var(--ambar2)}
.pill.nuevo{background:rgba(90,169,240,.14);color:#9BD0FF}
.pill.contactado{background:rgba(63,191,143,.14);color:#7FE3BC}
.pill.descartado{background:rgba(147,164,190,.12);color:#8FA0B8}
.num{font-variant-numeric:tabular-nums;font-weight:750}

/* login */
.login-pantalla{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-caja{width:100%;max-width:400px}
.login-logo{width:64px;height:64px;border-radius:18px;margin:0 auto 18px;display:grid;place-items:center;background:linear-gradient(160deg,var(--ambar2),var(--ambar));box-shadow:0 14px 40px rgba(240,144,36,.35)}
.login-logo svg{width:38px;height:38px}
.login-caja h1{text-align:center;font-size:24px}
.login-caja .sub{text-align:center}

/* varios */
.hilera{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.der{margin-left:auto}
.sep{height:1px;background:var(--linea);margin:20px 0}
.mini{font-size:12px;color:var(--suave)}
.mono{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
footer.pie{margin-top:36px;padding-top:18px;border-top:1px solid var(--linea);color:var(--suave);font-size:12px;display:flex;gap:10px;flex-wrap:wrap}
.estado-vacio{text-align:center;padding:46px 20px;color:var(--suave)}
.estado-vacio .icono{font-size:40px;margin-bottom:10px}

/* --- móvil: que la tabla se lea sin arrastrar de lado --- */
@media(max-width:760px){
  .wrap{padding:16px 12px 48px}
  h1{font-size:22px}
  .tabla-wrap{border:0;background:transparent;overflow:visible;border-radius:0}
  table{display:block;min-width:0}
  thead{display:none}
  tbody{display:block}
  tr{display:block;position:relative;border:1px solid var(--linea);border-radius:14px;
     background:var(--navy2);padding:12px 13px;margin-bottom:10px;box-shadow:var(--sombra)}
  tr:hover{background:var(--navy2)}
  td{display:block;border:0;padding:3px 0;font-size:13px}
  td:nth-child(3), td:nth-child(4), td:nth-child(6){display:none}
  td:nth-child(1){position:absolute;top:11px;right:13px;font-size:17px;color:var(--ambar)}
  td:nth-child(2){font-size:15px;font-weight:750;padding-right:52px}
  td:nth-child(7){padding-top:2px}
  td:last-child{padding-top:9px;margin-top:6px;border-top:1px solid rgba(34,49,76,.7)}
  td:last-child .hilera{flex-direction:row;flex-wrap:wrap;gap:6px}
  .btn.mini{padding:7px 10px;font-size:12px;border-radius:9px}
}
@media(max-width:620px){
  .top-in{padding:9px 12px;gap:8px;flex-wrap:nowrap}
  .marca{font-size:13.5px;gap:8px;white-space:nowrap}
  .marca small{display:none}
  .logo{width:30px;height:30px;border-radius:9px}
  nav.menu{gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav.menu::-webkit-scrollbar{display:none}
  nav.menu a{padding:7px 8px;font-size:12px;white-space:nowrap}
  .quien{display:none}
  .solo-escritorio{display:none !important}
  .login-logo{width:56px;height:56px;border-radius:16px}
}