:root{
  --eea-blue:#2B6CB0;
  --eea-sky:#78c6f2;
  --eea-dark:#163A5C;
  --eea-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  /* Accent color variables (override with corporate hexs) */
  --accent-sky: #eaf6ff;
  /* Section title (pale sky blue) */
  --section-title: #66BFE6;
  /* Banner color for section headings (darker pastel for visibility) */
  --section-banner-bg: #1F6FA6;
  /* Accent stripe under section headings (yellow / executive tone) */
  --section-accent-start: #f6c84c; /* warm yellow */
  --section-accent-end: #ffe99a;   /* pale yellow */
  /* Background color for section panels (slightly more intense pale gray) */
  --section-bg: #e9ecef;
  --accent-teal: #e6f9f2;
  --accent-green: #eafbe8;
  --accent-gold: #fff8e6;
  --accent-indigo: #eef3ff;
  --accent-rose: #fff0f6;
  --accent-purple: #f3eefb;
  --accent-gray: #f5f6f7;
  /* Background for the top index (pastel sky blue to pair with section gray) */
  --index-bg: #d6efff; /* un poco más celeste */

  /* Icon wrapper base size (change via classes .icon-small / .icon-large) */
  --icon-wrap-size: 72px;
  --icon-inner-size: 40px;
}

/* Compact mode: smaller icons and compact button width (~150px) */
/* Compact mode: icon wrap and inner icon set to 50x50 as requested */
/* Compact size adjusted per request: circle 48px, inner icon 40px */
.indice-grid.compact{--icon-wrap-size:48px;--icon-inner-size:40px}
.indice-grid.compact .indice-btn{min-width:120px;max-width:170px}
/* Strongly enforce uniform small icon sizes in compact mode */
.indice-grid.compact .icon-wrap{width:var(--icon-wrap-size) !important;height:var(--icon-wrap-size) !important;flex:0 0 var(--icon-wrap-size) !important}
.indice-grid.compact .icon-wrap img{width:var(--icon-inner-size) !important;height:var(--icon-inner-size) !important;object-fit:contain !important}
.indice-grid.compact .indice-btn img{width:var(--icon-inner-size) !important;height:var(--icon-inner-size) !important}
/* Force compact layout icon sizes to avoid oversized SVG scaling */
.indice-grid.compact .icon-wrap{width:var(--icon-wrap-size);height:var(--icon-wrap-size);flex:0 0 var(--icon-wrap-size)}
.indice-grid.compact .icon-wrap img{width:var(--icon-inner-size);height:var(--icon-inner-size);object-fit:contain}
.indice-grid.compact .indice-btn img{width:var(--icon-inner-size);height:var(--icon-inner-size)}
body.eea-body{font-family:var(--eea-font);color:#1f2d3d;margin:0;background:#f6fbff}
.eea-site-header{background:linear-gradient(90deg,var(--eea-sky),var(--eea-blue));padding:18px;color:#fff}
.eea-brand{display:flex;align-items:center;gap:12px;max-width:1200px;margin:0 auto}
.eea-brand img{height:72px;max-height:150px;width:auto;object-fit:contain}
.eea-brand h1{margin:0;font-size:28px;color:#fff;font-weight:700}
.content-area{max-width:1080px;margin:28px auto;padding:0 16px}
.tramite-titulo{text-align:center;color:var(--eea-dark);font-size:28px;margin-bottom:12px}
.indice-tramite{background:var(--index-bg);padding:12px 14px;border-radius:12px;box-shadow:0 6px 18px rgba(11,43,73,0.04);margin-bottom:18px}
.indice-tramite .indice-grid{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:6px 0;list-style:none;margin:0}
.indice-tramite .indice-grid li{list-style:none}
.indice-tramite .indice-btn{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-radius:12px;color:var(--eea-dark);text-decoration:none;box-shadow:0 6px 18px rgba(11,43,73,0.06);transition:transform .12s ease,box-shadow .12s ease}
.indice-tramite .indice-btn img{width:48px;height:48px;flex:0 0 48px;object-fit:contain}
.indice-tramite .indice-btn span{font-weight:600}

/* Icon circular background wrapper */
.indice-tramite .icon-wrap{width:var(--icon-wrap-size);height:var(--icon-wrap-size);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-sky);flex:0 0 var(--icon-wrap-size);border:1px solid rgba(0,0,0,0.04)}
.indice-tramite .icon-wrap img{width:var(--icon-inner-size);height:var(--icon-inner-size)}

/* Utility classes to make icon circles slightly smaller or larger */
.icon-small{--icon-wrap-size:56px;--icon-inner-size:28px}
.icon-large{--icon-wrap-size:88px;--icon-inner-size:52px}

/* Accent color classes for icon backgrounds */
.indice-btn.accent-sky .icon-wrap{background:var(--accent-sky)}
.indice-btn.accent-teal .icon-wrap{background:var(--accent-teal)}
.indice-btn.accent-green .icon-wrap{background:var(--accent-green)}
.indice-btn.accent-gold .icon-wrap{background:var(--accent-gold)}
.indice-btn.accent-indigo .icon-wrap{background:var(--accent-indigo)}
.indice-btn.accent-rose .icon-wrap{background:var(--accent-rose)}
.indice-btn.accent-purple .icon-wrap{background:var(--accent-purple)}
.indice-btn.accent-gray .icon-wrap{background:var(--accent-gray)}

/* Subtítulos para botones */
.indice-sub{display:none}
.indice-tramite .indice-btn:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,43,73,0.12)}
.campo-tramite{margin:20px 0;background:var(--section-bg);padding:16px;border-radius:8px;box-shadow:0 2px 8px rgba(11,43,73,0.04);border:1px solid rgba(11,43,73,0.03)}
.titulo-campo{background:var(--eea-blue);color:#fff;padding:8px 12px;border-radius:6px}
/* Section headings color: pale sky blue for a softer corporate look */
.campo-tramite h3{color:var(--section-title);margin-top:4px}

/* Banner-style section heading (floating pill with icon) */
.campo-tramite{position:relative}
.campo-tramite h3{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--section-banner-bg);
  color:#fff;
  padding:10px 14px;
  border-radius:8px;
  margin:-34px 0 12px 0;
  box-shadow:0 8px 18px rgba(24,70,110,0.12);
  font-size:18px;
  /* Tipografía más delgada y profesional para títulos */
  font-family: 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight:500; /* más delgado que el título principal */
  letter-spacing:0.2px;
  line-height:1.1;
}
.campo-tramite h3::before{
  content:'\2713';
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,0.12);color:#fff;font-weight:600;font-size:14px;
}
/* Franja decorativa debajo de cada título de sección */
.campo-tramite{position:relative;z-index:0}
.campo-tramite h3::after{
  content: '';
  display: block;
  height: 8px;
  width: 220px; /* ancho moderado para un acento sutil */
  max-width: 60%;
  margin-top: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--section-accent-start), var(--section-accent-end));
  box-shadow: 0 6px 16px rgba(31,111,166,0.06);
}

@media (max-width:640px){
  .campo-tramite h3::after{width:140px;margin-top:8px;height:6px}
}

/* ------------------------------------------------------------------
   Nueva: Fondo azul interior + franja amarilla corta centrada.
   Conservamos las reglas anteriores comentadas aquí para facilitar
   la reversión si es necesario.

   PREVIO (full-width accent) -- guardado para referencia:
   .campo-tramite::before{
     content: '';
     position: absolute;
     left: 16px;
     right: 16px;
     top: 12px;
     height: 44px;
     border-radius: 8px;
     background: var(--section-banner-bg);
     box-shadow:0 8px 18px rgba(24,70,110,0.12);
     pointer-events:none;
     z-index:1;
   }
   .campo-tramite::after{
     content: '';
     position: absolute;
     left: 16px;
     right: 16px;
     top: 27px;
     height: 10px;
     border-radius: 6px;
     background: linear-gradient(90deg, var(--section-accent-start), var(--section-accent-end));
     box-shadow: 0 6px 16px rgba(31,111,166,0.06);
     pointer-events: none;
     z-index:2;
   }
   ------------------------------------------------------------------*/

/* Implementación actual: fondo azul interior (detrás del h3) */
.campo-tramite::before{
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 44px;
  border-radius: 8px;
  background: var(--section-banner-bg);
  box-shadow:0 8px 18px rgba(24,70,110,0.12);
  pointer-events:none;
  z-index:1;
}

/* Mantener la franja amarilla corta centrada debajo del h3 (dentro del pill) */
.campo-tramite h3{position:relative;z-index:3}
.campo-tramite h3::after{
  content: '';
  display: block;
  height: 8px;
  width: 220px;
  max-width: 60%;
  margin-top: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--section-accent-start), var(--section-accent-end));
  box-shadow: 0 6px 16px rgba(31,111,166,0.06);
}

@media (max-width:640px){
  .campo-tramite::before{left:12px;right:12px;top:10px;height:40px}
  .campo-tramite h3::after{width:140px;margin-top:8px;height:6px}
}
.eea-footer{background:#fff;padding:18px;text-align:center;border-top:1px solid #e6f2fb}
.eea-hero{max-width:160px;height:auto}
.inline-icon{width:28px;vertical-align:middle;margin-left:8px}

/* Link style for external regulation PDF */
.external-link{
  color: var(--eea-blue);
  font-weight: 600;
  text-decoration: underline;
}
.external-link:hover{
  color: var(--eea-dark);
}

/* Responsive */
@media (max-width:992px){.indice-tramite .indice-btn img{width:44px;height:44px}.indice-tramite{--icon-wrap-size:64px;--icon-inner-size:36px}.indice-tramite .indice-btn{padding:9px 12px}}
@media (max-width:640px){.indice-tramite .indice-grid{justify-content:space-around}.indice-tramite{--icon-wrap-size:56px;--icon-inner-size:32px}.indice-tramite .indice-btn{flex-direction:column;gap:6px;padding:8px 10px}.tramite-titulo{font-size:22px}}

/* Modal para visualizar documentos (hidden por defecto) */
.eea-modal{
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  padding: 20px;
}
.eea-modal[aria-hidden="false"]{display:flex}
.eea-modal-content{
  background: #fff;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(8,40,80,0.12);
}
.eea-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  background:#f7fbff;
  border-bottom:1px solid #eef6fb;
}
.eea-modal-title{font-weight:600;color:var(--eea-dark)}
.eea-modal-actions{display:flex;gap:8px;align-items:center}
.eea-modal-btn{background:#fff;border:1px solid #d7eaf8;padding:6px 10px;border-radius:6px;color:var(--eea-dark);text-decoration:none;cursor:pointer}
.eea-modal-btn:hover{background:#f0f8ff}
.eea-modal iframe{width:100%;height:70vh;border:0;display:block}

@media (max-width:640px){.eea-modal iframe{height:60vh}.eea-modal-content{max-width:96%}}

/* Botón flotante 'SUBIR' */
.btn-subir{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:100000;
  /* usar color principal con menor opacidad para un look más suave */
  background:rgba(43,108,176,0.55); /* corresponde a --eea-blue (#2B6CB0) */
  color:#fff;
  border:0;
  padding:10px 14px;
  border-radius:28px;
  font-weight:700;
  letter-spacing:0.6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 8px 20px rgba(24,70,110,0.12);
  backdrop-filter: blur(4px);
  transition:opacity .18s ease,transform .18s ease;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none; /* deshabilitado cuando oculto */
}
.btn-subir.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.btn-subir:focus{outline:3px solid rgba(255,255,255,0.14);outline-offset:2px}
.btn-subir:hover{background:rgba(43,108,176,0.85)}

@media (max-width:640px){.btn-subir{right:12px;bottom:12px;padding:8px 12px;border-radius:24px;font-size:14px}}

/* Posición del segundo botón (apila encima del botón SUBIR) */
.btn-volver{bottom:76px}
/* Mover el botón 'VOLVER A LA PAGINA EEA' al lado izquierdo en pantallas grandes */
.btn-volver{right:auto;left:18px}

@media (max-width:640px){
  /* En móviles mantener ambos botones visibles: colocar volver ligeramente a la izquierda */
  .btn-volver{left:12px;bottom:84px}
  .btn-subir{right:12px;bottom:12px}
}