:root {
  --rojo: #c0392b;
  --rojo-oscuro: #922b21;
  --gris-fondo: #f4f4f4;
  --gris-borde: #ddd;
  --verde: #27ae60;
  --texto: #222;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--gris-fondo);
  color: var(--texto);
}

header.barra {
  background: var(--rojo);
  color: white;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

header.barra a { color: white; text-decoration: none; }
header.barra .marca { font-weight: bold; font-size: 1.2em; }
header.barra nav a { margin-left: 16px; opacity: 0.9; }
header.barra nav a:hover { opacity: 1; text-decoration: underline; }

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.tarjeta {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

h1, h2, h3 { margin-top: 0; }

.login-caja {
  max-width: 360px;
  margin: 80px auto;
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9em; }

input[type=text], input[type=password], input[type=date], input[type=number], select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 1em;
}

button, .boton {
  background: var(--rojo);
  color: white;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 1em;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .boton:hover { background: var(--rojo-oscuro); }
button.secundario, .boton.secundario { background: #7f8c8d; }
button.verde, .boton.verde { background: var(--verde); }

.error { color: var(--rojo); margin-bottom: 12px; }
.ok { color: var(--verde); margin-bottom: 12px; }
.aviso {
  background: #fef9e7;
  border-left: 4px solid #f39c12;
  color: #7d6608;
  padding: 10px 14px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.error, .ok { line-height: 1.45; }

.categoria-titulo {
  background: #2c3e50;
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  margin: 24px 0 8px;
}
.subcategoria-titulo {
  font-weight: 600;
  color: #555;
  margin: 14px 0 6px;
  padding-left: 4px;
  border-left: 3px solid var(--rojo);
  padding-left: 8px;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--gris-borde); }
th { background: #fafafa; font-size: 0.85em; text-transform: uppercase; color: #777; }

.fila-producto { display: grid; grid-template-columns: 1fr 90px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eee; }
.fila-producto .cantidad-input { margin-bottom: 0; }
.fila-producto .nombre-prod { font-size: 0.98em; }
.fila-producto .unidad { color: #888; font-size: 0.85em; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.78em; font-weight: 600; }
.badge.enviado { background: #fdebd0; color: #a04000; }
.badge.confirmado { background: #d5f5e3; color: #196f3d; }
.badge.anulado { background: #eaeaea; color: #666; }
.badge.despachado { background: #d6eaf8; color: #1b4f72; }
.badge.recibido { background: #d5f5e3; color: #196f3d; }
/* Pedido enviado después de la hora de corte. Se avisa, no se bloquea. */
.badge.tarde { background: #fdedec; color: #922b21; border: 1px solid #f5b7b1; }

/* ---------- Hoja de preparación (etapa 6) ---------- */

th.num, td.num { text-align: right; }

/* Matriz: filas = productos, columnas = tiendas. Con muchas tiendas la tabla
   se hace ancha, por eso el contenedor lleva scroll horizontal y la primera
   columna se queda fija: sin el nombre del producto a la vista, los números
   de la derecha no significan nada. */
.tabla-matriz { border-collapse: collapse; min-width: 100%; }
.tabla-matriz th, .tabla-matriz td { padding: 6px 10px; white-space: nowrap; }
.tabla-matriz thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  font-size: 0.8em;
}
.tabla-matriz tbody tr:nth-child(even) { background: #fafafa; }
.tabla-matriz td:first-child, .tabla-matriz th:first-child {
  position: sticky;
  left: 0;
  background: white;
  white-space: normal;
  min-width: 200px;
}
.tabla-matriz tbody tr:nth-child(even) td:first-child { background: #fafafa; }
.tabla-matriz .col-total { font-weight: 700; background: #eef5ef; }
.tabla-matriz tbody tr:nth-child(even) .col-total { background: #e6efe8; }
.marca-tarde { color: var(--rojo); font-weight: 700; }

/* Marcas del producto. "Sin marca" va en rojo a propósito: significa que ese
   producto no lo ve ninguna tienda, y casi siempre es un descuido. */
.badge.marca { background: #e8eef5; color: #2c3e50; }
.badge.generico { background: #eaf7f0; color: #196f3d; }
.badge.sin-marca { background: #fdedec; color: #922b21; border: 1px solid #f5b7b1; }
.tabla-admin tr.fila-sin-marca td { background: #fffafa; }

/* Valores que todavía no están definidos (precio de un pedido sin confirmar).
   Mostrar "0" haría creer que el producto es gratis. */
.pendiente { color: #aaa; font-style: italic; font-size: 0.9em; }

.etiqueta.naranja { background: #e67e22; }

/* Tabla del catálogo: muchas columnas editables, se compacta para que quepan */
.tabla-catalogo input[type=text],
.tabla-catalogo input[type=number] {
  margin-bottom: 0;
  padding: 6px 8px;
  font-size: 0.9em;
  width: 100%;
  min-width: 80px;
}
.tabla-catalogo td { padding: 4px 5px; }
.tabla-catalogo th { font-size: 0.75em; }

.lista-pedidos a { text-decoration: none; color: inherit; }
.item-pedido-lista { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-bottom: 1px solid var(--gris-borde); }
.item-pedido-lista:hover { background: #fafafa; }

.acciones-flotantes {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 14px 20px;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
  border-radius: 8px 8px 0 0;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---------- Panel de administración (etapa 2) ---------- */

button.peligro, .boton.peligro { background: #c0392b; }
button.peligro:hover, .boton.peligro:hover { background: #922b21; }

.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}
.mini-tarjeta {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fafafa;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
}
.mini-tarjeta:hover { background: #f0f0f0; }
.mini-numero { font-size: 1.9em; font-weight: 700; color: var(--rojo); }
.mini-texto { color: #777; font-size: 0.88em; margin-top: 4px; }

/* Formularios de una sola línea (crear usuario, filtros, etc.) */
.form-linea {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.form-linea > div { flex: 1 1 160px; }
.form-linea input, .form-linea select { margin-bottom: 0; }

/* Formularios embebidos dentro de una fila de tabla */
.form-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.form-fila input, .form-fila select { margin-bottom: 0; }
.form-fila input[type=text] { min-width: 140px; }

.acciones-fila { display: flex; gap: 6px; flex-wrap: wrap; }
.acciones-fila button { padding: 6px 10px; font-size: 0.88em; }

.tabla-admin td { vertical-align: middle; }
.tabla-admin tr.fila-inactiva { background: #fbfbfb; color: #999; }
.tabla-admin tr.fila-inactiva code { color: #999; }

.etiqueta {
  display: inline-block;
  background: var(--verde);
  color: white;
  border-radius: 20px;
  padding: 1px 9px;
  font-size: 0.72em;
  font-weight: 600;
  vertical-align: middle;
}
.etiqueta.gris { background: #999; }

.dias-semana { display: flex; gap: 8px; flex-wrap: wrap; }
.dias-semana .dia {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 0;
}
.dias-semana .dia input { margin: 0; }

/* ---------- Formulario de pedido de la tienda (etapa 5) ---------- */

/* Barra de búsqueda y atajos. */
.barra-herramientas {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.caja-buscador { display: flex; gap: 8px; align-items: center; }
.campo-buscador { margin-bottom: 0; }
.boton-limpiar { padding: 10px 14px; white-space: nowrap; }
.acciones-catalogo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acciones-catalogo button { padding: 8px 14px; font-size: 0.9em; }
.resultado-busqueda { margin: 10px 0 0; color: #777; font-size: 0.9em; }
.sin-resultados {
  background: #fef9e7;
  border-left: 4px solid #f39c12;
  color: #7d6608;
  padding: 14px;
  border-radius: 4px;
}
.nota-corte { margin: 0; color: #777; font-size: 0.88em; }
.aviso-corte { margin-top: 12px; }

/* Panel de habituales. Sus casillas son un espejo de las de más abajo. */
.panel-habituales { border-top: 4px solid var(--verde); }
.titulo-habituales { margin-bottom: 4px; }
.nota-habituales { color: #777; font-size: 0.88em; margin-top: 0; }
.veces-pedido { color: #27ae60; }

/* Cabecera plegable de categoría.
   Es un <button> a ancho completo: en el teléfono hay que poder tocar en
   cualquier parte del título, no solo en la flechita. */
.categoria { margin: 20px 0 10px; }
.cat-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  text-align: left;
  background: #2c3e50;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 1em;
  cursor: pointer;
}
.cat-cabecera:hover { background: #22303d; }
.cat-nombre { flex: 1; font-weight: 600; }
.cat-flecha { transition: transform 0.15s; font-size: 0.9em; }
.categoria.cerrada .cat-flecha { transform: rotate(-90deg); }
.categoria.cerrada .cat-cuerpo { display: none; }

.cat-conteo {
  background: rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: 0.78em;
}
/* Insignia de lo ya marcado: sin esto, plegar una categoría escondería lo que
   la tienda ya escribió y se pediría de más "por si acaso". */
.cat-insignia {
  background: var(--verde);
  color: white;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.78em;
  font-weight: 600;
}
.categoria.con-seleccion .cat-cabecera { background: #1e6b45; }
.categoria.con-seleccion .cat-cabecera:hover { background: #175737; }

.cat-cuerpo .tarjeta { margin-bottom: 10px; }

.codigo-prod { color: #aaa; }

/* Barra fija con el resumen de lo marcado. */
.barra-resumen {
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: white;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
  margin-top: 20px;
}
.fila-resumen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.boton-resumen { padding: 10px 14px; font-size: 0.92em; }
.botones-envio { display: flex; gap: 8px; align-items: center; }
.botones-envio button, .botones-envio .boton { min-height: 44px; }

.detalle-resumen {
  max-height: 45vh;
  overflow-y: auto;
  border-bottom: 1px solid var(--gris-borde);
  padding: 8px 16px;
}
.detalle-resumen ul { list-style: none; margin: 0; padding: 0; }
.detalle-resumen li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
.resumen-nombre { flex: 1; }
.resumen-cantidad { font-weight: 600; white-space: nowrap; }
.resumen-quitar { padding: 5px 10px; font-size: 0.82em; }
.resumen-vacio { color: #999; font-style: italic; }

@media (max-width: 700px) {
  /* En el teléfono todo lo que se toca tiene que ser cómodo de tocar. */
  .cat-cabecera { min-height: 52px; }
  .fila-producto { grid-template-columns: 1fr 100px; }
  .fila-producto .cantidad-input { min-height: 44px; font-size: 1.05em; }
  .acciones-catalogo { gap: 6px; }
  .acciones-catalogo button { flex: 1 1 auto; min-height: 44px; }
  .fila-resumen { padding: 10px 12px; }
  .boton-resumen { flex: 1 1 100%; min-height: 44px; }
  .botones-envio { flex: 1 1 100%; }
  .botones-envio button, .botones-envio .boton { flex: 1; text-align: center; }
  .barra-herramientas { padding: 12px; }
  .campo-buscador { min-height: 44px; }
}

@media (max-width: 700px) {
  .form-linea > div { flex: 1 1 100%; }
  .tabla-admin, .tabla-admin thead, .tabla-admin tbody,
  .tabla-admin th, .tabla-admin td, .tabla-admin tr { display: block; }
  .tabla-admin thead { display: none; }
  .tabla-admin tr { border-bottom: 2px solid var(--gris-borde); padding: 10px 0; }
  .tabla-admin td { border: none; padding: 5px 0; }
}

@media print {
  header.barra, .no-imprimir { display: none !important; }
  body { background: white; }
  main { max-width: 100%; padding: 0; }
  .tarjeta { box-shadow: none; }
}