/*[03] INCIO - componentes reutilizables*/
/*aqui iran estilos de botones, etiquetas, tarjetas e inputs*/
/*por ahora dejamos este archivo preparado*/
/*despues aqui agregaremos clases como .btn, .etiqueta, y .tarjeta*/

/* [07] INICIO - Diseño del componente etiqueta */
/* Este bloque diseña cualquier elemento que tenga class="etiqueta" */

.etiqueta {
  /* Convierte el span en una cajita que respeta padding y margen */
  display: inline-block;

  /* Agrega espacio interno arriba/abajo y a los lados */
  padding: 6px 12px;

  /* Redondea completamente las esquinas */
  border-radius: 999px;

  /* Define el color de fondo de la etiqueta */
  background-color: #dcfce7;

  /* Define el color del texto */
  color: #166534;

  /* Hace que el texto se vea más fuerte */
  font-weight: bold;

  /* Define el tamaño del texto */
  font-size: 14px;

  /* Separa la etiqueta del título */
  margin-top: 10px;
}

/* [07] FIN - Diseño del componente etiqueta */

/* [09] INICIO - Diseño del componente botón */
/* Este bloque diseña botones reutilizables para toda la interfaz */

/* Esta clase será la base para todos los botones */
.btn {
  /* Quita el borde que el navegador pone por defecto */
  border: none;

  /* Agrega espacio interno arriba/abajo y a los lados */
  padding: 10px 16px;

  /* Redondea las esquinas del botón */
  border-radius: 10px;

  /* Cambia el cursor a una manita cuando pasas encima */
  cursor: pointer;

  /* Hace que el texto se vea más fuerte */
  font-weight: bold;

  /* Define el tamaño del texto */
  font-size: 15px;

  /* Agrega separación arriba para que no quede pegado a la etiqueta */
  margin-top: 15px;
}

/* Esta clase será una variante visual para botones importantes */
.btn-principal {
  /* Define el color de fondo del botón principal */
  background-color: #22c55e;

  /* Define el color del texto */
  color: #052e16;
}

/* Esta regla cambia el color cuando el mouse pasa encima del botón principal */
.btn-principal:hover {
  /* Oscurece un poco el botón al pasar el mouse */
  background-color: #16a34a;
}

/* [09] FIN - Diseño del componente botón */


/* [15] INICIO - Diseño del componente tarjeta */
/* Este bloque diseña tarjetas reutilizables para mostrar información */

/* Esta clase diseña la caja principal de una tarjeta */
.tarjeta {
  /* Define el color de fondo de la tarjeta */
  background-color: white;

  /* Redondea las esquinas de la tarjeta */
  border-radius: 16px;

  /* Agrega un borde suave alrededor de la tarjeta */
  border: 1px solid #e5e7eb;

  /* Agrega una sombra ligera para que la tarjeta resalte */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

  /* Evita que el contenido se salga de las esquinas redondeadas */
  overflow: hidden;

  /* Hace que la tarjeta use todo el espacio disponible de su columna */
  width: 100%;
}

/* Esta clase controla el espacio interno de la tarjeta */
.tarjeta-contenido {
  /* Agrega espacio interno para que el texto no quede pegado a las orillas */
  padding: 22px;
}

/* Esta regla diseña el título dentro de cada tarjeta */
.tarjeta h3 {
  /* Agrega separación arriba y abajo del título */
  margin: 14px 0 10px;

  /* Define el tamaño del título de la tarjeta */
  font-size: 22px;

  /* Define el color del título */
  color: #111827;
}

/* Esta regla diseña el párrafo dentro de cada tarjeta */
.tarjeta p {
  /* Define el color del texto descriptivo */
  color: #4b5563;

  /* Mejora la lectura agregando espacio entre líneas */
  line-height: 1.5;

  /* Agrega separación debajo del párrafo */
  margin-bottom: 16px;
}

/* [15] FIN - Diseño del componente tarjeta */

/* [20] INICIO - Diseño del input de búsqueda */
/* Este bloque diseña el campo donde el usuario escribirá su búsqueda */

/* Esta clase diseña el input de búsqueda */
.input-busqueda {
  /* Hace que el input use todo el espacio disponible dentro de su contenedor */
  width: 100%;

  /* Agrega espacio interno para que el texto no quede pegado */
  padding: 12px 14px;

  /* Agrega un borde suave alrededor del input */
  border: 1px solid #d1d5db;

  /* Redondea las esquinas del input */
  border-radius: 10px;

  /* Define el tamaño del texto dentro del input */
  font-size: 15px;

  /* Quita el contorno feo que algunos navegadores ponen por defecto */
  outline: none;
}

/* Esta regla se activa cuando el usuario da clic dentro del input */
.input-busqueda:focus {
  /* Cambia el color del borde para indicar que el input está activo */
  border-color: #22c55e;

  /* Agrega una sombra verde suave alrededor del input */
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* [20] FIN - Diseño del input de búsqueda */

/* [23] INICIO - Diseño del mensaje sin resultados */
/* Este bloque diseña el mensaje que aparece cuando el buscador no encuentra coincidencias */

.mensaje-sin-resultados {
  /* Oculta el mensaje por defecto */
  display: none;

  /* Agrega separación arriba para que no quede pegado a las tarjetas */
  margin-top: 18px;

  /* Agrega espacio interno al mensaje */
  padding: 14px 16px;

  /* Redondea las esquinas del mensaje */
  border-radius: 12px;

  /* Define un fondo rojo claro para indicar aviso */
  background-color: #fef2f2;

  /* Define el color del texto */
  color: #991b1b;

  /* Hace que el texto se vea más fuerte */
  font-weight: bold;
}

/* Esta clase se agregará con JavaScript cuando no existan resultados */
.mensaje-sin-resultados.visible {
  /* Muestra el mensaje en pantalla */
  display: block;
}

/* [23] FIN - Diseño del mensaje sin resultados */

/* [31] INICIO - Diseño de detalles dentro de la tarjeta */
/* Este bloque diseña la lista de información extra dentro de cada tarjeta */

.tarjeta-detalles {
  /* Coloca los detalles uno debajo del otro */
  display: flex;

  /* Cambia la dirección de los elementos a columna */
  flex-direction: column;

  /* Agrega separación entre cada línea de detalle */
  gap: 6px;

  /* Agrega separación arriba y abajo respecto al texto y botón */
  margin: 14px 0;

  /* Agrega espacio interno para separar los detalles */
  padding: 12px;

  /* Define un fondo suave para diferenciar los detalles */
  background-color: #f9fafb;

  /* Redondea las esquinas del bloque de detalles */
  border-radius: 12px;

  /* Agrega un borde suave */
  border: 1px solid #e5e7eb;
}

.tarjeta-detalles span {
  /* Define el tamaño del texto de los detalles */
  font-size: 14px;

  /* Define el color del texto */
  color: #374151;
}

/* [31] FIN - Diseño de detalles dentro de la tarjeta */

/* [33] INICIO - Diseño visual de estados */
/* Este bloque diseña los estados que aparecen dentro de las tarjetas */

/* Esta clase base diseña cualquier estado */
.estado {
  /* Hace que el estado se comporte como una etiqueta pequeña */
  display: inline-block;

  /* Agrega espacio interno al estado */
  padding: 4px 8px;

  /* Redondea las esquinas del estado */
  border-radius: 999px;

  /* Define el tamaño del texto */
  font-size: 13px;

  /* Hace que el texto se vea más fuerte */
  font-weight: bold;
}

/* Estado para elementos disponibles */
.estado-disponible {
  /* Fondo verde claro */
  background-color: #dcfce7;

  /* Texto verde oscuro */
  color: #166534;
}

/* Estado para puestos abiertos */
.estado-abierto {
  /* Fondo azul claro */
  background-color: #dbeafe;

  /* Texto azul oscuro */
  color: #1d4ed8;
}

/* Estado para productos en stock */
.estado-stock {
  /* Fondo verde claro */
  background-color: #d1fae5;

  /* Texto verde oscuro */
  color: #047857;
}

/* Estado para elementos cerrados */
.estado-cerrado {
  /* Fondo gris claro */
  background-color: #e5e7eb;

  /* Texto gris oscuro */
  color: #374151;
}

/* Estado para productos agotados */
.estado-agotado {
  /* Fondo rojo claro */
  background-color: #fee2e2;

  /* Texto rojo oscuro */
  color: #991b1b;
}

/* Estado neutral por si no coincide con ninguno */
.estado-neutral {
  /* Fondo amarillo claro */
  background-color: #fef3c7;

  /* Texto amarillo oscuro */
  color: #92400e;
}

/* [33] FIN - Diseño visual de estados */

/* [38] INICIO - Variantes visuales de tarjetas */
/* Este bloque diferencia visualmente tarjetas de tianguis, puestos y productos */

/* Esta clase acomoda el icono y la etiqueta dentro de la tarjeta */
.tarjeta-encabezado {
  /* Coloca el icono y la etiqueta en una misma fila */
  display: flex;

  /* Centra verticalmente el icono y la etiqueta */
  align-items: center;

  /* Agrega separación entre icono y etiqueta */
  gap: 10px;

  /* Agrega separación debajo del encabezado */
  margin-bottom: 12px;
}

/* Esta clase diseña el icono visual de cada tarjeta */
.tarjeta-icono {
  /* Define el tamaño del icono */
  font-size: 28px;

  /* Hace que el icono tenga un espacio fijo */
  width: 42px;

  /* Hace que el icono tenga altura fija */
  height: 42px;

  /* Centra el icono horizontalmente */
  display: flex;

  /* Centra el icono verticalmente */
  align-items: center;

  /* Centra el contenido dentro del cuadro */
  justify-content: center;

  /* Redondea las esquinas del fondo del icono */
  border-radius: 12px;

  /* Define un fondo suave por defecto */
  background-color: #f3f4f6;
}

/* Variante visual para tarjetas de tianguis */
.tarjeta-tianguis {
  /* Agrega una línea superior verde para identificar tianguis */
  border-top: 5px solid #22c55e;
}

/* Variante visual para tarjetas de puestos */
.tarjeta-puesto {
  /* Agrega una línea superior azul para identificar puestos */
  border-top: 5px solid #3b82f6;
}

/* Variante visual para tarjetas de productos */
.tarjeta-producto {
  /* Agrega una línea superior morada para identificar productos */
  border-top: 5px solid #8b5cf6;
}

/* Cambia el fondo del icono en tarjetas de tianguis */
.tarjeta-tianguis .tarjeta-icono {
  /* Define un fondo verde claro */
  background-color: #dcfce7;
}

/* Cambia el fondo del icono en tarjetas de puestos */
.tarjeta-puesto .tarjeta-icono {
  /* Define un fondo azul claro */
  background-color: #dbeafe;
}

/* Cambia el fondo del icono en tarjetas de productos */
.tarjeta-producto .tarjeta-icono {
  /* Define un fondo morado claro */
  background-color: #ede9fe;
}

/* [38] FIN - Variantes visuales de tarjetas */

/* [39] INICIO - Variantes reutilizables de botones */
/* Este bloque crea diferentes estilos de botones para distintas acciones */

/* Esta clase sirve para botones secundarios, como cancelar, regresar o ver detalles */
.btn-secundario {
  /* Define un fondo claro para que el botón no compita con el principal */
  background-color: #e5e7eb;

  /* Define un color oscuro para que el texto sea legible */
  color: #111827;
}

/* Esta regla cambia el botón secundario cuando el usuario pasa el mouse encima */
.btn-secundario:hover {
  /* Oscurece un poco el fondo para indicar interacción */
  background-color: #d1d5db;
}

/* Esta clase sirve para acciones peligrosas, como eliminar o borrar */
.btn-peligro {
  /* Define un fondo rojo para indicar cuidado */
  background-color: #ef4444;

  /* Define el texto en blanco para buen contraste */
  color: white;
}

/* Esta regla cambia el botón de peligro cuando el usuario pasa el mouse encima */
.btn-peligro:hover {
  /* Oscurece el rojo para indicar interacción */
  background-color: #dc2626;
}

/* [39] FIN - Variantes reutilizables de botones */

/* [41] INICIO - Acomodo de botones dentro de la tarjeta */
/* Este bloque acomoda los botones que aparecen dentro de cada tarjeta */

/* Esta clase agrupa los botones de acción dentro de una tarjeta */
.tarjeta-acciones {
  /* Coloca los botones en fila */
  display: flex;

  /* Permite que los botones bajen si no caben */
  flex-wrap: wrap;

  /* Agrega separación entre botones */
  gap: 10px;

  /* Agrega separación arriba respecto a los detalles */
  margin-top: 16px;
}

/* Esta regla ajusta los botones dentro de tarjeta-acciones */
.tarjeta-acciones .btn {
  /* Quita el margen superior que trae el botón general */
  margin-top: 0;
}

/* [41] FIN - Acomodo de botones dentro de la tarjeta */

/*[03 FIN - componentes reutilizables]*/