/*
components.css
Estilos de componentes reutilizables en todo el sistema.
Cada componente es independiente del layout y puede usarse
en cualquier vista sin modificaciones.

Componentes actuales:
- Botones (.btn)
- Badges de estado (.badge)
*/

/*
BOTONES
Sistema de botones con clase base + modificadores.

Cómo se usa:
Siempre se combinan: clase base + modificador de variante.
Opcionalmente se agrega un modificador de tamaño.

Ejemplos:
<button class="btn btn--primary">Guardar</button>
<button class="btn btn--secondary">Cancelar</button>
<button class="btn btn--primary btn--sm">Ver</button>
<button class="btn btn--primary" disabled>No disponible</button>
*/

/* Estilos base compartidos por todos los botones.
   Nunca se usa solo, siempre acompañado de un modificador. */
.btn {
  display: inline-flex;       /* En línea pero con flexbox interno */
  align-items: center;        /* Centra verticalmente ícono y texto */
  gap: var(--space-2);        /* Espacio entre ícono y texto si los hay */

  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);

  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap; /* El texto nunca salta de línea */

  cursor: pointer;
  transition: background-color var(--transition),
              color var(--transition),
              border-color var(--transition);
}

/* Botón primario: fondo azul sólido.
Para acciones principales como "Nueva cotización". */
.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
  margin: var(--space-2) 0; /* Margen vertical para separar botones apilados */
}

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

/* Botón secundario: borde con fondo transparente.
Para acciones secundarias como "Cancelar" o "Ver". */
.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn--secondary:hover {
  background-color: var(--color-bg);
}

/* Modificador de tamaño pequeño.
Se combina con cualquier variante para usarlo en tablas.
Ejemplo: class="btn btn--secondary btn--sm" */
.btn--sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  padding: 6px var(--space-4); /* Ajuste de padding para mejor apariencia */
}

/* Estado deshabilitado.
Se activa con el atributo HTML "disabled" en el botón.
opacity: 0.45 lo hace ver apagado visualmente.
cursor: not-allowed muestra que no se puede hacer clic.
pointer-events: none asegura que no reaccione al hover. */
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}


/*
BADGES DE ESTADO
Pastillas de color para mostrar estados en tablas.
Se usan en la columna Estado de cada vista tipo lista.

Cómo se usa:
Siempre se combinan: clase base + modificador de color.

Ejemplos:
<span class="badge badge--success">Aprobada</span>
<span class="badge badge--warning">Pendiente</span>
<span class="badge badge--danger">Rechazada</span>
*/

/* Estilos base del badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: 9999px; /* Valor alto que produce forma de cápsula */
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Verde — aprobado, completado, activo */
.badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
}

/* Amarillo — pendiente, en revisión, en proceso */
.badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Rojo — rechazado, anulado, error */
.badge--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
}

/*
DROPDOWN — Selector de base de datos:
Vive en la navbar principal.
El menú empieza oculto y se muestra cuando JS agrega
la clase --open al contenedor .navbar__db-selector
*/

/* Contenedor principal del dropdown.
position: relative es el punto de referencia para
que el menú se posicione justo debajo del botón. */
.navbar__db-selector {
  position: relative;
}

/* Botón que abre y cierra el dropdown.
Mismo tamaño que el avatar para consistencia visual. */
.navbar__dropdown-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.navbar__dropdown-btn:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* El menú desplegable.
position: absolute lo saca del flujo normal y lo
posiciona respecto al contenedor con position: relative.
Empieza oculto con display: none.
z-index: 100 lo pone por encima de todo el contenido. */
.navbar__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);  /* 100% = justo debajo del botón + 8px de separación */
  right: 0; /*Abre desde el extremo superior derecho*/
  min-width: 180px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 100;
  overflow: hidden;
}

/* Cuando el contenedor tiene la clase --open,
el menú se hace visible.
JS agrega y quita esta clase al hacer clic en el botón. */
.navbar__db-selector--open .navbar__dropdown-menu {
  display: block;
}

/* Cada enlace del menú */
.navbar__dropdown-menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background-color var(--transition);
}

.navbar__dropdown-menu a:hover {
  background-color: var(--color-bg);
}

/* Formularios:
Estilos base para campos de formulario.
El layout (columna o fila) se define cuando llegue
el requerimiento específico. */

/* Formulario de cotización */
.form-cotizacion {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 480px;
}

/* Devolvemos el botón a su posición original */
.form-cotizacion .btn {
  align-self: flex-start;
}

/* Contenedor del grupo label + input */
.form-group {
  display: flex;
  align-items: column;
  gap: var(--space-2);
  flex-direction: column;
}

/* Label del campo */
.form-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Input de texto */
.form-input {
  height: 24px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}