/*
  Archivo: assets/css/styles.css
  Propósito: Estilos específicos de la app para complementar Bootstrap.
  Relación: Usado por index.html; no sobreescribe Bootstrap críticamente.
*/

:root {
  --brand-primary: #4f46e5; /* indigo-600 */
  --brand-secondary: #22c55e; /* green-500 */
  --brand-dark: #0f172a; /* slate-900 */
}

/* Fondo general sutil */
body.app-bg {
  background: radial-gradient(1200px 600px at 10% -10%, #e0e7ff 0%, transparent 50%),
              radial-gradient(1000px 500px at 110% 0%, #dcfce7 0%, transparent 50%),
              #f8fafc;
}

/* Ajustes de componentes */
#preview {
  max-height: 300px; /* limita altura de vista previa */
  object-fit: contain; /* mantiene proporción */
}

#preview[src=""], #preview:not([src]) {
  display: none; /* oculta el ícono roto cuando no hay src */
}

#video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* llena el contenedor ratio */
}

/* Estado/alertas consistentes */
.status-spinner {
  width: 1.25rem;
  height: 1.25rem;
}

/* Lista de pasos */
#stepsList .step-expression {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#processedPreview[src=""], #processedPreview:not([src]) {
  display: none; /* también oculta ícono cuando no haya procesada */
}

/* Navbar branding */
.brand-logo {
  width: 28px;
  height: 28px;
  margin-right: .5rem;
  vertical-align: -4px;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff;
  border-radius: 1rem;
  padding: 1.25rem 1.25rem;
}
.hero .badge {
  background: rgba(255,255,255,.2);
}

/* Botón gradiente */
.btn-gradient {
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border: 0;
  color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(79,70,229,.25);
}
.btn-gradient:hover { filter: brightness(1.05); color: #fff; }

/* Tarjetas sutiles */
.card.shadow-sm { box-shadow: 0 .25rem .75rem rgba(2,6,23,.08) !important; }

/* Footer */
.site-footer {
  background: #0b1220;
  color: #cbd5e1;
}
.site-footer a { color: #a5b4fc; text-decoration: none; }
.site-footer a:hover { color: #86efac; text-decoration: underline; }