/* ============================================================
   NATIVA — sistema visual
   Estética cálida, natural y artesanal: superficies marfil sobre
   fondo crema, marrón tierra, ocre caramelo y acentos oliva.
   Sombras muy suaves, aire generoso, iconografía lineal (sin emojis).
   ============================================================ */
:root {
  /* Paleta */
  --crema: #F2E4C9;           /* fondo general */
  --marfil: #FBF5E9;          /* superficies / tarjetas */
  --blanco-calido: #FFFDF8;   /* inputs y realces */
  --tierra: #3F2A18;          /* texto principal */
  --tierra-media: #75563A;    /* texto secundario */
  --caramelo: #B0793A;        /* acción principal */
  --caramelo-oscuro: #97632C;
  --oliva: #7C8B5A;           /* acento / estados ok */
  --terracota: #B5432E;       /* problema */
  --ambar: #D9A441;           /* atención */
  --borde: #E9DCBD;           /* bordes suaves de superficie */
  --borde-medio: #C9AC7E;     /* bordes de campos */
  --trazo-decor: #B18D5B;     /* ilustraciones de línea */

  --sombra: 0 2px 14px rgba(83, 58, 35, .07);
  --sombra-alzada: 0 10px 36px rgba(83, 58, 35, .12);

  --fuente-titulo: Georgia, 'Palatino Linotype', 'Book Antiqua', serif;
  --fuente-ui: 'Segoe UI', system-ui, -apple-system, sans-serif;

  --alto-nav: 66px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--fuente-ui);
  background: var(--crema);
  color: var(--tierra);
  min-height: 100vh;
  padding-bottom: calc(var(--alto-nav) + 28px);
  line-height: 1.45;
}

h1, h2, h3, .titulo-pagina {
  font-family: var(--fuente-titulo);
  color: var(--tierra);
  letter-spacing: .2px;
  line-height: 1.2;
}

a { color: var(--caramelo-oscuro); }

svg { flex-shrink: 0; }

/* Contenido centrado dentro de las barras (alineado con .contenido) */
.barra-inner { max-width: 760px; margin: 0 auto; }

/* ---------- Barra superior ---------- */
.barra-superior {
  position: sticky; top: 0; z-index: 48;
  background: var(--marfil);
  border-bottom: 1px solid var(--borde);
}
.barra-superior .barra-inner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
}
.barra-superior .logo-mini {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--borde-medio);
}
.barra-superior .marca {
  font-family: var(--fuente-titulo);
  font-size: 1.1rem; font-weight: 700; flex: 1;
  color: var(--tierra); letter-spacing: .3px;
}
.barra-superior .accion-mas {
  color: var(--tierra-media); text-decoration: none;
  background: none; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px; display: flex;
  align-items: center; justify-content: center; border-radius: 10px;
}
.barra-superior .accion-mas:active { background: var(--crema); }

/* ---------- Menú desplegable (hamburguesa) ---------- */
.panel-menu {
  position: fixed; left: 0; right: 0; z-index: 46;
  max-width: 760px; margin: 0 auto;
  background: var(--marfil);
  border: 1px solid var(--borde); border-top: none;
  border-radius: 0 0 18px 18px;
  box-shadow: var(--sombra-alzada);
  transform: translateY(-10px); opacity: 0; visibility: hidden;
  transition: transform .18s ease, opacity .18s ease, visibility .18s;
  overflow: hidden;
}
.panel-menu.abierto { transform: none; opacity: 1; visibility: visible; }
.panel-menu .opcion {
  display: flex; gap: 14px; align-items: center;
  padding: 13px 20px; min-height: 50px;
  text-decoration: none; color: var(--tierra); font-weight: 600;
  border-bottom: 1px solid var(--borde);
}
.panel-menu .opcion svg { color: var(--tierra-media); }
.panel-menu .opcion:active { background: var(--crema); }
.panel-menu .pie-panel {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 13px 20px;
}
.velo {
  position: fixed; inset: 0; z-index: 45;
  background: rgba(63, 42, 24, .28);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}
.velo.abierto { opacity: 1; visibility: visible; }

/* ---------- Contenido ---------- */
.contenido {
  max-width: 760px; margin: 0 auto; padding: 20px 16px 28px;
}
.titulo-pagina { font-size: 1.35rem; margin-bottom: 16px; }

/* ---------- Barra inferior de navegación ---------- */
.barra-inferior {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--marfil);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-inferior .barra-inner {
  height: var(--alto-nav);
  display: flex; align-items: stretch;
}
.barra-inferior .item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--tierra-media); text-decoration: none;
  font-size: .68rem; font-weight: 600;
  border-top: 3px solid transparent;
}
.barra-inferior .item.activo {
  color: var(--caramelo-oscuro);
  border-top-color: var(--caramelo);
}
/* Botón central elevado: la acción estrella (nuevo pedido) */
.barra-inferior .item-mas {
  flex: 1; display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.barra-inferior .item-mas .boton-mas {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--caramelo); color: var(--blanco-calido);
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-16px);
  border: 4px solid var(--crema);
  box-shadow: 0 6px 18px rgba(83, 58, 35, .22);
}
.barra-inferior .item-mas:active .boton-mas { background: var(--caramelo-oscuro); }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--marfil);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.tarjeta h2 { font-size: 1.15rem; margin-bottom: 12px; }

/* KPI (dashboard) */
.fila-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.kpi {
  background: var(--marfil); border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px;
}
.kpi .valor { font-family: var(--fuente-titulo); font-size: 1.45rem; font-weight: 700; }
.kpi .nombre { font-size: .8rem; color: var(--tierra-media); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 22px;
  border: none; border-radius: 12px; cursor: pointer;
  font-family: var(--fuente-ui);
  font-size: 1.05rem; font-weight: 700; text-decoration: none;
  background: var(--caramelo); color: var(--blanco-calido);
}
.btn:hover { background: var(--caramelo-oscuro); }
.btn:active { background: var(--caramelo-oscuro); }
.btn-bloque { width: 100%; }
.btn-secundario {
  background: transparent; color: var(--tierra);
  border: 1.5px solid var(--borde-medio);
}
.btn-secundario:hover, .btn-secundario:active { background: var(--marfil); }
.btn-peligro { background: transparent; color: var(--terracota); border: 1.5px solid #D8A091; }
.btn-peligro:hover, .btn-peligro:active { background: #F7E7E2; }
.btn-ok { background: var(--oliva); }
.btn-ok:hover, .btn-ok:active { background: #67744A; }
.btn-chico { min-height: 44px; padding: 8px 16px; font-size: .95rem; }
/* Botón cuadrado solo-ícono (navegadores, acciones compactas) */
.btn-icono { width: 46px; height: 46px; min-height: 46px; padding: 0; flex: 0 0 auto; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 700; margin-bottom: 8px; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; font-size: 1.05rem;
  border: 1.5px solid var(--borde-medio); border-radius: 12px;
  background: var(--blanco-calido); color: var(--tierra);
  font-family: var(--fuente-ui);
}
.campo textarea { min-height: 84px; }
/* Los <input type="date"> deben verse como el resto de campos aunque estén
   fuera de un .campo (ej. el navegador de fecha de Entregas), y poder encoger
   (min-width:0) para no desbordar en pantallas angostas. */
input[type="date"] {
  min-width: 0; max-width: 100%;
  font-family: var(--fuente-ui); font-size: 1.05rem; color: var(--tierra);
  background: var(--blanco-calido);
  border: 1.5px solid var(--borde-medio); border-radius: 12px;
  padding: 12px 15px; min-height: 50px;
}
input[type="date"]:focus {
  outline: none; border-color: var(--caramelo);
  box-shadow: 0 0 0 3px rgba(176, 121, 58, .16);
}
/* Tinta el ícono del calendario en tono café en vez del negro nativo. */
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .6;
  filter: invert(28%) sepia(18%) saturate(1200%) hue-rotate(350deg);
}
.campo input::placeholder, .campo textarea::placeholder { color: #B39B7C; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--caramelo);
  box-shadow: 0 0 0 3px rgba(176, 121, 58, .16);
}
/* Inputs sueltos del asistente (ítem libre y "otra dirección"): viven fuera de
   un .campo pero deben verse igual que los demás campos. */
#libre-nombre, #libre-precio,
#otra-direccion, #otra-referencia, #otra-etiqueta {
  width: 100%; min-height: 50px; padding: 12px 15px; font-size: 1.05rem;
  border: 1.5px solid var(--borde-medio); border-radius: 12px;
  background: var(--blanco-calido); color: var(--tierra); font-family: var(--fuente-ui);
}
#libre-precio { text-align: right; font-variant-numeric: tabular-nums; }
#libre-nombre::placeholder, #libre-precio::placeholder,
#otra-direccion::placeholder, #otra-referencia::placeholder, #otra-etiqueta::placeholder { color: #B39B7C; }
#libre-nombre:focus, #libre-precio:focus,
#otra-direccion:focus, #otra-referencia:focus, #otra-etiqueta:focus {
  outline: none; border-color: var(--caramelo);
  box-shadow: 0 0 0 3px rgba(176, 121, 58, .16);
}
.campo .ayuda { font-size: .85rem; color: var(--tierra-media); margin-top: 5px; }

/* Campo con ícono adentro (y botón opcional a la derecha, ej. ver clave) */
.campo-icono { position: relative; }
.campo-icono > svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--tierra-media); opacity: .8; pointer-events: none;
}
.campo-icono input { padding-left: 46px; }
.campo-icono .boton-ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tierra-media);
}

/* ---------- Etiquetas de estado (suaves: fondo claro + texto oscuro) ---------- */
.etiqueta {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
.etiqueta-ok { color: #55643B; background: #EEF1E1; border-color: #B9C49A; }
.etiqueta-atencion { color: #8A6414; background: #F9EED4; border-color: #E0BC6C; }
.etiqueta-problema { color: #96351F; background: #F8E5DF; border-color: #DCA292; }
.etiqueta-neutra { color: var(--tierra-media); background: var(--marfil); border-color: var(--borde-medio); }

/* ---------- Tablas / listas ---------- */
.tabla-envoltura { overflow-x: auto; }
table.tabla {
  width: 100%; border-collapse: collapse;
  background: var(--marfil); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--borde);
}
.tabla th, .tabla td { padding: 11px 13px; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla th {
  background: #F5EBD3; color: var(--tierra);
  font-size: .82rem; text-transform: uppercase; letter-spacing: .4px;
}
.tabla tr:last-child td { border-bottom: none; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Lista de ítems tocables (móvil) */
.lista-items { list-style: none; }
.lista-items li {
  background: var(--marfil); border: 1px solid var(--borde);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}

/* Lista plana dentro de una tarjeta (filas separadas por línea) */
.lista-plana { list-style: none; }
.lista-plana li {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--borde);
}
.lista-plana li:last-child { border-bottom: none; }

/* ---------- Alertas ---------- */
.alerta {
  border-radius: 12px; padding: 13px 15px; margin-bottom: 14px;
  font-weight: 600; display: flex; gap: 10px; align-items: center;
  border: 1px solid transparent;
}
.alerta-atencion { color: #7C5A10; background: #F9EED4; border-color: #E0BC6C; }
.alerta-problema { color: #96351F; background: #F8E5DF; border-color: #DCA292; }
.alerta-ok { color: #55643B; background: #EEF1E1; border-color: #B9C49A; }

/* ---------- Toast (mensajes flotantes de confirmación) ---------- */
#zona-toast {
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--alto-nav) + 18px); z-index: 90;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--blanco-calido); color: var(--tierra);
  border: 1px solid var(--borde-medio);
  padding: 12px 22px; border-radius: 999px; font-weight: 600;
  box-shadow: var(--sombra-alzada);
  animation: toast-entra .25s ease-out;
}
.toast-ok { border-color: #A9B587; color: #55643B; }
.toast-error { border-color: #DCA292; color: #96351F; }
@keyframes toast-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Filtros tipo "chip" ---------- */
.fila-filtros {
  display: flex; gap: 8px; margin-bottom: 14px;
  flex-wrap: wrap; align-items: center;
}
.chip {
  border: 1.5px solid var(--borde-medio); background: var(--marfil);
  color: var(--tierra-media); border-radius: 999px;
  padding: 8px 15px; font-weight: 600; font-size: .9rem;
  font-family: var(--fuente-ui); cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center;
}
.chip.activo {
  background: var(--caramelo); border-color: var(--caramelo);
  color: var(--blanco-calido);
}
.chip-radio { cursor: pointer; }
.chip-radio:has(input:checked) {
  background: var(--caramelo); border-color: var(--caramelo);
  color: var(--blanco-calido);
}
.chip-radio:has(input:checked) svg { color: var(--blanco-calido); }

/* ---------- Asistente de pedido ---------- */
.pasos-progreso { display: flex; gap: 6px; }
.pasos-progreso span {
  flex: 1; height: 5px; border-radius: 3px; background: var(--borde);
  transition: background .2s;
}
.pasos-progreso span.hecho { background: var(--caramelo); }
.paso { display: none; }
.paso.activo { display: block; }

.fila-variante {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--borde);
}
.fila-variante:last-child { border-bottom: none; }
.fila-variante .nombre { flex: 1; min-width: 0; }
.precio-input {
  width: 88px; min-height: 44px; padding: 8px 10px;
  text-align: right; font-size: 1rem; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--borde-medio); border-radius: 10px;
  background: var(--blanco-calido); color: var(--tierra); font-family: var(--fuente-ui);
}
.precio-input:focus { outline: none; border-color: var(--caramelo); }

.stepper { display: flex; align-items: center; gap: 6px; }
.stepper button {
  width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--borde-medio); background: var(--blanco-calido);
  color: var(--tierra); font-size: 1.25rem; font-weight: 700; line-height: 1;
  font-family: var(--fuente-ui);
}
.stepper button.mas { background: var(--caramelo); border-color: var(--caramelo); color: #fff; }
.stepper button:active { filter: brightness(.94); }
.stepper .cant { min-width: 26px; text-align: center; font-weight: 700; font-size: 1.05rem; }

.radio-direccion {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--borde); cursor: pointer;
}
.radio-direccion:last-child { border-bottom: none; }
.radio-direccion input[type="text"] {
  min-height: 46px; padding: 10px 12px; font-size: 1rem;
  border: 1.5px solid var(--borde-medio); border-radius: 10px;
  background: var(--blanco-calido); color: var(--tierra); font-family: var(--fuente-ui);
  display: block;
}
.radio-direccion input[type="text"]:focus { outline: none; border-color: var(--caramelo); }

.barra-total {
  position: fixed; left: 0; right: 0; bottom: var(--alto-nav); z-index: 35;
  background: var(--marfil); border-top: 1px solid var(--borde);
  padding: 10px 16px;
}
.barra-total .interno {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
body.con-barra-total { padding-bottom: calc(var(--alto-nav) + 110px); }

/* ---------- Gráfico de barras (informes) ---------- */
.barras { display: flex; flex-direction: column; gap: 9px; }
.barras .fila { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; }
.barras .etiqueta { font-size: .85rem; color: var(--tierra-media); min-width: 0; }
.barras .pista { display: block; background: var(--crema); border-radius: 7px; height: 22px; overflow: hidden; }
.barras .relleno { display: block; background: var(--caramelo); height: 100%; border-radius: 7px; min-width: 3px; }
.barras .valor { font-weight: 600; font-variant-numeric: tabular-nums; font-size: .88rem; white-space: nowrap; }

/* ---------- Divisor con ornamento ---------- */
.divisor-ornamento {
  display: flex; align-items: center; gap: 12px;
  color: var(--trazo-decor); margin: 20px 0;
}
.divisor-ornamento::before, .divisor-ornamento::after {
  content: ''; flex: 1; height: 1px; background: var(--borde-medio); opacity: .55;
}

/* ---------- Decoración botánica (líneas finas, muy sutil) ---------- */
.decor-esquina {
  position: fixed; z-index: 0; color: var(--trazo-decor);
  opacity: .3; pointer-events: none;
}
.decor-esquina.arriba-izq { top: -30px; left: -34px; width: 170px; transform: rotate(10deg); }
.decor-esquina.abajo-der { bottom: -20px; right: -30px; width: 190px; transform: scaleX(-1) rotate(6deg); }

/* ---------- Página de login ---------- */
body.pagina-login {
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
}
.tarjeta-login {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  background: var(--marfil);
  border: 1px solid #EFE3C6;
  border-radius: 24px;
  padding: 38px 32px 0;
  box-shadow: var(--sombra-alzada);
  overflow: hidden;
}
.tarjeta-login .logo-login {
  display: block; width: 148px; height: 148px; object-fit: cover;
  border-radius: 50%; margin: 0 auto 18px;
}
.tarjeta-login h1 {
  text-align: center; font-size: 2rem; margin-bottom: 6px;
}
.tarjeta-login .eslogan {
  text-align: center; color: var(--tierra-media); font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.tarjeta-login .eslogan svg { color: var(--oliva); }
.tarjeta-login .divisor-ornamento { max-width: 300px; margin: 22px auto; }
.enlace-punteado {
  display: block; text-align: center; margin: 18px 0 6px;
  color: var(--caramelo-oscuro); font-weight: 600; text-decoration: none;
  border-bottom: none;
}
.enlace-punteado span { border-bottom: 1.5px dashed var(--borde-medio); padding-bottom: 2px; }
.decor-campo-pie {
  display: block; width: calc(100% + 64px); margin: 10px -32px 0;
  color: var(--trazo-decor); opacity: .5;
}
.error-login {
  color: #96351F; background: #F8E5DF; border: 1px solid #DCA292;
  border-radius: 12px; padding: 12px 15px; margin-bottom: 16px;
  text-align: center; font-weight: 600;
}

/* ---------- Utilidades ---------- */
.centrado { text-align: center; }
.suave { color: var(--tierra-media); }
.mt { margin-top: 14px; }
.oculto { display: none; }