/*
 * Cafetería El Charco — estilos base.
 *
 * Los valores exactos de esta paleta son un primer punto de partida a
 * partir de la descripción real del negocio (beige/crema, café/marrón
 * oscuro, verde — docs/negocio.md). No son códigos de marca oficiales;
 * se afinan en la Fase 8 (diseño visual) si el negocio define una guía
 * de marca más precisa.
 */

:root {
  --color-beige: #f4ecdf;
  --color-beige-claro: #faf6ee;
  --color-cafe-oscuro: #3b2415;
  --color-cafe: #6f4e37;
  --color-verde: #4b6b3a;
  --color-texto: #2e1f17;
  --color-blanco: #ffffff;
  --color-error: #a13d2b;

  --espaciado-1: 8px;
  --espaciado-2: 16px;
  --espaciado-3: 24px;
  --espaciado-4: 32px;

  --radio-borde: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-beige-claro);
  color: var(--color-texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

a {
  color: var(--color-cafe);
}

.contenedor {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--espaciado-3);
}

.btn {
  display: inline-block;
  padding: var(--espaciado-1) var(--espaciado-3);
  border-radius: var(--radio-borde);
  border: none;
  background: var(--color-cafe);
  color: var(--color-blanco);
  text-decoration: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn:hover {
  background: var(--color-cafe-oscuro);
}

.btn-verde {
  background: var(--color-verde);
}

.tarjeta {
  background: var(--color-blanco);
  border: 1px solid var(--color-beige);
  border-radius: var(--radio-borde);
  padding: var(--espaciado-3);
}

.mensaje-error {
  color: var(--color-error);
  margin-bottom: var(--espaciado-2);
}

.campo {
  margin-bottom: var(--espaciado-2);
}

.campo label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: var(--espaciado-1);
  border: 1px solid var(--color-cafe);
  border-radius: var(--radio-borde);
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-blanco);
  color: var(--color-texto);
}

.campo-ayuda {
  display: block;
  font-size: 0.85rem;
  color: #6b5a4d;
  margin-top: 4px;
}

.campo-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campo-checkbox input {
  width: auto;
}

.btn-enlace {
  background: none;
  border: none;
  color: var(--color-cafe-oscuro);
  cursor: pointer;
  padding: 0;
  font-size: 1rem;
  text-decoration: underline;
}

.btn-secundario {
  background: var(--color-beige);
  color: var(--color-texto);
}

/* El hover base (.btn:hover) oscurece el fondo a café oscuro; sin esto el
   texto oscuro de .btn-secundario se volvía ilegible al pasar el mouse. */
.btn-secundario:hover,
.btn-secundario:focus-visible,
.btn-secundario:active {
  background: #e6d9c3;
  color: var(--color-texto);
}

.btn-verde:hover,
.btn-verde:active {
  background: #3b5530;
  color: var(--color-blanco);
}

.btn-peligro {
  background: var(--color-error);
}

.btn-peligro:hover,
.btn-peligro:active {
  background: #832f20;
  color: var(--color-blanco);
}

.btn:active {
  color: var(--color-blanco);
}

.btn-secundario:active {
  color: var(--color-texto);
}

.btn-pequeno {
  padding: 4px 12px;
  font-size: 0.85rem;
}

/* ---------- Layout del panel (con sidebar) ---------- */

.panel-body {
  background: var(--color-beige-claro);
}

.panel-layout {
  display: flex;
  min-height: 100vh;
}

.panel-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--color-cafe-oscuro);
  color: var(--color-beige-claro);
  display: flex;
  flex-direction: column;
  padding: var(--espaciado-2) 0;
}

/* Escritorio: el menú lateral es una barra independiente. Se queda fija a la altura de la ventana mientras el
   contenido se desplaza (con su propio scroll si el menú fuera más alto que la pantalla). En celular el menú es un
   cajón aparte (más abajo) y estas reglas no aplican. */
@media (min-width: 768px) {
  .panel-sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.panel-sidebar-marca {
  font-weight: 700;
  padding: 0 var(--espaciado-2) var(--espaciado-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: var(--espaciado-2);
}

.panel-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-grow: 1;
}

.panel-nav a {
  display: block;
  padding: 10px var(--espaciado-2);
  color: var(--color-beige-claro);
  text-decoration: none;
}

.panel-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
}

.panel-nav a.activo {
  background: var(--color-verde);
  font-weight: 600;
}

.panel-logout {
  padding: var(--espaciado-2);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.panel-logout .btn-enlace {
  color: var(--color-beige-claro);
}

.panel-contenido {
  flex-grow: 1;
  min-width: 0;
}

.panel-topbar {
  background: var(--color-blanco);
  padding: var(--espaciado-2) var(--espaciado-3);
  border-bottom: 1px solid var(--color-beige);
}

.panel-main {
  padding: var(--espaciado-3);
}

.panel-main h1 {
  margin-top: 0;
}

.panel-encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--espaciado-3);
  gap: var(--espaciado-2);
  flex-wrap: wrap;
}

/* ---------- Alertas / mensajes flash ---------- */

.alerta {
  padding: var(--espaciado-2);
  border-radius: var(--radio-borde);
  margin-bottom: var(--espaciado-3);
}

.alerta-exito {
  background: #e4efdd;
  color: #2f4a22;
  border: 1px solid var(--color-verde);
}

.alerta-error {
  background: #f6e3de;
  color: var(--color-error);
  border: 1px solid var(--color-error);
}

/* ---------- Tablas ---------- */

.tabla-contenedor {
  overflow-x: auto;
}

table.tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-blanco);
}

table.tabla th,
table.tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-beige);
  text-align: left;
  vertical-align: middle;
}

table.tabla th {
  background: var(--color-beige);
  font-weight: 600;
}

.tabla-vacio {
  padding: var(--espaciado-3);
  text-align: center;
  color: #6b5a4d;
}

.miniatura {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radio-borde);
  background: var(--color-beige);
}

/* ---------- Insignias de estado ---------- */

.insignia {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Estados de un pedido */
.insignia-pedido-pendiente  { background: #f1ede8; color: #6b5a4d; border: 1px dashed #b9a893; }
.insignia-pedido-enviado    { background: #fdeccb; color: #7a4b00; }
.insignia-pedido-confirmado { background: #dbe9f6; color: #1f4e79; }
.insignia-pedido-entregado  { background: #dcebd5; color: #2d5a1f; }
.insignia-pedido-cancelado  { background: #e6e1dc; color: #5a4a3e; }
.insignia-pedido-anulado    { background: #f3d2cc; color: #8a2a1a; }

/* Pedidos nuevos (sin confirmar): resaltados en el listado */
.fila-pedido-nuevo td { background: #fff7e0; }
.fila-pedido-nuevo td:first-child { box-shadow: inset 4px 0 0 #e0a800; }

/* ---------- Reportes ---------- */
.reportes-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.reportes-pestanas a {
  padding: 8px 14px; border-radius: 999px; background: var(--color-blanco); color: var(--color-texto);
  border: 1px solid var(--color-beige); text-decoration: none; font-weight: 600; font-size: 0.92rem;
}
.reportes-pestanas a.activo { background: var(--color-verde); color: var(--color-blanco); border-color: var(--color-verde); }

.reportes-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.reporte-tarjeta {
  display: flex; flex-direction: column; gap: 4px; background: var(--color-blanco); border: 1px solid var(--color-beige);
  border-left: 4px solid var(--color-verde); border-radius: var(--radio-borde); padding: 12px 14px;
}
.reporte-tarjeta-etiqueta { font-size: 0.85rem; color: #6b5a4d; }
.reporte-tarjeta-valor { font-size: 1.5rem; color: var(--color-cafe-oscuro); }
.reporte-tarjeta-nota { font-size: 0.78rem; color: #8a7a6d; }

.reporte-grafico { margin-bottom: 16px; }
.grafico-svg { width: 100%; height: auto; display: block; }
.grafico-barra { fill: var(--color-verde); }
.grafico-linea { stroke: var(--color-beige); stroke-width: 1; }
.grafico-texto { font-size: 11px; fill: #6b5a4d; }

.reporte-tabla-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tabla-reporte th.num, .tabla-reporte td.num { text-align: right; white-space: nowrap; }

.solo-impresion { display: none; }

@media print {
  .panel-sidebar, .panel-topbar, .panel-menu-fondo, .no-imprimir, .panel-menu-boton { display: none !important; }
  .panel-body, .panel-contenido, .panel-main { background: #fff !important; padding: 0 !important; margin: 0 !important; }
  .panel-layout { display: block !important; }
  .solo-impresion { display: block; border-bottom: 2px solid #000; margin-bottom: 12px; padding-bottom: 6px; }
  .solo-impresion h1 { margin: 0 0 4px; font-size: 18pt; }
  .solo-impresion p { margin: 2px 0; font-size: 10pt; }
  .tarjeta { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  .tabla-reporte { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .tabla-reporte th, .tabla-reporte td { border-bottom: 1px solid #ccc; padding: 4px 6px; }
  .tabla-reporte thead { display: table-header-group; }   /* el encabezado se repite en cada página */
  .tabla-reporte tfoot { display: table-footer-group; }
  .tabla-reporte tr { break-inside: avoid; page-break-inside: avoid; }
  .reportes-tarjetas { grid-template-columns: repeat(3, 1fr); }
  .reporte-tarjeta { break-inside: avoid; }
  .grafico-barra { fill: #444 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.datos-pedido { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.datos-pedido dt { font-weight: 600; color: #6b5a4d; }
.datos-pedido dd { margin: 0; }

.insignia-activo {
  background: #e4efdd;
  color: #2f4a22;
}

.insignia-inactivo {
  background: #eee;
  color: #666;
}

.insignia-vigente {
  background: #e4efdd;
  color: #2f4a22;
}

.insignia-programada {
  background: #fdf1cf;
  color: #7a5b00;
}

.insignia-vencida {
  background: #eee;
  color: #666;
}

.acciones-tabla {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.progreso-lealtad {
  background: var(--color-beige);
  border-radius: 999px;
  height: 20px;
  overflow: hidden;
  margin: 8px 0;
}

.progreso-lealtad-barra {
  background: var(--color-verde);
  height: 100%;
}

/* =====================================================================
   PANEL ADMINISTRATIVO — pantallas chicas (celular)

   Regla de oro: el diseño de ESCRITORIO no cambia. Lo nuevo de este
   bloque o bien está oculto por defecto (display: none / display:
   contents, sin efecto en el diseño) o bien vive dentro de
   @media (max-width: 767.98px) y acotado a .panel-body, así que
   tampoco afecta al sitio público, que comparte este archivo.

   767.98px = justo por debajo del punto de corte de 768px del sitio
   público (tabletas en vertical y mayores siguen con la barra fija).
   ===================================================================== */

/* --- Elementos que solo existen para celular: ocultos en escritorio --- */
.panel-menu-boton,
.panel-topbar-marca,
.panel-menu-fondo,
.tabla-pista {
  display: none;
}

/* En escritorio este contenedor "no existe" para el diseño de la fila de horario. */
.horario-horas {
  display: contents;
}

/* Antes era un estilo en línea de 96×64 en la tarjeta de portada. */
.miniatura-portada {
  width: 96px;
  height: 64px;
}

@media (max-width: 767.98px) {

  /* ---------- Sin JavaScript: el menú va arriba, apilado y visible ---------- */

  html:not(.js) .panel-body .panel-layout { flex-direction: column; }
  html:not(.js) .panel-body .panel-sidebar { width: 100%; padding: 8px 0; }
  html:not(.js) .panel-body .panel-sidebar-marca { border-bottom: 0; margin-bottom: 0; padding-bottom: 8px; }
  html:not(.js) .panel-body .panel-nav { display: flex; flex-wrap: wrap; }
  html:not(.js) .panel-body .panel-logout { border-top: 0; padding: 4px 16px; }

  /* ---------- Con JavaScript: menú lateral que sale al tocar la hamburguesa ---------- */

  .js .panel-body .panel-sidebar {
    position: fixed;
    top: 56px; /* debajo de la barra superior, que sigue visible para poder cerrar */
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(280px, 85vw);
    padding: 8px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden; /* cerrado: sus enlaces no reciben foco ni lectores de pantalla */
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .js .panel-body .panel-sidebar.abierto {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }

  .js .panel-body .panel-sidebar-marca { display: none; } /* ya está en la barra superior */

  .js .panel-body .panel-menu-fondo {
    display: block;
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    background: rgba(59, 36, 21, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .js .panel-body.menu-abierto .panel-menu-fondo {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s;
  }

  .js .panel-body.menu-abierto { overflow: hidden; } /* el contenido de atrás no se desplaza */

  .js .panel-body .panel-menu-boton { display: inline-flex; }
  .js .panel-body .panel-menu-boton[aria-expanded="true"] .icono-hamburguesa,
  .js .panel-body .panel-menu-boton:not([aria-expanded="true"]) .icono-cerrar { display: none; }

  .panel-body .panel-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
  }

  .panel-body .btn-enlace { min-height: 44px; padding: 0; }
  .panel-body .panel-logout { padding: 8px 16px; }

  /* ---------- Barra superior fija (marca + saludo + hamburguesa) ---------- */

  .panel-body .panel-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 12px;
  }

  .panel-body .panel-topbar-marca {
    display: block;
    min-width: 0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-body .panel-topbar-usuario {
    margin-left: auto;
    min-width: 0;
    font-size: 0.9rem;
    color: #6b5a4d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .panel-body .panel-menu-boton {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radio-borde);
    background: transparent;
    color: var(--color-cafe-oscuro);
    cursor: pointer;
  }

  .panel-body .panel-menu-boton:hover,
  .panel-body .panel-menu-boton:focus-visible {
    background: var(--color-beige);
  }

  /* ---------- Contenido ---------- */

  .panel-body .panel-main {
    padding: 16px 12px 32px;
    overflow-wrap: anywhere; /* una palabra larguísima no debe ensanchar la pantalla */
  }

  .panel-body .panel-main h1 { font-size: 1.5rem; line-height: 1.25; }
  .panel-body .panel-main h2 { font-size: 1.2rem; }
  .panel-body .tarjeta { padding: 16px; }

  /* Saltar a un ancla (#portada) no debe dejar el título tapado por la barra fija. */
  .panel-body [id] { scroll-margin-top: 72px; }

  /* Título y botón de acción: uno debajo del otro, botón a todo lo ancho. */
  .panel-body .panel-encabezado { flex-direction: column; align-items: stretch; gap: 12px; }
  .panel-body .panel-encabezado h1 { margin: 0; }
  .panel-body .panel-encabezado > .btn { width: 100%; }

  /* ---------- Botones: tamaño cómodo para el dedo ---------- */

  .panel-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    text-align: center;
  }

  .panel-body .btn-pequeno {
    min-width: 44px;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.95rem;
  }

  /* Botones de acción de los formularios (Guardar, Cancelar, Filtrar...): a todo lo ancho. */
  .panel-body .tarjeta form .btn:not(.btn-pequeno) { width: 100%; margin-top: 8px; }
  /* "Buscar" junto a su campo: mismo peso (especificidad) que la regla de arriba y va después, así la anula. */
  .panel-body .tarjeta form .campo .btn { width: auto; margin-top: 0; }

  /* ---------- Formularios: una columna, campos cómodos de tocar ---------- */

  .panel-body .campo input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .panel-body .campo select {
    min-height: 44px;
  }

  .panel-body .campo textarea { min-height: 96px; }

  .panel-body .campo-checkbox { min-height: 44px; }

  .panel-body .campo-checkbox input[type="checkbox"],
  .panel-body .campo-checkbox input[type="radio"] {
    flex: none;
    width: 22px;
    height: 22px;
  }

  .panel-body .campo-checkbox label { flex: 1; padding: 8px 0; }

  /* Filtros (Auditoría, Recompensas): campos y botón en columna. */
  .panel-body .form-filtros { flex-direction: column; align-items: stretch !important; }
  .panel-body .form-filtros .campo { width: 100%; }

  /* Búsqueda: el campo ocupa lo que sobre y "Buscar" mantiene su tamaño. */
  .panel-body .campo-busqueda { flex-wrap: nowrap; }
  /* flex-basis 0 (no "auto"): con auto el campo se colapsaba a ~18px de ancho. */
  .panel-body .campo-busqueda input { flex: 1 1 0; width: auto; min-width: 0; }
  .panel-body .campo-busqueda .btn { flex: none; }

  /* Horario de atención: día en una línea; las dos horas juntas en la siguiente. */
  .panel-body .horario-fila {
    flex-wrap: wrap;
    row-gap: 4px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-beige);
  }

  .panel-body .horario-fila .horario-dia { flex: 1 1 0; width: auto !important; min-width: 0; }

  .panel-body .horario-horas {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 8px;
    padding-left: 30px; /* alineadas con el nombre del día, no con la casilla */
  }

  /* 16px: con menos, el iPhone hace zoom automático al tocar el campo. */
  .panel-body .horario-hora { flex: 1 1 0; min-width: 0; min-height: 44px; font-size: 1rem; }

  /* Enlace suelto (no dentro de una frase): área táctil cómoda. */
  .panel-body .enlace-tactil { display: inline-flex; align-items: center; min-height: 44px; }

  /* ---------- Tablas: se deslizan hacia los lados dentro de su tarjeta ---------- */

  .panel-body .tabla-contenedor {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .panel-body table.tabla th,
  .panel-body table.tabla td {
    padding: 10px;
    overflow-wrap: normal; /* las palabras no se parten a la mitad: la tabla se desliza */
  }

  .panel-body table.tabla .insignia,
  .panel-body table.tabla .acciones-tabla { white-space: nowrap; }

  /* Tablas cuya 1.ª columna es una fecha o un código: no se parte por el guion ("2026-" / "09-21"). */
  .panel-body table.tabla-primera-sin-corte td:first-child { white-space: nowrap; }

  .panel-body .tabla-pista {
    display: block;
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: #6b5a4d;
  }

  /* ---------- Listas de fotos (Galería y Portada): tarjetas apiladas, sin deslizar ----------
     Aquí se sube, ordena y elimina con el dedo, así que en vez de una tabla ancha cada foto
     es una tarjeta con la miniatura a la izquierda y sus botones debajo, siempre a la vista. */

  .panel-body .tabla-apilada,
  .panel-body .tabla-apilada tbody { display: block; width: 100%; }

  .panel-body .tabla-apilada thead { /* encabezados solo para lectores de pantalla */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .panel-body .tabla-apilada tr {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-beige);
  }

  .panel-body .tabla-apilada tr:last-child { border-bottom: 0; }

  .panel-body .tabla-apilada td { display: block; padding: 0; border: 0; min-width: 0; }

  .panel-body .tabla-apilada td.c-acciones,
  .panel-body .tabla-apilada td.acciones-tabla {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .panel-body .tabla-apilada .miniatura { width: 104px; height: 78px; }

  .panel-body .tabla-apilada .c-num { font-weight: 700; color: var(--color-cafe-oscuro); }
  .panel-body .tabla-apilada-galeria .c-num::before { content: "Foto "; }
  .panel-body .tabla-apilada-portada .c-num::before { content: "Imagen "; }

  .panel-body .tabla-apilada .c-titulo:empty::before {
    content: "Sin título";
    font-style: italic;
    color: #6b5a4d;
  }

  .panel-body .tabla-apilada .c-img { grid-area: img; }
  .panel-body .tabla-apilada .c-num { grid-area: num; }
  .panel-body .tabla-apilada .c-titulo { grid-area: titulo; }
  .panel-body .tabla-apilada .c-estado { grid-area: estado; }
  .panel-body .tabla-apilada .c-orden { grid-area: orden; }
  .panel-body .tabla-apilada .c-acciones { grid-area: acciones; }

  .panel-body .tabla-apilada-galeria tr {
    grid-template-areas:
      "img   num"
      "img   titulo"
      "img   estado"
      "orden acciones";
  }

  .panel-body .tabla-apilada-portada tr {
    grid-template-areas:
      "img   num"
      "orden acciones";
  }

  /* Los botones ▲ ▼ ocupan justo la columna de la miniatura: sin relleno lateral
     de la celda caben 44 + 8 + 44 = 96 de 104px, lado a lado. */
  .panel-body .tabla-apilada .c-orden { padding-left: 0; padding-right: 0; }
  .panel-body .tabla-apilada .c-orden .acciones-tabla { flex-wrap: nowrap; gap: 8px; }
  .panel-body .tabla-apilada .c-orden .btn-pequeno { min-width: 44px; min-height: 44px; padding: 0; }
}

/* Pantalla de inicio de sesión (fuera del panel, con su propio layout). */
@media (max-width: 767.98px) {
  .login-body .contenedor { padding: 16px; }
  .login-body .campo input { min-height: 44px; }
  .login-body .tarjeta form .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .js .panel-body .panel-sidebar,
  .js .panel-body .panel-menu-fondo { transition: none; }
}

/* ---------------------------------------------------------------
   Canje por QR (panel) y QR del cliente (cuenta).
   --------------------------------------------------------------- */
.canje-columnas { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.canje-tarjeta { flex: 1 1 320px; max-width: 480px; }
.lector-qr { width: 100%; max-width: 420px; margin: 0 auto 12px; border-radius: 8px; overflow: hidden; }
.lector-qr[hidden] { display: none; }
.campo-codigo { text-transform: uppercase; font-size: 1.3rem; text-align: center; letter-spacing: 2px; }
.qr-recompensa { display: block; width: 240px; max-width: 100%; height: auto; margin: 0 auto 8px; background: #fff; }

@media (max-width: 767.98px) {
  .panel-body .canje-tarjeta { max-width: none; flex-basis: 100%; }
  .panel-body #boton-escanear { width: 100%; }
}


/* Tarjetas del Dashboard que llevan a su sección. */
.tarjeta-enlace {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tarjeta-enlace:hover,
.tarjeta-enlace:focus-visible {
  transform: translateY(-2px);
  border-color: var(--color-verde);
  box-shadow: 0 6px 16px rgba(59, 36, 21, 0.14);
}

.tarjeta-enlace:focus-visible {
  outline: 3px solid var(--color-verde);
  outline-offset: 2px;
}

/* Flecha en la esquina: indica que la tarjeta es un acceso directo, sin texto de más. */
.tarjeta-enlace-flecha {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--color-beige);
  color: var(--color-cafe);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.tarjeta-enlace-flecha svg {
  width: 16px;
  height: 16px;
}

.tarjeta-enlace:hover .tarjeta-enlace-flecha,
.tarjeta-enlace:focus-visible .tarjeta-enlace-flecha {
  background: var(--color-verde);
  color: var(--color-blanco);
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-enlace,
  .tarjeta-enlace-flecha { transition: none; }
}


/* ---------- Configuración → Sobre nosotros (tarjetas editables) ---------- */

.nosotros-tarjetas {
  border: 1px solid var(--color-beige);
  border-radius: var(--radio-borde);
  padding: 14px 16px 16px;
  margin: 0 0 20px;
  min-width: 0;
}

.nosotros-tarjetas legend {
  font-weight: 700;
  padding: 0 6px;
}

.nosotros-tarjeta {
  background: var(--color-blanco);
  border: 1px solid var(--color-beige);
  border-left: 4px solid var(--color-verde);
  border-radius: var(--radio-borde);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.nosotros-tarjeta[hidden] {
  display: none;
}

.nosotros-tarjeta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.nosotros-tarjeta-botones {
  display: flex;
  gap: 8px;
}

.nosotros-tarjeta-botones .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .nosotros-tarjeta-botones .btn {
    min-width: 44px;
    min-height: 44px;
  }

  .nosotros-tarjeta-botones { width: 100%; }
  .nosotros-tarjeta-botones .btn-peligro { margin-left: auto; }
}