/* =====================================================================
   Dystopia Ventas — componentes.
   Subconjunto de css/componentes.css de dystopia-seguimiento: solo lo que
   usa el esqueleto (card, botones, formulario, badge, estado vacío,
   login/carga). El resto se copia cuando una fase lo necesite.
   ORDEN DE CARGA (no cambiarlo): base, layout, componentes, responsive.
   ===================================================================== */
/* ===== CARDS ===== */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5);box-shadow:var(--shadow);min-width:0;}

/* ===== BOTONES ===== */
.btn{background:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:0 var(--sp-4);min-height:var(--control-h);cursor:pointer;font-weight:700;font-size:var(--fs-meta);color:var(--ink);display:inline-flex;align-items:center;gap:var(--sp-2);white-space:nowrap;}
.btn:hover{background:var(--border-soft);}
.btn:disabled{opacity:.6;cursor:default;}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);}

/* ===== FORMULARIO ===== */
.form-row{margin-bottom:var(--sp-3);min-width:0;}
.form-row label{display:block;font-size:var(--fs-micro);font-weight:600;color:var(--text-dim);margin-bottom:var(--sp-1);}
.form-row input[type=email],.form-row input[type=password]{width:100%;background:var(--surface-2);border:1px solid transparent;border-radius:var(--radius-sm);min-height:var(--control-h);padding:var(--sp-2) var(--sp-3);color:var(--ink);}
.form-row input:focus{background:var(--surface);border-color:var(--accent-line);outline:none;}

/* ===== BADGES ===== */
/* En Seguimiento el fondo mezcla con white; acá con --surface para que funcione en oscuro. */
.badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-weight:600;font-size:var(--fs-micro);line-height:16px;padding:2px var(--sp-2);border-radius:999px;color:var(--badge-color, var(--text-dim));background:color-mix(in srgb, var(--badge-color, var(--text-dim)) 14%, var(--surface));white-space:nowrap;vertical-align:middle;}

/* ===== ESTADO VACÍO ===== */
.empty-state{text-align:center;padding:var(--sp-10) var(--sp-5);color:var(--text-faint);}
.empty-state .big{font-weight:700;font-size:var(--fs-card);color:var(--ink);margin-bottom:var(--sp-1);}
.empty-state .small{font-size:var(--fs-meta);}


/* ===== LOGIN / CARGA / AVISO ===== */
.login-wrap{flex:1;min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px;}
.login-card{width:100%;max-width:360px;}
.login-card .brand-mark{margin-bottom:20px;}
.login-card .form-row input{padding:9px 12px;}
.login-error{color:var(--danger);font-size:12px;font-weight:600;min-height:16px;margin-bottom:10px;}
.login-card .btn{width:100%;justify-content:center;}
.loading{flex:1;padding:40px;color:var(--text-dim);background:var(--bg);min-height:100vh;}
.aviso-card{max-width:420px;}
.aviso-titulo{font-weight:800;font-size:var(--fs-section);color:var(--ink);margin-bottom:var(--sp-2);}
.aviso-texto{font-size:var(--fs-body);color:var(--text-dim);margin:0 0 var(--sp-5);overflow-wrap:anywhere;}
.aviso-acciones{display:flex;gap:var(--sp-2);justify-content:flex-end;}
.aviso-card .btn{width:auto;}