/* ---------------------------------------------------------------------------
   Portal · identidad DuchaStep

   El azul corporativo #5D89AC da 3,72 de contraste sobre blanco: vale para el
   logo y para titulares grandes, pero NO para texto pequeño ni para etiquetas
   de botón, que necesitan 4,5. Por eso la marca y la acción son colores
   distintos: se usa el azul oscuro #415F78 (6,70) para todo lo que lleve texto
   encima, y el azul corporativo para bordes, acentos y el logo.
--------------------------------------------------------------------------- */
:root{
  /* paleta corporativa */
  --ds-azul:      #5D89AC;   /* marca */
  --ds-oscuro:    #415F78;   /* acción: botones, enlaces */
  --ds-profundo:  #2F4658;   /* hover, cabeceras */
  --ds-claro:     #9EB6C9;
  --ds-muyclaro:  #DDE7EE;
  --ds-gris:      #2B3034;
  --ds-grisclaro: #F3F5F6;

  /* roles */
  --fondo:   var(--ds-grisclaro);
  --papel:   #FFFFFF;
  --tinta:   var(--ds-gris);
  --suave:   #5A6A79;
  --linea:   var(--ds-muyclaro);
  --marca:   var(--ds-azul);
  --accion:  var(--ds-oscuro);
  --accion-hover: var(--ds-profundo);
  --sobre-accion: #FFFFFF;
  --rojo:    #A4342A;
  --verde:   #1A6E45;
  --radio:   12px;
  /* Una sola fuente para la anchura: barra, contenido y pie no pueden
     desalinearse porque los tres leen esta variable. */
  --columna: 1080px;
}

@media (prefers-color-scheme:dark){
  :root{
    --fondo:  #1A2530;
    --papel:  #22303D;
    --tinta:  var(--ds-muyclaro);
    --suave:  #9EB0BF;
    --linea:  #33475A;
    --marca:  var(--ds-claro);
    --accion: var(--ds-claro);
    --accion-hover: #B9CBDA;
    --sobre-accion: #1A2530;
    --rojo:   #F0937F;
    --verde:  #6FD6A2;
  }
}

*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accion)}
h1{font-size:1.5rem;margin:0 0 1rem;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:0 0 .5rem}

/* --- barra superior ------------------------------------------------------ */
/* La barra ocupa todo el ancho (el fondo llega a los bordes), pero su
   contenido vive dentro de la misma columna que el resto de la página. */
.barra{background:var(--papel);border-bottom:1px solid var(--linea)}
.columna{max-width:var(--columna);margin:0 auto;padding:0 1.25rem;width:100%}
.barra .columna{display:flex;justify-content:space-between;align-items:center;
  gap:1rem;flex-wrap:wrap;padding-top:.7rem;padding-bottom:.7rem}
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{height:30px;width:auto;display:block}
.barra nav{display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.barra nav a{color:var(--suave);text-decoration:none;font-size:.9rem}
.barra nav a:hover{color:var(--accion)}
.barra .salir{color:var(--rojo)}

/* --- estructura ---------------------------------------------------------- */
.ancho{max-width:var(--columna);margin:0 auto;padding:1.75rem 1.25rem 3rem}
.centrado{display:grid;place-items:center;min-height:100vh;padding:1.25rem}
.tarjeta{background:var(--papel);border:1px solid var(--linea);
  border-radius:var(--radio);padding:1.4rem;margin-bottom:1.25rem;
  width:100%;max-width:420px}
.ancho .tarjeta{max-width:none}
.logo-acceso{display:block;height:52px;width:auto;margin:0 auto 1.5rem}

/* --- formularios --------------------------------------------------------- */
label{display:block;margin:0 0 .9rem;font-size:.85rem;color:var(--suave)}
input,select{display:block;width:100%;margin-top:.32rem;padding:.62rem .7rem;
  border:1px solid var(--linea);border-radius:8px;background:var(--fondo);
  color:var(--tinta);font:inherit}
input:focus,select:focus{outline:2px solid var(--marca);outline-offset:1px;
  border-color:var(--marca)}
label.check,label.chip{display:inline-flex;align-items:center;gap:.4rem;
  margin:0 .6rem .5rem 0}
label.check input,label.chip input{width:auto;margin:0;display:inline-block}
button{padding:.62rem 1.15rem;border:0;border-radius:8px;background:var(--accion);
  color:var(--sobre-accion);font:inherit;font-weight:600;cursor:pointer}
button:hover{background:var(--accion-hover)}
button.menor,.menor button{padding:.34rem .7rem;font-size:.8rem}

.linea{display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap}
.linea label{margin-bottom:0}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem}
.chip{background:var(--fondo);border:1px solid var(--linea);border-radius:999px;
  padding:.25rem .7rem;font-size:.82rem}

/* --- lanzador ------------------------------------------------------------ */
.rejilla{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.caja{display:block;background:var(--papel);border:1px solid var(--linea);
  border-left:4px solid var(--marca);border-radius:var(--radio);
  padding:1.2rem;text-decoration:none;color:inherit;
  transition:border-color .12s,transform .12s}
.caja:hover{border-color:var(--marca);transform:translateY(-1px)}
.caja h2{color:var(--accion)}
.caja p{margin:0;color:var(--suave);font-size:.88rem}

/* --- tablas -------------------------------------------------------------- */
table{width:100%;border-collapse:collapse;background:var(--papel);
  border:1px solid var(--linea);border-radius:var(--radio);
  display:block;overflow-x:auto}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--linea);
  vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--suave);background:var(--fondo)}
tr.inactivo{opacity:.55}
tr.fallo td{background:color-mix(in srgb,var(--rojo) 9%,transparent)}
.acciones{white-space:nowrap;display:flex;gap:.5rem;align-items:center}

/* --- avisos y etiquetas -------------------------------------------------- */
.menor{font-size:.85rem;color:var(--suave)}
.rojo{color:var(--rojo)}
.error{background:color-mix(in srgb,var(--rojo) 10%,transparent);
  border:1px solid var(--rojo);color:var(--rojo);padding:.7rem .85rem;
  border-radius:8px;margin:0 0 1rem;font-size:.9rem}
.aviso{background:color-mix(in srgb,var(--verde) 10%,transparent);
  border:1px solid var(--verde);color:var(--verde);padding:.7rem .85rem;
  border-radius:8px;margin:0 0 1rem;font-size:.9rem}
.etiqueta{display:inline-block;font-size:.7rem;padding:.14rem .55rem;
  border-radius:999px;background:var(--ds-muyclaro);color:var(--ds-profundo);
  border:1px solid transparent;vertical-align:middle;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em}
.etiqueta.rojo{background:color-mix(in srgb,var(--rojo) 12%,transparent);
  color:var(--rojo)}
.etiqueta.verde{background:color-mix(in srgb,var(--verde) 12%,transparent);
  color:var(--verde)}
@media (prefers-color-scheme:dark){
  .etiqueta{background:var(--linea);color:var(--ds-muyclaro)}
}

.pie{color:var(--suave);font-size:.78rem;padding:1.5rem 0}
.pie .columna{text-align:left}
details summary{cursor:pointer;margin-bottom:.9rem;color:var(--accion)}