/* ===================================================================
   SADIA - las piezas del diseño nuevo (vestido «Tibio»).
   Sale tal cual de docs/maquetas/sadia-base.css, sin las dos reglas que
   pisaban a toda la pagina (el box-sizing global y el body): aca convive
   con el marco de siempre hasta que el bloque 7 lo reemplace.
   =================================================================== */
/* ===================================================================
   SADIA - las piezas comunes de TODAS las pantallas.
   Una sola hoja: si un renglon o una tarjeta se toca aca, cambia en
   todas las pantallas a la vez. Cada pantalla agrega SOLO lo suyo.
   Va DESPUES de web/static/style.css, que aporta los colores y la
   escala tipografica.
   =================================================================== */

:root{
  --sd-ancho: 440px;
  --sd-r: 16px;
}
/* style.css trata a todo <button> como un boton de accion: le pone sombra y
   lo pinta de naranja al pasar el mouse. Acá casi todos los botones son
   renglones y accesos -pintarlos enteros tapa el nombre y la cifra-, así que
   el reset va primero y cada pieza se pinta después. */
.sd button{box-shadow:none}
.sd button:hover{background:none;color:inherit;border-color:var(--borde)}
/* Cada uno repite `button` en el selector: si no, el reset de arriba -que
   lleva el elemento adentro- les gana y los renglones quedan sin reacción. */
.sd button.sd-fila:hover,
.sd .sd-chips button:hover{background:var(--hover)}
.sd button.sd-btn:hover{background:var(--accion-viva);color:var(--sobre-color)}
.sd button.sd-btn.fantasma:hover{background:var(--sup-3);color:var(--tinta)}
.sd button.sd-ir:hover{background:var(--accion-viva)}
.sd button.sd-tema:hover{background:var(--sup-2)}

/* Ancho completo: nada de una columna angosta con la pantalla vacia al lado.
   Lo que cambia con el ancho es cuantas columnas entran, no cuanto sobra. */
.sd{width:100%;background:var(--fondo);min-height:100vh;
    padding:0 0 186px;position:relative}

/* El bloque de pantalla ancha vive al FINAL de la hoja, no acá: entre dos
   reglas de la misma fuerza gana la última escrita, y una media query no
   cambia eso. Escrito arriba, las reglas del celular le ganaban. */

/* ---------------------------------------------------------- la barra */
/* Vidrio: el contenido pasa POR DEBAJO en vez de chocar contra una franja
   opaca. El filete no está siempre — aparece recién cuando hay algo que
   separar (iOS: scroll edge effect, no una línea permanente). */
.sd-barra{position:sticky;top:0;z-index:30;padding:12px 16px;
  background:color-mix(in srgb,var(--fondo) 74%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color .34s var(--ios-out,ease-out)}
.sd-barra.pegada{border-bottom-color:var(--borde)}

/* ---- el número del día se mete en la barra ----
   Cuando el número grande se va por arriba, aparece chiquito en un segundo
   renglón de la barra, subiendo desde abajo y achicándose: es el título grande
   de iOS metiéndose en la barra. Y acá además sirve para algo: bajás por una
   lista de cien renglones y el total del día no se te va de la vista.

   El renglón nace de alto CERO, así que arriba de todo la barra se ve igual
   que siempre. `--p` va de 0 a 1 y la escribe el script con el scroll.

   Se intentó primero con la tapa pegada abajo de la barra y NO se puede: una
   pieza pegada no sale de la caja que la contiene, y la tapa vive adentro de
   la cabecera de la pantalla. Se despegaba a las tres pantallas y el número
   desaparecía. */
.sd-barra-num{display:block;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;
  height:calc(var(--p,0) * 1.6rem);
  opacity:var(--p,0);
  font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:1.25rem;line-height:1.6rem;letter-spacing:-.022em;
  color:var(--tinta);
  transform:translateY(calc((1 - var(--p,0)) * 10px))
            scale(calc(1 + (1 - var(--p,0)) * .18));
  transform-origin:left center}
.sd-barra-num .sg{color:var(--tinta-3);font-weight:400;margin-right:.1em}
.sd-marca{font-family:var(--f-din);font-size:1.0625rem;letter-spacing:-.01em;
  font-weight:400;color:var(--tinta)}
.sd-marca b{font-weight:680}
.sd-barra-fila{display:flex;align-items:center;gap:12px}
.sd-barra .sd-sp{flex:1}
.sd-vivo{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-micro);
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3)}
.sd-punto{width:7px;height:7px;border-radius:50%;background:var(--vivo);
  box-shadow:0 0 0 3px var(--vivo-piso)}
.sd-tema{border:1px solid var(--borde);background:var(--sup);color:var(--tinta-2);
  border-radius:999px;padding:5px 11px;font-size:var(--t-micro);cursor:pointer;
  font-family:inherit}

/* ---------------------------------------------------- la tapa del dia */
.sd-tapa{padding:20px 16px 10px}
.sd-sello{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 8px}
.sd-cifra{font-family:var(--f-num);font-weight:600;letter-spacing:-.025em;
  font-size:2.5rem;line-height:1.05;margin:0;font-variant-numeric:tabular-nums}
.sd-cifra .sg{color:var(--tinta-3);font-weight:400;font-size:.62em;
  margin-right:.12em;vertical-align:.06em}
.sd-pie{margin:8px 0 0;font-size:var(--t-sub,.9375rem);color:var(--tinta-2)}
.sd-pie b{font-weight:600}
.sd-baja{color:var(--mal)} .sd-sube{color:var(--ok)}

/* ------------------------------------------------------- las secciones */
.sd-sec{padding:0 16px 22px}
.sd-cab{display:flex;align-items:baseline;gap:10px;margin:0 0 9px;padding:0 2px}
.sd-cab h2{margin:0;font-size:var(--t-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3);font-weight:600}
.sd-cab .sd-sp{flex:1}
.sd-cab a{font-size:var(--t-menor);color:var(--accion-viva);text-decoration:none;
  font-weight:500}

.sd-hoja{background:var(--sup);border:1px solid var(--borde);
  border-radius:var(--sd-r);box-shadow:var(--s2),var(--filo);overflow:hidden}

/* el renglon: nombre a la izquierda, cifra a la derecha, una sola linea */
.sd-fila{display:flex;align-items:center;gap:12px;padding:13px 15px;
  border-top:1px solid var(--borde);cursor:pointer;background:none;border-left:0;
  border-right:0;border-bottom:0;width:100%;text-align:left;color:inherit;
  font:inherit}
.sd-fila:first-child{border-top:0}
.sd-fila:active{background:var(--hover)}
.sd-fila .nom{flex:1;min-width:0}
.sd-fila .nom b{display:block;font-weight:560;font-size:var(--t-cuerpo,1.0625rem);
  letter-spacing:-.011em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-fila .nom s{display:block;text-decoration:none;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-3);margin-top:2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sd-fila .val{font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-weight:560;font-size:var(--t-t3,1.25rem);letter-spacing:-.018em;
  white-space:nowrap}
.sd-fila .val.chico{font-size:var(--t-cuerpo,1.0625rem)}
.sd-fila .fle{color:var(--tinta-3);font-size:1rem;margin-left:-4px}

/* la fila de arriba de una lista: el total */
.sd-total{display:flex;align-items:flex-end;gap:12px;padding:15px 15px 13px}
.sd-total .nom{flex:1}
.sd-total .rot{font-size:var(--t-pie,.8125rem);color:var(--tinta-2);
  display:block;margin:0 0 3px}
.sd-total .big{font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:1.6rem;letter-spacing:-.024em;line-height:1.1;
  display:block}
.sd-total .dif{font-size:var(--t-pie,.8125rem);margin:5px 0 0;color:var(--ok);
  display:block}

/* ------------------------------------------------ hay que hacer algo */
.sd-hacer .sd-hoja{border-color:var(--borde-2)}
.sd-hacer .sd-cab h2{color:var(--tinta-2)}
.sd-act{display:flex;align-items:center;gap:12px;padding:13px 15px;
  border-top:1px solid var(--borde)}
.sd-act:first-child{border-top:0}
.sd-act .sem{width:9px;height:9px;border-radius:50%;flex:none}
.sd-act .sem.rojo{background:var(--mal);box-shadow:0 0 0 3px var(--mal-piso)}
.sd-act .sem.ambar{background:var(--alerta);box-shadow:0 0 0 3px var(--alerta-piso)}
.sd-act .nom{flex:1;min-width:0}
.sd-act .nom b{display:block;font-weight:560;letter-spacing:-.011em;
  font-size:var(--t-cuerpo,1.0625rem)}
.sd-act .nom s{display:block;text-decoration:none;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-2);margin-top:2px}
.sd-btn{border:0;border-radius:999px;padding:8px 15px;font-size:var(--t-menor);
  font-weight:600;cursor:pointer;background:var(--accion);color:var(--sobre-color);
  white-space:nowrap;letter-spacing:-.005em;font-family:inherit}
.sd-btn:active{transform:scale(.96)}
.sd-btn.fantasma{background:var(--sup-2);color:var(--tinta-2);
  border:1px solid var(--borde)}

/* ------------------------------------------ tus tanques: unir un par */
.unir-botones{display:flex;gap:8px;flex:none;margin:0}
.unir-botones .sd-btn{margin:0}
@media (max-width:520px){
  .sd-act.unir-par{flex-wrap:wrap}
  .unir-botones{width:100%;justify-content:flex-end}
}

/* ---------------------------------------------- lo que vi: de costado */
.sd-carr{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:2px 16px 4px;margin:0 -16px;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.sd-carr::-webkit-scrollbar{display:none}
/* Sin espaciador y sin alto mínimo: la cifra va PEGADA a la frase que
   explica, no empujada al piso de la tarjeta. El hueco que sobra cae abajo
   de todo, donde no separa nada. */
.sd-tar{scroll-snap-align:start;flex:none;width:232px;background:var(--sup);
  border:1px solid var(--borde);border-radius:var(--sd-r);padding:13px;
  box-shadow:var(--s2),var(--filo);display:flex;flex-direction:column;gap:6px;
  cursor:pointer}
.sd-tar:active{background:var(--hover)}
.sd-tar .kick{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:600}
.sd-tar .kick.op{color:var(--sadia)}
.sd-tar .tit{font-size:var(--t-sub,.9375rem);line-height:1.38;font-weight:550;
  letter-spacing:-.008em;margin:0}
.sd-tar .sp{flex:1}
.sd-tar .num{font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-weight:600;font-size:var(--t-t3,1.25rem);letter-spacing:-.02em;
  margin-top:2px}
.sd-tar .num s{text-decoration:none;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-3);font-weight:400;margin-left:6px;letter-spacing:0}

/* --------------------------------------------------------- el chat */
.sd-chat{position:fixed;bottom:0;left:0;right:0;z-index:40;
  background:color-mix(in srgb,var(--fondo) 78%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid var(--borde);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
@media(min-width:900px){.sd-chat{padding:12px 32px 16px}}
.sd-chips{display:flex;gap:7px;overflow-x:auto;padding:0 0 9px;
  scrollbar-width:none}
.sd-chips::-webkit-scrollbar{display:none}
.sd-chips button{flex:none;border:1px solid var(--borde);background:var(--sup-2);
  color:var(--tinta-2);border-radius:999px;padding:7px 13px;
  font-size:var(--t-menor);cursor:pointer;white-space:nowrap;font-family:inherit}
.sd-caja{display:flex;align-items:center;gap:8px;background:var(--sup-2);
  border:1px solid var(--borde);border-radius:999px;padding:5px 5px 5px 16px}
.sd-caja input{flex:1;min-width:0;border:0;background:none;color:var(--tinta);
  font:inherit;font-size:var(--t-sub,.9375rem);outline:none;padding:8px 0}
.sd-caja input::placeholder{color:var(--tinta-3)}
.sd-ir{width:40px;height:40px;border-radius:50%;border:0;flex:none;
  background:var(--accion);color:var(--sobre-color);padding:0;
  cursor:pointer;display:grid;place-items:center;font-family:inherit;
  transition:transform .1s var(--ios-out,ease-out)}
.sd-ir:active{transform:scale(.92)}
.sd-ir svg{width:19px;height:19px;display:block}
.sd-mic{background:none;border:0;color:var(--tinta-3);padding:6px;
  cursor:pointer;font-family:inherit;display:grid;place-items:center}
.sd-mic svg{width:20px;height:20px;display:block}

/* -------------------------------------------- lo que SADIA SUGIERE
   Toda la pantalla es ella contándole al dueño lo que vio: un recuadro
   aparte que dijera "SADIA sugiere" daría a entender que el resto NO es
   ella. Entonces la sugerencia vive ADENTRO de la tarjeta del hecho que
   la generó — pegada a su número, no al lado.
   Lo que no cambia: un hecho medido y una recomendación se tienen que ver
   distinto aunque estén uno abajo del otro. Por eso la sugerencia va sobre
   piso lila, separada por un filete, y arranca diciendo "Te sugiero". */
.sd-tar .sd-op{margin:8px -13px -13px;padding:9px 13px 11px;
  background:var(--sadia-piso);border-top:1px solid var(--sadia);
  font-size:var(--t-pie,.8125rem);line-height:1.42;color:var(--tinta)}
.sd-tar .sd-op b{color:var(--sadia);font-weight:700}

/* ------------------------------------------------------- el apretón
   Responde al APOYAR el dedo, no al soltarlo: esperar al click se siente
   muerto. Un renglón ancho no se achica entero, se hunde de color. */
.sd-fila,.sd-tar,.sd-chips button{
  transition:background-color .1s var(--ios-out,ease-out),
             transform .1s var(--ios-out,ease-out)}
.sd-tar:active{transform:scale(.985)}
.sd-chips button:active{transform:scale(.96)}


/* --------------------------------------------- volver, en la barra
   Una pantalla adentro tiene que decir de donde se vuelve. */
.sd-atras{background:none;border:0;cursor:pointer;padding:6px 8px 6px 0;
  color:var(--accion-viva);display:grid;place-items:center;font-family:inherit;
  transition:transform .1s var(--ios-out,ease-out)}
.sd-atras:active{transform:scale(.9)}
.sd-atras svg{width:20px;height:20px;display:block}

/* ------------------------------------------------- la fila de tiras
   Dos a cuatro cifras chicas del MISMO peso, cada una con su rotulo.
   Son el contexto de la cifra grande, no cifras que compiten con ella. */
.sd-tiras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--borde);border-block:1px solid var(--borde);
  margin:0 0 22px}
.sd-tiras.de2{grid-template-columns:repeat(2,1fr)}
.sd-tira{background:var(--fondo);padding:12px 16px}
.sd-tira .rot{display:block;font-size:var(--t-micro);letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 4px}
.sd-tira .val{display:block;font-family:var(--f-num);
  font-variant-numeric:tabular-nums;font-weight:600;
  font-size:var(--t-t3,1.25rem);letter-spacing:-.018em;line-height:1.15}
.sd-tira .val s{text-decoration:none;font-size:var(--t-menor);font-weight:400;
  color:var(--tinta-3);margin-left:3px;letter-spacing:0}
/* la caja que se salió de lo normal: el número en rojo, la aclaración no */
.sd-tira.mal .val{color:var(--mal)}
.sd-cifra.mal{color:var(--mal)}

/* El pie de una hoja: de cuando son los numeros, o que quedo afuera.
   Va UNA sola vez por hoja y nunca adentro de un renglon. */
.sd-pieh{padding:10px 15px 12px;border-top:1px solid var(--borde);
  font-size:var(--t-pie,.8125rem);color:var(--tinta-3);background:var(--sup-2)}
/* En la grilla de abajo los bloques se estiran para terminar todos en la
   misma raya, y ese estirón caía DESPUÉS del pie: la aclaración quedaba
   flotando en el medio con un hueco blanco abajo. El pie se va al fondo y el
   hueco queda arriba de él, que es donde no se nota. */
.sd-abajo .sd-hoja{display:flex;flex-direction:column}
.sd-abajo .sd-hoja>.sd-pieh{margin-top:auto}

/* Un renglon con dos cifras: litros y plata. La segunda es la de apoyo. */
.sd-fila .par{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.sd-fila .par .val{font-size:var(--t-cuerpo,1.0625rem)}
.sd-fila .par s{text-decoration:none;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-3);font-variant-numeric:tabular-nums}

/* El chip de estado de un renglon: en curso, faltante, cerrado. */
.sd-chip{font-size:var(--t-micro);letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:var(--sup-3);color:var(--tinta-3)}
.sd-chip.vivo{background:var(--vivo-piso);color:var(--vivo)}
.sd-chip.ojo{background:var(--alerta-piso);color:var(--alerta)}

/* ==================================================================
   OFICIO VISUAL - lo que hace que la pantalla parezca hecha y no
   listada. Todo lo de aca es color, material y profundidad: ningun
   dato nuevo, ninguna cifra nueva.
   ================================================================== */

/* La cima sobre un lavado tibio, no sobre blanco pelado. La pagina
   arranca con temperatura y se enfria hacia abajo: eso es lo que hace
   que la cifra del dia se sienta la portada y no el primer renglon
   de una lista. */
.sd-alto{background:
  radial-gradient(1200px 380px at 12% -8%,
    color-mix(in srgb,var(--accion) 13%,transparent), transparent 70%),
  linear-gradient(180deg,
    color-mix(in srgb,var(--accion) 5%,var(--fondo)) 0%,
    var(--fondo) 62%)}

/* El rotulo de seccion deja de ser texto suelto: le crece un filete
   corto adelante, que es lo que lo ata a la hoja de abajo. */
.sd-cab h2{display:flex;align-items:center;gap:8px}
.sd-cab h2::before{content:"";width:3px;height:11px;border-radius:2px;
  background:var(--accion);opacity:.85;flex:none}
.sd-hacer .sd-cab h2::before{background:var(--mal)}

/* Lo que hay que hacer lleva su color en el BORDE del renglon, no solo
   en un puntito: de reojo se ve cuantas cosas hay y de que color son. */
.sd-act{position:relative;padding-left:18px}
.sd-act::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--borde-2)}
.sd-act:has(.sem.rojo)::before{background:var(--mal)}
.sd-act:has(.sem.ambar)::before{background:var(--alerta)}

/* La tarjeta se apoya mejor: un filo claro arriba y una sombra que
   crece cuando el mouse la levanta. */
.sd-hoja,.sd-tar{box-shadow:var(--s2),var(--filo),
  0 1px 2px color-mix(in srgb,var(--tinta) 5%,transparent)}
.sd-tar{position:relative;overflow:hidden;
  transition:transform .18s var(--ios-out,ease-out),
             box-shadow .18s var(--ios-out,ease-out),
             background-color .1s var(--ios-out,ease-out)}
@media (hover:hover){
  .sd-tar:hover{transform:translateY(-2px);
    box-shadow:var(--sombra-cd,0 8px 24px -12px rgba(0,0,0,.35))}
}

/* El filete de arriba de cada tarjeta dice PARA QUE LADO se movio el
   numero. Verde subio, rojo cayo, ambar hay que mirarlo, gris es un
   dato sin direccion. El lila NO se usa aca: el lila es la voz de
   SADIA opinando y vive solo en la franja de abajo. */
.sd-tar::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:var(--borde-2)}
.sd-tar.sube::before{background:var(--ok)}
.sd-tar.baja::before{background:var(--mal)}
.sd-tar.ojo::before {background:var(--alerta)}

/* Las tiras dejan de ser una franja plana: cada una se para sobre su
   propio piso y la cifra respira abajo del rotulo. */
.sd-tira{padding:13px 16px 15px;position:relative}


/* El chip de estado, con su filo. */
.sd-chip{box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}


/* ==================================================== PANTALLA ANCHA
   Va acá abajo a propósito: tiene que ganarle a todo lo de arriba. */
@media(min-width:900px){
  .sd{padding-bottom:158px}
  /* tracking negativo al agrandar: a 3,25rem las cifras se separan solas */
  .sd-cifra{font-size:3.25rem;letter-spacing:-.03em}
  .sd-cima{display:flex;align-items:center;justify-content:space-between;
    gap:40px;flex-wrap:wrap}
  .sd-tapa{flex:0 1 auto;padding:28px 32px 22px}
  .sd-sec{padding-left:32px;padding-right:32px}
  .sd-carr{padding-left:32px;padding-right:32px;margin:0 -32px}
  /* auto-fit: dos columnas en una notebook, tres en el monitor de la
     oficina, sin escribir un ancho para cada pantalla */
  .sd-abajo{display:grid;align-items:start;column-gap:0;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
}

/* Menos movimiento: el aviso sigue, el desplazamiento no. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .sd-carr{scroll-behavior:auto}
  .sd-tar:active,.sd-btn:active,.sd-ir:active,
  .sd-chips button:active{transform:none}
}
/* Menos transparencia: el vidrio se vuelve sólido en vez de desaparecer. */
@media (prefers-reduced-transparency:reduce){
  .sd-barra,.sd-chat{background:var(--fondo);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}


/* ==================================================================
   MUY ANCHO - a partir de aca el problema deja de ser que sobre lugar
   y pasa a ser que un renglon de dos lineas estirado 1.900 px tiene el
   nombre en una punta y el boton en la otra. La solucion no es angostar
   la pagina: es poner DOS cosas donde habia una.
   ================================================================== */
@media(min-width:1180px){
  /* Ubicadas a mano. Sin esto la grilla las acomoda por orden de aparicion
     y las tiras se van a la derecha con los avisos abajo, que es al reves
     de lo que se mira: primero cuanto vendi, despues que tengo que hacer. */
  /* Lo que sobra cuando la columna de al lado es más alta se reparte arriba
     y abajo de la cifra, y las tiras quedan al pie: así no se abre un hueco
     ni abajo del número ni abajo de las tiras. Sobra poco, porque lo que hay
     que hacer ya frenó a esta altura (sadia.js). */
  .sd-alto{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-rows:1fr auto;
    align-items:start;column-gap:36px;padding-bottom:4px}
  .sd-alto>.sd-cima,.sd-alto>.sd-tapa{grid-column:1;grid-row:1;
    align-self:center}
  /* Las tiras van pegadas ABAJO de la cifra y no al pie de la columna: con
     `align-self:end` quedaban colgadas del fondo del renglón, que lo estira
     lo que hay que hacer, y entre el número y las tiras se abría un hueco
     blanco enorme. Lo que sobra de la otra columna lo empareja sadia.js. */
  .sd-alto>.sd-tiras{grid-column:1;grid-row:2;align-self:end;
    margin-bottom:0;border-bottom:0}
  .sd-alto>.sd-hacer{grid-column:2;grid-row:1/span 2;
    padding-top:26px;padding-left:0}
  .sd-alto .sd-tapa{padding-bottom:16px}

  /* En el monitor las cuatro tarjetas entran holgadas: dejan de ser un
     carrusel -no hay nada que correr- y se reparten el renglon. En el
     celular siguen corriendose de costado, que es donde hace falta. */
  .sd-carr{overflow:visible;scroll-snap-type:none}
  .sd-carr .sd-tar{flex:1 1 232px;width:auto;scroll-snap-align:none}
}


/* ==================================================================
   EL STOCK - la unica parte de todo esto donde el dueño ESCRIBE.
   Tres reglas la hacen distinta de cualquier otro renglon:

   - Nada de lo que escribe acá se escribe en el VB. Vive en NUESTRA
     base. El sistema viejo no se toca nunca.
   - El costo y el margen que carga el dueño NO se pisan: le ganan al
     del maestro del VB, que se cargo una vez y quedo viejo (medido:
     el maestro se equivoca 8,3 %, y casi todo el error esta en los
     rubros del cafe). Antes era al reves y el archivo del dia
     siguiente le pisaba la correccion EN SILENCIO.
   - El stock es otra cosa: se mueve con cada venta. Lo que el dueño
     cuenta es el PUNTO DE PARTIDA de hoy, no un numero congelado, y
     el sistema le sigue descontando lo que sale.

   Y todo renglon que se toca guarda COMO ESTABA ANTES y se deshace de
   un toque: un numero que aparece solo y no se puede volver atras no
   se usa dos veces.
   ================================================================== */
.sd-stcab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 15px;background:var(--sup-2)}
.sd-buscar{flex:1 1 240px;display:flex;align-items:center;gap:9px;
  background:var(--sup);border:1px solid var(--borde);border-radius:999px;
  padding:0 14px}
.sd-buscar svg{width:16px;height:16px;flex:none;color:var(--tinta-3)}
.sd-buscar input{flex:1;min-width:0;border:0;background:none;font:inherit;
  font-size:var(--t-menor);color:var(--tinta);padding:9px 0;outline:none}
.sd-filtros{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.sd-filtros::-webkit-scrollbar{display:none}
.sd-chipf{flex:none;border:1px solid var(--borde);background:var(--sup);
  color:var(--tinta-2);border-radius:999px;padding:7px 12px;cursor:pointer;
  font:inherit;font-size:var(--t-menor);white-space:nowrap}
.sd-chipf s{text-decoration:none;color:var(--tinta-3);margin-left:5px;
  font-variant-numeric:tabular-nums}
.sd .sd-chipf.on{background:var(--tinta);color:var(--fondo);
  border-color:var(--tinta)}
.sd .sd-chipf.on s{color:color-mix(in srgb,var(--fondo) 60%,transparent)}
.sd button.sd-chipf:hover{background:var(--hover)}
.sd button.sd-chipf.on:hover{background:var(--tinta);color:var(--fondo)}

/* el renglon que se edita: el nombre arriba y los tres casilleros abajo,
   asi entra igual en el celular que en el monitor. */
.sd-st{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-start;
  gap:9px;padding:12px 15px;border-top:1px solid var(--borde)}
.sd-stnom{flex:1 1 100%;min-width:0}
.sd-stnom b{display:block;font-weight:560;font-size:var(--t-cuerpo,1.0625rem);
  letter-spacing:-.011em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sd-stnom s{display:block;text-decoration:none;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-3);margin-top:2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
/* style.css estira todo <label> a bloque con margen propio: si no se lo
   saca acá, cada casillero se come un renglón entero. */
.sd .sd-campo{display:block;margin:0;flex:0 0 96px;font-weight:400}
.sd .sd-campo span{display:block;font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 4px;font-weight:600}
.sd .sd-campo input{width:100%;padding:8px 8px;border:1px solid var(--borde-2);
  border-radius:10px;background:var(--sup);color:var(--tinta);
  font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:560;
  font-size:var(--t-cuerpo,1.0625rem);text-align:right;letter-spacing:-.015em}
.sd .sd-campo:active{opacity:1}
.sd .sd-campo.falta input{border-color:var(--alerta);background:var(--alerta-piso)}
.sd .sd-campo.falta span{color:var(--alerta)}

/* qué pasó con el renglón, y el camino de vuelta */
.sd-est{flex:1 1 100%;font-size:var(--t-pie,.8125rem);color:var(--tinta-3);
  display:flex;align-items:center;gap:7px;margin-top:2px}
.sd-est.ok{color:var(--ok)}
.sd-est.ojo{color:var(--alerta)}
.sd-est button{background:none;border:0;padding:0;font:inherit;
  font-size:var(--t-pie,.8125rem);color:var(--accion-viva);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.sd .sd-est button:hover{background:none;color:var(--accion)}

@media(min-width:620px){ .sd-stnom{flex:1 1 180px} }

/* En el monitor la lista se parte en columnas. Estirar un renglón a 1.400 px
   dejaría el nombre en una punta y los casilleros en la otra, con el vacío
   en el medio — que es justo lo que no queremos. El filete que separa las
   columnas va a la IZQUIERDA de cada renglón y la lista se corre un pixel:
   así el de la primera columna cae afuera de la hoja y lo tapa el recorte,
   sin tener que contar cuántas columnas entraron. */
@media(min-width:900px){
  .sd-stlista{display:grid;
    grid-template-columns:repeat(auto-fit,minmax(520px,1fr));margin-left:-1px}
  .sd-stlista .sd-st{border-left:1px solid var(--borde)}
}


/* ==================================================================
   EL ANCLA. Una pantalla operativa que no dice de que turno son sus
   numeros no sirve: "yo aca no entiendo de que dia estoy leyendo esos
   numeros". Arranca siempre parada en el ULTIMO turno que cerro, y las
   flechas caminan para atras.

   La flecha de la derecha nace apagada porque no hay nada adelante: es
   el ultimo. Apagada y no escondida - si desaparece, el dueño no sabe
   que se puede volver.
   ================================================================== */
.sd-ancla{display:flex;align-items:center;gap:12px;padding:10px 16px;
  background:var(--sup-2);border-bottom:1px solid var(--borde)}
.sd-flecha{width:34px;height:34px;border-radius:50%;flex:none;padding:0;
  border:1px solid var(--borde);background:var(--sup);color:var(--tinta-2);
  display:grid;place-items:center;cursor:pointer;font-family:inherit;
  transition:transform .1s var(--ios-out,ease-out)}
.sd-flecha:active{transform:scale(.9)}
.sd-flecha svg{width:16px;height:16px;display:block}
.sd-flecha[disabled]{opacity:.34;cursor:default}
.sd-ancla .que{flex:1;min-width:0;text-align:center}
.sd-ancla .que b{display:block;font-weight:600;font-size:var(--t-sub,.9375rem);
  letter-spacing:-.01em}
.sd-ancla .que s{display:block;text-decoration:none;
  font-size:var(--t-pie,.8125rem);color:var(--tinta-3);margin-top:1px}
.sd button.sd-flecha:hover{background:var(--hover)}
.sd button.sd-flecha[disabled]:hover{background:var(--sup)}
/* En el monitor las flechas se juntan con el texto en vez de irse a las
   dos puntas de la pantalla con el vacio en el medio. */
@media(min-width:900px){
  .sd-ancla{justify-content:center;padding:10px 32px}
  .sd-ancla .que{flex:0 1 auto;padding:0 10px}
}

/* Un renglon que solo informa -el desglose de un arqueo- usa el mismo
   traje que el renglon que se toca, pero no invita a tocarlo. */
.sd div.sd-fila{cursor:default}
.sd div.sd-fila:active{background:none}
/* el renglon donde la columna se suma o se resta */
.sd-fila.suma{background:var(--sup-2);border-top-color:var(--borde-2)}
.sd-fila.suma .nom b{font-weight:640}
.sd-fila.suma .val{font-weight:640}
.sd-chip.bien{background:var(--ok-piso);color:var(--ok)}

/* En el celular un renglón con chip se queda sin lugar y el nombre se corta
   en "Turno 77 · Mañ…", que es peor que ocupar dos líneas. Sólo donde hay
   chip: los demás renglones siguen en una sola línea. */
@media(max-width:560px){
  .sd-fila:has(.sd-chip) .nom b,
  .sd-fila:has(.sd-chip) .nom s{white-space:normal}
}


/* ==================================================================
   SALTAR DE PANTALLA. El titulo de la barra es el navegador: se toca
   donde dice "El salon" y baja la lista de las seis.

   No hay barra de solapas abajo -que seria lo habitual- porque abajo
   vive el chat, y dos barras apiladas en un celular se comen media
   pantalla. La de arriba ademas es pegajosa, asi que se salta desde
   donde uno este leyendo y no hay que volver al principio.

   La lista baja desde el titulo, que es de donde salio: si apareciera
   centrada o desde abajo, no se entiende que la abrio ese boton.
   ================================================================== */
.sd-menu{display:flex;align-items:center;gap:6px;background:none;border:0;
  padding:4px 8px 4px 6px;margin-left:-6px;cursor:pointer;color:inherit;
  font-family:inherit;border-radius:10px;
  transition:background-color .1s var(--ios-out,ease-out)}
.sd-menu .sd-marca{pointer-events:none}
.sd-menu svg{width:13px;height:13px;flex:none;color:var(--tinta-3);
  transition:transform .22s var(--ios-out,ease-out)}
.sd-menu[aria-expanded="true"] svg{transform:rotate(180deg)}
.sd button.sd-menu:hover{background:var(--hover)}
.sd-menu:active{background:var(--hover)}

.sd-tapon{position:fixed;inset:0;z-index:35;background:transparent}
.sd-panel{position:fixed;z-index:36;top:56px;left:12px;
  width:min(330px,calc(100vw - 24px));
  background:color-mix(in srgb,var(--sup) 90%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid var(--borde);border-radius:16px;overflow:hidden;
  box-shadow:0 20px 46px -20px color-mix(in srgb,var(--tinta) 45%,transparent),
             var(--filo);
  transform-origin:top left;animation:sd-baja .22s var(--ios-out,ease-out)}
@keyframes sd-baja{
  from{opacity:0;transform:scale(.96) translateY(-7px)}
  to  {opacity:1;transform:none}
}
.sd-dest{display:flex;align-items:center;gap:11px;padding:11px 14px;
  text-decoration:none;color:inherit;border-top:1px solid var(--borde);
  transition:background-color .1s var(--ios-out,ease-out)}
.sd-dest:first-child{border-top:0}
.sd-dest em{width:34px;height:34px;border-radius:10px;flex:none;
  font-style:normal;display:grid;place-items:center;font-size:1.05rem;
  background:var(--sup-2);border:1px solid var(--borde)}
.sd-dest em .ico{margin:0}
.sd-dest>span{flex:1;min-width:0}
.sd-dest b{display:block;font-weight:560;font-size:var(--t-sub,.9375rem);
  letter-spacing:-.01em}
.sd-dest s{display:block;text-decoration:none;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-3);margin-top:1px}
.sd-dest i{font-style:normal;color:var(--accion-viva);font-size:.95rem;
  opacity:0;flex:none}
.sd-dest.aca{background:var(--hover)}
.sd-dest.aca i{opacity:1}
.sd-dest:active{background:var(--sup-3)}
@media (hover:hover){ .sd-dest:hover{background:var(--hover)} }
@media (prefers-reduced-motion:reduce){ .sd-panel{animation:none} }
@media (prefers-reduced-transparency:reduce){
  .sd-panel{background:var(--sup);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}


/* Adentro del marco de siempre (menu lateral y barra de abajo): sin el alto
   de pantalla completa ni el lugar para el chat fijo, que todavia no esta. */
.sd.en-marco{min-height:0;padding:0 0 24px;background:none}
.sd.en-marco .sd-sec{padding-left:0;padding-right:0}
.sd-st.guardando{opacity:.6}
a.sd-chipf{text-decoration:none;display:inline-block}

/* la camara como lector de codigos */
.sd .sd-camara{flex:none;width:34px;height:34px;margin-right:-8px;padding:0;
  border:0;border-radius:50%;background:none;color:var(--accion-viva);
  display:grid;place-items:center;cursor:pointer}
.sd .sd-camara svg{width:20px;height:20px}
.sd-lente{position:fixed;inset:0;z-index:1000;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:16px}
.sd-lente[hidden]{display:none}
.sd-lente video{width:100%;max-width:520px;max-height:62vh;object-fit:cover;
  border-radius:16px}
.sd-lente-marco{position:absolute;width:min(72vw,360px);height:120px;
  border:2px solid rgba(255,255,255,.85);border-radius:12px;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.25);pointer-events:none}
.sd-lente-txt{color:#fff;margin:0;text-align:center}

/* ==================================================================
   EL MARCO NUEVO (base_sd.html). La pantalla entera es .sd: sin menú
   lateral, sin barra de abajo y sin el `main` angosto del marco viejo.
   ================================================================== */
body.sd-cuerpo{margin:0;background:var(--fondo)}
.sd main{display:block;max-width:none;padding:0;gap:0}
.sd.sin-chat{padding-bottom:40px}

/* lo que se toca es un enlace: sin subrayado y con el color del texto */
.sd a.sd-fila,.sd a.sd-tar,.sd a.sd-btn,.sd a.sd-flecha,.sd a.sd-atras,
.sd a.sd-vivo,.sd .sd-cab a{text-decoration:none}
.sd a.sd-fila,.sd a.sd-tar,.sd a.sd-atras{color:inherit}
.sd a.sd-btn{display:inline-block;flex:none}
.sd a.sd-flecha{color:var(--tinta-2)}
.sd-atras{display:grid;place-items:center;color:inherit}
@media (hover:hover){
  .sd a.sd-fila:hover{background:var(--hover)}
  .sd a.sd-flecha:hover{background:var(--hover)}
}
.sd-fila.quieta{cursor:default}
.sd-fila .val.ok{color:var(--ok)}
.sd-fila .val.mal{color:var(--mal)}
.sd-fila .val.apagado{color:var(--tinta-3);font-size:var(--t-menor)}
.sd-total .dif.mal{color:var(--mal)}
.sd-total .dif.apagado{color:var(--tinta-3)}
.sd-flecha.apagada{opacity:.34;cursor:default}

/* el LED de la barra cuando la PC no manda: lleva a donde se arregla */
.sd a.sd-vivo.mal{color:var(--mal)}
.sd-vivo.mal .sd-punto{background:var(--mal);box-shadow:0 0 0 3px var(--mal-piso)}

/* el aviso de arriba después de guardar algo */
.sd-aviso{margin:12px 16px 0;padding:11px 14px;border-radius:12px;
  font-size:var(--t-menor);border:1px solid var(--borde)}
.sd-aviso.ok{background:var(--ok-piso,var(--sup-2));color:var(--ok)}
.sd-aviso.mal{background:var(--mal-piso);color:var(--mal)}
@media(min-width:900px){ .sd-aviso{margin:14px 32px 0} }

/* la sugerencia también puede ir suelta, abajo de un renglón */
.sd-hoja>.sd-op{margin:0;padding:10px 15px 12px;background:var(--sadia-piso);
  border-top:1px solid var(--sadia);font-size:var(--t-pie,.8125rem);
  line-height:1.42;color:var(--tinta)}
.sd-hoja>.sd-op b{color:var(--sadia);font-weight:700}

/* el menú del título ahora lista TODAS las pantallas, en grupos: no entra
   entero en un celular, así que se corre por dentro */
.sd-panel{max-height:calc(100dvh - 90px);overflow-y:auto;
  overscroll-behavior:contain}
.sd-grupo{margin:0;padding:12px 14px 5px;font-size:var(--t-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);
  border-top:1px solid var(--borde)}
.sd-grupo:first-child{border-top:0}
.sd-grupo:empty{padding:0}
.sd-grupo+.sd-dest{border-top:0}
/* abierto, el menú va por encima del chat de abajo */
.sd-tapon{z-index:41}
.sd-panel{z-index:42}

/* ==================================================================
   HOY (hoy.html) y lo que comparte con las demás
   ================================================================== */
/* sin venta cerrada la tapa dice qué pasa, en letra de titular y no cifra */
.sd-titular{margin:4px 0 0;font-size:var(--t-t2,1.5rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.25}
/* la tarjeta con su explicación cuando no trae número */
.sd-tar .sub{margin:0;font-size:var(--t-pie,.8125rem);line-height:1.4;
  color:var(--tinta-2)}
/* un renglón que es una frase entera no se corta con puntos suspensivos */
.sd-fila.larga .nom b,.sd-fila.larga .nom s{white-space:normal}
.sd-fila.larga .nom b{font-size:var(--t-sub,.9375rem);line-height:1.35}
/* «Está mal», al lado del botón de lo que hay que hacer */
.sd button.sd-mal{display:inline-block;border:0;background:none;
  padding:2px 0;margin-top:3px;
  font:inherit;font-size:var(--t-pie,.8125rem);color:var(--tinta-3);
  cursor:pointer;text-decoration:underline;text-underline-offset:.18em}
.sd button.sd-mal:hover{background:none;color:var(--tinta-2)}
.sd button.sd-mal[disabled]{text-decoration:none;cursor:default}
/* lo que se dice al pie, chiquito */
.sd-calma{margin:0;padding:4px 16px 20px;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-3)}
/* una pantalla sin cima arranca con aire debajo de la barra */
.sd-arriba{padding-top:16px}
@media(min-width:900px){
  .sd-calma{padding-left:32px;padding-right:32px}
  .sd-arriba{padding-top:24px}
}
.sd-tiras.de1{grid-template-columns:1fr}
/* el título de la barra es el nombre de la estación: en el celular se
   corta en un renglón en vez de empujar la barra a dos */
.sd-menu{min-width:0}
.sd-menu .sd-marca{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0}
.sd-vivo{white-space:nowrap;flex:none}
@media(max-width:420px){ .sd-vivo.mal{max-width:92px;white-space:normal;
  line-height:1.2} }

/* ==================================================================
   LOS TURNOS (turnos_sd.html)
   ================================================================== */
.sd-chip.bien{background:var(--ok-piso);color:var(--ok)}
/* una sección a la que se salta desde un botón no queda abajo de la barra */
.sd .sd-sec[id]{scroll-margin-top:72px}
/* las pantallas del sistema de gestión van copiadas como tabla, adentro de
   la hoja: se corren de costado ellas y no la pantalla */
.sd-hoja.sd-reja .tablewrap{margin:0;border:0;border-radius:0}
.sd-hoja.sd-reja table{margin:0}
.sd-sello a{color:var(--accion-viva);text-transform:none;letter-spacing:0}
.sd .solapas{display:flex;gap:6px;margin:0;padding:12px 16px 4px;overflow-x:auto;border:0;background:none;
  scrollbar-width:none}
.sd .solapas::-webkit-scrollbar{display:none}
.sd a.sd-chipf.on{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
@media(min-width:900px){ .sd .solapas{padding:14px 32px 4px} }
/* Las secciones de una pantalla (La caja · Lo que venden · Sueldos): una barra
   pareja a lo ancho, las partes del mismo tamaño. Juan, 29/09/2026: sueltas
   como chips no se leían como las partes de la pantalla. */
.sd .solapas.anchas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:4px;margin:12px 16px 4px;padding:4px;border:1px solid var(--borde);
  border-radius:14px;background:var(--sup);overflow:visible}
.sd .solapas.anchas .sd-chipf{border:0;background:none;text-align:center;
  padding:10px 4px;border-radius:10px;font-size:var(--t-menor);
  color:var(--tinta-2);font-weight:500;white-space:normal;line-height:1.2;
  display:flex;align-items:center;justify-content:center}
@media(min-width:600px){ .sd .solapas.anchas .sd-chipf{font-size:var(--t-cuerpo,1rem)} }
.sd .solapas.anchas .sd-chipf.on{background:var(--tinta);color:var(--fondo)}
@media(min-width:900px){ .sd .solapas.anchas{margin:14px 32px 6px} }
/* Abajo del número grande, como su pie (Empleados): el bloque ya trae el
   margen de los costados. */
.sd .sd-tapa .solapas.anchas{margin:18px 0 4px}
@media(min-width:900px){ .sd .sd-tapa .solapas.anchas{margin:22px 0 0} }
/* Qué caja (playa o salón): elige qué turno se mira, así que va adentro de
   la franja del turno y con el traje de la barra de secciones, en chico.
   Juan, 30/09/2026: sueltos entre la barra y el turno «quedan horribles». */
.sd-ancla.con-cajas{flex-direction:column;align-items:stretch;gap:10px}
.sd-ancla-turno{display:flex;align-items:center;gap:12px}
.sd-ancla-cajas{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  align-self:center;min-width:200px;gap:2px;padding:3px;
  border:1px solid var(--borde);border-radius:11px;background:var(--sup)}
.sd-ancla-cajas a{padding:6px 16px;border-radius:8px;text-align:center;
  font-size:var(--t-menor);font-weight:500;color:var(--tinta-2);
  text-decoration:none;transition:background-color .1s var(--ios-out,ease-out)}
.sd-ancla-cajas a.on{background:var(--tinta);color:var(--fondo)}
@media (hover:hover){ .sd-ancla-cajas a:not(.on):hover{background:var(--hover)} }
@media(min-width:900px){
  .sd-ancla.con-cajas{display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center}
  .sd-ancla.con-cajas .sd-ancla-cajas{justify-self:start}
}
/* el cartel que avisa algo de la hoja de abajo no se le pega encima */
.sd-aviso.sobre-hoja{margin-bottom:10px}
/* Adentro del sistema el pie es una línea: los enlaces y el botón de baja,
   que tiene que estar a la vista. La leyenda larga queda en la portada, el
   registro y las páginas legales. */
.pie-legal.corto{padding:10px 16px 16px;font-size:var(--t-micro)}
.pie-legal.corto .pie-links{margin:0;gap:4px 14px}
.pie-legal.corto .pie-links a{font-weight:500;color:var(--tinta-3)}
/* lo que acompaña a la cifra de una tira va abajo, no a su lado: en el
   celular tres tiras de un tercio no dejan lugar para una frase al costado */
.sd-tira .val s{display:block;margin-top:3px;line-height:1.3;
  font-family:var(--f-ui);font-size:var(--t-pie,.8125rem);color:var(--tinta-3)}
/* los formularios que viven adentro de una hoja */
.sd-hoja.sd-form{padding:4px 0 14px}
.sd-hoja.sd-form form{padding:4px 15px 0;margin:0}
.sd-form-fila{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sd-form-fila input{flex:1 1 220px;min-width:0;margin:0}
.sd .sd-form .sd-btn{margin:0;cursor:pointer}
.sd .ruta{font-family:var(--f-num);font-size:.92em}
.sd-hoja.sd-form .sd-pieh{border-top:0;background:none;padding-top:12px}

/* Corregir la caja de un turno: un renglón suelto abajo de la cifra, y el
   formulario de tres preguntas, una debajo de la otra. */
.sd-sec.corr-sec{padding-top:10px}
.corr-form{display:flex;flex-direction:column;gap:14px}
.corr-campo{display:flex;flex-direction:column;gap:6px;margin:0}
.corr-campo>span:first-child{font-size:var(--t-pie,.8125rem);font-weight:560;
  color:var(--tinta-2)}
.corr-campo>input,.corr-campo>select{width:100%;min-width:0;margin:0;
  padding:9px 11px;border:1px solid var(--borde-2);border-radius:10px;
  background:var(--fondo);color:var(--tinta);font:inherit}
.corr-campo>input:focus,.corr-campo>select:focus{outline:0;
  border-color:var(--accion)}
.corr-campo .sd-peso{align-self:flex-start}
.corr-campo .sd-peso input{width:140px}
.corr-queda{font-size:var(--t-pie,.8125rem);color:var(--tinta-2)}
.corr-queda.mal{color:var(--mal)}
.corr-botones{padding-top:2px}
.sd-hoja.sd-form form+form{padding-top:10px}
/* Cada explicación ya anotada, con su botón para sacarla sola. */
.corr-parte form{margin:0;flex:none}
.sd .corr-parte .corr-sacar{margin:0;padding:6px 13px;cursor:pointer}

/* --------------------------------------------- el renglón que se escribe
   El sueldo de una persona: mismo renglón que el resto de la lista, pero la
   cifra de la derecha se escribe en vez de leerse. Cargar doce sueldos
   entrando y saliendo de doce fichas era el motivo por el que no había
   ninguno cargado. */
.sd-sue{display:flex;align-items:center;gap:12px;padding:11px 15px;
  border-top:1px solid var(--borde);flex-wrap:wrap}
.sd-sue:first-child{border-top:0}
.sd-sue .nom{flex:1 1 160px;min-width:0}
.sd-sue .nom b{display:block;font-weight:560;letter-spacing:-.011em;
  font-size:var(--t-cuerpo,1.0625rem);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.sd-sue .nom s{display:block;text-decoration:none;color:var(--tinta-3);
  font-size:var(--t-pie,.8125rem);margin-top:2px}
.sd-sue form{display:flex;align-items:center;gap:8px;margin:0}
.sd-peso{display:inline-flex;align-items:center;gap:3px;border-radius:10px;
  border:1px solid var(--borde-2);background:var(--fondo);padding:0 10px;
  color:var(--tinta-3);font-size:var(--t-pie,.8125rem)}
.sd-peso input{width:104px;border:0;background:none;margin:0;padding:8px 0;
  color:var(--tinta);font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-size:var(--t-cuerpo,1.0625rem);font-weight:560;text-align:right}
.sd-peso input:focus{outline:0}
.sd-peso:focus-within{border-color:var(--accion)}


/* ------------------------------------- una cuenta que se abre (Las cuentas)
   El renglón es el de siempre; lo que agrega es que adentro trae el mes de
   esa cuenta, su curva de 30 días y sus remitos. */
.sd-deu{border-top:1px solid var(--borde)}
.sd-deu:first-child{border-top:0}
.sd-deu>summary{display:flex;align-items:center;gap:12px;padding:13px 15px;
  cursor:pointer;list-style:none}
.sd-deu>summary::-webkit-details-marker{display:none}
.sd-deu>summary:active{background:var(--hover)}
.sd-deu>summary .nom{flex:1;min-width:0}
.sd-deu>summary .nom b{display:block;font-weight:560;
  font-size:var(--t-cuerpo,1.0625rem);letter-spacing:-.011em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.sd-deu>summary .nom s{display:block;text-decoration:none;
  font-size:var(--t-pie,.8125rem);color:var(--tinta-3);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-deu>summary .val{font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-weight:560;font-size:var(--t-cuerpo,1.0625rem);white-space:nowrap}
.sd-deu>summary .val.ok{color:var(--ok)}
.sd-deu>summary .fle{color:var(--tinta-3);font-size:1rem;margin-left:-4px;
  transition:transform .12s var(--ios-out,ease-out)}
.sd-deu[open]>summary .fle{transform:rotate(90deg)}
.sd-deu-cuerpo{padding:0 0 4px;background:var(--sup-2)}
.sd-deu-cuerpo .sd-tiras{margin:0;padding:12px 15px 4px;background:none}
.sd-deu-cuerpo .curva{padding:0 15px}
.sd-deu-cuerpo>.sd-form{padding:12px 15px 6px}
.sd-deu-cuerpo>.sd-form .sd-form-fila select{flex:1 1 180px;min-width:0}
.sd-deu-cuerpo .sd-fila{background:none}

/* En el celular tres tiras con cifras de millones no entran: la cifra se
   achica antes que cortarse contra el borde de la columna. */
@media(max-width:420px){
  .sd-tira{padding:12px 12px}
  .sd-tira .val{font-size:var(--t-cuerpo,1.0625rem)}
}
.sd-deu-cuerpo .sd-tira .val{font-size:var(--t-cuerpo,1.0625rem)}

/* La opinión impositiva (ADR-0021). Se ve distinta de «Te sugiero»: una
   sugerencia cuelga de un número medido y esto es una opinión, el único
   lugar del sistema donde SADIA habla sin una cuenta atrás. */
.sd-op.sd-opinion{background:var(--alerta-piso);
  border-left:2px solid var(--alerta)}

/* Una tira cuyo valor es un NOMBRE y no una cifra (Vender: lo que más se
   vende). La fuente de números deja un nombre largo ilegible en un tercio de
   pantalla, así que acá manda la de texto y el nombre se parte en renglones
   como el apoyo de las otras dos. */
.sd-tira .val.txt{font-family:var(--f-ui);font-size:var(--t-sub,.9375rem);
  font-weight:600;line-height:1.3}

/* Lo que un bloque guarda para quedar a la altura de su vecino (sadia.js).
   El renglón está en la página —sólo no se muestra— y el botón lo abre. */
.sd .sd-oculto{display:none}
.sd .sd-vermas{display:block;width:100%;border:0;border-top:1px solid var(--borde);
  background:none;color:var(--accion-viva);font:inherit;
  font-size:var(--t-menor);padding:11px 15px;cursor:pointer;text-align:left}
.sd .sd-vermas:hover{background:var(--hover)}

/* El dibujo de la ficha no se estira a lo ancho de un monitor: es un SVG de
   620 de ancho y a 1.500 px sus rótulos quedan del tamaño de un título. */
.sd .vd-graf{max-width:820px}

/* ------------------------------------------- la cuenta de un cliente
   La curva de 30 días y el papel del resumen adentro de una hoja del
   diseño nuevo. El papel NO se reviste: es lo único del sistema que sale
   hacia afuera, y tiene que verse como la hoja que el cliente recibe. */
.sd .sd-curva{padding:14px 15px 2px}
.sd .sd-papel{padding:14px 15px 16px}
.sd .sd-papel .doc{box-shadow:none}
.sd .doc .der{text-align:right}
.sd .doc-quien{font-weight:600}
.sd .doc-chico{font-size:11px;color:#5a5a5a}
.sd .doc-tot.arranque{margin-top:var(--e4)}


/* Una negrita ADENTRO del apoyo de un renglon va en linea. `.sd-fila .nom b`
   es el nombre del renglon y es un bloque; sin esta regla, el camino de
   teclas del sistema de gestion —«tecla 6 -> [1] Parametros y Claves»— se
   parte en una linea por cada negrita y el renglon se lee como una lista. */
.sd-fila .nom s b{display:inline;font-size:inherit;font-weight:660;
  letter-spacing:0;color:var(--tinta)}

/* Un renglon que se escribe cuyo nombre es una PREGUNTA y no el nombre de
   una persona. `.sd-sue .nom b` corta con puntos suspensivos —esta bien para
   «Gonzalez Martin», no para «¿Cuanto te sale el mes de sueldos?»—, asi que
   aca la pregunta se parte en renglones, igual que `.sd-fila.larga`. */
.sd-sue.larga .nom{flex:1 1 200px}
.sd-sue.larga .nom b{white-space:normal;line-height:1.3}
.sd-sue.larga .nom s{white-space:normal}

/* Los formularios de papel (Los camiones) adentro de una hoja del diseño
   nuevo. La ficha ya trae su propio recuadro: lo unico que le falta es el
   aire contra el borde de la hoja. El pie de la hoja sigue pegado al borde,
   como en todas las demas. */
.sd-hoja.sd-papeles .cam-ficha{margin:13px 15px}
.sd-hoja.sd-papeles .cam-ficha+.cam-ficha{margin-top:0}
.sd-hoja .cam-corregir{margin:0;padding:12px 15px;border-top:1px solid var(--borde)}

/* El botón que guarda todos los pendientes juntos. Se pega abajo de la
   pantalla, arriba del chat (camiones.js mide su alto), mientras se recorre
   la lista, y al terminarla descansa debajo de ella. */
.cam-todos{position:sticky;bottom:calc(var(--cam-chat,0px) + 10px);z-index:5;
  display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:10px 10px 10px 16px;
  border:1px solid var(--borde);border-radius:var(--sd-r);
  background:color-mix(in srgb,var(--sup) 92%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:var(--s2),var(--filo)}
.cam-todos[hidden]{display:none}
.cam-todos-txt{flex:1;min-width:0;margin:0;font-size:var(--t-pie,.8125rem);
  color:var(--tinta-2);line-height:1.3}
.cam-todos .sd-btn{flex:none;margin:0;cursor:pointer}
.cam-todos .sd-btn:disabled{opacity:.45;cursor:default;transform:none}
.sd-sec>.cam-listo{margin:0 0 10px}
.cam-error{margin:.7rem 0 0;color:var(--mal);font-size:var(--t-menor);line-height:1.35}
.cam-ficha.cam-rebote{border-color:var(--mal);box-shadow:0 0 0 1px var(--mal)}
.cam-ficha.cam-guardado{opacity:.55}
.cam-ficha.cam-guardado .cam-tit::after{content:"Guardado";margin-left:auto;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ok)}

/* La carga de margenes adentro de una hoja del diseño nuevo. La eleccion de
   como contestar va ARRIBA de la tabla y el boton abajo, los dos con el aire
   de la hoja; la tabla queda pegada a los bordes, como en Los camiones. */
.sd-hoja .mg-elige{margin:13px 15px}
.sd-hoja .mg-pie{margin:0;padding:12px 15px;display:flex;gap:9px;
  align-items:center;flex-wrap:wrap;border-top:1px solid var(--borde)}

/* La tabla va pegada a los bordes de la hoja, y su ultima columna es LA
   RESPUESTA: sin aire contra el canto de la tarjeta el numero se lee
   apretado. En el celular la tabla se desarma en fichas —una por rubro— y
   el aire se lo pone la ficha entera. */
@media(min-width:641px){
  .sd-hoja .mg-tabla th:first-child,
  .sd-hoja .mg-tabla td:first-child{padding-left:15px}
  .sd-hoja .mg-tabla th:last-child,
  .sd-hoja .mg-tabla td:last-child{padding-right:15px}
}
@media(max-width:640px){
  .sd-hoja .mg-tabla tr{padding-left:15px;padding-right:15px}
}

/* Mi PC: el chip de lo roto y el código para copiar adentro de un aviso */
.sd-chip.mal{background:var(--mal-piso);color:var(--mal)}
.sd-aviso .sd-codigo{display:block;width:100%;margin:8px 0 0;box-sizing:border-box}
@media(max-width:599px){ .sd-act.envuelve{flex-wrap:wrap} .sd-act.envuelve .nom{flex-basis:100%} }
.sd-form-fila .sd-par-fecha{display:flex;align-items:center;gap:8px;flex:1 1 240px;margin:0}
.sd-par-fecha span{font-size:var(--t-pie,.8125rem);color:var(--tinta-2);min-width:3.2em}
.sd-par-fecha input{flex:1;min-width:0;margin:0}
/* Mis archivos: el botón de borrar todo */
.sd-btn.peligro{background:var(--mal-piso);color:var(--mal);border:1px solid color-mix(in srgb,var(--mal) 30%,transparent)}
/* Los archivos: PEM y Excel son enlaces y Borrar es botón; con dedo miden igual */
@media(pointer:coarse){ .sd-act.envuelve a.sd-btn{min-height:44px;display:inline-flex;align-items:center} }
.sd .sd-act form .sd-btn{margin:0}
/* El panel del admin: el renglón de una cuenta o una PC lleva varios datos y
   se lee entero, no cortado con puntos suspensivos */
.sd-admin .sd-deu>summary .nom s{white-space:normal}
.sd-renom{padding:8px 15px 12px;display:flex;flex-direction:column;gap:6px}
.sd-ordenes{flex-wrap:wrap;gap:8px}
.sd-ordenes .nom{flex-basis:100%}
.sd-form-fila.sd-buscar{padding:10px 15px 6px}
.sd-form-dentro{padding:8px 15px}
.sd-tenue{opacity:.55}
.sd-pre{margin:0;padding:12px 15px;max-height:420px;overflow:auto;white-space:pre-wrap;word-break:break-word}
/* Subir PEM y Comparar IVA: sus hojas de siempre, con el margen del marco nuevo */
.sd-herramienta>.card{margin:14px 16px 0;width:auto;max-width:none;box-sizing:border-box}
@media(min-width:900px){ .sd-herramienta>.card{margin:16px 32px 0} }
/* Un despliegue cuyo renglón es una frase (qué hace SADIA) y no un nombre: se lee entero */
.sd-deu.larga>summary .nom b,.sd-deu.larga>summary .nom s{white-space:normal}
/* El pedido: la cantidad, su unidad y el botón en un solo renglón */
.sd-ped-cant{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.sd-ped-cant input[type=text]{width:88px;margin:0;text-align:right}
/* el nombre del proveedor es texto: va a la izquierda y mas ancho */
.sd-ped-cant input.sd-ped-nombre{width:190px;max-width:100%;text-align:left}
.sd-ped-cant span{font-size:var(--t-pie,.8125rem);color:var(--tinta-2)}
/* Tus planillas: el elegir-archivo del navegador, con la pinta del resto */
.sd-subir input[type=file]{flex:1 1 220px;min-width:0;margin:0;color:var(--tinta-2);font-size:var(--t-pie,.8125rem)}
.sd-subir input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;cursor:pointer;border:1px solid var(--borde-2);border-radius:999px;background:transparent;color:var(--tinta);font:inherit;font-weight:600}

/* Los datos de un formulario de un solo renglón por casillero: contraseña,
   email de Mercado Pago. El rótulo arriba y el casillero a lo ancho. */
.sd .sd-dato{display:block;margin:0 0 12px;font-weight:400}
.sd .sd-dato span{display:block;font-size:var(--t-micro);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);margin:0 0 5px;font-weight:600}
.sd .sd-dato input{width:100%;box-sizing:border-box;margin:0}
.sd-dato-pie{padding-top:2px}

/* Ayuda: el chat plantado es la pantalla, sin el marco de globito. */
.sd-ayuda-chat #chat-panel.chat-fijo{margin:0;border-radius:var(--sd-r,14px)}
.sd-ayuda-q{margin:0;padding:10px 15px 2px;font-size:var(--t-menor)}

/* Una guía: cada paso con su número, su dibujo y su texto. */
.sd-pasos{list-style:none;margin:0;padding:0}
.sd-paso{display:grid;grid-template-columns:34px 96px 1fr;gap:4px 14px;
  align-items:start;padding:14px 15px;border-bottom:1px solid var(--borde)}
.sd-paso:last-child{border-bottom:0}
.sd-paso .n{width:30px;height:30px;border-radius:50%;background:var(--accion);
  color:var(--sobre-color);font-family:var(--f-num);font-weight:600;
  display:flex;align-items:center;justify-content:center}
.sd-paso .dib{color:var(--accion)}
.sd-paso .dib svg{width:96px;height:80px;display:block}
.sd-paso .txt{grid-column:3}
.sd-paso .txt>b{display:block;color:var(--tinta);margin:4px 0 4px}
.sd-paso .txt p{margin:0;color:var(--tinta-2);line-height:1.55}
.sd-paso-sigue{margin:0;padding:12px 15px;color:var(--tinta-2);line-height:1.55}
.sd-tapa .sd-sello a{color:inherit}
@media (max-width:560px){
  .sd-paso{grid-template-columns:30px 1fr}
  .sd-paso .dib{grid-column:2}
  .sd-paso .dib svg{width:80px;height:66px}
  .sd-paso .txt{grid-column:2}
}

/* ==================================================================
   EL MENÚ: lo de adentro de cada sección, y en la computadora, fijo a
   la izquierda. En el celular es la lista que baja desde el título y
   muestra todo; en la computadora es la columna de un sistema de
   gestión: las siete secciones siempre a la vista, y lo de adentro sólo
   de la sección donde estás.
   ================================================================== */
.sd-lado-marca{display:none}
.sd-dest.sd-sub{padding:8px 14px 8px 59px;border-top:0}
.sd-dest.sd-sub b{font-weight:480;font-size:var(--t-pie,.875rem);color:var(--tinta-2)}
.sd-dest.sd-sub.aca b{color:var(--tinta);font-weight:560}

@media(min-width:1100px){
  :root{--sd-lado:248px}
  .sd{padding-left:var(--sd-lado)}
  .vercomo-banner,.demo-banner{margin-left:var(--sd-lado)}
  .sd-chat{left:var(--sd-lado)}
  .sd-tapon{display:none!important}
  .sd-menu{pointer-events:none}
  .sd-menu svg{display:none}

  /* `[hidden]` lleva !important en style.css: sin el suyo, la columna no se ve. */
  .sd-panel,.sd-panel[hidden]{display:block!important;position:fixed;
    top:0!important;left:0!important;bottom:0;width:var(--sd-lado);
    max-height:none;overflow-y:auto;z-index:45;
    background:var(--sup-2);border:0;border-right:1px solid var(--borde);
    border-radius:0;box-shadow:none;animation:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 18px}
  .sd-lado-marca{display:block;padding:18px 20px 14px;text-decoration:none;
    font-family:var(--f-din);font-size:1.0625rem;color:var(--tinta);
    letter-spacing:-.01em}
  .sd-lado-marca b{color:var(--sodio);font-weight:700}

  .sd-panel .sd-grupo{border-top:0;padding:14px 20px 6px}
  .sd-panel .sd-grupo:empty{margin:12px 20px 4px;padding:0;
    border-top:1px solid var(--borde)}
  .sd-panel .sd-dest{margin:1px 10px;padding:7px 10px;gap:10px;
    border-top:0;border-radius:10px}
  .sd-panel .sd-dest em{width:28px;height:28px;border-radius:8px;
    background:var(--sup);font-size:.95rem}
  .sd-panel .sd-dest s,.sd-panel .sd-dest i{display:none}
  .sd-panel .sd-dest b{font-size:var(--t-cuerpo,.9375rem);font-weight:500}
  .sd-panel .sd-dest.aca{background:var(--accion-piso)}
  .sd-panel .sd-dest.aca b{color:var(--accion);font-weight:620}
  .sd-panel .sd-dest.aca em{color:var(--accion);border-color:transparent}
  .sd-panel .sd-dest.abierta:not(.aca) b{font-weight:620}

  .sd-subs{display:none;margin:0 0 4px}
  .sd-subs.abierta{display:block}
  .sd-panel .sd-dest.sd-sub{padding:6px 10px 6px 48px}
  .sd-panel .sd-dest.sd-sub b{font-size:var(--t-pie,.875rem);font-weight:480;
    color:var(--tinta-2)}
  .sd-panel .sd-dest.sd-sub.aca b{color:var(--accion);font-weight:600}
}

/* ---- el nombre de la estación, en todas las pantallas (25/09/2026) ----
   Un dueño con dos estaciones tiene dos cuentas iguales; sin el nombre a la
   vista tenía que entrar a una pantalla con datos para saber en cuál estaba.
   En el celular va arriba del título, chiquito; en la computadora manda en la
   cabecera del menú y en la barra no se repite. */
.sd-quien{margin:0 0 3px;font-size:var(--t-micro);letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3);line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-lado-est{display:block}
@media(min-width:1100px){
  .sd-quien{display:none}
  .sd-lado-marca{line-height:1.25}
  .sd-lado-est{font-weight:680;letter-spacing:-.01em}
  .sd-lado-marca>span{display:block;font-size:var(--t-micro);
    letter-spacing:.08em;color:var(--tinta-3)}
  .sd-lado-marca>span b{color:var(--sodio);font-weight:700}
}

/* ================================================== LAS PUERTAS
   Entrar, crear cuenta, la contraseña olvidada y contacto. Sin menú, sin
   chat y sin barra de abajo: una tarjeta en el medio, el ancho de un
   celular aunque se abra en un monitor. */
.sd-entrada .sd-barra{position:static}
.sd-marca-sola{text-decoration:none;color:var(--tinta)}
.sd-marca-sola b{color:var(--sodio)}
.sd-puerta{max-width:460px;margin:0 auto;padding:10px 16px 8px}
.sd-puerta .sd-hoja{margin:0 0 14px}
.sd-puerta-caja{padding:20px 18px 18px}
.sd-puerta .sd-sello{margin:0}
.sd-puerta .sd-titular{margin:4px 0 6px}
.sd-puerta .sd-pie{margin:0 0 14px;color:var(--tinta-2);line-height:1.5}
.sd-puerta .sd-hoja.sd-form form{padding:0}
.sd-puerta .sd-pieh{padding-left:0;padding-right:0}
.sd .sd-btn.ancho{display:block;width:100%;text-align:center;padding:13px 16px;
  text-decoration:none}
.sd-puerta-boton{padding-top:4px}
.sd-puerta-pie{margin:14px 0 0;font-size:var(--t-menor)}
.sd-puerta-abajo{margin:4px 0 24px;text-align:center;
  font-size:var(--t-menor);color:var(--tinta-3)}
.sd-puerta-tit{margin:0 0 10px;font-weight:620;color:var(--tinta)}
.sd-puerta-txt{margin:0 0 9px;color:var(--tinta-2);line-height:1.5;
  font-size:var(--t-menor)}
.sd-puerta-txt:last-child{margin-bottom:0}
.sd-puerta-txt b{color:var(--tinta);font-weight:560}
.sd-padron{padding-top:0;margin:-6px 0 12px;border-top:0;background:none}
.sd-acepto{display:flex;gap:10px;align-items:flex-start;margin:4px 0 2px;
  font-size:var(--t-menor);color:var(--tinta-2);line-height:1.45}
.sd-acepto input{margin:2px 0 0;width:18px;height:18px;flex:none}
.sd-entrada .pie-legal{max-width:640px;margin:0 auto}
@media(min-width:1100px){
  /* la puerta no tiene columna a la izquierda: sin esto la marca queda
     corrida el ancho del menú que no está */
  .sd.sd-entrada{padding-left:0}
  .sd-entrada .sd-barra-fila{max-width:460px;margin:0 auto;padding:0 2px}
}
/* el aviso de la puerta va del ancho de la tarjeta, no de la pantalla */
.sd-entrada .sd-aviso{max-width:460px;margin:12px auto 0;
  box-sizing:border-box}
@media(min-width:900px){ .sd-entrada .sd-aviso{margin:14px auto 0} }
/* Envíos solos: el nombre del cliente al lado de su casilla (28/09/2026).
   Un <span> y no un <label>: el label global de style.css trae margen y
   bloque, y desnivela los renglones. */
.sd .cc-mail{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.sd .cc-mail span{flex:1 1 200px;min-width:0}
.sd .cc-mail input{flex:2 1 240px;min-width:0}
/* El mail que rebotó, en «Cargales el mail» y en la ficha del cliente. */
.sd .cc-reboto{color:var(--mal);font-weight:560}
/* Clientes en el celular: el chip del mail va abajo de lo que debe. Al
   lado, el nombre quedaba en tres dedos de ancho y cortado en «TRANSPO…». */
.cc-par{display:contents}
@media(max-width:560px){
  .cc-par{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
}
/* Con dedo, «Mandar» (botón de formulario) mide lo mismo que «Cargar mail»
   (enlace) en la misma lista. */
@media(pointer:coarse){ .sd-act.envuelve form .sd-btn{min-height:44px} }