:root{
  color-scheme:light dark;
  --fondo:#f4f6f8;
  --panel:#fff;
  --texto:#172033;
  --suave:#667184;
  --borde:#dce2e9;
  --principal:#1259a7;
  --peligro:#a52727;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--fondo);
  color:var(--texto);
  line-height:1.55;
}

button,input{font:inherit}

.cabecera{
  border-bottom:1px solid var(--borde);
  background:var(--panel);
}

.cabecera-interior{
  max-width:1080px;
  margin:auto;
  padding:16px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}

.marca{display:grid}
.marca span{color:var(--suave);font-size:.86rem}

.navegacion{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
}

.navegacion a{
  color:var(--texto);
  text-decoration:none;
  font-weight:700;
}

.contenido{
  max-width:1000px;
  margin:auto;
  padding:48px 22px 80px;
}

.presentacion h1{
  margin:8px 0;
  font-size:clamp(2rem,5vw,3.4rem);
}

.presentacion p{
  max-width:760px;
  color:var(--suave);
}

.etiqueta{
  margin:0;
  color:var(--principal);
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.panel{
  margin:20px 0;
  padding:25px;
  border:1px solid var(--borde);
  border-radius:18px;
  background:var(--panel);
}

.cabecera-panel{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.cabecera-panel h2{margin:0}
.cabecera-panel p{margin:5px 0;color:var(--suave)}

button{
  border:1px solid var(--principal);
  border-radius:10px;
  padding:10px 15px;
  background:var(--principal);
  color:#fff;
  font-weight:750;
  cursor:pointer;
}

button.secundario{
  background:transparent;
  color:var(--texto);
  border-color:var(--borde);
}

button.peligro{
  background:var(--peligro);
  border-color:var(--peligro);
}

.acceso-creado{
  margin-top:20px;
  border-top:1px solid var(--borde);
  padding-top:20px;
}

.acceso-creado label{
  display:block;
  margin-bottom:8px;
  font-weight:750;
}

.fila-enlace{
  display:flex;
  gap:10px;
}

.fila-enlace input{
  min-width:0;
  flex:1;
  border:1px solid var(--borde);
  border-radius:10px;
  padding:11px;
  background:var(--panel);
  color:var(--texto);
}

.lista{
  display:grid;
  gap:10px;
  margin-top:20px;
}

.expediente{
  width:100%;
  display:grid;
  grid-template-columns:1fr auto;
  gap:15px;
  text-align:left;
  border:1px solid var(--borde);
  border-radius:12px;
  padding:15px;
  background:transparent;
  color:var(--texto);
}

.expediente strong,
.expediente span{
  display:block;
}

.expediente span{
  color:var(--suave);
  font-weight:400;
}

.estado-detalle{
  margin:18px 0;
  padding:13px;
  border:1px solid var(--borde);
  border-radius:11px;
}

.respuestas{
  display:grid;
  gap:9px;
}

.respuesta{
  display:grid;
  grid-template-columns:minmax(180px,32%) 1fr;
  gap:15px;
  border-top:1px solid var(--borde);
  padding:10px 0;
}

.respuesta:first-child{border-top:0}
.respuesta strong{color:var(--suave)}
.respuesta span{white-space:pre-wrap;overflow-wrap:anywhere}

.acciones{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  margin-top:22px;
}

.mensaje{
  margin-top:16px;
  padding:12px;
  border-radius:10px;
  background:color-mix(in srgb,var(--principal) 10%,var(--panel));
}

[hidden]{display:none!important}

@media(max-width:720px){
  .cabecera-interior,
  .cabecera-panel{
    flex-direction:column;
    align-items:flex-start;
  }

  .fila-enlace,
  .acciones{
    flex-direction:column;
    width:100%;
  }

  .fila-enlace button,
  .acciones button{
    width:100%;
  }

  .respuesta{
    grid-template-columns:1fr;
    gap:3px;
  }
}

@media(prefers-color-scheme:dark){
  :root{
    --fondo:#0e131b;
    --panel:#151c26;
    --texto:#edf2f7;
    --suave:#a7b1bf;
    --borde:#303a49;
    --principal:#4e91dc;
    --peligro:#b94343;
  }
}