/* =====================================================================
   RW Marketing Control — hoja de estilos principal
   Diseño: tablero de carreras (oscuro + ámbar señalética)
   100% local, sin CDNs, para funcionamiento offline.
   ===================================================================== */

:root{
  --bg:#0F1115; --panel:#171A20; --panel2:#1E2128;
  --border:#262B34; --border2:#3A3F4A;
  --text:#F4F4F2; --text2:#B7BCC5; --muted:#8A8F9A; --muted2:#6C7280;
  --amber:#F5B301; --blue:#378ADD; --blue-l:#85B7EB;
  --green:#639922; --green-l:#97C459; --orange:#EF9F27;
  --red:#E24B4A; --coral:#F0997B; --teal:#1D9E75; --purple:#7F77DD;
  --radius:9px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

/* Franja de carreras */
.race-stripe{height:5px; background:repeating-linear-gradient(90deg,var(--amber) 0 14px,var(--bg) 14px 28px);}

/* Layout */
.wrap{max-width:1080px; margin:0 auto; padding:0 18px;}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:0.5px solid var(--border); background:var(--panel);}
.brand{display:flex; align-items:center; gap:10px;}
.brand .logo{width:32px; height:32px; border-radius:8px; background:var(--amber); display:flex; align-items:center; justify-content:center; color:#15171C; font-weight:800; font-size:15px;}
.brand .name{font-size:14px; font-weight:600; letter-spacing:0.5px;}
.brand .sub{font-size:10px; color:var(--muted); letter-spacing:1.5px;}

.nav{display:flex; gap:4px; flex-wrap:wrap;}
.nav a{padding:7px 12px; border-radius:7px; font-size:13px; color:var(--text2); display:inline-flex; align-items:center; gap:6px;}
.nav a:hover{background:var(--panel2);}
.nav a.active{background:var(--amber); color:#15171C; font-weight:500;}

.userchip{display:flex; align-items:center; gap:9px;}
.avatar{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;}

/* Contenido */
.content{padding:20px 0 40px;}
.page-title{font-size:18px; font-weight:600; margin:0 0 4px;}
.page-sub{font-size:13px; color:var(--muted); margin:0 0 18px;}

/* Cards y KPIs */
.card{background:var(--panel); border:0.5px solid var(--border); border-radius:12px; padding:16px;}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.kpi{background:var(--panel); border:0.5px solid var(--border); border-radius:10px; padding:12px;}
.kpi .n{font-size:24px; font-weight:600; line-height:1.1;}
.kpi .l{font-size:11px; color:var(--muted); margin-top:3px;}

/* Botones */
.btn{cursor:pointer; border-radius:8px; font-size:13px; padding:9px 14px; border:0.5px solid var(--border2); background:transparent; color:var(--text2); display:inline-flex; align-items:center; justify-content:center; gap:6px;}
.btn:hover{background:var(--panel2);}
.btn-primary{background:var(--amber); color:#15171C; border-color:var(--amber); font-weight:500;}
.btn-blue{background:var(--blue); color:#EAF1FB; border-color:var(--blue);}
.btn-green{background:var(--green); color:#EAF3DE; border-color:var(--green);}
.btn-danger{color:var(--coral); border-color:#5A2320;}
.btn-block{width:100%;}
.btn:disabled{opacity:0.4; cursor:not-allowed;}

/* Formularios */
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; color:var(--text2); margin-bottom:6px;}
.req{color:var(--amber);}
.input,select,textarea{width:100%; background:var(--panel2); border:0.5px solid var(--border2); border-radius:8px; color:var(--text); font-size:13px; padding:9px 11px;}
textarea{min-height:70px; resize:vertical;}
.input:focus,select:focus,textarea:focus{outline:none; border-color:var(--amber);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;}

/* Pills / badges */
.pill{font-size:11px; padding:3px 10px; border-radius:20px; font-weight:500; display:inline-flex; align-items:center; gap:5px;}
.badge{font-size:10px; padding:2px 8px; border-radius:20px; font-weight:500;}

/* Tarjetas de tarea */
.task-card{background:var(--panel); border:0.5px solid var(--border); border-radius:11px; padding:13px 15px; margin-bottom:11px;}
.task-card.late{border-color:#5A2320;}
.task-card .title{font-size:14px; font-weight:500;}
.task-meta{display:flex; align-items:center; gap:12px; margin:8px 0 11px; font-size:11px; color:var(--muted); flex-wrap:wrap;}
.task-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* Alertas / flash */
.alert{padding:11px 14px; border-radius:9px; font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
.alert-error{background:#2A1815; border:0.5px solid #5A2320; color:var(--coral);}
.alert-success{background:#14260A; border:0.5px solid #2A4A12; color:var(--green-l);}

/* Sección */
.section-h{font-size:11px; color:var(--muted); letter-spacing:0.6px; text-transform:uppercase; margin:18px 0 9px;}

/* Historial timeline */
.timeline{border-left:2px solid var(--border); padding-left:15px;}
.timeline .ev{position:relative; padding:0 0 13px;}
.timeline .ev::before{content:''; position:absolute; left:-19px; top:4px; width:8px; height:8px; border-radius:50%; background:var(--amber);}
.timeline .t{font-size:11px; color:var(--muted2);}
.timeline .a{font-size:13px; color:var(--text2); margin-top:1px;}

/* Responsive (sección 71) */
@media (max-width:640px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .nav{display:none;}
  .nav.open{display:flex; position:absolute; top:60px; left:0; right:0; flex-direction:column; background:var(--panel); padding:10px; z-index:20; border-bottom:0.5px solid var(--border);}
}