/* ==========================================================================
   GRUPO AYA - HOJA DE CORRECCIONES
   ayacapital.es | 30 julio 2026
   --------------------------------------------------------------------------
   Se carga DESPUES del <style> del index.html y solo sobrescribe lo justo.
   Para revertir: borrar la linea <link> del <head>. Nada mas.
   No toca la identidad visual ni la fotografia del hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTRASTE
   Los 19 patrones de texto que fallaban WCAG AA salian de estas dos
   variables. Como todo el CSS las usa via var(), cambiarlas aqui lo
   corrige entero.
       --dust  #786d5a  3,21:1  ->  #9a8e76  5,05:1
       --ash   #4a4438  1,69:1  ->  #a1957c  5,51:1
   Medido sobre #222019, el fondo mas claro de la web (peor caso).
   -------------------------------------------------------------------------- */
:root{
  --dust:#9a8e76;
  --ash:#a1957c;
}
input::placeholder,
textarea::placeholder{ color:var(--dust); opacity:1; }

/* --------------------------------------------------------------------------
   2. ANIMACIONES DE ENTRADA CON RED DE SEGURIDAD
   Antes: .reveal{opacity:0} y solo el JS las hacia visibles. Si el JS no
   se ejecutaba, la pagina quedaba practicamente en blanco.
   Ahora: visible por defecto; solo se oculta si <html class="js">.
   -------------------------------------------------------------------------- */
.reveal{ opacity:1; transform:none; }
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.js .reveal.vis{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .reveal,
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
}

/* --------------------------------------------------------------------------
   3. FOCO VISIBLE (navegacion por teclado)
   -------------------------------------------------------------------------- */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }

/* --------------------------------------------------------------------------
   4. AREA TACTIL MINIMA 44px (WCAG 2.5.5)
   Solo anade padding: el tamano de letra no cambia, la composicion tampoco.
   -------------------------------------------------------------------------- */
.nav-links a{ display:inline-flex; align-items:center; min-height:44px; padding-block:4px; }
.nav-badge,
.btn-line,
.btn-solid,
.form-submit-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; }
.foot-links a,
.foot-legal a,
.nav-wordmark{ display:inline-flex; align-items:center; min-height:44px; }

/* --------------------------------------------------------------------------
   5. RESPONSIVE PUNTUAL
   El CSS original solo tiene @media(max-width:900px). Estos dos anadidos
   arreglan lo que queda roto por debajo de esa anchura.
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  /* El formulario a dos columnas es inutilizable en un movil */
  .fg-row{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .rbar{ grid-template-columns:1fr; gap:6px; }
  .rbar-val{ text-align:left; }
  .lcard-metrics{ grid-template-columns:1fr; gap:22px; }
}
html,body{ overflow-x:hidden; }
img,video,table{ max-width:100%; }

/* --------------------------------------------------------------------------
   6. IMPRESION
   Un dossier institucional se imprime. Antes salia negro sobre negro.
   -------------------------------------------------------------------------- */
@media print{
  :root{
    --ink:#fff; --deep:#fff; --base:#fff; --lift:#fafafa;
    --edge:#ddd; --edge-lt:#ccc;
    --cream:#111; --white:#000; --sand:#333; --dust:#444; --ash:#444;
    --gold:#8a6d1f; --gold-lt:#8a6d1f; --gold-dim:#8a6d1f;
  }
  *{ background-image:none !important; box-shadow:none !important; color:#222 !important; }
  body{ background:#fff !important; font-size:11pt; }
  .reveal,.js .reveal{ opacity:1 !important; transform:none !important; }
  nav,.nav-badge,.form-box,.h-actions,form{ display:none !important; }
  section{ page-break-inside:avoid; }
  h1,h2,h3,.section-h{ page-break-after:avoid; color:#000 !important; }
  @page{ size:A4; margin:20mm; }
}


/* ==========================================================================
   7. VERSION MOVIL  (anadido 30 julio 2026)
   --------------------------------------------------------------------------
   PROBLEMA: por debajo de 900px el CSS original hacia
       .nav-links{display:none}   -> desaparecia el menu entero
       .h-right{display:none}     -> desaparecian los tres KPIs de portada
   y no habia nada que los sustituyera. En un movil no habia navegacion
   ni cifras.
   SOLUCION: menu desplegable con boton hamburguesa y KPIs apilados.
   En escritorio (>900px) no cambia absolutamente nada.
   ========================================================================== */

.nav-toggle{ display:none; }

@media (max-width:900px){

  /* --- barra: logotipo a la izquierda, badge y boton juntos a la derecha --- */
  #nav{ justify-content:flex-start; }
  #nav .nav-badge{ margin-left:auto; }
  .nav-toggle{ margin-left:14px; }

  /* --- boton hamburguesa --- */
  .nav-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0 10px; flex:0 0 auto;
    background:none; border:1px solid var(--edge-lt); cursor:pointer;
  }
  .nav-toggle span{
    display:block; width:100%; height:1px; background:var(--cream);
    transition:transform .3s ease, opacity .2s ease;
  }
  #nav.open .nav-toggle{ border-color:var(--gold-dim); }
  #nav.open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  #nav.open .nav-toggle span:nth-child(2){ opacity:0; }
  #nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* --- panel desplegable --- */
  #nav.open{ background:var(--deep); }
  #nav.open .nav-links{
    display:flex; flex-direction:column; gap:0; margin:0; list-style:none;
    position:fixed; top:68px; left:0; right:0;
    background:var(--deep);
    border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
    padding:2px 24px 10px;
    max-height:calc(100vh - 68px); overflow-y:auto;
  }
  #nav.open .nav-links li{ border-bottom:1px solid var(--edge); }
  #nav.open .nav-links li:last-child{ border-bottom:none; }
  #nav.open .nav-links a{ display:flex; align-items:center; width:100%; min-height:52px; }

  /* --- KPIs del hero, recuperados y apilados --- */
  #hero .h-right{
    display:flex; position:static; right:auto; top:auto;
    flex-direction:row; flex-wrap:wrap; align-items:flex-start;
    text-align:left; gap:26px 40px; margin-top:52px;
  }
  #hero .h-private{ flex:0 0 100%; margin:0; }
  #hero .h-sep{ display:none; }
  #hero .h-kpi{ flex:0 1 auto; min-width:132px; }
  #hero .h-kpi-val{ font-size:34px; }
}

/* Por debajo de 640px el logotipo, el badge y el boton no caben en una linea */
@media (max-width:640px){
  #nav .nav-badge{ display:none; }
}

@media (max-width:480px){
  #hero .h-right{ gap:22px 26px; margin-top:44px; }
  #hero .h-kpi-val{ font-size:30px; }
  #hero .h-kpi{ min-width:120px; }
}


/* ==========================================================================
   8. PIE DE PAGINA EN MOVIL
   --------------------------------------------------------------------------
   Fallo preexistente: la regla @media(max-width:900px) del CSS original
   aplica grid-template-columns a .foot-inner, pero ese elemento es FLEX,
   no grid, asi que la regla nunca hizo nada. Resultado: los 5 enlaces del
   pie en fila con gap:36px se salen de la pantalla en movil.
   ========================================================================== */
@media (max-width:900px){
  .foot-inner{ flex-direction:column; gap:34px; align-items:flex-start; }
  .foot-links{ flex-wrap:wrap; gap:0 28px; }
  .foot-bottom{ flex-wrap:wrap; gap:14px; }
  .foot-legal{ flex-wrap:wrap; gap:0 20px; }
}
@media (max-width:480px){
  .foot-links{ gap:0 20px; }
  .foot-legal{ gap:0 16px; }
}


/* ==========================================================================
   9. HERO EN MOVIL
   --------------------------------------------------------------------------
   Al recuperar los KPIs, el contenido del hero crece y, como #hero tenia
   padding-top:0 y justify-content:flex-end, el titular se metia POR DEBAJO
   de la barra de navegacion fija (que ocupa los primeros 68px).
   Ademas .h-private es flex con justify-content:flex-end, pensado para la
   columna derecha del escritorio; apilado a la izquierda quedaba suelto.
   ========================================================================== */
@media (max-width:900px){
  #hero{
    min-height:auto;
    justify-content:flex-start;
    padding-top:112px;
    padding-bottom:76px;
  }
  #hero .h-private{ justify-content:flex-start; }
}
@media (max-width:480px){
  #hero{ padding-top:100px; padding-bottom:64px; }
}
