/* ============================================================
   AKRIBOS ERP v2 — app.css
   Identidad: estructura, orden, precisión.
   Tema oscuro sobrio, acento índigo-eléctrico, tipografía Inter.
   ============================================================ */

:root {
  /* Superficies — grises azulados profundos, no negro puro */
  --bg:            #0b0d12;
  --surface-1:     #12151c;
  --surface-2:     #171b24;
  --surface-3:     #1e232e;
  --border:        #262c38;
  --border-soft:   #1c2028;

  /* Texto */
  --text-primary:   #e8ecf3;
  --text-secondary: #9aa4b5;
  --text-tertiary:  #616b7d;

  /* Acento — índigo eléctrico (estructura, confianza) */
  --accent:        #5b6cff;
  --accent-hover:  #4a5aee;
  --accent-soft:   rgba(91, 108, 255, 0.12);

  /* Semánticos */
  --green:      #34d399;
  --amber:      #fbbf24;
  --amber-text: #f59e0b;
  --red:        #f87171;
  --blue:       #60a5fa;
  --violet:     #a78bfa;
  --teal:       #2dd4bf;

  /* Badges */
  --badge-blue-bg:   rgba(96,165,250,.14);
  --badge-green-bg:  rgba(52,211,153,.14);
  --badge-amber-bg:  rgba(251,191,36,.14);
  --badge-red-bg:    rgba(248,113,113,.14);
  --badge-violet-bg: rgba(167,139,250,.14);
  --badge-teal-bg:   rgba(45,212,191,.14);
  --badge-gray-bg:   rgba(154,164,181,.12);

  --radius:    10px;
  --radius-sm: 7px;
  --shadow:    0 4px 24px rgba(0,0,0,.35);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   AUTENTICACIÓN — pantalla centrada
   ============================================================ */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(91,108,255,.08), transparent),
    var(--bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  box-shadow: var(--shadow);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: 1.75rem;
}
.auth-brand-mark {
  width: 2.25rem; height: 2.25rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem; color: #fff;
}
.auth-brand-name { font-weight: 700; letter-spacing: .02em; font-size: 1.05rem; }
.auth-brand-sub  { font-size: .7rem; color: var(--text-tertiary); letter-spacing: .18em; text-transform: uppercase; }

.auth-title { font-size: 1.35rem; font-weight: 700; margin-bottom: .375rem; }
.auth-subtitle { font-size: .875rem; color: var(--text-secondary); margin-bottom: 1.5rem; }

.form-group { margin-bottom: 1rem; }
.form-label {
  display: block; font-size: .8125rem; font-weight: 500;
  color: var(--text-secondary); margin-bottom: .375rem;
}
.form-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .625rem .75rem;
  color: var(--text-primary);
  font-size: .9375rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Input especial para el PIN de 6 dígitos */
.pin-input {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .75rem;
  padding: .75rem;
  font-variant-numeric: tabular-nums;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  border: none; cursor: pointer;
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  padding: .625rem 1rem;
  border-radius: var(--radius-sm);
  transition: background .15s, opacity .15s;
  text-decoration: none;
}
.btn-primary { background: var(--accent); color: #fff; width: 100%; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-block { width: 100%; }

.auth-foot {
  margin-top: 1.25rem;
  font-size: .8125rem;
  color: var(--text-tertiary);
  text-align: center;
}
.link { color: var(--accent); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ============================================================
   FLASH messages
   ============================================================ */
.flash {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem .875rem;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  margin-bottom: 1rem;
}
.flash-success { background: var(--badge-green-bg); color: var(--green); }
.flash-error   { background: var(--badge-red-bg);   color: var(--red); }
.flash-warning { background: var(--badge-amber-bg); color: var(--amber-text); }
.flash-info    { background: var(--badge-blue-bg);  color: var(--blue); }

/* ============================================================
   DASHBOARD placeholder (se expande después)
   ============================================================ */
.shell { display: flex; min-height: 100vh; }
.main  { flex: 1; padding: 2rem; }
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.page-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }

/* ============================================================
   FICHA / DETALLE — badges, timeline, tarjetas de acción
   ============================================================ */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.btn-back { color:var(--text-secondary); text-decoration:none; font-size:.8125rem; display:inline-flex; align-items:center; gap:.375rem; margin-bottom:.5rem; }
.btn-back:hover { color:var(--text-primary); }

.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; }
.badge-blue{background:var(--badge-blue-bg);color:var(--blue);}
.badge-green{background:var(--badge-green-bg);color:var(--green);}
.badge-amber{background:var(--badge-amber-bg);color:var(--amber-text);}
.badge-red{background:var(--badge-red-bg);color:var(--red);}
.badge-violet{background:var(--badge-violet-bg);color:var(--violet);}
.badge-teal{background:var(--badge-teal-bg);color:var(--teal);}
.badge-gray{background:var(--badge-gray-bg);color:var(--text-secondary);}

.btn-secondary{background:var(--surface-3);color:var(--text-primary);}
.btn-secondary:hover{background:var(--border);}
.btn-danger{background:var(--red);color:#fff;}
.btn-ghost{background:transparent;color:var(--text-secondary);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-sm{padding:.4rem .75rem;font-size:.8125rem;}
.btn-auto{width:auto;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start;}
.card-header{display:flex;align-items:center;gap:.5rem;padding-bottom:.875rem;margin-bottom:.875rem;border-bottom:1px solid var(--border-soft);}
.card-title{font-weight:600;font-size:.9375rem;}
.detail-row{display:flex;justify-content:space-between;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--border-soft);font-size:.875rem;}
.detail-row:last-child{border-bottom:none;}
.detail-row dt{color:var(--text-tertiary);}
.detail-row dd{color:var(--text-primary);text-align:right;}

.select-input{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .625rem;color:var(--text-primary);font-family:inherit;font-size:.875rem;}

/* Timeline */
.timeline{position:relative;padding-left:1.5rem;}
.timeline-line{position:absolute;left:.4375rem;top:.5rem;bottom:.5rem;width:2px;background:var(--border);}
.timeline-item{position:relative;padding-bottom:1.25rem;}
.timeline-dot{position:absolute;left:-1.5rem;top:.125rem;width:1rem;height:1rem;border-radius:50%;background:var(--surface-1);display:flex;align-items:center;justify-content:center;font-size:.6rem;}

/* ============================================================
   SHELL / SIDEBAR
   ============================================================ */
.shell{display:flex;min-height:100vh;}
.sidebar{width:230px;background:var(--surface-1);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1.25rem;flex-shrink:0;}
.sidebar-brand{display:flex;align-items:center;gap:.625rem;margin-bottom:2rem;}
.sidebar-nav{display:flex;flex-direction:column;gap:.25rem;flex:1;}
.nav-item{display:flex;align-items:center;gap:.625rem;padding:.55rem .7rem;border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-size:.875rem;font-weight:500;transition:background .12s,color .12s;}
.nav-item:hover{background:var(--surface-2);color:var(--text-primary);}
.nav-active{background:var(--accent-soft);color:var(--accent);}
.nav-icon{font-size:.9rem;width:1rem;text-align:center;}
.sidebar-foot{border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem;}
.sidebar-user{margin-bottom:.5rem;}
.sidebar-user-name{font-size:.8125rem;font-weight:600;color:var(--text-primary);}
.sidebar-user-rol{font-size:.7rem;color:var(--text-tertiary);}
.main{flex:1;padding:2rem;max-width:1100px;}