/* evalleserp/css/modern.css - capa visual moderna (no altera funcionalidad JS/API)
   - Diseñado para sobreescribir la estética actual sin romper el DOM existente.
   - En producción: mantener custom.css para reglas de impresión y utilidades.
*/

:root{
  --bg: #f8fafc;         /* slate-50 */
  --surface: #ffffff;
  --surface-2: #f1f5f9;  /* slate-100 */
  --border: #e2e8f0;     /* slate-200 */
  --text: #0f172a;       /* slate-900 */
  --muted: #64748b;      /* slate-500 */
  --brand: #4f46e5;      /* indigo-600 */
  --brand-2: #0ea5e9;    /* sky-500 */
  --success: #059669;    /* emerald-600 */
  --danger: #e11d48;     /* rose-600 */
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --radius: 16px;
}

/* Base */
@media screen {
  body{
    background: radial-gradient(1200px 600px at 30% 10%, rgba(79,70,229,.10), transparent 55%),
                radial-gradient(1000px 500px at 90% 0%, rgba(14,165,233,.10), transparent 55%),
                var(--bg) !important;
    color: var(--text) !important;
  }

  /* Sidebar */
  #sidebar{
    background: rgba(255,255,255,.86) !important;
    backdrop-filter: blur(10px);
    border-right: 1px solid var(--border) !important;
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
  }
  #sidebar *{ text-shadow: none !important; }

  /* Logo header area in sidebar */
  #sidebar > div:first-child{
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Nav links: convert to clean SaaS style */
  .nav-link{
    color: var(--text) !important;
    border-left: 3px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .nav-link:hover{
    background: rgba(79,70,229,.08) !important;
    border-left-color: rgba(79,70,229,.35) !important;
  }
  .nav-link.active{
    background: rgba(79,70,229,.12) !important;
    border-left-color: var(--brand) !important;
    color: var(--text) !important;
  }
  .nav-link .nav-icon{
    color: var(--muted) !important;
  }
  .nav-link.active .nav-icon,
  .nav-link:hover .nav-icon{
    color: var(--brand) !important;
  }

  /* Top header (sticky) */
  header.sticky, .app-topbar{
    background: rgba(255,255,255,.75) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
  }

  /* Cards */
  .card, .panel, .soft-card{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
  }

  /* Forms */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"],
  select, textarea{
    background: rgba(255,255,255,.92) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  input:focus, select:focus, textarea:focus{
    outline: none !important;
    border-color: rgba(79,70,229,.65) !important;
    box-shadow: 0 0 0 4px rgba(79,70,229,.15) !important;
  }

  /* Primary buttons: normalize */
  .btn-primary, button.bg-indigo-600, button.bg-emerald-600{
    border-radius: 14px !important;
    box-shadow: 0 10px 20px rgba(79,70,229,.18) !important;
  }

  /* Tables */
  table{
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  thead th{
    background: rgba(241,245,249,.85) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  tbody td{
    border-bottom: 1px solid rgba(226,232,240,.85) !important;
  }
  tbody tr:hover td{
    background: rgba(14,165,233,.05) !important;
  }

  /* Modals */
  .modal-card{
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: calc(var(--radius) + 6px) !important;
    box-shadow: var(--shadow) !important;
  }
}