/* ========== MAIN.CSS OPTIMIZADO ========== */
/* Nota: Variables movidas a variables.css */

/* ========== FONDO Y TIPOGRAFÍA ========== */
body {
  font-family: var(--font-family);
  background: linear-gradient(135deg, #e0eafc, #cfdef3);
  margin: 0;
  padding: var(--spacing-lg);
}

/* ========== HEADER INDEPENDIENTE ========== */
header.encabezado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.header-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.header-text {
  text-align: left;
}

header.encabezado h1 {
  font-size: var(--font-size-2xl);
  margin: 0;
  font-weight: 600;
  color: var(--text-primary);
}

header.encabezado p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: var(--spacing-xs) 0 0;
}

/* ========== CENTRAR MAIN Y CONTENEDOR ========== */
main {
  max-width: 900px;
  width: 100%;
  margin: 0 auto var(--spacing-xl);
  box-sizing: border-box;
}

.container {
  background: var(--bg-primary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-3xl);
  box-sizing: border-box;
  box-shadow: var(--box-shadow);
}

/* ========== LISTA VERTICAL DE PASOS ========== */
.pasos {
  list-style: none;
  margin: 0 0 var(--spacing-md);
  padding: 0;
  /* MODIFICACIÓN 2: Reducir padding-bottom de 20px a 12px */
  padding-bottom: 12px;
  border-bottom: 2px dashed #d1d5db;
  /* MODIFICACIÓN 2: Reducir margin-bottom de 30px a 18px */
  margin-bottom: 18px;
  /* MODIFICACIÓN 1: Grid 2x3 con orden específico */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--spacing-xs);
}

/* MODIFICACIÓN 1: Orden específico de pasos 1,2,3 en primera columna y 4,5,6 en segunda */
.pasos li:nth-child(1) { grid-column: 1; grid-row: 1; }
.pasos li:nth-child(2) { grid-column: 1; grid-row: 2; }
.pasos li:nth-child(3) { grid-column: 1; grid-row: 3; }
.pasos li:nth-child(4) { grid-column: 2; grid-row: 1; }
.pasos li:nth-child(5) { grid-column: 2; grid-row: 2; }
.pasos li:nth-child(6) { grid-column: 2; grid-row: 3; }

.pasos li {
  font-size: var(--font-size-base);
  margin: 0;
  padding-left: 18px;
  position: relative;
  color: var(--text-muted);
}

.pasos li::before {
  content: '';
  width: 8px; 
  height: 8px;
  border-radius: 50%;
  position: absolute;
  left: 0; 
  top: 6px;
  background: var(--gray-color);
}

.pasos li.activo {
  font-weight: 600;
  color: var(--text-primary);
}

.pasos li.activo::before {
  background: var(--success-color);
}

/* ========== SECCIONES ========== */
.seccion {
  display: none;
}

.seccion.activa {
  display: block;
}

/* ========== TÍTULOS DE SECCIÓN ========== */
.seccion h2 {
  font-size: 1.4em;
  margin-bottom: var(--spacing-lg);
  color: var(--text-primary);
  font-weight: 600;
}

/* ========== BOTONES BASE ========== */
.btn-blue,
#btnAdd,
.btn-green {
  display: block;
  width: 100%;
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  box-sizing: border-box;
  margin: 0 0 var(--spacing-lg) 0;
  transition: all var(--transition);
  font-weight: 600;
}

.btn-blue,
#btnAdd {
  background: #1890ff;
  color: var(--text-inverse);
}

.btn-blue:hover,
#btnAdd:hover {
  background: #147cd8;
  transform: translateY(-1px);
}

.btn-green {
  background: var(--success-color);
  color: var(--text-inverse);
  margin-bottom: 0;
}

.btn-green:hover {
  background: var(--success-hover);
  transform: translateY(-1px);
}

.btn-green:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ========== BOTONES EN FILA ========== */
.btn-orange,
.btn-gray {
  flex: 1;
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  box-sizing: border-box;
  transition: all var(--transition);
  font-weight: 600;
}

.btn-orange { 
  background: var(--warning-color); 
  color: var(--text-inverse); 
}

.btn-gray { 
  background: var(--gray-color); 
  color: var(--text-primary); 
}

.btn-orange:hover { 
  background: var(--warning-hover);
  transform: translateY(-1px);
}

.btn-gray:hover { 
  background: var(--gray-hover);
  transform: translateY(-1px);
}

/* ========== FILAS DE BOTONES ========== */
.button-row {
  display: flex;
  gap: var(--spacing-sm);
  margin: var(--spacing-lg) 0 0 0;
}

.button-row > button {
  flex: 1;
  min-width: 0;
}

/* ========== CONTENEDOR DE PRESUPUESTO ========== */
#presupuesto {
  margin-top: var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

#presupuesto .archivo {
  margin-bottom: var(--spacing-sm);
}

#presupuesto .envio,
#presupuesto .total {
  margin: var(--spacing-sm) 0;
}

hr.dash-sep {
  border: none;
  border-top: 1px dashed #aaa;
  margin: var(--spacing-md) 0;
}

/* ========== ELEMENTOS ESPECÍFICOS DEL INDEX ========== */

/* Texto de ayuda de archivos */
.file-help-text {
  display: block;
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  color: #6c757d;
  font-size: 0.9em;
}

/* Prevent asterisk after form labels */
.form-label::after {
  content: none !important;
}

/* Remover spinner de botones específicos */
.btn-no-spinner:disabled::after {
  display: none !important;
}

/* Success message styles */
.success-message {
  text-align: center;
}

.success-content {
  text-align: center;
}

.success-content h2 {
  font-size: 17px;
  margin: 0 0 15px 0;
  color: var(--text-primary);
}

.success-content h3 {
  text-align: center;
  /* MODIFICACIÓN 2: Reducir margen inferior de 15px a 10px */
  margin: 0 0 10px 0;
  font-size: 1.4em;
  color: #000000 !important;
}

.success-content p {
  /* MODIFICACIÓN 2: Alineado a la izquierda y color negro */
  text-align: left;
  margin: 8px 0;
  font-size: 1.1em;
  line-height: 1.4;
  font-weight: normal;
  color: #000000;
}

/* MODIFICACIÓN 4: Solo mantener negrita en elementos strong */
.success-content p strong {
  font-weight: bold;
}

/* Código a la izquierda y negro */
#codigoCompra {
  /* MODIFICACIÓN 2: Cambiar de left a right */
  text-align: right !important;
  font-weight: bold;
  font-size: 1.1em;
  color: #000000 !important;
  /* MODIFICACIÓN 2: Reducir margen para menor interlineado */
  margin: 8px 0 16px 0;
}

.success-icon {
  font-size: 2.2em;
  margin-bottom: 12px;
  line-height: 1.1;
}

/* Download button */
.download-btn-wrapper {
  text-align: center;
  margin: 22px 0 27px 0;
}

.download-btn {
  margin: 0 auto !important;
  width: 50%;
  max-width: 250px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px !important;
  min-height: 48px;
}

.download-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.download-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.2;
}

.download-title {
  font-weight: 600;
}

.download-sub {
  font-weight: 400;
  font-size: 0.9em;
}

/* Notice para campos requeridos */
.required-fields-notice {
  text-align: center;
  margin: 20px 0 10px 0;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.form-note {
  margin-top: 15px;
}

/* ========== FOOTER ========== */
.site-footer {
  margin: 25px calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg));
  padding: 12px 15px;
  background: #f8f9fa;
  text-align: center;
  border-top: 1px solid #e9ecef;
  font-size: 0.82em;
  color: #9ca3af;
}

.site-footer a {
  color: #6b7280;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--primary-color);
}

.site-footer a[href^="mailto:"] {
  text-decoration: underline;
}

.site-footer .sep {
  margin: 0 6px;
}

.site-footer .sep-sm {
  margin: 0 4px;
}

/* Security notice for payment */
.security-notice {
  text-align: left;
  color: #000000;
  font-weight: 600;
  margin-bottom: 20px;
  padding: 12px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #e0f2fe;
}

/* ========== PROGRESS BAR STYLES - REMOVED ========== */
/* Progress bar functionality eliminated for consistency */

/* Estructura de archivos */
.file-header {
  margin-bottom: 8px;
}

.file-controls {
  display: grid;
  grid-template-columns: 100px 100px repeat(3, 1fr) auto;
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
}

/* Mobile: file controls in single column */
@media (max-width: 600px) {
  .file-controls {
    grid-template-columns: 1fr 1fr;
  }
}

/* Estilos para estados de cola - SOLUCIÓN DEFINITIVA */
.processing-status {
  font-weight: 500;
  white-space: nowrap;
  overflow: visible;
  /* Ahora puede ocupar todo el ancho del header sin restricciones */
  width: 100% !important;
  margin-top: 5px;
  margin-bottom: 0;
  display: block !important;
  font-size: 0.85em !important;
  border-radius: 6px;
  padding: 8px 12px !important;
  border: 1px solid transparent;
  box-sizing: border-box;
}

/* Estados específicos */
.processing-completed {
  color: #155724;
  background: #d4edda;
  border: 1px solid #c3e6cb;
}

.processing-active {
  color: #0d47a1;
  background: #e3f2fd;
  border: 1px solid #90caf9;
}

.processing-queued {
  color: #f57c00;
  background: #fff8e1;
  border: 1px solid #ffcc02;
}

.processing-error {
  color: #c62828;
  background: #ffebee;
  border: 1px solid #ef5350;
}

.processing-skipped {
  color: #f57c00;
  background: #fff3e0;
  border: 1px solid #ffb74d;
}

/* ========== RESPONSIVE PARA MÓVILES ========== */
@media (max-width: 600px) {
  /* MODIFICACIÓN 1: En móviles mantener una sola columna */
  .pasos {
    display: block; /* Volver a lista vertical en móviles */
  }
  
  .pasos li {
    margin: var(--spacing-xs) 0; /* Restaurar márgen en móviles */
  }
  
  /* Progress bar responsive rules removed */
}