/* ===== Davivienda Brand Base ===== */
:root{
  /* Paleta inspirada en Davivienda */
  --dav-red: #E21B23;       /* rojo principal */
  --dav-red-dark: #B81319;  /* rojo oscuro (hover) */
  --dav-white: #FFFFFF;
  --dav-bg: #0A0B0F;        /* fondo oscuro sobrio */
  --dav-card: #121318;      /* tarjetas/paneles */
  --dav-muted: #A8B0BC;     /* texto secundario */
  --dav-text: #F2F4F7;      /* texto principal */
  --dav-line: rgba(255,255,255,.10);
  --dav-green: #22C55E;
  --dav-yellow: #F59E0B;
  --dav-blue-soft: #FFB3B6; /* rojo claro para badges/info */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(226,27,35,0.08) 0%, rgba(226,27,35,0.00) 45%),
    var(--dav-bg);
  color: var(--dav-text);
}

/* Contenedores globales */
.container, .wrap{
  width:100%;
  margin:0 auto;
  padding:24px;
  max-width:1200px;
}

/* Tarjetas / paneles */
.card{
  background: rgba(18,19,24,.92);
  border: 1px solid var(--dav-line);
  border-radius: 18px;
  padding: 16px;
}

.logo img {
    max-width: 200px;
    width: 100%;
}
.logo {
    background-color: var(--dav-red);
    width: 100%;
    padding: 16px 20px;
}

/* Títulos y texto */
h1{font-size:1.7rem; margin:8px 0 12px}
h2{font-size:1.4rem; margin:8px 0 10px}
h3{font-size:1.2rem; margin:0 0 6px}
.sub{color:var(--dav-muted)}

/* Inputs y selects */
input, select, textarea{
  background:#0B1020;
  color:var(--dav-text);
  border:1px solid var(--dav-line);
  border-radius:10px;
  padding:10px;
  outline:none;
}
label{font-size:.9rem; color:var(--dav-muted); display:block; margin-bottom:6px}

/* Botones */
.btn{
  background: var(--dav-red);
  color: var(--dav-white);
  border:0;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  font-weight:700;
  text-decoration:none;
  display:inline-block;
}
.btn:hover{ background: var(--dav-red-dark) }
.btn.secondary{
  background: transparent;
  border:1px solid var(--dav-line);
  color: var(--dav-text);
}

/* Badges */
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:800;
}
.b-green{ background:rgba(34,197,94,.15); color:#34D399 }
.b-yellow{ background:rgba(245,158,11,.15); color:#FBBF24 }
.b-red{ background:rgba(239,68,68,.15); color:#F87171 }
.b-blue{ background:rgba(226,27,35,.15); color:var(--dav-blue-soft) }

/* Tablas */
table{ width:100%; border-collapse:collapse }
th, td{ padding:10px 8px; border-bottom:1px solid var(--dav-line); text-align:left }
th{ color:#CBD5E1; font-weight:600 }
tr:hover td{ background:rgba(255,255,255,.02) }

/* Utilidades grid */
.grid{ display:grid; gap:16px }
.g-2{ grid-template-columns:repeat(2,1fr) }
.g-3{ grid-template-columns:repeat(3,1fr) }
.row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:space-between }

@media (max-width:900px){
  .g-2, .g-3{ grid-template-columns:1fr }
  .container, .wrap{ padding:16px }
}