/* Estilos base de la Suite, construidos SOBRE los tokens.
 * Alcance E01: solo lo necesario para la pagina temporal de arranque.
 */
body {
  margin: 0;
  background: var(--c-fondo);
  color: var(--c-texto);
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.suite-contenedor {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.suite-navbar {
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-borde);
  box-shadow: var(--sh-sm);
}
.suite-navbar__interior {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 56px;
}
.suite-marca {
  font-weight: var(--fw-semi);
  font-size: var(--fs-lg);
  color: var(--c-primario);
  letter-spacing: -.01em;
}
.suite-navbar__meta {
  font-size: var(--fs-sm);
  color: var(--c-texto-suave);
}

.suite-principal { flex: 1; padding-block: var(--sp-12); }

.suite-arranque {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: var(--sp-10);
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.suite-arranque__titulo {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semi);
  letter-spacing: -.02em;
}
.suite-arranque__version {
  margin: 0 0 var(--sp-6);
  color: var(--c-texto-suave);
  font-size: var(--fs-sm);
  font-family: var(--f-mono);
}
.suite-arranque__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-8);
  color: var(--c-exito);
  font-weight: var(--fw-medio);
}

.suite-punto {
  width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; background: currentColor;
}
.suite-punto--ok { color: var(--c-exito); }

.suite-datos {
  margin: 0; text-align: left;
  border-top: 1px solid var(--c-borde);
}
.suite-datos__fila {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-borde);
}
.suite-datos dt { color: var(--c-texto-suave); font-size: var(--fs-sm); margin: 0; }
.suite-datos dd { margin: 0; font-weight: var(--fw-medio); font-variant-numeric: tabular-nums; }

.suite-modulos {
  margin: var(--sp-6) 0 0; padding: 0; list-style: none;
  text-align: left; font-size: var(--fs-sm); font-family: var(--f-mono);
}
.suite-modulos li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-borde); }

.suite-error__codigo {
  font-family: var(--f-mono); font-size: var(--fs-3xl);
  color: var(--c-texto-suave); margin: 0 0 var(--sp-2);
}
.suite-error__ref { font-size: var(--fs-sm); color: var(--c-texto-suave); }

.suite-pie {
  border-top: 1px solid var(--c-borde);
  padding-block: var(--sp-4);
  color: var(--c-texto-suave);
  font-size: var(--fs-xs);
  text-align: center;
}

@media (max-width: 640px) {
  .suite-arranque { padding: var(--sp-6); }
  .suite-datos__fila { flex-direction: column; gap: var(--sp-1); }
}

/* =====================================================================
   E03.01 — Cascarón de aplicación: cabecera, lateral, contenido, pie
   Todo construido sobre tokens. Ni un valor visual literal (N-46).
   ===================================================================== */

.suite-app { display: flex; flex-direction: column; min-height: 100vh; }

/* --- Cabecera ------------------------------------------------------- */
.suite-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  height: 56px; padding-inline: var(--sp-4);
  background: var(--c-superficie);
  border-bottom: 1px solid var(--c-borde);
  position: sticky; top: 0; z-index: var(--z-desplegable);
}
.suite-cabecera__izq, .suite-cabecera__der {
  display: flex; align-items: center; gap: var(--sp-3);
}
.suite-marca {
  display: flex; align-items: center; gap: var(--sp-2);
  text-decoration: none; color: var(--c-texto);
}
.suite-marca__texto { font-size: var(--fs-lg); font-weight: var(--fw-normal); letter-spacing: -.01em; }
.suite-marca__texto strong { font-weight: var(--fw-semi); color: var(--c-primario); }

.suite-boton-menu {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: var(--sp-2);
}
.suite-boton-menu span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--c-texto);
}

.suite-usuario { display: flex; align-items: center; gap: var(--sp-2); }
.suite-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-primario-suave); color: var(--c-primario);
  font-weight: var(--fw-semi); font-size: var(--fs-sm);
}
.suite-usuario__datos { display: flex; flex-direction: column; line-height: 1.2; }
.suite-usuario__nombre { font-size: var(--fs-sm); font-weight: var(--fw-medio); }
.suite-usuario__rol { font-size: var(--fs-xs); color: var(--c-texto-suave); }
.suite-salir { margin: 0; }

/* --- Cuerpo y lateral ----------------------------------------------- */
.suite-cuerpo { display: flex; flex: 1; align-items: stretch; }

.suite-lateral {
  width: 232px; flex-shrink: 0;
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-superficie);
  border-right: 1px solid var(--c-borde);
}
.suite-lateral__grupo {
  margin: var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-texto-suave);
}
.suite-lateral__grupo:first-child { margin-top: 0; }
.suite-lateral__enlace {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--c-texto); text-decoration: none;
  font-size: var(--fs-sm);
}
.suite-lateral__enlace:hover { background: var(--c-fondo); }
.suite-lateral__enlace.es-activo {
  background: var(--c-primario-suave); color: var(--c-primario);
  font-weight: var(--fw-medio);
}
.suite-icono { flex-shrink: 0; }

.suite-contenido {
  flex: 1; min-width: 0;
  padding: var(--sp-8) var(--sp-6);
  max-width: 1600px;
}

/* --- Encabezado de página ------------------------------------------- */
.suite-encabezado {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-8);
}
.suite-encabezado__titulo {
  margin: 0 0 var(--sp-1); font-size: var(--fs-2xl);
  font-weight: var(--fw-semi); letter-spacing: -.02em;
}
.suite-encabezado__sub { margin: 0; color: var(--c-texto-suave); font-size: var(--fs-sm); }
.suite-seccion {
  margin: var(--sp-8) 0 var(--sp-4);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-texto-suave);
}

/* --- Tarjetas de módulo --------------------------------------------- */
.suite-tarjetas {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.suite-tarjeta {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--c-superficie);
  border: 1px solid var(--c-borde); border-radius: var(--r-lg);
  text-decoration: none; color: var(--c-texto);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.suite-tarjeta:hover {
  border-color: var(--c-primario);
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.suite-tarjeta__icono {
  width: 40px; height: 40px; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--c-primario-suave); color: var(--c-primario);
  margin-bottom: var(--sp-1);
}
.suite-tarjeta--sistema .suite-tarjeta__icono {
  background: var(--c-borde); color: var(--c-texto-suave);
}
.suite-tarjeta__nombre { font-weight: var(--fw-semi); }
.suite-tarjeta__desc { font-size: var(--fs-sm); color: var(--c-texto-suave); flex: 1; }
.suite-tarjeta__pie {
  font-size: var(--fs-xs); color: var(--c-texto-suave);
  font-family: var(--f-mono);
  display: flex; align-items: center; gap: var(--sp-2);
}
.suite-etiqueta {
  padding: 1px var(--sp-2); border-radius: var(--r-sm);
  background: var(--c-borde); font-family: var(--f-sans);
}

/* --- Estado vacío ---------------------------------------------------- */
.suite-vacio {
  padding: var(--sp-10); text-align: center;
  background: var(--c-superficie);
  border: 1px dashed var(--c-borde); border-radius: var(--r-lg);
}
.suite-vacio__titulo { margin: 0 0 var(--sp-2); font-weight: var(--fw-semi); }
.suite-vacio__texto { margin: 0; color: var(--c-texto-suave); font-size: var(--fs-sm); }

/* --- Botones --------------------------------------------------------- */
.suite-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md); border: 1px solid var(--c-borde);
  background: var(--c-superficie); color: var(--c-texto);
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medio);
  cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s;
}
.suite-btn:hover { background: var(--c-fondo); }
.suite-btn:focus-visible { outline: 2px solid var(--c-primario); outline-offset: 2px; }
.suite-btn--primario {
  background: var(--c-primario); border-color: var(--c-primario); color: #fff;
}
.suite-btn--primario:hover { background: var(--c-primario-fuerte); border-color: var(--c-primario-fuerte); }
.suite-btn--fantasma { background: transparent; border-color: transparent; color: var(--c-texto-suave); }
.suite-btn--fantasma:hover { background: var(--c-fondo); color: var(--c-texto); }
.suite-btn--peligro { color: var(--c-peligro); border-color: var(--c-borde); }
.suite-btn--peligro:hover { background: var(--c-peligro); border-color: var(--c-peligro); color: #fff; }
.suite-btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); }
.suite-btn--ancho { width: 100%; padding-block: var(--sp-3); }
.suite-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* --- Formularios ----------------------------------------------------- */
.suite-formulario { max-width: 640px; }
.suite-grupo {
  border: 1px solid var(--c-borde); border-radius: var(--r-lg);
  padding: var(--sp-5); margin: 0 0 var(--sp-6);
  background: var(--c-superficie);
}
.suite-grupo legend {
  padding-inline: var(--sp-2); font-size: var(--fs-sm);
  font-weight: var(--fw-semi); color: var(--c-texto-suave);
  text-transform: uppercase; letter-spacing: .06em;
}
.suite-campo { margin-bottom: var(--sp-4); }
.suite-campo label {
  display: block; margin-bottom: var(--sp-1);
  font-size: var(--fs-sm); font-weight: var(--fw-medio);
}
.suite-campo input[type="text"], .suite-campo input[type="email"],
.suite-campo input[type="password"] {
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-borde); border-radius: var(--r-md);
  background: var(--c-superficie); color: var(--c-texto);
  font-family: inherit; font-size: var(--fs-base);
}
.suite-campo input:focus-visible {
  outline: 2px solid var(--c-primario); outline-offset: 1px; border-color: var(--c-primario);
}
.suite-campo--casilla label {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-weight: var(--fw-normal); cursor: pointer;
}
.suite-obligatorio { color: var(--c-peligro); }
.suite-ayuda { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--c-texto-suave); }
.suite-formulario__acciones { display: flex; gap: var(--sp-3); }
.suite-en-linea { display: inline; margin: 0; }

/* --- Avisos ---------------------------------------------------------- */
.suite-avisos { margin-bottom: var(--sp-6); display: grid; gap: var(--sp-2); }
.suite-aviso {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); border-left: 3px solid var(--c-borde);
  background: var(--c-superficie); font-size: var(--fs-sm);
}
.suite-aviso--ok     { border-left-color: var(--c-exito);   color: var(--c-exito); }
.suite-aviso--error  { border-left-color: var(--c-peligro); color: var(--c-peligro); }
.suite-aviso--aviso  { border-left-color: var(--c-aviso);   color: var(--c-aviso); }

/* --- Tabla ----------------------------------------------------------- */
.suite-tabla-marco {
  overflow-x: auto;
  background: var(--c-superficie);
  border: 1px solid var(--c-borde); border-radius: var(--r-lg);
}
.suite-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.suite-tabla th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  text-transform: uppercase; letter-spacing: .04em; color: var(--c-texto-suave);
  border-bottom: 1px solid var(--c-borde); white-space: nowrap;
}
.suite-tabla td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-borde); }
.suite-tabla tr:last-child td { border-bottom: 0; }
.suite-tabla tbody tr:hover { background: var(--c-fondo); }
.suite-tabla tr.es-inactivo { opacity: .55; }
.suite-tabla__suave { color: var(--c-texto-suave); }
.suite-tabla__acciones { text-align: right; white-space: nowrap; }
.suite-tabla__acciones .suite-btn { margin-left: var(--sp-1); }

.suite-distintivo {
  display: inline-block; padding: 1px var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-medio);
}
.suite-distintivo--ok    { background: var(--c-primario-suave); color: var(--c-exito); }
.suite-distintivo--gris  { background: var(--c-borde); color: var(--c-texto-suave); }
.suite-distintivo--aviso { background: var(--c-borde); color: var(--c-aviso); }

/* --- Acceso ---------------------------------------------------------- */
.suite-acceso {
  display: grid; place-items: center; min-height: 100vh;
  background: var(--c-fondo);
}
.suite-acceso__marco { width: 100%; max-width: 400px; padding: var(--sp-4); }
.suite-acceso__tarjeta {
  background: var(--c-superficie);
  border: 1px solid var(--c-borde); border-radius: var(--r-lg);
  box-shadow: var(--sh-md); padding: var(--sp-8);
}
.suite-acceso__tarjeta--centro { text-align: center; }
.suite-acceso__marca {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}
.suite-acceso__titulo {
  margin: 0 0 var(--sp-6); font-size: var(--fs-xl);
  font-weight: var(--fw-semi); text-align: center;
}
.suite-acceso__pie {
  margin: var(--sp-4) 0 0; text-align: center;
  font-size: var(--fs-xs); color: var(--c-texto-suave); font-family: var(--f-mono);
}

/* --- Pie ------------------------------------------------------------- */
.suite-pie {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4);
  border-top: 1px solid var(--c-borde);
  color: var(--c-texto-suave); font-size: var(--fs-xs);
}
.suite-pie__sep { opacity: .5; }

/* --- Módulo en desarrollo -------------------------------------------- */
.suite-desarrollo {
  padding: var(--sp-12); text-align: center;
  background: var(--c-superficie);
  border: 1px dashed var(--c-borde); border-radius: var(--r-lg);
}
.suite-desarrollo__icono { color: var(--c-texto-suave); margin-bottom: var(--sp-4); }
.suite-desarrollo__titulo { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-semi); }
.suite-desarrollo__texto { margin: 0; color: var(--c-texto-suave); }

/* --- Adaptación a pantalla ------------------------------------------- */
@media (max-width: 1023px) {
  .suite-boton-menu { display: flex; }
  .suite-lateral {
    position: fixed; inset: 56px auto 0 0; z-index: var(--z-modal);
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: var(--sh-md);
  }
  .suite-lateral.es-visible { transform: translateX(0); }
  .suite-contenido { padding: var(--sp-6) var(--sp-4); }
}
@media (max-width: 639px) {
  .suite-usuario__datos { display: none; }
  .suite-encabezado { flex-direction: column; }
  .suite-tarjetas { grid-template-columns: 1fr; }
}