/* Suite Atención a Clientes · paleta MUTA/Bepass */
:root{
  --bg:#EBEBEB;
  --surface:#FFFFFF;
  --fg:#171717;
  --title:#464646;
  --muted:#71717A;
  --line:#E4E4E7;
  --line-strong:#D4D4D8;
  --zinc-50:#F4F4F5;
  --zinc-100:#E4E4E7;
  --zinc-500:#71717A;
  --zinc-700:#3F3F46;
  --zinc-900:#18181B;
  --b1:#1E40AF;
  --b2:#2563EB;
  --b3:#3B82F6;
  --danger:#B91C1C;
  --danger-bg:#FEF2F2;
  --danger-line:#FECACA;
  --ok:#047857;
  --ok-bg:#ECFDF5;
  --warn:#B45309;
  --warn-bg:#FFFBEB;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Manrope',Arial,Helvetica,sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* ---- Layout general ---- */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:#171717;color:#F4F4F5;padding:28px 20px;display:flex;flex-direction:column;gap:22px}
.sidebar .marca{font-weight:800;letter-spacing:.02em;font-size:18px}
.sidebar .marca small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#A1A1AA;margin-top:4px}
.sidebar nav{display:flex;flex-direction:column;gap:4px;margin-top:12px}
.sidebar nav a{color:#D4D4D8;text-decoration:none;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:500;transition:background .15s,color .15s}
.sidebar nav a:hover{background:#262626;color:#fff}
.sidebar nav a.activo{background:var(--b1);color:#fff;font-weight:700}
.sidebar .seccion{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#71717A;font-weight:700;margin:16px 12px 4px}
.sidebar .usuario{margin-top:auto;padding-top:16px;border-top:1px solid #262626;font-size:12.5px;color:#A1A1AA}
.sidebar .usuario b{color:#fff;display:block;font-size:13.5px;font-weight:700}
.sidebar .usuario form{margin-top:10px}
.sidebar .usuario button{background:transparent;color:#71717A;border:1px solid #262626;border-radius:6px;padding:7px 10px;font-size:12px;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s}
.sidebar .usuario button:hover{color:#fff;border-color:#52525B}

.main{padding:40px 48px 72px;max-width:1200px}
h1{font-size:28px;color:var(--title);font-weight:300;letter-spacing:-.02em;margin:0 0 4px}
.subtitulo{color:var(--muted);font-size:14px;margin:0 0 32px}
h2{font-size:17px;color:var(--title);font-weight:700;letter-spacing:-.01em;margin:32px 0 14px}

/* ---- Tarjetas y stats ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.card .label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.card .valor{font-size:32px;color:var(--title);font-weight:300;letter-spacing:-.02em;margin-top:4px}
.card .pie{font-size:12px;color:var(--muted);margin-top:4px}

/* ---- Tablas ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}
.panel .encabezado{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel .encabezado h2{margin:0;font-size:15px;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--zinc-50);font-size:11px;color:var(--title);text-transform:uppercase;letter-spacing:.06em;font-weight:700}
tr:last-child td{border-bottom:none}
td code{background:var(--zinc-50);padding:1px 6px;border-radius:4px;font-size:12px;color:var(--title)}
.inactivo td{opacity:.5}

/* ---- Formularios ---- */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:5px}
label{font-size:11px;font-weight:700;color:var(--title);text-transform:uppercase;letter-spacing:.05em}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  width:100%;padding:10px 12px;font-size:14px;font-family:inherit;color:var(--fg);
  border:1px solid var(--line);border-radius:8px;background:#fafafa;transition:border-color .15s,box-shadow .15s
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--b3);background:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
textarea{resize:vertical;min-height:72px}

.boton{display:inline-block;padding:10px 18px;font-size:13.5px;font-weight:700;font-family:inherit;color:#fff;background:var(--b1);
  border:none;border-radius:8px;cursor:pointer;letter-spacing:.02em;text-decoration:none;transition:background .15s,transform .06s}
.boton:hover{background:#1b3a9e}
.boton:active{transform:translateY(1px)}
.boton.sec{background:transparent;color:var(--title);border:1px solid var(--line-strong)}
.boton.sec:hover{background:var(--zinc-50)}
.boton.chico{padding:7px 12px;font-size:12px}

.toolbar{display:flex;justify-content:flex-end;gap:10px;padding:14px 22px;background:var(--zinc-50);border-top:1px solid var(--line)}

/* ---- Mensajes ---- */
.err{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger);font-size:13px;font-weight:600;padding:10px 14px;border-radius:8px;margin-bottom:16px}
.ok{background:var(--ok-bg);border:1px solid #A7F3D0;color:var(--ok);font-size:13px;font-weight:600;padding:10px 14px;border-radius:8px;margin-bottom:16px}

/* ---- Badges ---- */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.badge.rol-admin{background:#EDE9FE;color:#5B21B6}
.badge.rol-direccion{background:#DBEAFE;color:var(--b1)}
.badge.rol-responsable{background:#DCFCE7;color:#166534}
.badge.rol-comercial{background:var(--zinc-100);color:var(--title)}
.badge.estado-si{background:var(--ok-bg);color:var(--ok)}
.badge.estado-no{background:var(--zinc-100);color:var(--muted)}

/* ---- Checklist responsables ---- */
.checklist{display:flex;flex-wrap:wrap;gap:8px}
.checklist label{display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;font-weight:500;color:var(--fg);cursor:pointer;letter-spacing:0;text-transform:none;background:#fafafa}
.checklist label:hover{background:var(--zinc-50);border-color:var(--line-strong)}
.checklist input{margin:0}

/* ---- Login (pantalla aparte) ---- */
.login-body{
  background:linear-gradient(135deg,#171717 0%,#1E40AF 100%);
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px
}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);padding:40px 36px 32px}
.login-card .marca{font-weight:800;font-size:14px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:28px}
.login-card .marca b{color:var(--b1)}
.login-card h1{font-size:26px;margin:0 0 6px}
.login-card .lede{color:var(--muted);font-size:14px;margin:0 0 24px}
.login-card .campo{margin-bottom:14px}
.login-card .boton{width:100%;margin-top:8px;padding:13px}
.login-card .pie{text-align:center;font-size:11.5px;color:var(--muted);margin-top:20px}

@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{flex-direction:row;flex-wrap:wrap;padding:14px 18px;gap:12px}
  .sidebar .marca{flex:1 1 auto}
  .sidebar nav{flex-direction:row;flex-wrap:wrap;margin-top:0}
  .sidebar .usuario{margin-top:0;border-top:none;padding-top:0;flex:1 1 100%}
  .main{padding:28px 20px 48px}
}