/*
  Sistema de Diseño DGAIA
  Componentes certificados · Fase 1
*/

/* Estructura */

.dgaia-contenedor{
  width:min(var(--dgaia-ancho-contenido),94vw);
  margin-inline:auto;
}

.dgaia-seccion{
  padding-block:var(--dgaia-espacio-9);
}

.dgaia-rejilla{
  display:grid;
  gap:var(--dgaia-espacio-6);
}

.dgaia-rejilla-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.dgaia-rejilla-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.dgaia-rejilla-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* Tipografía */

.dgaia-sobretitulo{
  display:inline-flex;
  align-items:center;
  gap:var(--dgaia-espacio-2);
  margin:0;
  color:var(--dgaia-marca);
  font-size:var(--dgaia-texto-xs);
  font-weight:var(--dgaia-peso-maximo);
  letter-spacing:.075em;
  text-transform:uppercase;
}

.dgaia-titulo{
  margin:0;
  color:var(--dgaia-texto);
  font-size:var(--dgaia-texto-2xl);
  line-height:1.04;
  letter-spacing:-.048em;
}

.dgaia-subtitulo{
  max-width:var(--dgaia-ancho-texto);
  margin:var(--dgaia-espacio-3) 0 0;
  color:var(--dgaia-texto-secundario);
  font-size:var(--dgaia-texto-lg);
}

/* Paneles y tarjetas */

.dgaia-panel{
  border:1px solid var(--dgaia-borde);
  border-radius:var(--dgaia-radio-xl);
  background:var(--dgaia-superficie);
  box-shadow:var(--dgaia-sombra-md);
}

.dgaia-panel-contenido{
  padding:clamp(22px,3vw,36px);
}

.dgaia-tarjeta{
  padding:var(--dgaia-espacio-6);
  border:1px solid var(--dgaia-borde);
  border-radius:var(--dgaia-radio-lg);
  background:var(--dgaia-superficie);
  transition:
    border-color var(--dgaia-transicion-rapida),
    transform var(--dgaia-transicion-rapida),
    box-shadow var(--dgaia-transicion-rapida);
}

.dgaia-tarjeta-interactiva:hover{
  border-color:var(--dgaia-borde-fuerte);
  box-shadow:var(--dgaia-sombra-sm);
  transform:translateY(-2px);
}

/* Botones */

.dgaia-boton{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--dgaia-espacio-2);
  padding:0 var(--dgaia-espacio-5);
  border:1px solid transparent;
  border-radius:var(--dgaia-radio-md);
  text-decoration:none;
  font-weight:var(--dgaia-peso-fuerte);
  line-height:1;
  cursor:pointer;
  transition:
    background var(--dgaia-transicion-rapida),
    border-color var(--dgaia-transicion-rapida),
    color var(--dgaia-transicion-rapida),
    transform var(--dgaia-transicion-rapida);
}

.dgaia-boton:hover{
  transform:translateY(-1px);
}

.dgaia-boton:active{
  transform:translateY(0);
}

.dgaia-boton:disabled,
.dgaia-boton[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.55;
  transform:none;
}

.dgaia-boton-principal{
  color:var(--dgaia-marca-contraste);
  background:var(--dgaia-marca);
}

.dgaia-boton-principal:hover{
  background:var(--dgaia-marca-fuerte);
}

.dgaia-boton-secundario{
  color:var(--dgaia-texto);
  border-color:var(--dgaia-borde);
  background:var(--dgaia-superficie);
}

.dgaia-boton-secundario:hover{
  border-color:var(--dgaia-borde-fuerte);
  background:var(--dgaia-superficie-secundaria);
}

.dgaia-boton-peligro{
  color:#fff;
  background:var(--dgaia-error);
}

/* Formularios */

.dgaia-campo{
  display:grid;
  gap:var(--dgaia-espacio-2);
}

.dgaia-etiqueta{
  color:var(--dgaia-texto);
  font-size:var(--dgaia-texto-sm);
  font-weight:var(--dgaia-peso-fuerte);
}

.dgaia-ayuda{
  color:var(--dgaia-texto-suave);
  font-size:var(--dgaia-texto-xs);
}

.dgaia-entrada,
.dgaia-selector,
.dgaia-textarea{
  width:100%;
  min-height:48px;
  padding:0 var(--dgaia-espacio-4);
  border:1px solid var(--dgaia-borde);
  border-radius:var(--dgaia-radio-md);
  color:var(--dgaia-texto);
  background:var(--dgaia-superficie-secundaria);
  outline:none;
  transition:
    border-color var(--dgaia-transicion-rapida),
    box-shadow var(--dgaia-transicion-rapida),
    background var(--dgaia-transicion-rapida);
}

.dgaia-textarea{
  min-height:120px;
  padding-block:var(--dgaia-espacio-3);
  resize:vertical;
}

.dgaia-entrada:hover,
.dgaia-selector:hover,
.dgaia-textarea:hover{
  border-color:var(--dgaia-borde-fuerte);
}

.dgaia-entrada:focus,
.dgaia-selector:focus,
.dgaia-textarea:focus{
  border-color:var(--dgaia-marca);
  background:var(--dgaia-superficie);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--dgaia-marca) 14%,transparent);
}

.dgaia-entrada[aria-invalid="true"]{
  border-color:var(--dgaia-error);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--dgaia-error) 13%,transparent);
}

/* Estados */

.dgaia-estado{
  display:inline-flex;
  align-items:center;
  gap:var(--dgaia-espacio-2);
  min-height:30px;
  padding:0 var(--dgaia-espacio-3);
  border-radius:var(--dgaia-radio-redondo);
  font-size:var(--dgaia-texto-xs);
  font-weight:var(--dgaia-peso-fuerte);
}

.dgaia-estado::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
}

.dgaia-estado-correcto{
  color:var(--dgaia-correcto);
  background:var(--dgaia-correcto-fondo);
}

.dgaia-estado-aviso{
  color:var(--dgaia-aviso);
  background:var(--dgaia-aviso-fondo);
}

.dgaia-estado-error{
  color:var(--dgaia-error);
  background:var(--dgaia-error-fondo);
}

.dgaia-estado-informacion{
  color:var(--dgaia-informacion);
  background:var(--dgaia-informacion-fondo);
}

/* Avisos */

.dgaia-aviso{
  padding:var(--dgaia-espacio-4);
  border:1px solid var(--dgaia-borde);
  border-left-width:4px;
  border-radius:var(--dgaia-radio-md);
  color:var(--dgaia-texto-secundario);
  background:var(--dgaia-superficie);
}

.dgaia-aviso strong{
  display:block;
  margin-bottom:var(--dgaia-espacio-1);
  color:var(--dgaia-texto);
}

.dgaia-aviso-informacion{
  border-left-color:var(--dgaia-informacion);
}

.dgaia-aviso-correcto{
  border-left-color:var(--dgaia-correcto);
}

.dgaia-aviso-aviso{
  border-left-color:var(--dgaia-aviso);
}

.dgaia-aviso-error{
  border-left-color:var(--dgaia-error);
}

/* Indicadores */

.dgaia-indicador{
  padding:var(--dgaia-espacio-6);
  border:1px solid var(--dgaia-borde);
  border-radius:var(--dgaia-radio-lg);
  background:var(--dgaia-superficie);
}

.dgaia-indicador-valor{
  display:block;
  color:var(--dgaia-texto);
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:var(--dgaia-peso-maximo);
  line-height:1;
  letter-spacing:-.045em;
}

.dgaia-indicador-etiqueta{
  display:block;
  margin-top:var(--dgaia-espacio-2);
  color:var(--dgaia-texto-secundario);
  font-size:var(--dgaia-texto-sm);
}

/* Navegación */

.dgaia-cabecera{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--dgaia-espacio-6);
  border-bottom:1px solid var(--dgaia-borde);
}

.dgaia-navegacion{
  display:flex;
  align-items:center;
  gap:var(--dgaia-espacio-5);
  flex-wrap:wrap;
}

.dgaia-navegacion a{
  color:var(--dgaia-texto-secundario);
  text-decoration:none;
  font-size:var(--dgaia-texto-sm);
  font-weight:var(--dgaia-peso-fuerte);
}

.dgaia-navegacion a:hover,
.dgaia-navegacion a[aria-current="page"]{
  color:var(--dgaia-marca);
}

/* Tabla */

.dgaia-tabla-contenedor{
  overflow:auto;
  border:1px solid var(--dgaia-borde);
  border-radius:var(--dgaia-radio-lg);
  background:var(--dgaia-superficie);
}

.dgaia-tabla{
  width:100%;
  border-collapse:collapse;
  min-width:680px;
}

.dgaia-tabla th,
.dgaia-tabla td{
  padding:var(--dgaia-espacio-4);
  border-bottom:1px solid var(--dgaia-borde);
  text-align:left;
}

.dgaia-tabla th{
  color:var(--dgaia-texto-secundario);
  background:var(--dgaia-superficie-secundaria);
  font-size:var(--dgaia-texto-xs);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.dgaia-tabla tbody tr:last-child td{
  border-bottom:0;
}

/* Adaptación */

@media(max-width:1050px){
  .dgaia-rejilla-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dgaia-rejilla-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:720px){
  .dgaia-seccion{
    padding-block:var(--dgaia-espacio-7);
  }

  .dgaia-rejilla-2,
  .dgaia-rejilla-3,
  .dgaia-rejilla-4{
    grid-template-columns:1fr;
  }

  .dgaia-boton{
    min-height:48px;
  }

  .dgaia-cabecera{
    align-items:flex-start;
    flex-direction:column;
    padding-block:var(--dgaia-espacio-4);
  }
}

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