/* ============================================================
   portal.css
   Estilos exclusivos del área privada del agremiado:
   - Pantalla de login centrada
   - Dashboard con sidebar lateral
   - Credencial digital imprimible
   - Simulador de préstamos
   - Rastreador de trámites
   - Buzón y votaciones
   Cargar después de variables/base/components/layout.
   ============================================================ */

/* ============================================================
   1. PANTALLA DE LOGIN
   ============================================================ */

.login {
  min-height: calc(100vh - var(--altura-alert) - var(--altura-nav));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-4);
  background-color: var(--color-gris-claro);
}

.login__caja {
  width: 100%;
  max-width: 440px;
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}

.login__cabecera {
  padding: var(--sp-7) var(--sp-5) var(--sp-4);
  text-align: center;
}

.login__logo {
  width: 80px;
  height: 80px;
  margin-inline: auto;
  margin-bottom: var(--sp-4);
}

.login__titulo {
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-2) 0;
}

.login__subtitulo {
  color: var(--color-texto-secundario);
  font-size: var(--fs-sm);
  margin: 0;
}

.login__form {
  padding: 0 var(--sp-5) var(--sp-5);
}

.login__pie {
  background-color: var(--color-superficie-alt);
  border-top: 1px solid var(--color-borde);
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-texto-secundario);
}

/* Mensaje de error de credenciales — el JS lo activa con .visible */
.login__mensaje-error {
  display: none;
  background-color: var(--color-error-suave);
  color: var(--color-error);
  border-radius: var(--radio-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--sp-4);
}

.login__mensaje-error.visible {
  display: block;
}

/* ============================================================
   2. LAYOUT DEL DASHBOARD
   Sidebar lateral con navegación + área principal de contenido.
   ============================================================ */

.portal-layout {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  max-width: var(--ancho-maximo);
  margin-inline: auto;
  padding: var(--sp-5) var(--sp-4);
}

@media (min-width: 768px) {
  .portal-layout {
    padding: var(--sp-6);
  }
}

@media (min-width: 1024px) {
  .portal-layout {
    grid-template-columns: 260px 1fr;
    gap: var(--sp-6);
  }
}

/* Sidebar del portal (no confundir con la sidebar pública de transparencia) */
.portal-sidebar {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-4);
  box-shadow: var(--sombra-sm);
}

@media (min-width: 1024px) {
  .portal-sidebar {
    position: sticky;
    top: calc(var(--altura-nav) + var(--altura-alert) + var(--sp-4));
    align-self: start;
  }
}

.portal-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.portal-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radio-sm);
  color: var(--color-texto-secundario);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: background-color var(--transicion), color var(--transicion);
}

.portal-sidebar__link:hover {
  background-color: var(--color-azul-claro);
  color: var(--color-azul-principal);
}

.portal-sidebar__link[aria-current='page'] {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
}

.portal-sidebar__separador {
  border: none;
  border-top: 1px solid var(--color-borde);
  margin: var(--sp-3) 0;
}

.portal-sidebar__link--peligro {
  color: var(--color-error);
}

.portal-sidebar__link--peligro:hover {
  background-color: var(--color-error-suave);
  color: var(--color-error);
}

/* Tarjeta promocional al pie del sidebar */
.portal-sidebar__promo {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
  border-radius: var(--radio);
  padding: var(--sp-4);
  margin-top: var(--sp-4);
}

.portal-sidebar__promo h4 {
  color: var(--color-blanco);
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-2) 0;
}

.portal-sidebar__promo p {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 var(--sp-3) 0;
}

/* Área principal del dashboard */
.portal-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  min-width: 0; /* permite que los hijos con grid no se desborden */
}

/* ============================================================
   3. ENCABEZADO DE BIENVENIDA
   Foto + nombre + estatus, en la cima del dashboard.
   ============================================================ */

.bienvenida {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-5);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
}

@media (min-width: 480px) {
  .bienvenida {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.bienvenida__perfil {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.bienvenida__nombre {
  font-size: var(--fs-2xl);
  margin: 0;
}

.bienvenida__fecha {
  font-size: var(--fs-sm);
  color: var(--color-texto-secundario);
  margin: 0;
}

.bienvenida__estatus {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background-color: var(--color-exito-suave);
  color: var(--color-exito);
  border-radius: var(--radio-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bienvenida__estatus::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: var(--radio-pill);
  background-color: var(--color-exito);
}

/* ============================================================
   4. TARJETAS DE ACCIÓN RÁPIDA
   Bento de 4 botones grandes (Nuevo trámite, Talón, etc.)
   ============================================================ */

.acciones-rapidas {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr 1fr;
}

@media (min-width: 768px) {
  .acciones-rapidas {
    grid-template-columns: repeat(4, 1fr);
  }
}

.accion-rapida {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-4);
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-texto);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: all var(--transicion);
}

.accion-rapida:hover {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
  border-color: var(--color-azul-principal);
  transform: translateY(-2px);
  box-shadow: var(--sombra);
}

.accion-rapida__icono {
  width: 48px;
  height: 48px;
  border-radius: var(--radio-pill);
  background-color: var(--color-azul-claro);
  color: var(--color-azul-principal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: background-color var(--transicion), color var(--transicion);
}

.accion-rapida:hover .accion-rapida__icono {
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--color-blanco);
}

/* ============================================================
   5. BLOQUE DE ACTIVIDAD RECIENTE
   Lista de eventos/trámites con icono de estado.
   ============================================================ */

.bloque {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
  overflow: hidden;
}

.bloque__cabecera {
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
  padding: var(--sp-3) var(--sp-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bloque__cabecera h3 {
  color: var(--color-blanco);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.bloque__cuerpo {
  padding: 0;
}

.actividad {
  list-style: none;
  margin: 0;
  padding: 0;
}

.actividad__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--color-borde);
}

.actividad__item:last-child {
  border-bottom: none;
}

.actividad__item:nth-child(odd) {
  background-color: var(--color-superficie-alt);
}

.actividad__icono {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radio-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.actividad__icono--exito {
  background-color: var(--color-exito-suave);
  color: var(--color-exito);
}

.actividad__icono--info {
  background-color: var(--color-info-suave);
  color: var(--color-info);
}

.actividad__icono--aviso {
  background-color: var(--color-aviso-suave);
  color: var(--color-aviso);
}

.actividad__cuerpo {
  flex-grow: 1;
  min-width: 0;
}

.actividad__titulo {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-1) 0;
}

.actividad__meta {
  font-size: var(--fs-xs);
  color: var(--color-texto-secundario);
  margin: 0;
}

/* ============================================================
   6. RESUMEN DE ESTATUS
   Tarjeta lateral con datos del agremiado (años, sueldo, préstamos).
   ============================================================ */

.resumen-estatus {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-5);
  box-shadow: var(--sombra-sm);
}

.resumen-estatus__titulo {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--sp-4) 0;
}

.resumen-estatus__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.resumen-estatus__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--color-borde);
}

.resumen-estatus__item:last-child {
  border-bottom: none;
}

.resumen-estatus__etiqueta {
  font-size: var(--fs-xs);
  color: var(--color-texto-secundario);
}

.resumen-estatus__valor {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-azul-principal);
}

/* ============================================================
   7. CREDENCIAL DIGITAL
   Tarjeta tipo carnet imprimible. Se rellena dinámicamente desde
   sessionStorage. Soporta @media print con dimensiones de tarjeta.
   ============================================================ */

.credencial {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  background: linear-gradient(
    135deg,
    var(--color-azul-principal) 0%,
    var(--color-azul-medio) 100%
  );
  color: var(--color-blanco);
  border-radius: var(--radio-lg);
  padding: var(--sp-5);
  box-shadow: var(--sombra-lg);
  position: relative;
  overflow: hidden;
}

/* Decoración: círculo dorado en la esquina superior derecha */
.credencial::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background-color: var(--color-dorado);
  border-radius: var(--radio-pill);
  opacity: 0.18;
}

.credencial__cabecera {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  position: relative;
  z-index: 1;
}

.credencial__logo {
  width: 48px;
  height: 48px;
  background-color: var(--color-blanco);
  border-radius: var(--radio-sm);
  padding: var(--sp-1);
}

.credencial__institucion {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-dorado);
  margin: 0;
}

.credencial__sindicato {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-blanco);
  margin: 0;
  line-height: 1.2;
}

.credencial__cuerpo {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: var(--sp-4);
  align-items: center;
  position: relative;
  z-index: 1;
}

.credencial__nombre {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-blanco);
  margin: 0 0 var(--sp-2) 0;
  text-wrap: balance;
}

.credencial__campo {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--sp-1);
}

.credencial__valor {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-blanco);
  margin-bottom: var(--sp-3);
}

.credencial__qr {
  background-color: var(--color-blanco);
  padding: var(--sp-2);
  border-radius: var(--radio-sm);
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.credencial__qr img,
.credencial__qr svg {
  width: 100%;
  height: 100%;
}

.credencial__pie {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Acciones de la credencial (descargar, compartir) */
.credencial-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Estilos exclusivos al imprimir la credencial */
@media print {
  /* Ocultar todo excepto la credencial */
  body * {
    visibility: hidden;
  }
  .credencial,
  .credencial * {
    visibility: visible;
  }
  .credencial {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: none;
    /* Tamaño tarjeta ID-1 (85.6 × 54 mm) ampliado x2 para legibilidad */
    width: 171mm;
    max-width: 171mm;
  }
}

/* ============================================================
   8. SIMULADOR DE PRÉSTAMOS
   Slider de monto, plazo, tasa fija, resultados en vivo.
   ============================================================ */

.simulador {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-5);
  box-shadow: var(--sombra-sm);
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .simulador {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--sp-7);
  }
}

.simulador__campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.simulador__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-texto);
}

.simulador__valor-actual {
  font-size: var(--fs-lg);
  color: var(--color-azul-principal);
  font-weight: var(--fw-bold);
}

/* Slider personalizado pero accesible */
.simulador__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background-color: var(--color-borde);
  border-radius: var(--radio-pill);
  outline: none;
  cursor: pointer;
}

.simulador__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: var(--radio-pill);
  background-color: var(--color-dorado);
  border: 3px solid var(--color-blanco);
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform var(--transicion-rapida);
}

.simulador__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.simulador__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radio-pill);
  background-color: var(--color-dorado);
  border: 3px solid var(--color-blanco);
  box-shadow: var(--sombra);
  cursor: pointer;
}

.simulador__rango-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--color-texto-secundario);
  margin-top: var(--sp-1);
}

/* Selector de plazo (radios estilizados como botones) */
.simulador__plazos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.simulador__plazo {
  flex: 1 1 calc(50% - var(--sp-2));
}

.simulador__plazo input[type='radio'] {
  /* Oculto visualmente pero accesible con teclado */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.simulador__plazo label {
  display: block;
  padding: var(--sp-3);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  text-align: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all var(--transicion);
}

.simulador__plazo input[type='radio']:checked + label {
  border-color: var(--color-azul-principal);
  background-color: var(--color-azul-principal);
  color: var(--color-blanco);
}

.simulador__plazo input[type='radio']:focus-visible + label {
  outline: 2px solid var(--color-dorado);
  outline-offset: 2px;
}

/* Panel de resultados */
.simulador__resultado {
  background: linear-gradient(
    135deg,
    var(--color-azul-principal) 0%,
    var(--color-azul-medio) 100%
  );
  color: var(--color-blanco);
  border-radius: var(--radio);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.simulador__resultado h3 {
  color: var(--color-blanco);
  font-size: var(--fs-lg);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.simulador__pago-mensual {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: 1;
}

.simulador__pago-mensual-label {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-2);
}

.simulador__detalles {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--sp-4);
}

.simulador__detalle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
}

.simulador__detalle-etiqueta {
  color: rgba(255, 255, 255, 0.85);
}

.simulador__detalle-valor {
  font-weight: var(--fw-bold);
}

.simulador__nota {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

/* ============================================================
   9. RASTREADOR DE TRÁMITES
   Input de folio + stepper de avance.
   ============================================================ */

.rastreador {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-5);
  box-shadow: var(--sombra-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.rastreador__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 480px) {
  .rastreador__form {
    flex-direction: row;
  }

  .rastreador__form .campo__control {
    flex: 1;
  }
}

.rastreador__resultado {
  background-color: var(--color-superficie-alt);
  border-radius: var(--radio);
  padding: var(--sp-5);
  display: none;
}

.rastreador__resultado.visible {
  display: block;
}

.rastreador__cabecera {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-borde);
}

@media (min-width: 480px) {
  .rastreador__cabecera {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

.rastreador__folio {
  font-size: var(--fs-xs);
  color: var(--color-texto-secundario);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rastreador__folio strong {
  color: var(--color-azul-principal);
  font-size: var(--fs-base);
  margin-left: var(--sp-2);
}

/* ============================================================
   10. BUZÓN DE QUEJAS / VOTACIONES
   ============================================================ */

.buzon-form,
.votacion {
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--sp-5);
  box-shadow: var(--sombra-sm);
}

.votacion__opciones {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
}

.votacion__opcion {
  position: relative;
}

.votacion__opcion input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.votacion__opcion label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 2px solid var(--color-borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: all var(--transicion);
  font-weight: var(--fw-semibold);
}

.votacion__opcion label::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radio-pill);
  border: 2px solid var(--color-borde-fuerte);
  background-color: var(--color-blanco);
  transition: all var(--transicion);
}

.votacion__opcion input[type='radio']:checked + label {
  border-color: var(--color-azul-principal);
  background-color: var(--color-azul-claro);
}

.votacion__opcion input[type='radio']:checked + label::before {
  border-color: var(--color-azul-principal);
  background-color: var(--color-azul-principal);
  box-shadow: inset 0 0 0 4px var(--color-blanco);
}

.votacion__opcion input[type='radio']:focus-visible + label {
  outline: 2px solid var(--color-dorado);
  outline-offset: 2px;
}

.votacion__pregunta {
  font-size: var(--fs-xl);
  margin: 0 0 var(--sp-2) 0;
}

.votacion__contexto {
  color: var(--color-texto-secundario);
  margin-bottom: var(--sp-4);
}

.votacion__deadline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background-color: var(--color-aviso-suave);
  color: var(--color-aviso);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radio-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-4);
}