/* ==========================================================================
   CONCRETO · concreto-accounts.css
   Estilos específicos de la app Accounts (auth) que NO se unifican en
   concreto-bridge.css ni en los componentes .c-*.
   Reglas: tokens (var(--…)), scope .app-accounts-auth, sin hex literales.
   Re-skin del antiguo tema azul (#107fe0…) al sistema: navy oscuro + acento
   amarillo. La estructura/markup y la funcionalidad se mantienen; solo la piel.
   Doc: Concreto-Migracion-Diseno/01-ARQUITECTURA-CSS.md §4
   ========================================================================== */

/* ---- Contenedor de página auth (full-screen, sin navbar/footer) ---------- */
.app-accounts-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  background: var(--c-navy-black);
}

/* La antigua clase azul `text-primary` quedaría navy (invisible en oscuro).
   Regla del sistema: títulos en BLANCO (consistente con el "Iniciar Sesión" de login),
   y el amarillo SOLO como acento de enlaces/iconos (una sola acción amarilla dominante).
   !important para ganar a la utilidad .text-primary (que el bridge define con !important). */
.app-accounts-auth .text-primary { color: var(--c-white) !important; }
.app-accounts-auth a.text-primary,
.app-accounts-auth i.text-primary { color: var(--main-yellow) !important; }

/* ---- Tarjetas contenedoras --------------------------------------------- */
/* Login simple (login / login_nuevo) */
.app-accounts-auth .login-container {
  width: 100%;
  max-width: 900px;
  background: var(--c-surface);                 /* en dark = #0B2138 */
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* Tarjeta grande con carrusel (forgot / change / signup) */
.app-accounts-auth .contenido-login {
  width: 90%;
  max-width: 1000px;
  min-height: 650px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
  transition: var(--transition);
}

/* ---- Panel de imagen (login) ------------------------------------------- */
.app-accounts-auth .login-image {
  background-image: url("../../../img/bg/edificio.jpg");
  background-size: cover;
  background-position: right center;
  min-height: 100%;
}

/* ---- Carrusel lateral (forgot / change / signup) -----------------------
   Geometría que antes vivía en styles.css (que base_concreto NO carga): sin
   estas alturas el carrusel colapsa y el panel queda vacío. */
.app-accounts-auth .contenedor-carousel {
  overflow: hidden;
  background: linear-gradient(0deg, var(--c-navy-black), var(--c-navy));
}
.app-accounts-auth .contenedor-carousel .carousel,
.app-accounts-auth .contenedor-carousel .carousel-item { height: 100%; }
.app-accounts-auth .contenedor-carousel .carousel-inner { width: 100%; height: 100%; }
.app-accounts-auth .contenedor-carousel .carousel-caption {
  display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;
}
.app-accounts-auth .contenedor-carousel .carousel-caption img { max-height: 300px; }
.app-accounts-auth .carousel-control-prev,
.app-accounts-auth .carousel-control-next {
  font-size: 0.8rem; padding: 0.5rem; width: 30px; height: 30px;
  background: rgba(0, 0, 0, 0.4); border-radius: 50%; top: 50%;
}
.app-accounts-auth .carousel-control-prev { left: 5px; }
.app-accounts-auth .carousel-control-next { right: 5px; }
.app-accounts-auth .carrusel-explicacion { line-height: 1.5; color: var(--c-ink-soft); margin-top: 0.5rem; }

/* ---- Marca / wordmark + etiquetas flotantes ---------------------------- */
.app-accounts-auth .brand-wordmark { color: var(--main-yellow); font-weight: var(--fw-bold); }
.app-accounts-auth .form-floating > label { color: var(--c-muted); }

/* ---- CTA principal — botón amarillo del sistema ------------------------ */
.app-accounts-auth .btn-login {
  background: var(--main-yellow);
  border: 1.5px solid var(--main-yellow);
  color: var(--c-navy-black);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  transition: var(--transition);
}
.app-accounts-auth .btn-login:hover {
  background: var(--c-yellow-700);
  border-color: var(--c-yellow-700);
  color: var(--c-navy-black);
  transform: scale(1.02);
}

/* ---- Botones grandes de selección (signup paso 1) ---------------------- */
.app-accounts-auth .contenedor-botones-grandes { margin-top: 2rem; }
/* Tiles de texto+icono (rol, organización, categorías): contorno sobre oscuro */
.app-accounts-auth .contenedor-botones-grandes .btn-outline-primary {
  font-size: 1rem; border: 1.5px solid var(--c-line-strong); color: var(--c-ink);
  background: transparent; transition: var(--transition);
}
/* Tiles con LOGO (unidades SEMAICA): fondo claro para que el logo no se pierda */
.app-accounts-auth .contenedor-botones-grandes .btn-light {
  font-size: 1rem; border: 1px solid var(--c-line); color: var(--c-navy-black);
  background: var(--c-white); transition: var(--transition);
}
.app-accounts-auth .contenedor-botones-grandes .btn-light:hover { border-color: var(--main-yellow); transform: scale(1.02); }
.app-accounts-auth .contenedor-botones-grandes .btn-outline-primary:hover,
.app-accounts-auth .contenedor-botones-grandes .selected {
  background: var(--main-yellow); color: var(--c-navy-black); border-color: var(--main-yellow);
  transform: scale(1.02);
}

/* ---- Filas seleccionables (signup) ------------------------------------- */
.app-accounts-auth .selectable-row { cursor: pointer; }
.app-accounts-auth .selectable-row:hover { background-color: rgba(255, 255, 255, 0.05); }
.app-accounts-auth .selectable-row input[type="checkbox"] { margin: 0; }
.app-accounts-auth .selected { background-color: var(--c-navy) !important; } /* !important: la fila trae bg de Bootstrap */
.app-accounts-auth .selected-type-1 { background-color: var(--c-success); color: #fff !important; }
.app-accounts-auth .selected-type-2 { background-color: var(--c-navy); color: #fff !important; }
.app-accounts-auth .selected-type-3 { background-color: var(--main-yellow); color: var(--c-navy-black); }

/* ---- Inputs de código (verificación) ----------------------------------- */
.app-accounts-auth .codigo-input { width: 60px; height: 60px; font-size: 1.6rem; text-align: center; }

/* ---- Enlaces auxiliares ------------------------------------------------- */
.app-accounts-auth .tienes-cuenta { font-size: var(--fs-xs); margin-top: var(--sp-4); color: var(--c-muted); }
.app-accounts-auth .tienes-cuenta a,
.app-accounts-auth .terminos-condiciones a,
.app-accounts-auth .auth-link { color: var(--main-yellow); font-weight: var(--fw-demi); text-decoration: none; }
.app-accounts-auth .tienes-cuenta a:hover,
.app-accounts-auth .terminos-condiciones a:hover,
.app-accounts-auth .auth-link:hover { color: var(--c-yellow-700); text-decoration: underline; }
.app-accounts-auth .terminos-condiciones { font-size: var(--fs-xs); color: var(--c-muted); }

/* ---- Pasos / progreso (signup) ----------------------------------------- */
.app-accounts-auth .contenedor-pasos { font-size: 0.65rem; }
.app-accounts-auth .step-indicator { color: var(--c-white); }
.app-accounts-auth #progressBar { height: 5px; background: var(--main-yellow); transition: width 0.3s ease-in-out; }
.app-accounts-auth .progress-bar { transition: width 0.5s ease-in-out; }

/* ---- Contenedor de mensajes flotante ----------------------------------- */
.app-accounts-auth #messageContainer,
.app-accounts-auth .messageContainer {
  position: fixed; top: 10%; left: 50%; transform: translateX(-50%);
  background: var(--c-surface); color: var(--c-ink);
  padding: 15px 20px; border: 1px solid var(--c-line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: var(--z-toast);
}

/* ==========================================================================
   Documento legal (fragmento inyectado en el modal del signup vía fetch)
   ========================================================================== */
.app-accounts-legal-body {
  white-space: pre-wrap; word-break: break-word;
  font-family: inherit; color: inherit; background: transparent; border: 0; padding: 0;
}