/* Estilos del buscador publico Hermes. Migrados desde vento.html.
 * Tema oscuro intacto: pasillos 1..7, estantes 1..14 (7 izq + 7 der),
 * estante frontal 5 niveles x 7 secciones, chat en la parte inferior.
 */

:root {
  --bg-color: #121212;
  --panel-bg: #1e1e1e;
  --text-color: #ffffff;
  --led-off: #333333;
  --led-on: #00ff00;
  --led-warn: #ffaa00;
  --led-error: #ff4444;
  --accent: #007bff;
}

* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 95vh;
}

h1 { text-align: center; margin-top: 0; font-size: 24px; }

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
  align-items: start;
}

.map-panel, .shelf-panel {
  width: 100%;
  min-width: 0;
  background: var(--panel-bg);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Vista de Pasillos y Estantes */
.aisles-container {
  display: flex;
  gap: 15px;
  margin-top: 10px;
  width: 100%;
  min-height: 320px;
  justify-content: center;
  overflow-x: auto;
}
.aisle-wrapper { display: flex; gap: 3px; height: 100%; }
.shelf-column { display: flex; flex-direction: column; gap: 3px; justify-content: space-between; }
.mini-shelf {
  width: 15px; height: 42px; background: var(--led-off); border-radius: 2px; transition: all 0.3s;
}
.mini-shelf.active { background: var(--led-on); box-shadow: 0 0 10px var(--led-on); }
.walkway {
  width: 20px; background: #222; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; font-size: 11px; color: #666; font-weight: bold; transition: all 0.3s;
}
.walkway.active { background: rgba(0, 255, 0, 0.15); border: 1px solid var(--led-on); color: var(--led-on); }

/* Vista frontal del Estante */
.shelf-grid {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  background: #222;
  padding: 15px;
  border: 4px solid #444;
  border-radius: 5px;
  width: 100%;
  max-width: 500px;
  height: 280px;
  margin-top: 15px;
}
.section {
  background: var(--led-off);
  border-radius: 3px;
  transition: background 0.3s, box-shadow 0.3s;
  display: flex; justify-content: center; align-items: center;
  font-size: 10px; color: #555;
}
.section.active { background: var(--led-on); box-shadow: 0 0 15px var(--led-on); color: #000; font-weight: bold; }
.section.warn  { background: var(--led-warn); box-shadow: 0 0 15px var(--led-warn); color: #000; font-weight: bold; }

/* Chat */
.chat-panel {
  height: 320px;
  min-height: 280px;
  background: var(--panel-bg);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-history { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.msg { padding: 10px 15px; border-radius: 10px; max-width: 85%; line-height: 1.4; font-size: 14px; word-wrap: break-word; }
.msg.user { background: var(--accent); align-self: flex-end; }
.msg.hermes { background: #333; align-self: flex-start; border-left: 4px solid var(--led-on); }
.msg.hermes.agotado { border-left-color: var(--led-error); }
.msg.hermes.no-encontrado { border-left-color: var(--led-warn); }
.chat-input { display: flex; padding: 15px; background: #111; gap: 10px; }
.chat-input input { flex: 1; padding: 12px; border: none; border-radius: 5px; background: #222; color: white; font-size: 15px; }
.chat-input button {
  padding: 10px 25px; background: var(--led-on); color: black; border: none; border-radius: 5px;
  font-weight: bold; cursor: pointer; transition: 0.2s;
}
.chat-input button:hover { background: #00cc00; }
.chat-input button:disabled { background: #555; color: #999; cursor: wait; }

/* Producto en el Chat */
.product-card {
  display: flex; gap: 15px; background: #222; padding: 10px; border-radius: 8px;
  margin-top: 10px; border: 1px solid #444;
}
.product-card img { width: 70px; height: 70px; object-fit: cover; border-radius: 5px; background: #fff; }
.product-info h4 { margin: 0 0 5px 0; color: var(--led-on); font-size: 14px; }
.product-info p { margin: 2px 0; font-size: 13px; color: #ccc; }

/* -----------------------------------------------------------------------------
 * Header compartido (partials/header.ejs)
 * -------------------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  margin: -20px -20px 20px -20px;
  background: var(--panel-bg);
  border-bottom: 1px solid #333;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-color);
  text-decoration: none;
  font-weight: bold;
  font-size: 18px;
}
.brand-icon { width: 24px; height: 24px; fill: var(--led-on); }
.site-nav { flex: 1; }
.site-actions { display: flex; align-items: center; gap: 10px; }
.btn-header {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #444;
  background: transparent;
  color: #ccc;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
  font-family: inherit;
}
.btn-header:hover { border-color: var(--led-on); color: var(--led-on); }
.btn-header-primary { border-color: var(--led-on); color: var(--led-on); }
.btn-header-primary:hover { background: var(--led-on); color: #000; }
.logout-form { display: inline-block; margin: 0; }
.page-title { text-align: center; margin: 0 0 20px 0; font-size: 22px; }

/* -----------------------------------------------------------------------------
 * Responsividad
 * En viewports <= 768px apilamos los paneles del home para que no se compriman.
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  body {
    padding: 10px;
  }

  .site-header {
    padding: 10px 12px;
    margin: -10px -10px 15px -10px;
    gap: 10px;
  }
  .brand-text { font-size: 16px; }
  .btn-header { padding: 6px 10px; font-size: 12px; }

  .container {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .map-panel, .shelf-panel {
    padding: 15px;
  }

  .aisles-container {
    gap: 6px;
    min-height: 220px;
    justify-content: center;
  }

  .shelf-column { gap: 2px; }

  .mini-shelf {
    width: 8px;
    height: 28px;
  }

  .walkway {
    width: 10px;
    font-size: 7px;
  }

  .shelf-grid {
    height: 220px;
    max-width: 100%;
    padding: 10px;
    gap: 5px;
  }

  .section {
    font-size: 9px;
  }

  .chat-panel {
    height: 260px;
  }

  .chat-input button {
    padding: 10px 18px;
  }
}

@media (max-width: 360px) {
  .aisles-container { gap: 4px; }
  .mini-shelf { width: 6px; height: 24px; }
  .walkway { width: 8px; font-size: 6px; }
  .brand-text { font-size: 14px; }
  .btn-header { padding: 5px 8px; font-size: 11px; }
}