/* public/assets/app.css */
/* Tema oscuro profesional con Inter + acentos azules y emoji coloridos en el menú */
:root{
  --bg:#0b1220; --bg-alt:#0f172a; --panel:#0f1628; --card:#111a2e;
  --border:#1f2a44;
  --text:#e6eefc;            /* texto principal */
  --text-strong:#f2f6ff;     /* títulos */
  --text-soft:#cfd7ed;       /* labels */
  --muted:#90a0bd;           /* texto secundario */
  --accent:#3b82f6; --accent-soft:#93c5fd;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  background:
    radial-gradient(800px 600px at 80% -10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 700px at -10% 90%, rgba(147,197,253,.2), transparent 60%),
    var(--bg);
  color:var(--text);
}

/* ---------- Tipografía global ---------- */
h1,h2,h3,h4,h5,h6{ color:var(--text-strong); }
.small, small, .text-secondary{ color:var(--muted) !important; }

/* ---------- Sidebar ---------- */
.sidebar{
  width:268px;
  background:linear-gradient(180deg, var(--panel), #0c1426 60%, #0a1222);
  border-right:1px solid var(--border);
  min-height:100vh;
  position:fixed; top:0; left:0;
  padding:14px 14px 24px;
}
.brand-logo{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:10px 0;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
}
.brand-logo img{ height:44px; width:auto; object-fit:contain; }

.nav-section{
  margin:18px 10px 8px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
}

.sidebar-nav{ margin:2px 0 10px; }
.sidebar-nav .nav-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin:4px 8px;
  color:var(--muted);
  border-radius:12px;
  border:1px solid transparent;
  transition:all .15s ease;
  text-decoration:none;
}
.sidebar-nav .nav-link:hover{
  color:#fff;
  background:rgba(147,197,253,.08);
  border-color:rgba(147,197,253,.15);
}
.sidebar-nav .nav-link.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(59,130,246,.20), rgba(59,130,246,.10));
  border-color:rgba(59,130,246,.35);
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.15);
}
.sidebar-nav .nav-link span:last-child{ white-space:nowrap; }

/* Emoji del menú (coloridos y nítidos) */
.nav-emoji{
  display:inline-grid; place-items:center;
  width:24px; height:24px;
  font-size:18px; line-height:1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* ---------- Content ---------- */
.content{ margin-left:268px; padding:0; }

/* ---------- Header superior ---------- */
.app-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px;
  background:rgba(15,23,42,.65);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.title-group h1{
  font-size:20px; font-weight:700; margin:0; letter-spacing:.3px;
}
.title-group .sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.user-group{ display:flex; align-items:center; gap:10px; }
.user-group .btn{ height:34px; padding:4px 10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; color:#dbe7ff;
}
.chip .dot{ width:8px; height:8px; border-radius:50%; background:#22c55e; display:inline-block; }

/* ---------- Breadcrumb ---------- */
.app-breadcrumb .breadcrumb{ --bs-breadcrumb-divider:'›'; }
.app-breadcrumb .breadcrumb-item a{
  color:var(--accent-soft);
  text-decoration:none;
}
.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color:var(--muted); opacity:.6;
}
.app-breadcrumb .breadcrumb-item.active{ color:#fff; }

/* ---------- Contenedor de páginas ---------- */
.container-fluid{ padding:20px 22px 28px; }

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.card .text-secondary{ color:var(--muted) !important; }

/* ---------- Formularios ---------- */
.form-label, label{ color:var(--text-soft); font-weight:600; }
.form-text{ color:var(--muted) !important; opacity:1; }
.form-control,.form-select{
  background:#0b1220; color:#e2e8f0; border-color:var(--border);
}
.form-control:focus,.form-select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 .25rem rgba(59,130,246,.15);
}
::placeholder{ color:#9fb0cf; opacity:1; }
input[disabled], select[disabled], textarea[disabled]{
  color:#97a7c7 !important; background:#0a1120 !important;
}

/* ---------- Tablas (oscuras y consistentes) ---------- */
.table{
  --bs-table-color: var(--text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(255,255,255,.03);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(147,197,253,.08);
  --bs-table-hover-color: var(--text);
  color: var(--text);
  background-color: transparent !important;
}
.table thead th{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#dfe7ff;
  border-bottom:1px solid var(--border);
}
.table td, .table th{ border-color: var(--border) !important; }
.table-striped>tbody>tr:nth-of-type(odd){
  background-color: var(--bs-table-striped-bg) !important;
}
.table-hover>tbody>tr:hover{
  background-color: var(--bs-table-hover-bg) !important;
}

/* ---------- Badges ---------- */
.badge-soft{
  background:rgba(147,197,253,.10);
  color:var(--accent-soft);
  border:1px solid rgba(147,197,253,.25);
}

/* ---------- Botones ---------- */
.btn-primary{ background:var(--accent); border-color:var(--accent); }
.btn-outline-light{ color:#e6eefc; border-color:var(--border); }
.btn-outline-light:hover{ background:rgba(255,255,255,.06); }

/* ---------- Modales ---------- */
.modal-content{
  background:linear-gradient(180deg,#0f172a,#0c1324);
  border:1px solid var(--border);
}
.modal-header .modal-title{ color:var(--text-strong); }
.modal-body, .modal-footer{ color:var(--text); }

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:grid; place-items:center;
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(1200px 800px at -10% 90%, rgba(147,197,253,.2), transparent 60%),
    var(--bg);
}
.login-card{
  width:100%; max-width:440px;
  background:rgba(17,24,39,.85);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(8px);
}

/* ---------- Utilitarios ---------- */
.text-secondary{ color:var(--muted) !important; }
hr{ border-color: var(--border); opacity:.6; }

/* ---------- Responsivo suave ---------- */
@media (max-width: 992px){
  .sidebar{ width: 240px; }
  .content{ margin-left: 240px; }
}
@media (max-width: 768px){
  .sidebar{ position: static; width: 100%; min-height:auto; border-right:0; border-bottom:1px solid var(--border); }
  .content{ margin-left:0; }
  .app-header{ position:static; }
}