/*
 * CRM de Gasfiteros Sin Romper.
 *
 * Colores de la marca (azul + rojo + amarillo del logo), no los de Dr Electro. Erick: cada web
 * y cada cosa de la red tiene que verse distinta.
 *
 * FONDO CLARO, decidido por Erik el 15-oct despues de probar las dos: "con fondo blanco es
 * mejor, necesitamos espacio y el negro hace que se vea menos". Se probo la paleta oscura
 * del panel y la descarto al verla con sus datos dentro. No volver a cambiarlo sin que
 * lo pida el.
 *
 * Y SIN SCROLL HORIZONTAL: la ruta era una fila de columnas fijas y con siete tecnicos se iba
 * a 2.100 px. Ahora es una rejilla auto-fit que baja de linea sola, igual que .datos en el panel.
 */
:root{
  --fondo:#f5f6f8; --panel:#ffffff; --panel-alto:#f0f2f5; --borde:#dde1e6;
  --texto:#132234; --tenue:#667085; --azul:#0E4F92; --verde:#1C7A4B;
  --ambar:#b8730f; --rojo:#C62A1E; --gris:#8b94a0; --amarillo:#F5C024;
}
*{box-sizing:border-box}
/*
 * ⚠️ EL ATRIBUTO hidden PIERDE CONTRA UN display PROPIO. Esta apuntado en el proyecto desde
 * julio ("un display propio anula el atributo hidden; el menu movil nacia abierto") y volvio a
 * morder el 23-oct-2026: .at-cita lleva display:grid, asi que los campos de la cita se veian
 * SIEMPRE aunque el JS les pusiera hidden. Resultado: "Los datos" medía el doble y la pantalla
 * no entraba sin scroll. Con esta regla global, hidden gana siempre.
 */
[hidden]{display:none !important}
body{margin:0;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     background:var(--fondo);color:var(--texto)}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- barra ---- */
.barra{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--panel);
  border-bottom:1px solid var(--borde);padding:10px 18px;position:sticky;top:0;z-index:5}
.marca{font-weight:700;letter-spacing:-.2px}
.marca span{color:var(--rojo)}
.barra nav{display:flex;gap:16px;flex-wrap:wrap}
.barra nav a{color:var(--tenue);font-size:14px;padding:3px 0;border-bottom:2px solid transparent}
.barra nav a:hover{color:var(--texto);border-bottom-color:var(--rojo);text-decoration:none}
.quien{margin-left:auto;font-size:13px;color:var(--tenue)}

main{padding:18px;max-width:1600px;margin:0 auto}
h1{font-size:19px;margin:0 0 14px;font-weight:600}
h2{font-size:15px;margin:22px 0 10px;font-weight:600}
.tenue{color:var(--tenue);font-size:13px}
h2 span{color:var(--tenue);font-weight:400;font-size:13px}
.nota{max-width:72ch;margin-top:10px;line-height:1.6}
.vacio{padding:30px 0}
.aviso{background:#eaf5ec;border-left:3px solid var(--verde);
  padding:10px 14px;margin:0 0 14px;border-radius:0 6px 6px 0}
.error{background:#fdecec;border-left:3px solid var(--rojo);
  padding:9px 12px;border-radius:0 6px 6px 0}

/* ---- filtros ---- */
.filtro{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:var(--panel);
  border:1px solid var(--borde);border-radius:8px;padding:10px 14px;margin-bottom:14px}
.filtro label{font-size:13px;color:var(--tenue)}
/* El input generico va a width:100%, pensado para formularios en columna. Dentro del filtro
   la fecha va EN FILA con el boton Ver, asi que recupera su ancho natural. Sin esto el campo
   ocupaba la fila entera y empujaba el boton a la linea de abajo (lo cazo Erik el 17-oct). */
.filtro input[type=date]{width:auto}
.leyenda{margin-left:auto;font-size:12px;color:var(--tenue)}
.leyenda i{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 12px}


/* ---- RUTA: rejilla que baja de linea, nunca scroll horizontal ---- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:14px;align-items:start}
.col{min-width:0}
.col h2{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;
  font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--tenue);
  padding-bottom:6px;border-bottom:1px solid var(--borde)}
.tar{background:var(--panel);border:1px solid var(--borde);border-radius:8px;
  padding:10px 12px;margin-bottom:9px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* ---- El codigo de color de la hoja AGENDA, que las asesoras ya conocen ----
   blanco = nuevo · ambar = viene de dias anteriores · celeste = garantia
   azul = espera repuesto · verde = reparado · gris = no acepto            */
.tar.viejo   {border-left:3px solid var(--ambar); background:#fffbf3}
.tar.garantia{border-left:3px solid #2b7cd3;      background:#e9f3fd}
.tar.visita  {border-left:3px solid #0d8a8a;      background:#e8f6f6}
.tar.espera  {border-left:3px solid #7a5cc4;      background:#f5f1fb}
.tar.acepta  {border-left:3px solid #57ab5a;      background:#f4fbf5}
.tar.hecho   {border-left:3px solid var(--verde); background:#e9f6ec}
.tar.nope    {border-left:3px solid var(--gris);  background:#f6f7f8}
.tar.nope h3,.tar.nope .meta{opacity:.72}

.leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:3px 2px}
.leyenda i{border:1px solid var(--borde)}
.leyenda i.nuevo{background:#fff}
.leyenda i.viejo{background:var(--ambar);border-color:var(--ambar)}
.leyenda i.garantia{background:#2b7cd3;border-color:#2b7cd3}
.leyenda i.visita{background:#0d8a8a;border-color:#0d8a8a}
.leyenda i.espera{background:#7a5cc4;border-color:#7a5cc4}
.leyenda i.acepta{background:#57ab5a;border-color:#57ab5a}
.leyenda i.hecho{background:var(--verde);border-color:var(--verde)}
.leyenda i.nope{background:var(--gris);border-color:var(--gris)}
.tar h3{margin:0 0 4px;font-size:14px;font-weight:600}
.tar h3 em{font-style:normal;color:var(--tenue);font-size:11.5px;font-weight:400;
  text-transform:uppercase;letter-spacing:.3px}
.meta{margin:0;font-size:12.5px;color:var(--tenue);line-height:1.55;word-break:break-word}
.falla{color:var(--gris);font-style:italic}
.pista{display:inline-block;font-size:10.5px;font-weight:600;background:var(--panel-alto);
  color:var(--tenue);border-radius:3px;padding:1px 6px;margin-top:4px;
  text-transform:uppercase;letter-spacing:.3px}
.tar details{margin-top:8px}
.tar summary{cursor:pointer;font-size:12.5px;color:var(--azul);list-style:none}
.tar summary::-webkit-details-marker{display:none}
.tar summary::before{content:"▸ "}
.tar details[open] summary::before{content:"▾ "}
.tar form{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tar .dos{display:flex;gap:6px}
.tar .dos input{width:50%;min-width:0}

/* ---- formularios ---- */
input,select,textarea,button{font:inherit;font-size:13.5px}
input,select,textarea{border:1px solid var(--borde);border-radius:6px;padding:7px 9px;
  background:#fff;color:var(--texto);width:100%;max-width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--azul)}
textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;margin:10px 0}
button{background:var(--texto);color:#fff;border:0;border-radius:6px;padding:8px 16px;
  cursor:pointer;width:auto;font-weight:600}
button:hover{filter:brightness(1.12)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  background:var(--panel);border:1px solid var(--borde);border-radius:8px;padding:16px;
  max-width:950px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--tenue);min-width:0}
.form .a{grid-column:span 2} .form .c{grid-column:1/-1}
.enlinea{display:inline}
.enlinea button{padding:4px 10px;font-size:12.5px;background:var(--gris);color:#fff}

/* ---- tablas: el scroll vive aqui dentro, no en la pagina ---- */
.tabla{overflow-x:auto;border:1px solid var(--borde);border-radius:8px;margin-bottom:16px}
table{width:100%;border-collapse:collapse;background:var(--panel);min-width:560px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--borde);
  font-size:13px;vertical-align:top}
th{background:var(--panel-alto);font-size:11px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--tenue);font-weight:600}
tr:last-child td{border-bottom:0}
td em{font-style:normal;color:var(--tenue);font-size:11.5px;text-transform:uppercase}
tr.baja{opacity:.4}

/* ---- numeros ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:8px}
.kpis div{background:var(--panel);border:1px solid var(--borde);border-radius:8px;padding:12px 14px}
.kpis b{display:block;font-size:23px;line-height:1.2;font-weight:600}
.kpis span{font-size:11.5px;color:var(--tenue)}
.cifras{margin-top:18px;background:var(--panel);border:1px solid var(--borde);
  border-radius:8px;padding:12px 16px}
.cifras summary{cursor:pointer;color:var(--tenue);font-size:13.5px}
.cifras .kpis{margin-top:12px}
.rehacer{margin:18px 0;background:var(--panel);border:1px solid var(--borde);
  border-radius:8px;padding:12px 16px}
.rehacer summary{cursor:pointer;color:var(--ambar);font-size:13.5px}
.rehacer button{background:var(--rojo);color:#fff;margin-top:6px}

/* ---- login ---- */
body.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.caja{background:var(--panel);border:1px solid var(--borde);border-radius:10px;
  padding:28px;width:100%;max-width:380px}
.caja h1{font-size:21px;margin:0 0 18px}
.caja h1 span{color:var(--rojo)}
.caja label{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;
  font-size:12.5px;color:var(--tenue)}
.caja button{width:100%;padding:10px}
.caja code{background:var(--panel-alto);padding:1px 5px;border-radius:3px;font-size:12.5px}

@media (max-width:640px){
  main{padding:12px}
  .barra{gap:12px;padding:9px 12px}
  .quien{margin-left:0;width:100%}
  .form .a{grid-column:1/-1}
}

/* ======================================================================
 * MODO COMPACTO (15-oct-2026, pedido por Erik).
 *
 * "La idea es que este todo en una sola pantalla. Ni siquiera haciendo zoom out se ve
 * completo." Siete tecnicos tienen que caber a la vez, como en su hoja de Google.
 *
 * La cuenta: en 1366 px de ancho, quitando el padding (24) y seis huecos de 8, quedan
 * 185 px por columna. De ahi salen los minmax(170px) y las tarjetas de abajo, que son
 * densas a proposito: una linea por cosa y nada de aire.
 * ====================================================================== */
main{padding:12px 14px;max-width:none}
.cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:7px}

.col h2{font-size:10.5px;letter-spacing:.4px;margin:0 0 6px;padding-bottom:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tar{padding:6px 8px;margin-bottom:6px;border-radius:6px}
.tar h3{font-size:11.5px;margin:0 0 2px;line-height:1.3;word-break:break-word}
.tar h3 em{font-size:9.5px;letter-spacing:0}
.meta{font-size:10.5px;line-height:1.45}
.meta a{word-break:normal}
.pista{font-size:9.5px;padding:0;margin:2px 0 0;letter-spacing:0;
  background:none;color:var(--ambar);text-transform:none;font-weight:600}
.tar details{margin-top:4px}
.tar summary{font-size:11px}
.tar form{gap:4px;margin-top:5px}
.tar form input,.tar form select{padding:4px 6px;font-size:11.5px}
.tar form button{padding:5px 10px;font-size:11.5px}

.filtro{padding:8px 12px;margin-bottom:10px;gap:10px}
.barra{padding:8px 14px;gap:14px}
h1{font-size:17px;margin:0 0 10px}

/* En pantallas de verdad grandes, que no se estiren a lo ancho sin sentido */
@media (min-width:1800px){ .cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }

/* En movil, una columna y a correr */
@media (max-width:560px){
  .cols{grid-template-columns:1fr}
  .tar{padding:8px 10px}
  .meta{font-size:12px}
}

/* El formulario de estado: lo que no pide el estado se oculta via [hidden] */
.tar form [data-pide][hidden]{display:none}
.tar form>div{display:contents}
.tar form .dos{display:flex;gap:5px}
.tar details.editar{margin-top:2px}
.tar details.editar summary{color:var(--tenue);font-size:10.5px}
.tar details.editar input{font-size:11px;padding:4px 6px}

.tar form button{align-self:flex-start;padding:5px 14px}

.col h2 .copiar{background:none;border:1px solid var(--borde);color:var(--azul);
  font-size:9.5px;padding:1px 6px;border-radius:4px;margin-left:5px;font-weight:600;
  text-transform:none;letter-spacing:0}
.col h2 .copiar:hover{background:var(--panel-alto);filter:none}

/* ---- Registrar llamada: formulario denso, de una pasada ---- */
.form.llamada{max-width:1100px}
.form.llamada .agendo-check{flex-direction:row;align-items:center;gap:8px;
  background:var(--panel-alto);border:1px solid var(--borde);border-radius:6px;
  padding:9px 12px;font-size:13px;color:var(--texto);cursor:pointer}
.form.llamada .agendo-check input{width:auto;margin:0}
.form.llamada .agendo-check strong{color:var(--verde)}
#datos-agenda[hidden]{display:none}
#datos-agenda>.form{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* ---- Arrastrar tarjetas entre tecnicos ---- */
.tar{cursor:grab}
.tar:active{cursor:grabbing}
.tar.cogida{opacity:.4}
.col{min-height:60px;border-radius:8px;transition:background .12s}
.col.destino{background:#eef4fd;box-shadow:inset 0 0 0 2px var(--azul)}
.tar.movida{animation:avisa 1.4s ease-out}
@keyframes avisa{0%{box-shadow:0 0 0 2px var(--verde)}100%{box-shadow:0 0 0 2px rgba(0,0,0,0)}}
/* los campos no deben robarle el arrastre a la tarjeta */
.tar input,.tar select,.tar textarea,.tar button,.tar a,.tar summary{cursor:auto}
.tar summary,.tar button,.tar a{cursor:pointer}

.form textarea{min-height:90px}
.form label span.tenue{font-weight:400;line-height:1.5;margin-bottom:2px}
.form code{background:var(--panel-alto);padding:1px 4px;border-radius:3px}

.col h2 .porhora{margin-left:3px}

.borrar button{background:none;border:1px solid var(--borde);color:var(--rojo);
  font-size:11px;padding:3px 9px;font-weight:600}
.borrar button:hover{background:var(--rojo);color:#fff;filter:none}
.tar .borrar{margin-top:5px}

/* ---- separador entre lo que queda por hacer y lo ya resuelto ---- */
.corte{display:flex;align-items:center;gap:7px;margin:12px 0 7px;
  font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--tenue)}
.corte::before,.corte::after{content:"";flex:1;height:1px;background:var(--borde)}
.pista.mov{color:var(--azul)}

/* ---- ayer / hoy / mañana ---- */
.saltos{display:flex;gap:2px}
.saltos a{font-size:12.5px;padding:4px 10px;border:1px solid var(--borde);
  border-radius:6px;color:var(--tenue);text-decoration:none;background:var(--panel)}
.saltos a:hover{color:var(--texto);text-decoration:none}
.saltos a.hoy{background:var(--texto);color:#fff;border-color:var(--texto)}

/* ---- aviso flotante, no barra ---- */
.flota{position:fixed;right:16px;bottom:16px;z-index:50;max-width:340px;
  background:var(--texto);color:#fff;padding:10px 16px;border-radius:8px;
  font-size:13px;box-shadow:0 6px 20px rgba(16,24,40,.22);
  transition:opacity .4s,transform .4s}
.flota.fuera{opacity:0;transform:translateY(8px);pointer-events:none}

/* ---- el embudo, acumulativo ---- */
.embudo{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.embudo .paso{background:var(--panel);border:1px solid var(--borde);border-radius:8px;padding:12px 14px}
.embudo .barra{height:5px;background:var(--panel-alto);border-radius:3px;overflow:hidden;margin-bottom:9px}
.embudo .barra span{display:block;height:100%;background:var(--azul);border-radius:3px}
.embudo b{display:block;font-size:26px;line-height:1.1;font-weight:600}
.embudo span{font-size:12px;color:var(--tenue)}
.embudo i{display:block;font-style:normal;font-size:11px;color:var(--gris);margin-top:3px}

/* ------------------------------------------------------------------ *
 *  PANTALLA DINERO. Solo la abren los administradores.
 * ------------------------------------------------------------------ */
.din-cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
            margin:16px 0}
.din-cifras>div{background:var(--panel);border:1px solid var(--borde);border-radius:8px;
                padding:12px 14px}
.din-cifras span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
                 color:var(--tenue)}
.din-cifras strong{display:block;font-size:22px;margin-top:4px;font-variant-numeric:tabular-nums}
.din-cifras em{display:block;font-style:normal;font-size:11.5px;color:var(--tenue);margin-top:3px}
.din-cifras .destaca{border-color:var(--verde);background:#f2f9f3}
.din-cifras .destaca strong{color:var(--verde)}
.din-reparto strong{font-size:19px}

/* El que no tiene gasto apuntado se ve: es el que infla la utilidad. */
tr.falta{background:#fffaf0}
tr.falta td em{color:var(--ambar)}
input.mini{width:88px;padding:5px 7px;font-size:13.5px}
tfoot td{background:var(--panel-alto);font-weight:600;border-top:2px solid var(--borde)}

.aviso-flojo{background:#fffaf0;border:1px solid var(--ambar);border-left-width:4px;
             border-radius:6px;padding:10px 13px;font-size:13.5px;margin:0 0 16px}

a.chip{background:var(--panel-alto);border:1px solid var(--borde);border-radius:14px;
       padding:4px 11px;font-size:12.5px}
a.chip:hover{background:var(--panel)}

/* Los dos gastos, uno al lado del otro dentro del formulario de cierre. */
.tar form .gastos{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* =============================================================================
 * LO PROPIO DE SIN ROMPER: precio por web, quien puede ir, mensajes y el parte.
 * ============================================================================= */

/* --- el precio, con los tres numeros --- */
.precios{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:8px 0 0;
  padding:7px 9px;background:var(--panel-alto);border-radius:4px;font-size:13px}
.precios b{font-size:16px;color:var(--texto);
  box-shadow:inset 0 -7px 0 rgba(245,192,36,.45);padding:0 2px}
.precios span{color:var(--tenue)}
.precios .suelo{color:var(--rojo);font-weight:600}
.precios .maq{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:11px}

/* --- avisos del caso --- */
.ojo{margin:8px 0 0;padding:8px 10px;font-size:13px;line-height:1.45;
  background:#fdecea;border-left:3px solid var(--rojo);border-radius:0 4px 4px 0}

/* --- quien puede ir --- */
details.quien,details.mensajes{margin:8px 0 0;font-size:13px}
details.quien summary,details.mensajes summary{cursor:pointer;color:var(--azul);
  padding:3px 0;list-style-position:inside}
details.quien ul,ul.tecs{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px}
details.quien li,ul.tecs li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;
  padding:7px 9px;background:var(--panel-alto);border-radius:4px;border:1px solid transparent}
details.quien li.p3,ul.tecs li.p3{background:#e9f6ec;border-color:#b6ddc8}
details.quien li.p0,ul.tecs li.p0{opacity:.6}
details.quien .etq,ul.tecs .etq{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue)}
details.quien li.p3 .etq,ul.tecs li.p3 .etq{color:var(--verde);font-weight:600}
details.quien li.p0 .etq,ul.tecs li.p0 .etq{color:var(--rojo)}
details.quien .pct,ul.tecs .pct{margin-left:auto;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--azul)}
details.quien .ruta,ul.tecs .ruta{flex-basis:100%;color:var(--tenue);font-size:12px}
.pin{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--azul);
  border:1px solid var(--azul);border-radius:3px;padding:0 4px}

/* --- los mensajes de WhatsApp --- */
.msg{margin-top:8px;background:var(--panel-alto);border-radius:4px;padding:8px 10px}
.msg .mt{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tenue);margin-bottom:5px}
.msg pre{margin:0;white-space:pre-wrap;font:13px/1.55 inherit;color:var(--texto);
  max-height:230px;overflow:auto;user-select:all}
.msg .copiar{margin-top:7px;background:none;border:1px solid var(--azul);color:var(--azul);
  border-radius:4px;padding:5px 11px;font-size:12px;cursor:pointer}
.msg .copiar:hover{border-color:var(--texto);filter:none}

/* --- el parte de manana --- */
.tparte{width:100%;border-collapse:collapse;background:var(--panel);
  border:1px solid var(--borde);border-radius:6px;overflow:hidden}
.tparte th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);
  text-align:left;padding:9px 11px;background:var(--panel-alto);border-bottom:1px solid var(--borde)}
.tparte td{padding:9px 11px;border-bottom:1px solid var(--panel-alto);vertical-align:middle}
.tparte tr:last-child td{border-bottom:0}
.tparte tr.si{background:#f4fbf5}
.tparte .rubros{display:block;font-size:12px;color:var(--tenue);margin-top:2px}
.tparte select,.tparte input[type=text]{width:100%;min-width:120px}
.tparte .centro{text-align:center}
.tparte input[type=checkbox]{width:18px;height:18px;accent-color:var(--azul)}
.parte .guardar{margin-top:14px}
.llamada{margin-top:26px;background:var(--panel);border:1px solid var(--borde);
  border-radius:6px;padding:16px 18px;max-width:80ch}
.llamada ol{margin:10px 0 0;padding-left:20px;display:grid;gap:11px}
.llamada li span{display:block;color:var(--tenue);font-size:13px;margin-top:2px}
.ayuda{max-width:76ch;color:var(--tenue);line-height:1.6;margin:0 0 14px}

/* =============================================================================
 * ATENDER. Regla que manda sobre todo lo demas (Erick, 23-oct): tiene que caber
 * SIN SCROLL. Nada decorativo, nada de entradilla, todo arriba.
 * ============================================================================= */
.at-filtros{background:var(--panel);border:1px solid var(--borde);border-radius:6px;
  padding:11px 14px;margin-bottom:12px}
/* LA CABECERA EN DOS COLUMNAS (Erick, 23-oct: "poner las preguntas y lo de los avisos en el
   lado derecho"). Izquierda: el servicio, que es lo que da el precio. Derecha: las preguntas
   arriba y la ubicacion debajo, que no tocan el precio. */
.at-cab{display:grid;gap:12px 20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1040px){
  .at-cab{grid-template-columns:minmax(290px,auto) minmax(0,1fr);align-items:start}
}
.at-izq{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.at-der{display:grid;gap:10px;align-content:start}
.at-izq .rubro select{font-size:15px;font-weight:600;color:var(--azul);min-width:210px;
  border-color:var(--azul);background:#f4f8fd}
.at-izq .trabajo select{font-size:14.5px;min-width:215px}
.at-izq .rubro,.at-izq .trabajo{font-size:10.5px}

/* LA FILA QUE NO DA EL PRECIO: distrito, sitio y piso. Abajo y en pequeno. */
.at-fila2{display:flex;flex-wrap:wrap;gap:6px 11px;align-items:end;
  margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--panel-alto)}
.at-fila2 label{display:grid;gap:2px;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--tenue)}
.at-fila2 select{font-size:12.5px;padding:4px 7px;background:transparent;
  border-color:var(--panel-alto)}
.at-fila2 select:hover{border-color:var(--azul)}

/* las preguntas marcables: las que cambian el precio van señaladas */
.chk{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer;
  background:var(--panel-alto);border:1px solid transparent;border-radius:5px;padding:8px 12px}
.chk:hover{border-color:var(--azul)}
.chk input{width:15px;height:15px;accent-color:var(--azul);cursor:pointer}
.chk em{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ambar);margin-left:6px;white-space:nowrap}
/* La que cambia el precio va señalada SIEMPRE, no solo al marcarla: es la que hay que preguntar
   sí o sí, y Erick la quiere a la vista en la primera línea. */
.chk.clave{border-color:#dfc187;background:#fffaef}
.chk.clave input{accent-color:var(--ambar)}
.chk.on{border-color:var(--azul);background:#eaf1fa}
.chk.clave.on{border-color:var(--ambar);background:#fff4df}
.chk.clave.on em{color:#8a5a00}

/* por que cambia, explicado para decirselo al cliente */
.subio{color:var(--ambar);font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  margin-left:8px}
.btn-link{align-self:center;font-size:13px;color:var(--tenue)}
.at-filtros label{display:grid;gap:3px;font-size:11px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.05em}
.at-filtros select,.at-filtros input{font-size:14px;padding:6px 8px}
.at-filtros button{padding:7px 16px}

.at{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.at section{background:var(--panel);border:1px solid var(--borde);border-radius:6px;padding:12px 14px}
.at h2{margin:0 0 8px;font-size:13px}
.at h2 span{margin-left:7px;color:var(--tenue);font-weight:400;font-size:12px;text-transform:none}

/* el precio: lo unico grande de la pantalla */
/* El bloque del precio vive FUERA de la rejilla .at, asi que lleva su propia tarjeta:
   al sacarlo de ahi perdio fondo, borde y relleno, y por eso se veia pegado (Erick, 23-oct). */
.at-precio{background:var(--panel);border:1px solid var(--borde);border-left:4px solid var(--azul);
  border-radius:6px;padding:16px 18px;margin-bottom:12px;
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:baseline}
.at-que{font-size:13px;color:var(--tenue);flex-basis:100%}
.pide{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin:0}

.pide b{font-size:32px;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -9px 0 rgba(245,192,36,.45);padding:0 3px}
.pide .suelo{color:var(--rojo);font-weight:600;font-size:13px}
.at-precio .maq{margin:4px 0 0;font-size:12.5px;color:var(--tenue);flex-basis:100%}

/* las tres preguntas */

/* avisos */
.ojo.suave{background:var(--panel-alto);border-left-color:var(--borde);color:var(--texto)}

/* el mensaje */
.at-msg h2 .copiar{margin-left:10px;background:none;border:1px solid var(--azul);color:var(--azul);
  border-radius:4px;padding:3px 10px;font-size:11.5px;cursor:pointer;vertical-align:1px}
.at-msg h2 .copiar:hover{border-color:var(--texto);filter:none}
/*
 * El mensaje se PINTA en parrafos, no con las lineas en blanco del texto: al estrechar la
 * columna a la mitad cada parrafo pasa a dos lineas, y las 4 lineas en blanco costaban 84px de
 * alto que sacaban la pantalla del limite de "todo en un vistazo, sin scroll". Lo que se COPIA
 * sigue siendo el texto entero con sus saltos: viaja en data-ruta del boton, no en lo pintado.
 */
.at-msg .at-texto{margin:0;font:13px/1.5 inherit;color:var(--texto);
  background:var(--panel-alto);border-radius:4px;padding:10px 11px;user-select:all}
.at-msg .at-texto p{margin:0 0 7px;text-wrap:pretty}
.at-msg .at-texto p:last-child{margin-bottom:0}

/* guardar */
.at-guardar{border-left:4px solid var(--verde)}
.at-form{display:grid;gap:9px 12px;grid-template-columns:1fr 1fr}
.at-form label{display:grid;gap:3px;font-size:11px;color:var(--tenue);text-transform:uppercase;
  letter-spacing:.05em}
.at-form label.ancho{grid-column:1/-1}
.at-form input,.at-form select{font-size:14px;padding:6px 8px}
.at-botones{grid-column:1/-1;display:flex;gap:9px;flex-wrap:wrap;margin-top:3px}
.at-botones .primario{background:var(--verde);border-color:var(--verde)}

/* los contactos del dia, plegados: no roban sitio */
.at-hoy{margin-top:16px}
.at-hoy summary{cursor:pointer;color:var(--azul);font-size:13.5px;padding:4px 0}
.at-hoy table{margin-top:8px}

/* ---- en que pantalla estoy ---- */
.barra nav a.aqui{color:var(--texto);font-weight:600;border-bottom-color:var(--rojo)}

/* ---- la ruta en la cabecera de cada columna de la agenda ---- */
.col-ruta{margin:2px 0 8px;font-size:11.5px;color:var(--tenue);line-height:1.35}
.col-ruta.libre{color:var(--verde);font-weight:500}

/* ---- el precio cuando una respuesta lo cambio, y el modo "no des precio" ---- */
.at-precio.escalado{border-left-color:var(--ambar)}
.at-precio.lead{border-left-color:var(--ambar);background:#fffaf0}
.at-leadmsg{font-size:14px;line-height:1.55}
.at-leadmsg b{color:var(--texto)}
.at-leadmsg span{display:block;margin-top:5px;color:var(--tenue);font-size:13px}

.dos-precios{flex-basis:100%;margin:2px 0 0;font-size:13px;line-height:1.5;color:var(--texto);
  background:#fffaf0;border:1px solid #f0dcb4;border-radius:5px;padding:9px 11px}

/* ---- la casilla que decide si entra en la agenda ---- */
.chk-agendo{display:flex !important;flex-direction:row;align-items:center;gap:8px;
  text-transform:none !important;letter-spacing:0 !important;font-size:13.5px !important;
  color:var(--texto) !important;background:var(--panel-alto);border-radius:5px;padding:8px 10px;
  cursor:pointer}
.chk-agendo input{width:17px;height:17px;accent-color:var(--verde);cursor:pointer}
.at-cita{grid-column:1/-1;display:grid;gap:9px 12px;grid-template-columns:1fr 1fr}
/*
 * Los datos de la cita SOLO se piden si el cliente ya acepto. Va con CSS puro y no con JS para
 * que (a) no parpadee al cargar y (b) la casilla siga funcionando aunque el JS no corra. Tiene
 * que ir DESPUES de la regla de arriba, que es la que le da su display:grid.
 * El JS de index.php hace lo mismo, y se queda de respaldo para un navegador sin :has().
 */
.at-form:not(:has(#se_agendo:checked)) .at-cita{display:none}
.at-cita label.ancho{grid-column:1/-1}
.copiar-lead{background:none;border:1px solid var(--borde);color:var(--azul);font-size:12.5px;
  padding:8px 12px;border-radius:5px;cursor:pointer}
.copiar-lead:hover{border-color:var(--azul);filter:none}

/* ---- el porque de cada respuesta marcada: corto y pegado a su pregunta ---- */
/* Erick, 23-oct: "la parte que da el precio usa el 30% del espacio; esos mensajes podrian
   aparecer a la derecha del precio, en la otra mitad, para que no se vaya todo para abajo". */
.at-fila-precio{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-bottom:12px}
@media(min-width:1000px){
  /* A la derecha del precio va EL MENSAJE, que es lo que se lee y se copia (Erick, 23-oct). */
  /* Mitad y mitad, pedido por Erick el 23-oct: "deberia ser 50 y 50, no como ahora que
     parece 30 y 70". Antes el precio estaba topado a 400px y el mensaje se comia el resto. */
  .at-fila-precio{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
}
.at-fila-precio .at-precio{margin-bottom:0}
.at-fila-precio .at-msg{margin:0;background:var(--panel);display:flex;flex-direction:column;
  border:1px solid var(--borde);border-radius:6px;padding:12px 14px}
.at-fila-precio .at-msg .at-texto{flex:1;margin:0}
/* Lo que hay que decirle al cliente: los avisos del caso y el porque de cada respuesta
   marcada, juntos y al lado del precio (Erick, 23-oct). */
.at-decir{display:grid;gap:7px;align-content:start;margin-bottom:12px}
.at-decir:empty{display:none}
.porque{margin:0;font-size:13px;line-height:1.5;color:var(--texto);background:var(--panel);
  border:1px solid var(--borde);border-left:3px solid var(--borde);border-radius:0 5px 5px 0;
  padding:9px 12px}
.porque.sube{border-left-color:var(--ambar);background:#fffaf0}
.porque.ojoflag{border-left-color:var(--rojo);background:var(--rojo-soft)}
.porque b{color:var(--texto)}
.porque.sube{color:var(--texto);border-left-color:var(--ambar)}

/* ---- el orden de la pantalla: el mensaje y los datos arriba ---- */
@media(min-width:980px){
  .at{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* La fila se fija a mano porque en el HTML "Los datos" va ANTES que "Quien puede ir": sin
     grid-row, la colocacion automatica no retrocede y mandaba el segundo a una fila nueva,
     dejando medio hueco vacio (Erick, 23-oct). */
  .at-quien{grid-column:1/3;grid-row:1}
  .at-guardar{grid-column:3/4;grid-row:1}
}
.at-msg .at-texto{font-size:13.5px;line-height:1.6}
/* Las informativas: mas pequenas y sin fondo, para que no compitan con la clave. */

/* ---- TODAS las preguntas en la primera linea, a la derecha (Erick, 23-oct) ----
   "definitivamente quisiera las preguntas arriba, a la derecha, en la misma linea que esten
   todas. Al menos las otras, las que no son tan importantes, en pequenas."                  */
.at-preguntas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.at-preguntas .chk{padding:5px 9px;font-size:12px}
.at-preguntas .chk span{white-space:nowrap}
.at-preguntas .chk.mini{font-size:11px;padding:4px 8px;background:transparent;
  border:1px solid var(--panel-alto);color:var(--tenue)}
.at-preguntas .chk.mini input{width:13px;height:13px}
.at-preguntas .chk.mini.on{background:#eaf1fa;border-color:var(--azul);color:var(--texto)}


/* ---- la tarjeta de la agenda, recortada (Erick, 23-oct) ----
   Solo lo que hace falta de un servicio YA agendado: el monto y editar datos. */
.monto{display:flex;align-items:baseline;gap:8px;margin:8px 0 0;padding:7px 9px;
  background:var(--panel-alto);border-radius:4px}
.monto span{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue)}
.monto b{font-size:16px;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 -7px 0 rgba(245,192,36,.45);padding:0 2px}
.editar-datos{margin-top:12px;padding-top:11px;border-top:1px solid var(--panel-alto)}

/* ---- los dos mensajes que quedan pendientes justo al agendar ---- */
.at-tras{display:grid;gap:10px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.at-tras .msg{margin-top:0;background:var(--panel);border:1px solid var(--borde);
  border-left:3px solid var(--verde)}
.at-tras .mt{display:flex;align-items:center;gap:9px;justify-content:space-between}
.at-tras .copiar{background:none;border:1px solid var(--azul);color:var(--azul);
  border-radius:4px;padding:3px 9px;font-size:11px;cursor:pointer}
.at-tras pre{margin:0;white-space:pre-wrap;font:12.5px/1.55 inherit;color:var(--texto);
  max-height:230px;overflow:auto;user-select:all}