/* assets/css/style.css */

/* ====== Logo ====== */
.logo {
  display: block;
  margin: 0 auto 1rem auto;
  max-width: 180px;   /* controla tamaño del logo */
  height: auto;
}

/* ====== Contenedor principal ====== */
.cotizador {
  padding: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* ====== Formulario ====== */
form#form-cotizar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

form#form-cotizar > input,
form#form-cotizar > select {
  flex: 1 1 220px;
  min-width: 180px;
}

.botones-acciones,
.botones-exportar {
  display: flex;
  gap: 0.75rem;
}

.botones-exportar {
  margin-top: 0.5rem;
}

.botones-exportar button {
  flex: 1 1 240px;
}

/* ====== Contenedores de resultados ====== */
.table-responsive {
  overflow-x: auto;
  margin-top: 1rem;
}

/* ====== Tabla (desktop) ====== */
#resultados table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  /* IMPORTANTE: permitir que el modelo se expanda */
  table-layout: auto;
}

#resultados th,
#resultados td {
  padding: 0.55rem 0.75rem;
  border: 1px solid #e5e5e5;
  background-clip: padding-box;
  vertical-align: middle;    /* centrado vertical */
  white-space: normal;       /* permite saltos de línea */
  word-break: break-word;    /* corta palabras largas si es necesario */
  text-align: center;        /* default centrado */
}

#resultados th {
  background: #f7f7f7;
  font-weight: 600;
}

/* Icono fijo angosto */
#resultados th[data-field="icono"],
#resultados td:nth-child(1) {
  width: 60px;
  white-space: nowrap;
}

/* Modelo: ocupa el espacio sobrante y alineado a la izquierda */
#resultados th[data-field="modelo"],
#resultados td:nth-child(2) {
  text-align: left;
  width: auto;               /* que crezca */
}

/* Medida, Precio y Stock con ancho cómodo */
#resultados th[data-field="medida"],
#resultados td:nth-child(3) { width: 120px; }

#resultados th[data-field="precio"],
#resultados td:nth-child(4) { width: 120px; }

#resultados th[data-field="stock"],
#resultados td:nth-child(5) { width: 90px; }

/* ====== Cards (móvil) ====== */
.card-result {
  display: none;             /* ocultas por defecto en desktop */
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 0.75rem;
  background: #fff;
  margin-top: 0.5rem;
}

.card-result strong {
  display: block;
  margin: 0.25rem 0 0.1rem 0;
}

/* ====== Inputs y botones ====== */
.cotizador input,
.cotizador select,
.cotizador button {
  font-size: 1rem;
}

#form-cotizar button[type="submit"] {
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

#clear-filters {
  background-color: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

#export-xlsx,
#export-pdf {
  background-color: #28a745;
  color: #fff;
  border: 1px solid #28a745;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

/* ====== Global ====== */
body {
  font-family: Arial, Helvetica, sans-serif;
  background: #fafafa;
  color: #333;
  line-height: 1.45;
  margin: 0;
}

/* Accesibilidad: labels ocultos para lectores de pantalla */
label.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ====== Responsive ====== */
@media (max-width: 600px) {
  /* En móvil mostramos cards y ocultamos tabla */
  #resultados table { display: none; }
  .card-result { display: block; }
}