/* ============================================================
   AUDIA PRO — Núcleo de estilos compartido
   acceso.automatizatucentro.com
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --bg-card:#0f0f0f;
  --bg-card-2:#141414;
  --bg-card-3:#1a1a1a;
  --border:#1f1f1f;
  --border-strong:#2a2a2a;
  --text:#ffffff;
  --text-dim:#aaaaaa;
  --text-mute:#888888;
  --text-faint:#666666;
  --amarillo:#F5C400;
  --amarillo-soft:rgba(245,196,0,0.15);
  --amarillo-line:rgba(245,196,0,0.25);
  --azul:#2D35C8;
  --verde:#2ecc71;
  --verde-soft:rgba(46,204,113,0.12);
  --rojo:#e24b4a;
  --rojo-soft:rgba(226,75,74,0.15);
}

*{box-sizing:border-box;margin:0;padding:0}

html,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;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:14px}

/* ============================================================
   TIPOGRAFÍA — TITULAR ESTILO AUDIA
   ============================================================ */
.audia-title{
  font-weight:800;
  font-style:italic;
  letter-spacing:-1px;
  line-height:1;
}
.audia-title .yellow{
  color:var(--amarillo);
  text-shadow:0 0 22px rgba(245,196,0,0.35);
}

/* etiquetas técnicas tipo "// 01" */
.audia-tag{
  font-size:11px;
  letter-spacing:2px;
  color:var(--text-mute);
}
.audia-tag.active{color:var(--amarillo)}

/* breadcrumb superior */
.audia-breadcrumb{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  letter-spacing:2px;
  color:var(--text-mute);
}
.audia-breadcrumb .brand{color:var(--text)}
.audia-breadcrumb .brand b{color:var(--amarillo);font-weight:inherit}
.audia-breadcrumb .dot{color:var(--amarillo);margin-right:6px}

/* ============================================================
   LAYOUT
   ============================================================ */
.audia-shell{
  max-width:1180px;
  margin:0 auto;
  padding:28px 26px 80px;
}

.audia-shell-narrow{
  max-width:720px;
  margin:0 auto;
  padding:28px 26px 80px;
}

/* ============================================================
   CARDS
   ============================================================ */
.audia-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px;
}
.audia-card.active{
  border-color:var(--amarillo-line);
  box-shadow:0 0 24px rgba(245,196,0,0.08);
}
.audia-card.danger{
  border-color:rgba(226,75,74,0.3);
}
.audia-card.muted{
  background:var(--bg-card-2);
}
.audia-card-title{
  font-size:10px;
  letter-spacing:2px;
  color:var(--text-faint);
  margin-bottom:14px;
}

/* ============================================================
   BADGES
   ============================================================ */
.audia-badge{
  font-size:9px;
  letter-spacing:1.5px;
  padding:4px 8px;
  border-radius:3px;
  font-weight:600;
  display:inline-block;
}
.audia-badge.yellow{background:var(--amarillo-soft);color:var(--amarillo)}
.audia-badge.green{background:var(--verde-soft);color:var(--verde)}
.audia-badge.red{background:var(--rojo-soft);color:var(--rojo)}
.audia-badge.gray{background:rgba(255,255,255,0.05);color:var(--text-faint)}
.audia-badge.blue{background:rgba(45,53,200,0.18);color:#7d83e3}

/* ============================================================
   BOTONES
   ============================================================ */
.audia-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 20px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.5px;
  background:var(--bg-card-3);
  border:1px solid var(--border-strong);
  color:var(--text);
  transition:all 0.15s;
}
.audia-btn:hover{background:var(--bg-card-2);border-color:#333}

.audia-btn-primary{
  background:var(--amarillo);
  color:#000;
  border:1px solid var(--amarillo);
}
.audia-btn-primary:hover{background:#ffd83d;border-color:#ffd83d}
.audia-btn-primary:disabled{opacity:0.4;cursor:not-allowed}

.audia-btn-ghost{
  background:transparent;
  border:1px solid var(--border-strong);
}
.audia-btn-danger{
  background:transparent;
  border:1px solid rgba(226,75,74,0.4);
  color:var(--rojo);
}
.audia-btn-danger:hover{background:rgba(226,75,74,0.08)}

/* ============================================================
   INPUTS
   ============================================================ */
.audia-input,.audia-textarea,.audia-select{
  width:100%;
  background:var(--bg-card-2);
  border:1px solid var(--border-strong);
  color:var(--text);
  padding:11px 14px;
  border-radius:7px;
  font-size:14px;
  outline:none;
  transition:border-color 0.15s;
}
.audia-input:focus,.audia-textarea:focus,.audia-select:focus{
  border-color:var(--amarillo);
}
.audia-textarea{resize:vertical;min-height:90px;line-height:1.55}
.audia-input::placeholder,.audia-textarea::placeholder{color:var(--text-faint)}

.audia-input-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:14px;
}
.audia-input-row label{
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--text-mute);
}

/* check/radio nativos un poco más bonitos */
.audia-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--bg-card-2);
  border:1px solid var(--border);
  border-radius:7px;
  cursor:pointer;
  font-size:13px;
  user-select:none;
  transition:all 0.15s;
}
.audia-check:hover{border-color:var(--border-strong)}
.audia-check input{accent-color:var(--amarillo);width:16px;height:16px;cursor:pointer}
.audia-check.checked{border-color:var(--amarillo-line);background:rgba(245,196,0,0.04)}

/* fecha con calendario visible en oscuro */
.audia-input[type=date],
.audia-input[type=datetime-local]{
  color-scheme:dark;
}
.audia-input[type=date]::-webkit-calendar-picker-indicator,
.audia-input[type=datetime-local]::-webkit-calendar-picker-indicator{
  filter:invert(0.6);cursor:pointer;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.audia-bar{
  height:6px;
  background:#222;
  border-radius:4px;
  overflow:hidden;
}
.audia-bar > div{
  height:100%;
  background:var(--amarillo);
  transition:width 0.4s ease;
}

/* segmentos (1 por paso del onboarding) */
.audia-bar-seg{
  display:grid;
  gap:4px;
}
.audia-bar-seg > div{
  height:6px;
  border-radius:2px;
  background:#222;
}
.audia-bar-seg > div.done{background:var(--verde)}
.audia-bar-seg > div.curr{background:var(--amarillo)}

/* ============================================================
   GRID PASOS (home cliente)
   ============================================================ */
.audia-pasos{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.audia-paso{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:2px solid var(--border-strong);
  border-radius:10px;
  padding:18px 18px 16px;
  cursor:pointer;
  transition:transform 0.15s,border-color 0.15s;
}
.audia-paso:hover{transform:translateY(-1px);border-color:#2f2f2f}
.audia-paso.done{border-left-color:var(--verde)}
.audia-paso.curr{
  border-color:var(--amarillo-line);
  border-left-color:var(--amarillo);
  box-shadow:0 0 24px rgba(245,196,0,0.08);
}
.audia-paso.locked{opacity:0.5;cursor:not-allowed}
.audia-paso.locked:hover{transform:none;border-color:var(--border)}

.audia-paso-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:8px;
}
.audia-paso-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:0.3px;
  text-transform:uppercase;
}
.audia-paso-title em{font-style:italic;color:var(--amarillo);font-weight:700}
.audia-paso.locked .audia-paso-title em{color:var(--text-faint)}
.audia-paso-desc{
  font-size:12px;
  color:var(--text-mute);
  margin-top:6px;
  line-height:1.5;
}
.audia-paso-cta{
  font-size:10px;
  color:var(--amarillo);
  margin-top:10px;
  letter-spacing:1px;
}

/* ============================================================
   TABLA CLIENTES (admin)
   ============================================================ */
.audia-table{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.audia-table-head,
.audia-table-row{
  display:grid;
  grid-template-columns:42px 1.6fr 2fr 0.8fr 1fr 0.9fr;
  gap:12px;
  align-items:center;
}
.audia-table-head{
  padding:10px 14px;
  font-size:9px;
  letter-spacing:1.5px;
  color:var(--text-faint);
  border-bottom:1px solid var(--border);
}
.audia-table-row{
  padding:14px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  transition:border-color 0.15s;
}
.audia-table-row:hover{border-color:var(--border-strong)}
.audia-table-row.warn{
  border-color:var(--amarillo-line);
  border-left:2px solid var(--amarillo);
}
.audia-table-row.danger{
  border-color:rgba(226,75,74,0.3);
  border-left:2px solid var(--rojo);
}

.audia-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:12px;
  color:#000;
  background:var(--amarillo);
}

/* ============================================================
   TABS
   ============================================================ */
.audia-tabs{
  display:flex;
  gap:4px;
  font-size:11px;
  letter-spacing:1.5px;
  border-bottom:1px solid var(--border);
  margin-bottom:22px;
}
.audia-tab{
  padding:10px 14px;
  color:var(--text-faint);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color 0.15s;
}
.audia-tab:hover{color:var(--text-dim)}
.audia-tab.active{color:var(--amarillo);border-bottom-color:var(--amarillo);font-weight:600}

/* ============================================================
   KPI CARDS (admin)
   ============================================================ */
.audia-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:22px;
}
.audia-kpi{
  background:var(--bg-card-2);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px;
}
.audia-kpi-label{font-size:9px;letter-spacing:1.5px;color:var(--text-mute)}
.audia-kpi-value{font-size:24px;font-weight:700;margin-top:4px;color:var(--amarillo)}
.audia-kpi-value.blue{color:#7d83e3}
.audia-kpi-value.red{color:var(--rojo)}
.audia-kpi-value.green{color:var(--verde)}

/* ============================================================
   MODAL
   ============================================================ */
.audia-modal-bg{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  animation:fadeIn 0.15s ease;
}
.audia-modal{
  background:var(--bg-card);
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:28px;
  width:100%;
  max-width:560px;
  max-height:90vh;
  overflow-y:auto;
  animation:slideUp 0.2s ease;
}
.audia-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}
.audia-modal-title{
  font-weight:800;
  font-style:italic;
  font-size:24px;
  letter-spacing:-0.5px;
}
.audia-modal-title em{color:var(--amarillo);font-style:italic}
.audia-modal-close{
  font-size:24px;
  color:var(--text-mute);
  cursor:pointer;
  background:none;
  border:none;
  padding:4px 8px;
  border-radius:6px;
}
.audia-modal-close:hover{background:var(--bg-card-2);color:#fff}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   TOAST
   ============================================================ */
.audia-toast{
  position:fixed;
  top:24px;
  right:24px;
  background:var(--bg-card);
  border:1px solid var(--amarillo-line);
  border-left:3px solid var(--amarillo);
  border-radius:8px;
  padding:14px 18px;
  font-size:13px;
  z-index:200;
  animation:slideIn 0.25s ease;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
  max-width:360px;
}
.audia-toast.green{border-color:rgba(46,204,113,0.4);border-left-color:var(--verde)}
.audia-toast.red{border-color:rgba(226,75,74,0.4);border-left-color:var(--rojo)}

@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ============================================================
   LOGIN
   ============================================================ */
.audia-login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.audia-login-card{
  width:100%;
  max-width:420px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:38px 32px;
}
.audia-login-logo{
  text-align:center;
  margin-bottom:24px;
}
.audia-login-logo img{max-width:120px;margin:0 auto;display:block}
.audia-login-logo .brand-text{
  font-weight:800;
  font-style:italic;
  font-size:32px;
  letter-spacing:-1px;
  margin-top:14px;
}
.audia-login-logo .brand-text em{color:var(--amarillo);font-style:italic}
.audia-login-sub{
  text-align:center;
  font-size:12px;
  color:var(--text-mute);
  margin-bottom:28px;
  letter-spacing:1px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px){
  .audia-shell{padding:18px 14px 80px}
  .audia-title{font-size:32px !important}
  .audia-pasos{grid-template-columns:1fr !important}
  .audia-kpis{grid-template-columns:repeat(2,1fr) !important}
  .audia-table-head,.audia-table-row{
    grid-template-columns:42px 1fr !important;
  }
  .audia-table-head > div:nth-child(n+3),
  .audia-table-row > div:nth-child(n+3){display:none}
  .audia-modal{padding:20px}
  .audia-modal-title{font-size:20px}
}

/* utilidades */
.flex{display:flex}
.flex-1{flex:1}
.flex-col{flex-direction:column}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-22{gap:22px}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.mt-6{margin-top:6px}.mt-10{margin-top:10px}.mt-14{margin-top:14px}.mt-22{margin-top:22px}.mt-28{margin-top:28px}
.mb-6{margin-bottom:6px}.mb-10{margin-bottom:10px}.mb-14{margin-bottom:14px}.mb-22{margin-bottom:22px}
.text-sm{font-size:12px}.text-xs{font-size:11px}
.text-mute{color:var(--text-mute)}.text-faint{color:var(--text-faint)}
.text-yellow{color:var(--amarillo)}
.text-green{color:var(--verde)}
.text-red{color:var(--rojo)}
.font-bold{font-weight:600}
.w-full{width:100%}
.hidden{display:none !important}