/* ==========================================================================
   Coouninorte — Servicios en línea
   Hoja de estilos moderna y responsive (2026).

   Se carga DESPUÉS de styles.css y reemplaza su apariencia sin necesidad de
   reescribir el HTML de cada página. Neutraliza los anchos fijos de 1024px,
   moderniza tipografía, botones, tablas y formularios, y adapta todo a móvil.

   Identidad: se conserva el verde de la cooperativa. El degradado verde→lima
   de la cabecera antigua se reutiliza como una "cinta" fina que encabeza las
   tarjetas: es el único elemento decorativo, y es el sello de la marca.
   ========================================================================== */

:root{
  /* Color */
  --pino:        #0C3B2A;   /* verde profundo: cabecera, títulos */
  --pino-800:    #12503A;
  --verde:       #1B7F52;   /* acciones principales */
  --verde-claro: #E8F2EB;   /* fondos suaves */
  --lima:        #A9CF3D;   /* acento (heredado del degradado original) */
  --papel:       #F3F6F3;   /* fondo de página */
  --blanco:      #FFFFFF;
  --tinta:       #17211C;   /* texto principal */
  --gris:        #5F6F67;   /* etiquetas, texto secundario */
  --linea:       #DEE5E0;   /* bordes */
  --ambar:       #8A6100;
  --ambar-bg:    #FFF7E3;
  --rojo:        #A8261E;
  --rojo-bg:     #FDECEA;

  /* Tipografía */
  --fuente-titulo: 'Outfit', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --fuente-texto:  'Inter',  ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;

  /* Medidas */
  --ancho: 1100px;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(12,59,42,.05), 0 8px 24px rgba(12,59,42,.06);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--papel);
  font-family: var(--fuente-texto);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

/* Números alineados (dinero, cédulas, fechas) */
td, th, .cifra{ font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Contenedores: se eliminan los anchos fijos de 1024px
   -------------------------------------------------------------------------- */
#principal{
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 18px 16px 40px;
}

/* Cabecera verde */
#cabTitulo{
  width: 100%;
  height: auto;
  min-height: 0;
  background-image: none;
  background: linear-gradient(100deg, var(--pino) 0%, var(--pino-800) 62%, var(--verde) 100%);
  border-radius: var(--radio) var(--radio) 0 0;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 18px;
}
/* La "cinta": degradado verde→lima heredado del diseño original */
#cabTitulo::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--verde) 0%, var(--lima) 100%);
}

#clBie{
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  color: #EAF3E6;
  position: static;
  float: none;
  width: auto;
  margin: 0;
  text-align: left;
  line-height: 1.3;
}
#clIp{
  font-family: var(--fuente-texto);
  font-size: 12px;
  color: #A9CF3D;
  position: static;
  float: none;
  width: auto;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

/* Cuerpo blanco */
#cuerpo{
  background: var(--blanco);
  font-family: var(--fuente-texto);
  font-size: 15px;
  color: var(--tinta);
  height: auto;
  float: none;
  overflow: visible;
  border: 1px solid var(--linea);
  border-top: 0;
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra);
  padding: 22px 22px 30px;
}

.fecha{
  width: 100%;
  text-align: right;
  color: var(--gris);
  font-size: 13px;
  font-style: normal;
  margin: 0 0 6px;
}
.fecha span{ margin: 0 !important; }

/* --------------------------------------------------------------------------
   Tipografía de títulos
   -------------------------------------------------------------------------- */
.tituBienvenida, .tituForm, .titusalir{
  font-family: var(--fuente-titulo);
  font-weight: 600;
  color: var(--pino);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.tituBienvenida{ font-size: clamp(22px, 3.4vw, 30px); }
.tituForm{ font-size: clamp(19px, 2.6vw, 24px); }
.titusalir{ font-size: 20px; }

.parTexto{ font-family: var(--fuente-texto); color: var(--gris); font-size: 14px; }

.tituCampo, .tituCampo2{
  font-family: var(--fuente-texto);
  font-weight: 600;
  color: var(--gris);
  font-size: 13px;
  letter-spacing: .01em;
}
.tituCampo b, .tituCampo2 b{ font-weight: 600; }

/* --------------------------------------------------------------------------
   Menú superior (Inicio | Estados de cuenta | Salir)
   -------------------------------------------------------------------------- */
.enlaceInicio, .enlaceInicio a{
  font-family: var(--fuente-texto);
  font-size: 14px;
  font-weight: 500;
}
#cuerpo a{ color: var(--verde); }
#cuerpo a:hover{ color: var(--pino); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], select, textarea, .cajaTexto{
  font-family: var(--fuente-texto);
  font-size: 15px;
  color: var(--tinta);
  background: var(--blanco);
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(27,127,82,.15);
}
:focus-visible{ outline: 2px solid var(--verde); outline-offset: 2px; }

/* Botones */
.boton, button, input[type=submit], input[type=button]{
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 15px;
  width: auto;
  min-height: 44px;              /* objetivo táctil cómodo */
  padding: 10px 20px;
  color: var(--blanco);
  background: var(--verde);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.boton:hover, button:hover, input[type=submit]:hover{ background: var(--pino-800); }
.boton:active, button:active{ transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Tablas: legibles y con desplazamiento horizontal en móvil
   -------------------------------------------------------------------------- */
#cuerpo table{ max-width: 100%; border-collapse: collapse; }

.encabezatabla, .encabezatabla td, .encabezatabla th{
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 13px;
  color: var(--pino);
  background: var(--verde-claro);
}
table.familia{ width: 100%; border: 0; }
table.familia td{
  border: 1px solid var(--linea);
  padding: 8px 10px;
  font-size: 14px;
}

/* Envoltorio para tablas anchas (se aplica con JS o manualmente) */
.tabla-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Panel principal: rejilla de tarjetas
   -------------------------------------------------------------------------- */
.menu-panel{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 26px 0 8px;
  padding: 0;
  list-style: none;
}
.tarjeta{
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  text-decoration: none;
  color: var(--tinta);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tarjeta::before{      /* la cinta de la cooperativa */
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--verde), var(--lima));
  opacity: 0;
  transition: opacity .15s;
}
.tarjeta:hover{
  border-color: #BFD8C7;
  box-shadow: var(--sombra);
  transform: translateY(-1px);
}
.tarjeta:hover::before{ opacity: 1; }
.tarjeta .ico{
  flex: 0 0 44px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--verde-claro);
  border-radius: 10px;
  color: var(--pino);
}
.tarjeta .ico svg{ width: 22px; height: 22px; }
.tarjeta .txt{ display: flex; flex-direction: column; }
.tarjeta .txt b{
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 16px;
  color: var(--pino);
}
.tarjeta .txt span{ font-size: 13px; color: var(--gris); }
.tarjeta.destacada .ico{ background: #F2F7E4; color: #4C6B12; }

/* --------------------------------------------------------------------------
   Avisos
   -------------------------------------------------------------------------- */
.aviso, .err{
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  margin: 0 0 16px;
}
.aviso{ background: var(--ambar-bg); border: 1px solid #EBD9A6; color: var(--ambar); }
.err{ background: var(--rojo-bg); border: 1px solid #E9B4AF; color: var(--rojo); }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
#footer{
  font-family: var(--fuente-texto);
  font-size: 12.5px;
  color: var(--gris);
  background: transparent;
  text-align: center;
  padding: 16px 8px 0;
  width: 100%;
}
#footer a{ color: var(--verde); }

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  body{ font-size: 15px; }
  #principal{ padding: 10px 10px 28px; }
  #cuerpo{ padding: 16px 14px 24px; border-radius: 0 0 10px 10px; }
  #cabTitulo{ padding: 12px 14px; }
  #clBie{ font-size: 13.5px; }
  #clIp{ text-align: left; }
  .fecha{ text-align: left; }

  /* Las tablas de datos antiguas usan anchos fijos: se dejan desplazar */
  #cuerpo > table, .formulario table{ display: block; overflow-x: auto; }

  /* Formularios en una sola columna */
  .campos td, .formulario td{ display: block; width: 100% !important; }
  /* Botones a ancho completo, salvo los que van dentro de un campo
     (como el «Ver» de la contraseña), que se posicionan encima. */
  .boton, button:not(.ver-clave){ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Impresión: sin fondos ni menús */
@media print{
  body{ background: #fff; }
  #cabTitulo, .fecha, #footer, .enlaceInicio, .no-imprimir{ display: none !important; }
  #cuerpo{ border: 0; box-shadow: none; padding: 0; }
}

/* ==========================================================================
   Correcciones sobre styles.css (2015)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Letra cursiva en móvil.
   styles.css declara `font-family: 'Comfortaa', cursive` en ~20 reglas. Al
   retirar esa fuente, el navegador cae en su tipografía "cursive" (Comic Sans
   en escritorio, una manuscrita en Android). Estas reglas usan la
   especificidad de #cuerpo / #principal para ganarle a todas ellas de una vez.
   -------------------------------------------------------------------------- */
#cuerpo, #cuerpo *,
#principal, #principal *{
  font-family: var(--fuente-texto);
  font-style: normal;
}
/* Los títulos recuperan la tipografía de display (mayor especificidad). */
#cuerpo .tituBienvenida, #cuerpo .tituForm, #cuerpo .titusalir,
#cuerpo .tituloinforme, #principal #clBie,
#cuerpo .tarjeta .txt b{
  font-family: var(--fuente-titulo);
}
/* Los iconos SVG no heredan tipografía. */
#cuerpo svg, #principal svg{ font-family: inherit; }

/* Enlaces y menús heredados */
#cuerpo .textomenu, #cuerpo .enlace, #cuerpo .resultado{
  font-size: 14px;
  color: var(--verde);
  text-decoration: none;
}
#cuerpo .enlace:hover, #cuerpo .textomenu:hover{ color: var(--pino); text-decoration: underline; }
#cuerpo .enlaceInicio a{ text-decoration: none; }
#cuerpo .enlaceInicio a:hover{ text-decoration: underline; }

/* --------------------------------------------------------------------------
   Encabezados de sección del estado de cuenta
   (antes: una viñeta PNG dentro de una tabla)
   -------------------------------------------------------------------------- */
#cuerpo .tituloinforme{
  font-size: 15px;
  font-weight: 600;
  color: var(--pino);
  letter-spacing: .02em;
  text-transform: none;
  margin: 26px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
}
#cuerpo .tituloinforme table{ border: 0; }
#cuerpo .tituloinforme td{ padding: 0 8px 0 0; vertical-align: middle; }

.ico-seccion{
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--verde-claro);
  color: var(--pino);
}
.ico-seccion svg{ width: 17px; height: 17px; }

/* Enlace "Imprimir documento" */
.ico-imprimir{
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  color: var(--verde);
  vertical-align: middle;
}
.ico-imprimir svg{ width: 19px; height: 19px; }

/* --------------------------------------------------------------------------
   Aviso informativo (reemplaza al alert() del navegador)
   -------------------------------------------------------------------------- */
.aviso-info{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 11px 14px;
  background: var(--verde-claro);
  border: 1px solid #C7DFCF;
  border-radius: 10px;
  color: var(--pino);
  font-size: 13.5px;
  line-height: 1.5;
}
.aviso-info svg{ flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; color: var(--verde); }

/* Aviso "sin movimientos": alineado a la izquierda, no centrado */
#cuerpo .aviso{ text-align: left; }

@media (max-width: 720px){
  #cuerpo .tituloinforme{ font-size: 14px; margin-top: 20px; }
  .ico-seccion{ width: 28px; height: 28px; }
  .ico-seccion svg{ width: 15px; height: 15px; }
}

/* --------------------------------------------------------------------------
   Formularios en tarjeta (Cambiar contraseña, etc.)
   -------------------------------------------------------------------------- */
.panel-form{
  max-width: 460px;
  margin: 22px auto 0;
  padding: 22px 22px 18px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: left;
}
.panel-form__ayuda{
  margin: 0 0 18px;
  font-size: 13.5px;
  color: var(--gris);
}
.campo-form{ margin-bottom: 14px; }
.campo-form label{
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris);
}
.campo-form input{ width: 100%; }

.acciones-form{ margin-top: 18px; }
#cuerpo .acciones-form .boton{
  width: 100%;
  background: var(--verde);
  color: var(--blanco);
  box-shadow: none;
  height: auto;
}
#cuerpo .acciones-form .boton:hover{ background: var(--pino-800); }

/* Mensaje de respuesta del cambio de contraseña */
#cuerpo #resultado.resultado{
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--pino);
  text-align: center;
}
#cuerpo #resultado.resultado:empty{ margin: 0; }

.panel-form__pie{
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
  font-size: 13.5px;
  color: var(--gris);
  text-align: center;
}
#cuerpo a.boton-secundario{
  display: inline-block;
  margin-top: 10px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--verde);
  background: var(--verde-claro);
  border: 1px solid #C7DFCF;
  border-radius: 9px;
  text-decoration: none;
}
#cuerpo a.boton-secundario:hover{ background: #DCEBE1; color: var(--pino); }

/* --------------------------------------------------------------------------
   Pie de página: el enlace venía con color blanco en línea (invisible)
   -------------------------------------------------------------------------- */
#footer{ color: var(--gris); }
#footer a{ color: var(--verde); text-decoration: none; }
#footer a:hover{ color: var(--pino); text-decoration: underline; }

@media (max-width: 720px){
  .panel-form{ padding: 18px 16px 16px; margin-top: 16px; }
}

/* ==========================================================================
   Formulario de actualización de datos
   ========================================================================== */

/* --------------------------------------------------------------------------
   Indicador de pasos (reemplaza las imágenes PNG)
   -------------------------------------------------------------------------- */
.pasos{ margin: 26px 0 30px; }

.pasos__barra{
  position: relative;
  height: 5px;
  background: var(--verde-claro);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
}
.pasos__relleno{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde), var(--lima));
  transition: width .4s ease;
}

.pasos__lista{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.pasos__item{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pasos__marca{
  flex: 0 0 30px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--linea);
  background: var(--blanco);
  color: var(--gris);
}
.pasos__marca svg{ width: 15px; height: 15px; }
.pasos__texto{
  font-size: 13px;
  color: var(--gris);
  line-height: 1.3;
  min-width: 0;
}

.pasos__item--hecho .pasos__marca{
  background: var(--verde);
  border-color: var(--verde);
  color: var(--blanco);
}
.pasos__item--hecho .pasos__texto{ color: var(--pino); }

.pasos__item--activo .pasos__marca{
  background: var(--pino);
  border-color: var(--pino);
  color: var(--blanco);
  box-shadow: 0 0 0 4px rgba(12,59,42,.10);
}
.pasos__item--activo .pasos__texto{
  color: var(--pino);
  font-weight: 600;
}

.pasos__leyenda{
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--gris);
}
.pasos__leyenda span{ margin: 0 6px; color: #B9C6BD; }

/* --------------------------------------------------------------------------
   Campos del formulario
   -------------------------------------------------------------------------- */
#cuerpo .formulario table{
  width: 100%;
  max-width: 100%;
  border-spacing: 0;          /* anula el cellspacing="20px" del HTML */
  margin: 0 auto;
}
#cuerpo .formulario td{
  padding: 9px 10px 9px 0;
  vertical-align: middle;
}
#cuerpo .formulario td.tituCampo{
  width: 1%;
  white-space: normal;
  padding-right: 16px;
  font-size: 13px;
  color: var(--gris);
}
#cuerpo .formulario td.campos{ padding-right: 26px; }

/* Los tres selectores de fecha (Día / Mes / Año) deben ir en una sola fila.
   Sin esto heredan `width:100%` y cada uno cae a su propio renglón. */
#cuerpo select[id^="txtdia"],
#cuerpo select[id^="txtmes"],
#cuerpo select[id^="txtano"]{
  display: inline-block;
  width: auto;
  min-width: 78px;
  vertical-align: middle;
}
#cuerpo select[id^="txtmes"]{ min-width: 118px; }

/* El asterisco de campo obligatorio, discreto */
#cuerpo .tituCampo{ font-weight: 600; }

/* Botones del formulario */
#cuerpo .formulario .boton,
#cuerpo .formulario input[type=submit],
#cuerpo .formulario input[type=button]{
  height: auto;
  width: auto;
  min-width: 140px;
  box-shadow: none;
}

@media (max-width: 860px){
  .pasos__lista{ grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
}
@media (max-width: 720px){
  .pasos__lista{ grid-template-columns: 1fr; gap: 10px; }
  .pasos__texto{ font-size: 13.5px; }

  /* Cada campo ocupa su propio renglón, con la etiqueta encima */
  #cuerpo .formulario table,
  #cuerpo .formulario tbody,
  #cuerpo .formulario tr,
  #cuerpo .formulario td{ display: block; width: 100% !important; }
  #cuerpo .formulario td{ padding: 0 0 4px; }
  #cuerpo .formulario td.tituCampo{ padding: 10px 0 6px; }
  #cuerpo .formulario td.campos{ padding-bottom: 12px; }
  #cuerpo select[id^="txtdia"],
  #cuerpo select[id^="txtmes"],
  #cuerpo select[id^="txtano"]{ min-width: 0; width: 31%; }
  #cuerpo select[id^="txtmes"]{ width: 33%; }
}

#cuerpo .marca-coop{ color: var(--verde); font-weight: 600; letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   Tarjeta de confirmación (datos actualizados, sesión cerrada)
   -------------------------------------------------------------------------- */
.panel-exito{
  max-width: 520px;
  margin: 26px auto 10px;
  padding: 30px 26px 28px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-align: center;
}
.panel-exito__marca{
  display: inline-grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--blanco);
  box-shadow: 0 0 0 6px var(--verde-claro);
}
.panel-exito__marca--neutra{
  background: var(--verde-claro);
  color: var(--pino);
  box-shadow: 0 0 0 6px #F1F6F2;
}
.panel-exito__marca svg{ width: 26px; height: 26px; }

#cuerpo .panel-exito h2{
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 600;
  color: var(--pino);
  margin: 0 0 8px;
}
#cuerpo .panel-exito p{
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gris);
}
#cuerpo .panel-exito p b{ color: var(--pino); }

#cuerpo a.boton-principal{
  display: inline-block;
  padding: 12px 26px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blanco);
  background: var(--verde);
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s;
}
#cuerpo a.boton-principal:hover{ background: var(--pino-800); color: var(--blanco); }

/* El paso completado no necesita destacar ninguno en particular */
.pasos__item--hecho .pasos__marca{ box-shadow: none; }

@media (max-width: 720px){
  .panel-exito{ padding: 24px 18px 22px; margin-top: 16px; }
  #cuerpo a.boton-principal{ display: block; }
}

/* Indicador de carga (reemplaza loader.gif) */
.cargando{
  display: inline-block;
  width: 22px; height: 22px;
  border: 2.5px solid var(--verde-claro);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: girar .7s linear infinite;
  vertical-align: middle;
}
@keyframes girar{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .cargando{ animation: none; border-top-color: var(--verde-claro); }
}

/* ==========================================================================
   Tablas de datos del estado de cuenta
   ========================================================================== */
#cuerpo .tabla-datos{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}
#cuerpo .tabla-datos td{
  padding: 9px 10px;
  font-size: 13.5px;
  vertical-align: middle;
}
#cuerpo .tabla-datos tr.encabezatabla td{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pino);
  background: var(--verde-claro);
  white-space: nowrap;
}
#cuerpo .tabla-datos tr:not(.encabezatabla) + tr:not(.encabezatabla) td{
  border-top: 1px solid var(--linea);
}

/* --------------------------------------------------------------------------
   En móvil, cada fila se convierte en una ficha con su etiqueta.
   Una tabla de 8 columnas es ilegible en un teléfono: se comprime y las
   palabras se parten. Apiladas, se leen de corrido.
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  #cuerpo .tabla-datos,
  #cuerpo .tabla-datos tbody,
  #cuerpo .tabla-datos tr,
  #cuerpo .tabla-datos td{
    display: block;
    width: 100% !important;
  }

  /* La fila de encabezado sobra: cada celda ya lleva su etiqueta */
  #cuerpo .tabla-datos tr.encabezatabla:first-child{ display: none; }

  /* Cada fila de datos = una ficha */
  #cuerpo .tabla-datos tr:not(.encabezatabla){
    margin-bottom: 10px;
    padding: 4px 0;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 10px;
    overflow: hidden;
  }
  #cuerpo .tabla-datos tr:not(.encabezatabla) td{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 12px;
    text-align: right !important;
    border: 0;
    border-top: 1px solid #EEF2EF;
  }
  #cuerpo .tabla-datos tr:not(.encabezatabla) td:first-child{
    border-top: 0;
    font-weight: 600;
    color: var(--pino);
    background: #FAFCFA;
  }
  /* La etiqueta de la columna, a la izquierda */
  #cuerpo .tabla-datos td[data-etiqueta]::before{
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--gris);
    text-align: left;
  }
  /* La primera celda es el nombre del concepto: sin etiqueta repetida */
  #cuerpo .tabla-datos tr:not(.encabezatabla) td:first-child{
    display: block;
    text-align: left !important;
  }
  #cuerpo .tabla-datos tr:not(.encabezatabla) td:first-child::before{
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
    color: var(--gris);
  }

  /* Fila de totales */
  #cuerpo .tabla-datos tr.encabezatabla:not(:first-child){
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 6px;
    padding: 10px 12px;
    background: var(--verde-claro);
    border-radius: 10px;
  }
  #cuerpo .tabla-datos tr.encabezatabla:not(:first-child) td{
    display: inline-block;
    width: auto !important;
    padding: 0;
    white-space: normal;
    background: transparent;
    font-size: 13px;
  }
}

/* ==========================================================================
   Tablas de datos del estado de cuenta
   ========================================================================== */

/* Escritorio: filas limpias, cifras alineadas a la derecha */
#cuerpo table.tabla-datos{
  width: 100%;
  border-collapse: collapse;
}
#cuerpo table.tabla-datos td{
  padding: 9px 12px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--linea);
}
#cuerpo table.tabla-datos tr.encabezatabla td{
  background: var(--verde-claro);
  border-bottom: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pino);
  white-space: nowrap;
}
#cuerpo table.tabla-datos tr:last-child td{ font-weight: 600; }
#cuerpo table.tabla-datos tr[bgcolor]{ background: transparent; }

/* --------------------------------------------------------------------------
   Móvil: cada fila se convierte en una ficha.
   El encabezado se oculta y cada celda muestra su etiqueta (data-etiqueta),
   así ninguna columna se atropella ni hace falta desplazar la pantalla.
   -------------------------------------------------------------------------- */
@media (max-width: 720px){
  #cuerpo table.tabla-datos,
  #cuerpo table.tabla-datos tbody,
  #cuerpo table.tabla-datos tr,
  #cuerpo table.tabla-datos td{
    display: block;
    width: 100% !important;
  }

  /* El encabezado no se necesita: cada celda lleva su etiqueta */
  #cuerpo table.tabla-datos tr.encabezatabla:first-child{
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  #cuerpo table.tabla-datos tr{
    margin-bottom: 12px;
    padding: 4px 14px 8px;
    background: var(--blanco);
    border: 1px solid var(--linea);
    border-radius: 10px;
  }

  #cuerpo table.tabla-datos td{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    text-align: right !important;
    border-bottom: 1px dashed #EAEFEB;
  }
  #cuerpo table.tabla-datos tr td:last-child{ border-bottom: 0; }

  /* La etiqueta de la columna, a la izquierda */
  #cuerpo table.tabla-datos td[data-etiqueta]::before{
    content: attr(data-etiqueta);
    flex: 0 0 auto;
    max-width: 48%;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--gris);
    letter-spacing: .01em;
  }

  /* Primera celda de cada ficha: el concepto, a todo el ancho */
  #cuerpo table.tabla-datos tr td:first-child{
    display: block;
    text-align: left !important;
    padding: 10px 0 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--pino);
    border-bottom: 1px solid var(--linea);
  }
  #cuerpo table.tabla-datos tr td:first-child::before{
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    color: var(--gris);
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  /* Fila de totales: se distingue con el verde de la marca */
  #cuerpo table.tabla-datos tr.encabezatabla{
    background: var(--verde-claro);
    border-color: #C7DFCF;
  }
  #cuerpo table.tabla-datos tr.encabezatabla td{
    background: transparent;
    white-space: normal;
    border-bottom-color: #CFE0D4;
  }
  #cuerpo table.tabla-datos tr.encabezatabla td:first-child{
    color: var(--pino);
    border-bottom-color: #C7DFCF;
  }

  /* La tabla de identificación (nombre, cédula, salario) también se apila */
  #cuerpo .datos-usuario td{ display: block; width: 100% !important; text-align: left; }
  #cuerpo .datos-usuario td.tituCampo{ padding-top: 8px; }
}

/* --------------------------------------------------------------------------
   Ajustes finos en móvil: ficha de Totales y bloque de identificación
   -------------------------------------------------------------------------- */
@media (max-width: 720px){

  /* "Totales:" pasa a ser el encabezado de su propia ficha */
  #cuerpo table.tabla-datos tr.encabezatabla td:first-child{
    display: block;
    width: 100% !important;
    padding: 8px 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pino);
    border-bottom: 1px solid #C7DFCF;
  }
  /* Los valores del total, bien contrastados */
  #cuerpo table.tabla-datos tr.encabezatabla td[data-etiqueta]{
    font-size: 15px;
    font-weight: 600;
    color: var(--pino);
  }
  #cuerpo table.tabla-datos tr.encabezatabla td[data-etiqueta]::before{
    font-size: 12px;
    font-weight: 500;
    color: var(--gris);
    text-transform: none;
    letter-spacing: 0;
  }

  /* Identificación del asociado: etiqueta pequeña encima del dato */
  #cuerpo .datos-usuario td{
    padding: 0;
    line-height: 1.35;
  }
  #cuerpo .datos-usuario td.tituCampo{
    padding: 12px 0 1px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gris);
  }
  #cuerpo .datos-usuario td:not(.tituCampo){
    font-size: 15px;
    color: var(--tinta);
    padding-bottom: 2px;
  }
  #cuerpo .datos-usuario td:empty{ display: none; }
}

/* Extensiones telefónicas bajo el encabezado del estado de cuenta */
#cuerpo .coop-exts{
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--gris);
  font-weight: 400;
}
@media (max-width: 720px){ #cuerpo .coop-exts{ font-size: 11.5px; line-height: 1.5; } }