/* ---------------------------------------------------------------
   Estilos compartidos por las tres pantallas.
   Un solo lenguaje visual: mismos colores, misma tipografia,
   mismos bordes y espaciados.
   --------------------------------------------------------------- */

:root {
  --marca: #e8622c;              /* lo pisa el color del negocio desde /api/config */
  --marca-suave: #fceee7;

  --fondo: #f2f4f7;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --texto: #16202b;
  --texto-tenue: #64748b;
  --borde: #dfe4ea;

  --ok: #167c45;
  --ok-suave: #ddf3e6;
  --espera: #9a5b06;
  --espera-suave: #fdf0d5;
  --ruta: #1d5fb5;
  --ruta-suave: #dfeafc;
  --alerta: #b42318;
  --alerta-suave: #fde8e6;

  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 32, 43, 0.06), 0 4px 14px rgba(16, 32, 43, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca-suave: #3d2417;
    --fondo: #0f1319;
    --panel: #171d26;
    --panel-2: #1e2632;
    --texto: #e8edf3;
    --texto-tenue: #93a1b3;
    --borde: #2a3441;

    --ok: #4ade80;
    --ok-suave: #14301f;
    --espera: #fbbf24;
    --espera-suave: #33270c;
    --ruta: #7cb1f7;
    --ruta-suave: #142744;
    --alerta: #fb7185;
    --alerta-suave: #3a1519;

    --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --marca-suave: #3d2417;
  --fondo: #0f1319;
  --panel: #171d26;
  --panel-2: #1e2632;
  --texto: #e8edf3;
  --texto-tenue: #93a1b3;
  --borde: #2a3441;
  --ok: #4ade80;
  --ok-suave: #14301f;
  --espera: #fbbf24;
  --espera-suave: #33270c;
  --ruta: #7cb1f7;
  --ruta-suave: #142744;
  --alerta: #fb7185;
  --alerta-suave: #3a1519;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: 'Outfit', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* --- Cabecera --- */
.cabecera {
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.cabecera .marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.cabecera .logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--marca);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.cabecera h1 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cabecera .sub {
  font-size: 0.75rem;
  color: var(--texto-tenue);
  margin: 0;
}

/* --- Contenedor --- */
.contenido {
  max-width: 780px;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* --- Tarjetas --- */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
  box-shadow: var(--sombra);
}

/* --- Formularios --- */
label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-tenue);
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}
input, textarea, select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--panel-2);
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  border-color: transparent;
}
textarea { resize: vertical; min-height: 70px; }

.campos { display: grid; gap: 0.8rem; }
.campos.dos { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .campos.dos { grid-template-columns: 1fr; } }

/* --- Botones --- */
button {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
button:active { opacity: 0.75; }
button:disabled { opacity: 0.45; cursor: default; }
button:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.btn-principal { background: var(--marca); color: #fff; width: 100%; padding: 0.85rem; }
.btn-suave {
  background: var(--panel-2);
  color: var(--texto);
  border-color: var(--borde);
}
.btn-chico { padding: 0.45rem 0.7rem; font-size: 0.83rem; }
.btn-verde { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.btn-azul { background: var(--ruta-suave); color: var(--ruta); border-color: transparent; }
.btn-ambar { background: var(--espera-suave); color: var(--espera); border-color: transparent; }
.btn-rojo { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }

.fila-botones { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* --- Etiquetas de estado --- */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.estado .punto { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.estado-recibido { background: var(--panel-2); color: var(--texto-tenue); }
.estado-preparando { background: var(--espera-suave); color: var(--espera); }
.estado-en_camino { background: var(--ruta-suave); color: var(--ruta); }
.estado-en_camino .punto { animation: latido 1.5s ease-in-out infinite; }
.estado-entregado { background: var(--ok-suave); color: var(--ok); }
.estado-cancelado { background: var(--alerta-suave); color: var(--alerta); }

@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .estado .punto { animation: none !important; }
}

/* --- Textos auxiliares --- */
.tenue { color: var(--texto-tenue); font-size: 0.85rem; }
.mini { font-size: 0.75rem; color: var(--texto-tenue); }
.vacio {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--texto-tenue);
}

/* --- Aviso / toast --- */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  background: var(--texto);
  color: var(--panel);
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: var(--sombra);
  z-index: 100;
  max-width: calc(100% - 2rem);
  text-align: center;
}

/* ---------------------------------------------------------------
   MINI MAPA (mapa.js) - sin librerias externas
   --------------------------------------------------------------- */
.mm-mapa {
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: #e6e2dc;
  user-select: none;
  -webkit-user-select: none;
}
:root[data-theme="dark"] .mm-mapa { background: #20262e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mm-mapa { background: #20262e; }
}
.mm-mapa.mm-arrastrando { cursor: grabbing; }

.mm-capa { position: absolute; inset: 0; }
.mm-marcadores { pointer-events: none; }

.mm-tile {
  position: absolute;
  top: 0; left: 0;
  width: 256px; height: 256px;
  will-change: transform;
}

.mm-marcador {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  will-change: transform;
}
.mm-marcador > * {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
}

.mm-controles {
  position: absolute;
  right: 10px; top: 10px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 20;
}
.mm-boton {
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 9px;
  background: var(--panel);
  color: var(--texto);
  border: 1px solid var(--borde);
  font-size: 1.15rem;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.mm-atribucion {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 20;
  background: rgba(255,255,255,0.78);
  color: #333;
  font-size: 10px;
  padding: 1px 5px;
  text-decoration: none;
  border-top-left-radius: 5px;
}