/* ===== Sistema de diseño ByMilo — paleta cálida unificada =====
   Se carga DESPUÉS del <style> de cada página. Solo estética. */
:root{
  --bg:#ece3d2;          /* fondo general: arena cálida */
  --panel:#fbf6ec;       /* tarjetas: crema */
  --panel2:#f1e9d8;      /* encabezados de tabla / secundario */
  --line:#e3d9c5;        /* bordes finos cálidos */
  --txt:#2f2a23;         /* texto: marrón muy oscuro */
  --muted:#8c8270;       /* texto atenuado cálido */
  --accent:#c2703a;      /* acento terracota */
  --accent2:#a1572a;     /* acento fuerte */
  --navy:#2b2620;        /* oscuro cálido (barras/encabezados) */
  --navy2:#39322a;       /* oscuro cálido 2 (degradés) */
  --green:#4d7c0f;
  --red:#c0392b;
  --yellow:#b45309;
  --shadow:0 1px 2px rgba(60,45,25,.05),0 6px 18px rgba(60,45,25,.05);
}
body{background:var(--bg);color:var(--txt)}

/* ---------- Íconos ---------- */
.ic{display:inline-flex;align-items:center;justify-content:center;width:20px}
.ic .ti{font-size:17px;line-height:1}
.mod-switch .m .ti,.btn .ti{font-size:16px;vertical-align:-2px;margin-right:5px}

/* ---------- Barra lateral (esqueleto + personal) ---------- */
.side,.nav{background:linear-gradient(180deg,#2b2620,#221e18)!important}
.side{color:#d8cebc}
.side .brand .logo,.brand .logo{color:#fdf9f0}
.side .brand .sub,.brand .sub{color:#a2967f!important}

.grp-title,.nav .sec{font-size:10px;text-transform:uppercase;letter-spacing:.9px;color:#a2967f!important;padding:16px 12px 6px;font-weight:600}
.item,.nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:#d8cebc!important;text-decoration:none;font-size:13.5px;margin-bottom:2px;transition:background .12s,color .12s}
.item:hover,.nav a:hover{background:rgba(255,255,255,.06)!important;color:#fdf9f0!important}
.item.active,.nav a.active{background:var(--accent)!important;color:#fff!important;box-shadow:0 4px 12px rgba(150,80,35,.35)!important;font-weight:600}
.agencia-box{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.10)!important}
.side-foot{border-top:1px solid rgba(255,255,255,.10)!important;color:#a99e8a!important}
.side-foot .btn.ghost{border-color:rgba(255,255,255,.18)!important;color:#d8cebc!important}

/* ---------- Títulos principales (más grandes y destacados) ---------- */
.card h3,.topbar h2,.topbar .ctx{color:var(--navy);letter-spacing:.2px}
.card h3{font-size:21px;font-weight:800;margin-bottom:15px;display:flex;align-items:center;gap:10px}
.card h3::before{content:"";width:5px;height:22px;background:var(--accent);border-radius:3px;flex:none}
.topbar h2,.topbar .ctx{font-size:20px;font-weight:800}
h1{letter-spacing:.2px;font-weight:800;font-size:26px}

/* ---------- Ancho del contenido: casi todo el ancho, margen fino ---------- */
.content{max-width:none!important;margin:0!important;padding-left:36px!important;padding-right:36px!important}

/* ---------- Tarjetas / paneles ---------- */
.card,.kpi,.login-card{box-shadow:var(--shadow)}
.kpi{border-top:3px solid var(--accent)}

/* ---------- Solapas (Finanzas): activa con borde terracota ---------- */
.tabs a.active{border-top:3px solid var(--accent);padding-top:6px}

/* ---------- Tablas ---------- */
table th{background:var(--panel2)}
table tbody tr:nth-child(even){background:rgba(120,85,40,.045)}

/* ---------- Inputs ---------- */
input,select,textarea,td input,input.txt{background:#fffdf8}

/* ---------- Móvil ---------- */
@media(max-width:760px){
  .content{padding-left:14px!important;padding-right:14px!important}
  .card h3{font-size:18px}
  h1{font-size:22px}
  .kpis{grid-template-columns:1fr 1fr!important}
  .tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .card{overflow-x:auto}
  div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  table{font-size:12.5px}
  input,select{font-size:16px} /* evita el zoom automático de iOS */
}