/* ===== Tokens (fallback; los sobrescribe estilo_portal desde BD) ===== */
:root {
  --color-fondo: #f0f4f8;
  --color-contenedor: #ffffff;
  --color-primario: #0066cc;
  --color-primario-oscuro: #004a99;
  --color-texto: #1c2733;
  --color-texto-muted: #66798c;
  --color-borde: #d5dee8;
  --color-etiqueta: #e7f1ff;
  --color-etiqueta-texto: #004a99;
  --color-enlace: #0066cc;
  --color-sobre-primario: #ffffff;
  --alerta-exito-fondo: #e7f6ec;
  --alerta-exito-texto: #1d6b34;
  --alerta-aviso-fondo: #fff5e6;
  --alerta-aviso-texto: #8a5b00;
  --alerta-error-fondo: #fdecea;
  --alerta-error-texto: #b3261e;
  --fuente-cuerpo: Tahoma, "Segoe UI", Arial, sans-serif;
  --fuente-titulos: Tahoma, "Segoe UI", Arial, sans-serif;
  --tamano-base: 14px;
  --tamano-titulo: 22px;
  --tamano-seccion: 20px;
  --tamano-tarjeta: 16px;
  --tamano-menu: 13px;
  --tamano-pequeno: 12px;
  --interlineado: 1.5;
  --ancho-contenedor: 1000px;
  --radio: 6px;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.12);
  --alto-banner: 70px;
  --ancho-columna: 220px;
  --espaciado: 14px;
  --hover-sobre-primario: rgba(255, 255, 255, 0.15);
  --mv-fondo: #ffffff;
  --mv-borde: #d5dee8;
  --mv-titulo-fondo: #0066cc;
  --mv-titulo-texto: #ffffff;
  --mv-texto: #1c2733;
  --mv-texto-hover: #004a99;
  --mv-fondo-hover: #e7f1ff;
  --mv-activo-fondo: #0066cc;
  --mv-activo-texto: #ffffff;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
body.portal-body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: var(--tamano-base);
  background: var(--color-fondo);
  color: var(--color-texto);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); }
a { color: var(--color-enlace); }
img { max-width: 100%; }

.portal-contenedor {
  width: 100%;
  max-width: var(--ancho-contenedor);
  margin: 0 auto;
  background: var(--color-contenedor);
  box-shadow: var(--sombra);
}

/* ===== Cabecera ===== */
.portal-cabecera { background: var(--color-primario); }
.portal-banner-top { display: block; width: 100%; height: auto; }
.portal-banner {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: calc(var(--espaciado) * 0.6);
}
.portal-banner-img { height: var(--alto-banner); object-fit: contain; }

.portal-menu-superior {
  background: var(--color-primario-oscuro);
}
.portal-menu-cliente {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 6px 12px;
  background: var(--color-primario-oscuro);
  font-size: var(--tamano-menu);
}
.portal-menu-cliente a {
  color: var(--color-sobre-primario);
  text-decoration: none;
}
.portal-menu-cliente a:hover { text-decoration: underline; }
.portal-menu-cliente-nombre { color: var(--color-sobre-primario); font-weight: bold; }
.portal-menu-cliente-form { margin: 0; }
.portal-menu-cliente-boton {
  background: transparent;
  border: none;
  color: var(--color-sobre-primario);
  cursor: pointer;
  font-size: var(--tamano-menu);
  padding: 0;
  text-decoration: underline;
}
.portal-texto-encabezado {
  padding: var(--espaciado) 18px;
  border-bottom: 1px solid var(--color-borde);
  background: var(--color-contenedor);
  color: var(--color-texto);
  line-height: var(--interlineado);
}
.portal-comentario-columna {
  padding: var(--espaciado);
  font-size: var(--tamano-menu);
  color: var(--color-texto-muted);
  border-top: 1px solid var(--mv-borde);
  line-height: var(--interlineado);
}
.portal-texto-footer {
  padding: var(--espaciado) 18px;
  color: var(--color-sobre-primario);
  background: var(--color-primario-oscuro);
  font-size: var(--tamano-menu);
  text-align: center;
  line-height: var(--interlineado);
}
.portal-newsletter {
  background: var(--color-primario-oscuro);
  color: var(--color-sobre-primario);
  padding: var(--espaciado) 18px;
}
.portal-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.portal-newsletter-label { font-size: var(--tamano-menu); font-weight: bold; }
.portal-newsletter-input {
  padding: 8px 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: var(--tamano-menu);
  min-width: 220px;
  background: var(--color-contenedor);
  color: var(--color-texto);
}
.portal-newsletter-boton {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radio);
  background: var(--color-primario);
  color: var(--color-sobre-primario);
  cursor: pointer;
  font-size: var(--tamano-menu);
}
.portal-newsletter-boton:hover { opacity: 0.9; }
.portal-menu-superior ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.portal-menu-superior li { flex: 1 1 auto; }
.portal-menu-superior a {
  display: block;
  padding: 10px 12px;
  color: var(--color-sobre-primario);
  text-decoration: none;
  text-align: center;
  font-size: var(--tamano-menu);
}
.portal-menu-superior a:hover { background: var(--hover-sobre-primario); }

/* ===== Cuerpo ===== */
.portal-cuerpo { display: flex; }

/* ===== Columna (menú vertical) ===== */
.portal-columna {
  width: var(--ancho-columna);
  flex-shrink: 0;
  background: var(--mv-fondo);
  border-right: 1px solid var(--mv-borde);
}
.portal-menu-vertical > ul { list-style: none; margin: 0; padding: var(--espaciado) 8px; }
.portal-menu-vertical > ul > li + li { margin-top: 2px; }
.portal-menu-vertical a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radio);
  text-decoration: none;
  font-size: var(--tamano-menu);
  color: var(--mv-texto);
  transition: background 0.15s ease, color 0.15s ease;
}
.portal-menu-vertical a:hover { background: var(--mv-fondo-hover); color: var(--mv-texto-hover); }
.portal-menu-vertical a.activo { background: var(--mv-activo-fondo); color: var(--mv-activo-texto); font-weight: bold; }
.portal-menu-vertical-hijos { list-style: none; margin: 2px 0 4px; padding-left: 14px; }
.portal-menu-vertical-hijos a {
  font-size: var(--tamano-pequeno);
  padding: 6px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--radio) var(--radio) 0;
}
.portal-menu-vertical-hijos a:hover { border-left-color: var(--mv-texto-hover); }
.portal-menu-vertical-hijos a.activo { border-left-color: var(--mv-activo-fondo); }

/* ===== Principal ===== */
.portal-principal { flex: 1; padding: var(--espaciado) 20px; min-width: 0; }
.portal-seccion-titulo {
  font-size: var(--tamano-seccion);
  color: var(--color-primario-oscuro);
  border-bottom: 2px solid var(--color-primario);
  padding-bottom: 6px;
}

/* Tarjetas */
.portal-tarjeta {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espaciado) 16px;
  margin: var(--espaciado) 0;
  background: var(--color-contenedor);
}
body.portal-tarjetas-sombra .portal-tarjeta { border-color: transparent; box-shadow: var(--sombra); }
body.portal-tarjetas-plano .portal-tarjeta { border: none; background: transparent; }
.portal-tarjeta-cabecera { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.portal-tarjeta-titulo { margin: 0 0 6px; font-size: var(--tamano-tarjeta); }
.portal-tarjeta-titulo a { text-decoration: none; }
.portal-tarjeta-titulo a:hover { text-decoration: underline; }
.portal-tarjeta-intro { margin: 0; font-size: var(--tamano-menu); line-height: var(--interlineado); }

.portal-seccion-img {
  display: block;
  margin: 8px 0;
  max-height: 180px;
  object-fit: contain;
}

.portal-etiqueta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-etiqueta);
  color: var(--color-etiqueta-texto);
  font-size: var(--tamano-pequeno);
  white-space: nowrap;
}

/* ===== Detalle ===== */
.portal-detalle-titulo { color: var(--color-primario-oscuro); font-size: var(--tamano-titulo); }
.portal-detalle-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--tamano-pequeno); color: var(--color-texto-muted); margin-bottom: 8px; }
.portal-detalle-intro { font-size: var(--tamano-tarjeta); color: var(--color-texto-muted); }
.portal-detalle-cuerpo { line-height: var(--interlineado); }
.portal-detalle-volver { margin-top: 24px; }

/* ===== Filtros y formularios públicos ===== */
.portal-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: var(--espaciado) 0;
}
.portal-filtros-input {
  padding: 7px 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: var(--tamano-menu);
}
.portal-filtros-boton {
  padding: 7px 16px;
  border: none;
  border-radius: var(--radio);
  background: var(--color-primario);
  color: var(--color-sobre-primario);
  font-size: var(--tamano-menu);
  cursor: pointer;
}
.portal-filtros-boton:hover { background: var(--color-primario-oscuro); }
.portal-filtros-boton-enlace {
  padding: 7px 12px;
  font-size: var(--tamano-menu);
  text-decoration: none;
  color: var(--color-enlace);
}
.portal-tarjeta-fecha { margin: 6px 0 0; font-size: var(--tamano-pequeno); color: var(--color-texto-muted); }
.portal-detalle-fuente { font-size: var(--tamano-pequeno); color: var(--color-texto-muted); }

.portal-formulario { max-width: 620px; }
.portal-formulario-campo { margin: var(--espaciado) 0; }
.portal-formulario-label { display: block; margin-bottom: 4px; font-size: var(--tamano-menu); }
.portal-formulario-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: var(--tamano-base);
}
.portal-alerta {
  padding: 10px 14px;
  border-radius: var(--radio);
  margin: 10px 0;
  font-size: var(--tamano-menu);
}
.portal-alerta-success { background: var(--alerta-exito-fondo); color: var(--alerta-exito-texto); border: 1px solid var(--alerta-exito-fondo); }
.portal-alerta-warning { background: var(--alerta-aviso-fondo); color: var(--alerta-aviso-texto); border: 1px solid var(--alerta-aviso-fondo); }
.portal-alerta-danger { background: var(--alerta-error-fondo); color: var(--alerta-error-texto); border: 1px solid var(--alerta-error-fondo); }

/* ===== Pie ===== */
.portal-pie {
  border-top: 3px solid var(--color-primario);
  background: var(--color-primario-oscuro);
  color: var(--color-sobre-primario);
}
.portal-pie-datos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: var(--espaciado);
  background: var(--color-primario);
  font-size: var(--tamano-pequeno);
}
.portal-pie-actualizacion {
  font-size: var(--tamano-pequeno);
  opacity: 0.8;
  padding-bottom: var(--espaciado);
}

.portal-seccion-subtitulo { margin-top: 8px; }
.portal-tabla {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--espaciado);
  font-size: var(--tamano-base);
}
.portal-tabla th, .portal-tabla td {
  border: 1px solid var(--color-borde);
  padding: 6px 10px;
  text-align: left;
}
.portal-tabla th { background: var(--color-etiqueta); color: var(--color-texto); }
.portal-vacio {
  color: var(--color-texto);
  opacity: 0.75;
  padding: var(--espaciado) 0;
}