/* taxi.css — Taxi 3B. Hereda de estilos.css los radios, la sombra y el modo
   oscuro. Los colores propios (verde, amarillo, negro) salen del flyer del
   chofer: es su marca, no una invencion. La tienda NO los usa.
   Sus dos mundos comparten estructura; el color es lo que los distingue. */

:root{
  --tx-verde:      #137A3A;   /* el verde del Moskvich; para textos y acentos */
  --tx-caja:       #137A3A;   /* fondo de la caja del precio; NUNCA se aclara */
  --tx-amarillo:   #F2C40C;   /* el amarillo del rotulo TAXI */
  --tx-negro:      #141414;
}
@media (prefers-color-scheme: dark){
  :root{
    --tx-verde:    #35C46B;   /* de noche el verde se aclara para poder leerlo */
    --tx-caja:     #0E5C2C;   /* pero la caja se oscurece, para el amarillo encima */
    --tx-amarillo: #FFD83A;
  }
}

/* El fondo de color. La imagen va DIFUMINADA a proposito: el flyer tiene texto
   grande y, puesta nitida detras del contenido, lo vuelve ilegible. Difuminada
   aporta el color y la atmosfera sin competir con nada.
   🔴 El difuminado NO se hace con `filter: blur()`. `taxi-fondo.jpg` mide
   32x32 px (1 KB) y el navegador lo estira: el suavizado del reescalado ES el
   desenfoque, gratis. Un blur de CSS a pantalla completa y fijo obliga a
   repintar una capa enorme en cada scroll y ahoga a los Android baratos, que
   son los telefonos de esta clientela. Se probo y se descarto. */
html{background:var(--bg)}
body{background:transparent}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:url('taxi-fondo.jpg') center/cover no-repeat;
  opacity:.85;
}
/* Velo: garantiza el contraste del texto pase lo que pase con la foto. Se aclara
   arriba (donde solo hay titulos grandes) y se cierra abajo, que es donde hay
   texto pequeno directamente sobre el fondo. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(250,247,245,.42), rgba(250,247,245,.80));
}
@media (prefers-color-scheme: dark){
  body::before{opacity:.70}
  body::after{background:linear-gradient(180deg, rgba(20,16,23,.50), rgba(20,16,23,.86))}
}

/* En la pagina del taxi, el aro del negocio activo va en verde, no en el morado
   de la tienda: taxi.css solo se carga aqui, asi que no afecta a la tienda. */
.mundo-on .mundo-img{box-shadow:0 0 0 2px var(--tx-verde)}

.tx-main{padding-top:18px}

.tx-portada{text-align:center;padding:var(--e1) 0 6px}
/* Apaisada (2,17:1) a proposito: cuadrada empujaba la calculadora fuera de la
   pantalla del movil, que es lo unico que el cliente viene a usar. */
.tx-portada-img{
  display:block;width:100%;max-width:560px;height:auto;margin:0 auto 14px;
  border-radius:var(--radio-hoja);
  box-shadow:var(--sombra-1);
}
.tx-portada h1{font-size:30px;letter-spacing:-.5px}
.tx-lema{color:var(--text-2);margin-top:6px;font-size:var(--t-md)}

.tx-nota-viaje{font-size:var(--t-xs);color:var(--text-3);text-align:center;margin:-6px 0 var(--e2)}

/* El campo de km aparece dentro de la calculadora cuando el cliente elige
   "yo pongo los km". Va DESTACADO —fondo propio y numero grande— porque saber
   el precio de cualquier sitio es de lo que mas engancha de esta pagina. */
.tx-campo-km{
  background:var(--brand-soft);
  border:2px solid var(--tx-verde);
  border-radius:var(--radio-card);
  padding:var(--e2) 14px;margin-bottom:var(--e2);
}
.tx-km-titulo{
  display:block;color:var(--text);font-size:var(--t-md);font-weight:700;margin-bottom:10px;
}
.tx-km-fila{display:block;margin-bottom:10px}
.tx-km-fila small{
  display:block;font-size:var(--t-xs);font-weight:600;color:var(--text-2);margin-bottom:var(--e0);
}
.tx-campo-km input[type="text"]{
  width:100%;padding:10px var(--e2);font-size:var(--t-md);
  color:var(--text);background:var(--surface);
  border:1px solid var(--tx-verde);border-radius:var(--radio-control);
}
.tx-campo-km input[type="number"]{
  width:100%;font-size:22px;font-weight:700;text-align:center;
  padding:var(--e2);color:var(--text);background:var(--surface);
  border:1px solid var(--tx-verde);border-radius:var(--radio-control);
  font-variant-numeric:tabular-nums;
}
/* La casilla de "salgo desde San Antonio" no es un adorno: si se desmarca, la
   web deja de dar precio, porque la formula cuenta el regreso del carro a base. */
.tx-km-check{
  display:flex;align-items:flex-start;gap:9px;
  margin:2px 0 var(--e1);font-size:13.5px;line-height:1.4;color:var(--text);cursor:pointer;
}
/* Selector largo a proposito: `.tx-campo input` de mas arriba le pone width:100%
   y, con la misma especificidad, la casilla salia tan ancha como la fila y el
   texto caia en una columna de una palabra por linea. */
.tx-campo-km .tx-km-check input[type="checkbox"]{
  width:21px;height:21px;min-width:21px;flex:none;
  margin:1px 0 0;padding:0;accent-color:var(--tx-verde);
}
.tx-km-check > span{flex:1;min-width:0}
.tx-campo-km em{
  display:block;font-style:normal;margin-top:var(--e0);
  font-size:var(--t-xs);line-height:1.45;color:var(--text-2);
}
.tx-esperando{font-size:14px;color:var(--text-2);padding:var(--e0) 0}
.tx-aviso-sa{font-size:13.5px;line-height:1.5;color:#fff;text-align:left}
.tx-aviso-sa b{display:block;color:var(--tx-amarillo);margin-bottom:var(--e0)}

/* "Vienes de parte de X". Discreto: es informacion para el chofer, no una
   promocion; el cliente no tiene que hacer nada con esto. */
.tx-ref{
  max-width:560px;margin:0 auto var(--e1);padding:var(--e1) var(--e2);
  background:var(--brand-soft);border-radius:var(--radio-control);
  font-size:var(--t-sm);color:var(--text-2);text-align:center;
}
.tx-ref b{color:var(--text)}
.tx-ref-quitar{
  background:none;border:none;cursor:pointer;padding:0 0 0 6px;
  font-size:var(--t-xs);color:var(--text-3);text-decoration:underline;
}

.tx-calc,.tx-pizarra,.tx-propon,.tx-otro,.tx-pie,.tx-aviso{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radio-hoja);
  box-shadow:var(--sombra-1);
  padding:18px;
  margin:var(--e3) auto;
  max-width:560px;
}
.tx-calc h2,.tx-pizarra h2,.tx-propon h2,.tx-otro h2,.tx-pie h2{font-size:18px;margin-bottom:var(--e2)}

.tx-campo{display:block;margin-bottom:var(--e2)}
.tx-campo>span,.tx-campo>legend{
  display:block;font-size:var(--t-sm);font-weight:600;color:var(--text-2);margin-bottom:5px;
}
/* `input` a secas, no una lista de tipos: el campo de km es `number` y se quedo
   fuera de la lista, con el negro por defecto del navegador sobre fondo oscuro
   (invisible en modo oscuro). Cualquier tipo nuevo hereda ya el color del tema. */
.tx-campo select,.tx-campo input{
  width:100%;padding:11px var(--e2);font-size:var(--t-md);
  color:var(--text);background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radio-control);
}
.tx-opciones{border:0;padding:0}
.tx-radio{display:inline-flex;align-items:center;gap:6px;margin-right:var(--e3);font-size:var(--t-md)}

/* El precio va sobre el verde del carro, con el amarillo del rotulo: es la
   combinacion del flyer y lo que hace que la pagina se lea "taxi" de un vistazo.
   OJO: la caja se queda en verde OSCURO tambien de noche (no usa --tx-verde, que
   de noche se aclara para los textos). Amarillo sobre verde claro no se lee. */
.tx-resultado{
  background:var(--tx-caja);border-radius:var(--radio-card);
  padding:var(--e3);margin:14px 0;text-align:center;
  border:2px solid var(--tx-amarillo);
}
.tx-precio{font-size:32px;font-weight:800;letter-spacing:-1px;color:var(--tx-amarillo)}
/* Sobre el verde, los textos secundarios van en blanco: el gris de la marca
   (--text-2) desaparece ahi. */
.tx-precio-usd{font-size:var(--t-sm);color:rgba(255,255,255,.88);margin-top:2px}
.tx-vigencia{font-size:var(--t-xs);color:rgba(255,255,255,.80);margin-top:var(--e1)}
.tx-caducado{color:var(--tx-amarillo);font-weight:700}
.tx-desglose{font-size:var(--t-xs);color:rgba(255,255,255,.80);margin-top:6px}

.tx-acciones{display:flex;flex-direction:column;gap:var(--e1)}
/* .tx-wa hereda alto, radio, relleno, tamano y peso de .btn + .btn-wa; aqui solo
   queda lo propio: que ocupe todo el ancho de su contenedor. */
.tx-wa{width:100%}
/* .tx-secundario hereda las medidas de .btn; el fondo propio (surface-2, mas
   marcado que el surface de .btn-suave) es una eleccion de taxi, no un olvido. */
.tx-secundario{width:100%;background:var(--surface-2);color:var(--text);border:1px solid var(--border)}

/* El reclamo de referidores reusa .cta-comi de la tienda, pero vestido de taxi:
   alli vive dentro de la rejilla de productos (grid-column) y va en morado. */
.tx-main .cta-comi{
  grid-column:auto;
  max-width:560px;margin:var(--e3) auto;
  background:var(--tx-caja);color:#fff;
  border-bottom-color:rgba(0,0,0,.35);
}
.tx-main .cta-comi-btn{background:var(--tx-amarillo);color:var(--tx-negro)}

/* La cifra del referido: es el reclamo, tiene que verse. */
.tx-gana-cifra{
  background:var(--tx-caja);color:#fff;
  border:2px solid var(--tx-amarillo);border-radius:var(--radio-card);
  padding:var(--e2) 14px;margin:0 0 14px;font-size:14px;line-height:1.5;text-align:center;
}
.tx-gana-cifra b{color:var(--tx-amarillo);font-size:18px}

/* Calendario de ocupacion. Cada dia es una pastilla partida en dos mitades:
   arriba la mañana, abajo la tarde. Se lee de un vistazo y no dice de quien es. */
.tx-calendario{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radio-hoja);box-shadow:var(--sombra-1);
  padding:18px;margin:var(--e3) auto;max-width:560px;
}
.tx-calendario h2{font-size:18px;margin-bottom:6px}
.tx-cal-nota{font-size:var(--t-sm);color:var(--text-2);margin-bottom:14px}
.tx-cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.tx-cal-dia{text-align:center;font-size:11px;color:var(--text-3)}
.tx-cal-dia b{display:block;font-size:14px;color:var(--text);font-weight:700;line-height:1.3}
.tx-cal-mitad{
  margin-top:var(--e0);border:1px solid var(--border);border-radius:7px;overflow:hidden;
}
.tx-cal-mitad span{display:block;height:11px}
.tx-cal-mitad span + span{border-top:1px solid var(--border)}
.tx-libre{background:var(--surface-2)}
.tx-ocupado{background:var(--oferta)}
.tx-cal-hoy b{color:var(--tx-verde)}
.tx-cal-leyenda{
  display:flex;flex-wrap:wrap;gap:6px var(--e3);align-items:center;
  margin-top:14px;font-size:var(--t-xs);color:var(--text-2);
}
.tx-cal-muestra{
  display:inline-block;width:11px;height:11px;border-radius:3px;
  border:1px solid var(--border);vertical-align:-1px;margin-right:5px;
}
.tx-cal-mitades{flex-basis:100%;color:var(--text-3)}

.tx-sello{font-size:var(--t-xs);color:var(--text-3);margin-bottom:10px}
.tx-salida{
  border:1px solid var(--border);border-radius:var(--radio-card);
  padding:var(--e2);margin-bottom:10px;
}
.tx-salida-cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tx-salida-cuando{font-weight:700}
.tx-salida-precio{font-weight:800;color:var(--tx-verde);white-space:nowrap}
.tx-salida-info{font-size:var(--t-sm);color:var(--text-2);margin:var(--e0) 0 10px}
.tx-salida-lleno{color:var(--oferta);font-weight:600}

.tx-propon-campos{display:grid;gap:0}
.tx-texto{font-size:14px;color:var(--text-2);margin-top:10px}
.tx-fina{font-size:var(--t-xs);color:var(--text-3);margin-top:10px}
.tx-pie ol{margin:0 0 var(--e0) 18px;font-size:14px;color:var(--text-2)}
.tx-pie li{margin-bottom:var(--e0)}

@media (min-width:640px){
  .tx-propon-campos{grid-template-columns:1fr 1fr;gap:0 14px}
}