/* Portal de los fondos de CGB. Sin fuentes ni recursos externos (la pagina
   de ingreso no carga nada de afuera: CSP 'self'). */
:root {
  --marino: #0E2A47;
  --marino-claro: #1B3D61;
  --tinta: #14202B;
  --tinta-suave: #4A5A6A;
  --papel: #FFFFFF;
  --niebla: #EEF2F6;
  --borde: #D5DDE6;
  /* Azul de CG, el mismo detalle que app-cgb.com (antes bronce #A8823C, hasta el 12/10/2026). */
  --acento: #1F6FB2;
  --acento-claro: #8CC0EC;
  --verde: #2F7D5B;
  --ambar: #B7791F;
  --rojo: #B3412E;
  --radio: 6px;
  --letra: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--letra); color: var(--tinta); background: var(--niebla); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

.marca { display: flex; align-items: center; gap: 12px; }
.marca-nombre { font-weight: 600; letter-spacing: .01em; }

/* ------------------------------------------------------------ ingreso */
.pagina-ingreso { background: var(--papel); }
.ingreso { display: grid; grid-template-columns: minmax(320px, 5fr) 7fr; min-height: 100vh; }
.ingreso-marca {
  background: var(--marino); color: #DCE5EE;
  padding: 48px clamp(28px, 5vw, 72px);
  display: flex; flex-direction: column;
}
.ingreso-marca .marca-nombre { color: var(--papel); font-size: 1.05rem; }
.ingreso-titulo {
  margin: auto 0 8px; color: var(--papel);
  font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em;
}
.ingreso-titulo::after {
  content: ""; display: block; width: 56px; height: 3px; margin-top: 18px; background: var(--acento-claro);
}
.ingreso-bajada { margin: 10px 0 28px; max-width: 34ch; }
.ingreso-fondos { list-style: none; margin: 0 0 auto; padding: 0; }
.ingreso-fondos li { padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .14); color: var(--papel); }
.ingreso-fondos li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }

.ingreso-formulario { display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.formulario { width: 100%; max-width: 380px; display: flex; flex-direction: column; }
.formulario h1 { margin: 0 0 24px; font-size: 1.75rem; font-weight: 600; letter-spacing: -0.01em; }
.formulario label { font-weight: 600; font-size: .95rem; margin: 14px 0 6px; }
.formulario input[type="text"], .formulario input[type="password"] {
  font: inherit; padding: 11px 12px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
}
.formulario input[type="text"]:focus, .formulario input[type="password"]:focus {
  border-color: var(--marino-claro); outline: 3px solid rgba(31, 111, 178, .35); outline-offset: 0;
}
.formulario .recordar {
  display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--tinta-suave);
  margin: 18px 0 22px; cursor: pointer;
}
.formulario .recordar input { margin: 4px 0 0; width: 16px; height: 16px; accent-color: var(--marino); }
.formulario button {
  font: inherit; font-weight: 600; padding: 12px 16px; border: 0; border-radius: var(--radio);
  background: var(--marino); color: var(--papel); cursor: pointer;
}
.formulario button:hover { background: var(--marino-claro); }
.error {
  margin: 0 0 6px; padding: 10px 12px; border-radius: var(--radio);
  background: #FBEDEA; color: #7A2B1E; border-left: 3px solid var(--rojo);
}
.nota { margin: 22px 0 0; font-size: .875rem; color: var(--tinta-suave); }
.volver-portal { margin: 14px 0 0; font-size: .875rem; }
.volver-portal a { color: var(--marino); font-weight: 600; text-underline-offset: 3px; }

/* ------------------------------------------------------------- inicio */
.barra { background: var(--marino); color: var(--papel); border-bottom: 3px solid var(--acento); }
.barra-interior {
  max-width: 1040px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.salir { display: flex; align-items: center; gap: 16px; margin: 0; }
.sesion { font-size: .9rem; color: #C9D5E1; }
.salir button {
  font: inherit; font-size: .9rem; padding: 7px 14px; border-radius: var(--radio); cursor: pointer;
  background: transparent; color: var(--papel); border: 1px solid rgba(255, 255, 255, .45); white-space: nowrap;
}
.salir button:hover { background: rgba(255, 255, 255, .08); }

.contenido { max-width: 1040px; margin: 0 auto; padding: 40px 24px 64px; }
.contenido h1 { margin: 0; font-size: 2rem; font-weight: 600; letter-spacing: -0.015em; }
.bajada { margin: 6px 0 28px; color: var(--tinta-suave); max-width: 70ch; }

.fondos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.fondo {
  background: var(--papel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 22px 22px 20px; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(14, 42, 71, .06), 0 10px 28px rgba(14, 42, 71, .09);
  transition: transform .15s ease, box-shadow .15s ease;
}
.fondo:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(14, 42, 71, .08), 0 16px 36px rgba(14, 42, 71, .14); }
.moneda {
  align-self: flex-start; font-size: .8rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  margin-bottom: 14px;
}
.moneda-usd { background: #E7EFE9; color: #23573F; }
.moneda-ars { background: #E8EEF6; color: var(--marino-claro); }
.fondo h2 { margin: 0; font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.gestora { margin: 4px 0 14px; color: var(--tinta-suave); }
.estado { margin: 0 0 22px; display: flex; align-items: baseline; gap: 8px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo); flex: none; transform: translateY(-1px); }
.estado-ok .punto { background: var(--verde); }
.estado-aviso .punto { background: var(--ambar); }

.fondo-acciones { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.fondo-acciones a { text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: var(--radio); }
.fondo-acciones a.accion-principal {
  display: block; text-align: center; padding: 11px 16px; background: var(--marino); color: var(--papel);
}
.fondo-acciones a.accion-principal:hover { background: var(--marino-claro); }
.acciones-secundarias { display: flex; flex-wrap: wrap; gap: 8px; }
.acciones-secundarias a.accion {
  flex: 1 1 auto; text-align: center; padding: 8px 12px; border: 1px solid var(--borde); color: var(--marino);
  background: var(--papel);
}
.acciones-secundarias a.accion:hover { border-color: var(--marino-claro); }

/* ------------------------------------------------------------ celular */
@media (max-width: 980px) {
  .fondos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fondos { grid-template-columns: 1fr; }
  .ingreso { grid-template-columns: 1fr; }
  .ingreso-marca { padding: 28px 24px; }
  .ingreso-titulo { margin-top: 28px; font-size: 2.4rem; }
  .ingreso-fondos { display: none; }
  .ingreso-bajada { margin-bottom: 0; }
  .sesion { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .fondo:hover { transform: none; }
}