/* ---------------------------------------------------------------------------
 * Estilos del Reconstructor. Unica hoja de estilos del proyecto: la cargan
 * todas las pantallas via templates/base.html, que es la que hereda el resto.
 * No hay CSS embebido en las plantillas; lo que se agregue va aca.
 * ------------------------------------------------------------------------- */

/* Paleta. Cambiar el tema es tocar solo este bloque: los colores no se repiten
 * mas abajo, se referencian con var(). */
:root {
  --fondo:          #0f172a;  /* fondo de pagina y de los inputs */
  --card:           #1e293b;  /* superficie de la tarjeta */
  --log-fondo:      #020617;  /* consola del paso 3, mas oscura que el fondo */
  --borde:          #334155;

  --texto:          #e2e8f0;
  --texto-label:    #cbd5e1;
  --texto-tenue:    #94a3b8;  /* pasos, barra de sesion, botones secundarios */
  --acento:         #93c5fd;  /* legends, links, estado "corriendo" */

  --boton:          #2563eb;
  --boton-texto:    #ffffff;
  --boton-off:      #475569;
  --peligro:        #dc2626;  /* boton destructivo y borde de errores */

  --error-fondo:    #450a0a;
  --error-texto:    #fecaca;
  --aviso-fondo:    #422006;
  --aviso-borde:    #d97706;
  --aviso-texto:    #fde68a;

  --estado-ok:      #4ade80;
  --estado-error:   #f87171;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  margin: 0;
  padding: 1.25rem;
}

/* --- Tarjeta contenedora ------------------------------------------------- */
.card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--card);
  border-radius: 10px;
  padding: 1.25rem 1.5rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
/* Variante para formularios cortos (login), via el bloque clase_card. */
.card.angosta { max-width: 360px; margin-top: 8vh; }

h1 { font-size: 1.15rem; margin: 0 0 0.5rem; }

/* --- Encabezados de pantalla --------------------------------------------- */
.sesion {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 0.5rem;
  margin-bottom: 0.9rem;
  color: var(--texto-tenue);
  font-size: 0.78rem;
}
.sesion a { color: var(--acento); text-decoration: none; }
.sesion a:hover { text-decoration: underline; }

.paso {
  color: var(--texto-tenue);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

/* Encabezado del login: logo + titulo centrados sobre el formulario. */
.login-encabezado { text-align: center; margin-bottom: 1.2rem; }
.login-encabezado .paso { margin-bottom: 0.15rem; }
.login-encabezado h1 { margin: 0; }
.logo { display: block; width: 76px; height: auto; margin: 0.2rem auto 0.9rem; }

/* --- Formularios ---------------------------------------------------------- */
label { display: block; margin: 0.5rem 0 0.2rem; font-size: 0.8rem; color: var(--texto-label); }
input[type=text], input[type=password], input[type=number] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: var(--fondo);
  color: var(--texto);
  font-size: 0.88rem;
}
fieldset { border: 1px solid var(--borde); border-radius: 8px; margin-top: 0.65rem; padding: 0.4rem 0.75rem 0.6rem; }
legend { color: var(--acento); font-size: 0.75rem; padding: 0 0.4rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 0.6rem; }

/* --- Botones -------------------------------------------------------------- */
button, .btn {
  margin-top: 0.9rem;
  background: var(--boton);
  color: var(--boton-texto);
  border: none;
  padding: 0.55rem 1.3rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.peligro { background: var(--peligro); }
button:disabled { background: var(--boton-off); cursor: not-allowed; }
.secundario { background: transparent; color: var(--texto-tenue); margin-left: 0.75rem; }

/* --- Mensajes ------------------------------------------------------------- */
.errores {
  background: var(--error-fondo); border: 1px solid var(--peligro); border-radius: 8px;
  padding: 0.5rem 0.85rem; margin-bottom: 0.75rem; color: var(--error-texto); font-size: 0.85rem;
}
.aviso {
  background: var(--aviso-fondo); border: 1px solid var(--aviso-borde); border-radius: 8px;
  padding: 0.75rem 1rem; margin: 1rem 0; color: var(--aviso-texto);
}

/* --- Resumen del paso 2 --------------------------------------------------- */
.resumen dt { color: var(--texto-tenue); font-size: 0.85rem; margin-top: 0.6rem; }
.resumen dd { margin: 0.1rem 0 0; font-size: 1rem; }

/* --- Consola en vivo del paso 3 ------------------------------------------- */
#log {
  background: var(--log-fondo);
  border-radius: 8px;
  padding: 1rem;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  height: 420px;
  overflow-y: auto;
  white-space: pre-wrap;
  border: 1px solid var(--borde);
}
.estado { margin-top: 1rem; font-weight: 600; }
.estado.ok { color: var(--estado-ok); }
.estado.error { color: var(--estado-error); }
.estado.corriendo { color: var(--acento); }

/* Acciones del final del paso 3: ocultas hasta que el proceso termina
 * (el JS agrega .visible), para no dejar el display inline en el HTML. */
.acciones { display: none; margin-top: 1rem; }
.acciones.visible { display: block; }