/*
  Estilos base para la aplicación de consulta de alérgenos.
  Se han priorizado tamaños de fuente grandes y un alto contraste para que la interfaz
  sea cómoda de usar en tabletas. Los botones y elementos interactivos cuentan con
  suficiente área de toque y se incluye un enfoque de accesibilidad mediante focos
  visibles al navegar con teclado.
*/

/* Reset mínimo para homogeneizar espacios y márgenes entre navegadores */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #f9f9f9;
  color: #212121;
  line-height: 1.5;
}

/* Encabezado con título y buscador */
header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
  text-align: center;
}

/* Contenedor superior del encabezado con logo, título y botón de avisos */
.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

/* Logo de Hard Rock Cafe Málaga */
.logo {
  height: 50px;
  width: auto;
}

/* Botón de avisos */
#avisosBtn {
  background-color: #ff9800;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}

#avisosBtn:focus {
  outline: 3px solid #2196f3;
  outline-offset: 2px;
}

/* Footer con aviso legal y firma */
footer {
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

footer a {
  color: #1e88e5;
  text-decoration: none;
}

footer .firma {
  margin-top: 1rem;
  font-style: italic;
  font-size: 0.9rem;
}

/* Etiquetas de alérgenos como tags de colores */
.tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  color: #fff;
  font-weight: 600;
}

/* Definir colores específicos para cada alérgeno más común */
.tag.gluten { background-color: #d84315; }
.tag.leche { background-color: #8e24aa; }
.tag.huevos { background-color: #ff7043; }
.tag.soja { background-color: #5e35b1; }
.tag.pescado { background-color: #039be5; }
.tag.crustáceos { background-color: #6d4c41; }
.tag.frutos\ de\ cáscara { background-color: #4e342e; }
.tag.cacahuetes { background-color: #bf360c; }
.tag.mostaza { background-color: #fdd835; color: #000; }
.tag.apio { background-color: #558b2f; }
.tag.sésamo { background-color: #f4511e; }
.tag.sulfito, .tag.sulfitos { background-color: #546e7a; }

/* Estilos para el modal de avisos */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.close-modal {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Carta de plato con foto y contenido */
.plato {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background-color: #fff;
  overflow: hidden;
}

.plato img.plato-foto {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Botón para ver componentes de un ingrediente */
.ver-componentes-btn {
  margin-left: 0.5rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.3rem;
  background-color: #e0e0e0;
  cursor: pointer;
}

/* Lista de componentes desplegable */
.componentes-list {
  margin-top: 0.3rem;
  margin-left: 1rem;
  font-size: 0.85rem;
  list-style: disc;
  color: #555;
}

header h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem; /* Tamaño grande para una lectura cómoda en tablet */
}

header input[type="text"] {
  width: 90%;
  max-width: 600px;
  padding: 0.75rem;
  font-size: 1.1rem;
  border: none;
  border-radius: 0.5rem;
}

/* Navegación por familias */
nav#familiesNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  background-color: #eee;
}

nav#familiesNav button {
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  min-width: 100px;
}

nav#familiesNav button.active {
  background-color: #333;
  color: #fff;
}

/* Contenedor de platos */
main#platosList {
  padding: 1rem;
}

/* Estilos para la sección de filtros de alérgenos */
#filters {
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

#filters fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

#filters legend {
  font-weight: bold;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

#alergenosFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

#alergenosFilters label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1rem;
}

#alergenosFilters input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
}

/* Botón para mostrar solo aptos */
#toggleAptos {
  margin-top: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #2196f3;
  color: #fff;
  cursor: pointer;
}

#toggleAptos.active {
  background-color: #0d47a1;
}

/* Botón para resetear los filtros */
#resetFiltros {
  margin-top: 0.5rem;
  margin-left: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.5rem;
  background-color: #9e9e9e;
  color: #fff;
  cursor: pointer;
}

/* Estilo individual de cada plato */
.plato {
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  background-color: #fff;
  overflow: hidden;
}

/* Estilo para el modo de pruebas rápidas */
#quickTest h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

#profileSelect {
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.4rem;
}

#quickResults ul {
  list-style: none;
  padding-left: 0;
}

#quickResults li {
  margin-bottom: 0.3rem;
}

/* Cabecera del detalle: summary para mostrar el nombre del plato */
.plato summary {
  padding: 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  list-style: none;
}

/* Contenido desplegable con ingredientes y alérgenos */
.plato details {
  background-color: #fafafa;
  padding: 0 1rem 1rem 1rem;
}

/* Etiquetas de aptitud */
.etiqueta {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  font-weight: bold;
}

.etiqueta.apto {
  background-color: #4caf50; /* Verde */
  color: #fff;
}

.etiqueta.aptocambios {
  background-color: #ff9800; /* Naranja */
  color: #fff;
}

.etiqueta.noapto {
  background-color: #f44336; /* Rojo */
  color: #fff;
}

/* Nota informativa para apto con cambios */
.nota {
  font-style: italic;
  margin-bottom: 0.5rem;
  color: #555;
}

/* Accesibilidad: muestra un contorno visible al recibir foco */
button:focus,
input:focus,
summary:focus {
  outline: 3px solid #2196f3;
  outline-offset: 2px;
}