/* Mechanic Max — css/clientes.css
   Vistas: Clientes (#clientes, #clientes/avisar, #clientes/<id>), el bloque «Avisar hoy» del Panel,
   el buscador de clientes dentro de la orden, sus diálogos y «Recordatorios a clientes» en Taller y respaldo.
   Se carga después de css/taller.css. Solo tokens de :root y clases compartidas (guía: guia-estilo.html).

   Índice
     1. Pestañas y lista          4. Ficha del cliente        7. Taller y respaldo
     2. Recordatorios             5. Diálogos                 8. Tableta y celular
     3. Panel: «Avisar hoy»       6. Orden: cliente y carro */


/* ---------- 1. Pestañas y lista ---------- */
#v-clientes .cabecera{align-items:center}
.cli-pestanas{margin:0 0 var(--e-5)}
.cli-pestanas a{display:inline-flex;align-items:center;gap:var(--e-2);min-height:34px;padding:6px 14px;border-radius:var(--r-1);color:var(--texto-2);font-size:var(--t-s);font-weight:600;text-decoration:none;white-space:nowrap;transition:background var(--dur) var(--curva),color var(--dur) var(--curva)}
.cli-pestanas a:hover{color:var(--texto)}
.cli-pestanas a.activa{background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-1),inset 0 -2px 0 var(--amarillo)}
.cli-pestanas a:focus-visible{outline-offset:-2px}

#cliPanelLista .filtros>input{max-width:480px}
.cli-cuenta{margin:0 0 var(--e-3);font-size:var(--t-s)}
.cli-cuenta:empty{display:none}
.cli-cargando{padding:var(--e-4) 0}
.sin-dato{color:var(--texto-3)}

.cli-tabla th{background:var(--superficie-2);border-top:1px solid var(--linea)}
.cli-tabla td{padding-top:var(--e-3);padding-bottom:var(--e-3)}
.cli-tabla td:first-child b{font-weight:650;overflow-wrap:anywhere}
.cli-tabla td:first-child{max-width:22rem}
.cli-tabla .cli-carros{font-size:var(--t-s)}
.cli-carro{display:block}
.cli-tabla .cli-visita{white-space:nowrap;color:var(--texto-2)}
.cli-tabla td.n{font-weight:650}
.cli-tabla .cli-prox small{margin-top:2px}
.cli-tabla tbody tr[data-id]:focus-within td{background:var(--superficie-2)}


/* ---------- 2. Recordatorios ---------- */
/* Cuándo vence: «pronto» en amarillo suave; «vencido» en tinta con su punto amarillo (no es un error: no va en rojo) */
.rec-chip,.rec-vence,.rec-estado-sello{display:inline-flex;align-items:center;gap:6px;min-height:22px;padding:2px 8px;border:1px solid var(--linea-fuerte);border-radius:var(--r-1);background:var(--superficie);color:var(--texto-2);font-size:var(--t-xs);font-weight:600;line-height:1.3;white-space:nowrap;vertical-align:middle}
:is(.rec-chip,.rec-vence).pronto{background:var(--amarillo-suave);border-color:var(--amarillo-borde);color:var(--amarillo-texto)}
:is(.rec-chip,.rec-vence).vencido{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta)}
:is(.rec-chip,.rec-vence).vencido::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--amarillo)}
.rec-estado-sello{border-style:dashed}
.rec-estado-sello.e-hecho{background:var(--verde-fondo);border-style:solid;border-color:var(--verde-fondo);color:var(--verde)}

.rec-lista{display:flex;flex-direction:column}
.rec{padding:var(--e-4) 0;border-bottom:1px solid var(--linea)}
.rec:first-child{border-top:1px solid var(--linea)}
.rec-cab{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3)}
.rec-tit{margin:0;font-size:var(--t-l)}
.rec-cerrado .rec-tit{color:var(--texto-2)}
.rec-quien{margin:var(--e-1) 0 0;font-weight:600}
.rec-quien a{font-weight:650}
.rec-detalle{margin:2px 0 0;font-size:var(--t-s);color:var(--texto-2);max-width:80ch}
.rec-permiso{display:flex;align-items:flex-start;gap:var(--e-2);margin:var(--e-2) 0 0;font-size:var(--t-s);color:var(--texto-2);max-width:80ch}
.rec-permiso .ico{margin-top:2px;color:var(--amarillo-texto)}
.rec-msg{margin:var(--e-3) 0 0}
.rec-msg summary{display:inline-flex;align-items:center;min-height:32px;font-size:var(--t-s)}
.rec-msg p{margin:var(--e-2) 0 0;padding:var(--e-3) var(--e-4);max-width:72ch;background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-2);white-space:pre-wrap}
.rec-acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-5);margin-top:var(--e-3)}
.rec-enviar,.rec-cambiar,.rec-cerrar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2)}
/* Cerrar va aparte y al final, separado de «Posponer»: «Ya se hizo el servicio» no es lo mismo que «ya le avisé» */
.rec-cerrar{margin-left:auto;padding-left:var(--e-4);border-left:1px solid var(--linea)}
.rec-cerrar .btn-gris{padding:6px 12px;font-size:var(--t-s)}
.rec-cerrar .btn-texto{min-height:var(--control);padding:0 var(--e-2);font-size:var(--t-s)}
/* Faltan más de 30 días: los botones de envío quedan plegados tras «Avisar ya» */
.rec-lejos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3)}
.rec-lejos-txt{margin:0;font-size:var(--t-s);color:var(--texto-2)}
.rec-lejos .btn-texto{min-height:var(--control);font-size:var(--t-s)}
.rec-lejos>.rec-enviar{flex-basis:100%}
.rec-enviar:empty{display:none}
.rec-cambiar-etq{font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
.rec-cambiar .btn-gris{padding:6px 12px;font-size:var(--t-s)}
.rec-cambiar .btn-texto{min-height:var(--control);padding:0 var(--e-2);font-size:var(--t-s)}
.rec-grupo>h2 .cuenta{margin-left:var(--e-1)}
#cliPanelAvisar>.rec-grupo:first-child>h2{margin-top:0}
.rec-pasos{margin-top:var(--e-2);font-size:var(--t-s);color:var(--texto-2)}
.rec-pasos summary{display:inline-flex;align-items:center;min-height:var(--control)}
.rec-pasos ol{margin:0;padding:0 0 0 var(--e-5)}
.rec-pasos li{margin:2px 0}
.rec-pasos-fecha{font-variant-numeric:tabular-nums;color:var(--texto)}
.rec-historial{margin-top:var(--e-4)}
.rec-historial summary{display:inline-flex;align-items:center;min-height:var(--control);font-size:var(--t-s)}
/* «Más adelante» en Por avisar: plegado, para que lo urgente quede arriba */
.rec-luego{margin-top:var(--e-6)}
.rec-luego>summary{display:flex;align-items:center;gap:var(--e-2);min-height:var(--control);cursor:pointer}
.rec-luego>summary h2{display:inline-flex;align-items:center;gap:var(--e-2);margin:0}
.rec-sin-taller a{font-weight:650}

/* Aviso con «Deshacer» tras apuntar un aviso o cerrar un recordatorio (la misma pieza que #toast, con su botón) */
.aviso-deshacer{position:fixed;left:50%;bottom:var(--e-5);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--e-4);max-width:calc(100vw - 2*var(--e-4));padding:var(--e-1) var(--e-2) var(--e-1) var(--e-4);border-radius:var(--r-2);background:var(--tinta);color:var(--sobre-tinta);font-weight:600;box-shadow:var(--sombra-3);transform:translateX(-50%)}
.aviso-deshacer .btn-texto{min-height:var(--control);padding:0 var(--e-2);color:var(--sobre-tinta);white-space:nowrap}


/* ---------- 3. Panel: «Avisar hoy» ---------- */
.avisar-hoy{margin-top:var(--e-7)}
.avisar-hoy.avisar-hoy-arriba{margin:0 0 var(--e-6)}
.avisar-hoy-cab{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--e-2) var(--e-3);margin-bottom:var(--e-3)}
.avisar-hoy-cab h2{display:flex;align-items:center;gap:var(--e-2);margin:0}
.avisar-hoy-cab a{font-size:var(--t-s);font-weight:600}
.avisar-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--linea)}
.avisar-fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--e-2) var(--e-3);padding:var(--e-3) 0;border-bottom:1px solid var(--linea)}
.avisar-quien{display:flex;flex-direction:column;min-width:0}
.avisar-quien a{font-weight:650}
/* Con ratón basta con un blanco cómodo de 28 px (en tableta y celular, 40: sección 8) */
.avisar-hoy-cab a,.avisar-quien a,.rec-quien a{display:inline-flex;align-items:center;min-height:28px}
.avisar-quien a{align-self:flex-start}
.avisar-quien small{color:var(--texto-2)}
.avisar-fila>.rec-vence{align-self:start}
.avisar-botones{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--e-2)}
.avisar-botones .btn-gris{padding:6px 12px;font-size:var(--t-s)}
.avisar-vacio{margin:0;padding:var(--e-3) 0;border-top:1px solid var(--linea);font-size:var(--t-s)}


/* ---------- 4. Ficha del cliente ---------- */
.cli-volver{min-height:var(--control);margin-bottom:var(--e-2)}
.cli-ficha-cab{align-items:flex-end}
.cli-ficha-cab h1{margin-bottom:var(--e-1)}
.cli-ficha-rejilla{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--e-5);align-items:start}
.cli-contacto{padding:var(--e-4) var(--e-5);background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-3)}
.cli-sec-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-2) var(--e-3);margin:var(--e-7) 0 var(--e-3)}
.cli-sec-cab h2{display:flex;align-items:center;gap:var(--e-2);margin:0}
.cli-contacto .cli-sec-cab{margin:0 0 var(--e-3)}
.cli-contacto h2{font-size:var(--t-l)}
.cli-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-3) var(--e-4);margin:0 0 var(--e-4)}
.cli-datos>div{min-width:0}
.cli-datos .cli-notas{grid-column:1/-1}
.cli-datos dt{font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
.cli-datos dd{margin:2px 0 0;overflow-wrap:anywhere}
.cli-permiso{padding-top:var(--e-3);border-top:1px solid var(--linea)}
.cli-permiso label.check{font-weight:600}
.cli-permiso .ayuda{margin:0;font-size:var(--t-s)}
.cli-idioma{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-2) var(--e-3);margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--linea);font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
.cli-idioma .pestanas button{min-height:var(--control)}
.cli-cifras b{font-size:var(--t-xl)}

.cli-vehiculos{display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.cli-veh{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--e-3) var(--e-5);padding:var(--e-4) 0;border-bottom:1px solid var(--linea)}
.cli-veh h3{margin:0 0 var(--e-1)}
.cli-veh-linea{margin:0;font-size:var(--t-s);color:var(--texto-2);overflow-wrap:anywhere}
.cli-veh-linea b{color:var(--texto)}
.cli-veh-botones{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--e-2);max-width:520px}
.cli-veh-botones .btn-gris{padding:6px 12px;font-size:var(--t-s)}
.cli-veh-botones .btn-texto{min-height:var(--control);padding:0 var(--e-2);font-size:var(--t-s)}

.cli-ordenes th{background:var(--superficie-2);border-top:1px solid var(--linea)}
.cli-ordenes tbody tr[data-orden]{cursor:pointer}
.cli-ordenes tbody tr[data-orden]:is(:hover,:focus-within) td{background:var(--superficie-2)}
.cli-ordenes td:nth-child(2){white-space:nowrap;color:var(--texto-2)}
.cli-ordenes td.n{font-weight:650}
.cli-borrar{margin-top:var(--e-6)}
.cli-borrar-btn{min-height:var(--control);color:var(--rojo);text-decoration-color:var(--rojo-borde)}

/* Aviso tras guardar una orden: enlace a la ficha */
.cli-guardada{--aviso-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23177245' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");display:flex;align-items:center;justify-content:space-between;gap:var(--e-3)}
.cli-guardada .x{margin:calc(-1*var(--e-2)) calc(-1*var(--e-2)) calc(-1*var(--e-2)) 0}


/* ---------- 5. Diálogos ---------- */
.cli-form .ayuda{margin:0}
.cli-form .ancho-2{grid-column:span 2}
.cli-form .cli-permiso{padding:var(--e-3) var(--e-4);border:1px solid var(--linea);border-radius:var(--r-2);background:var(--superficie-2)}
.cli-form textarea{width:100%}


/* ---------- 6. Orden: cliente y carro ---------- */
.cli-campo{position:relative;display:block}
.cli-campo>input{width:100%}
.cli-sugerencias{position:absolute;left:0;right:0;top:calc(100% + var(--e-1));z-index:5;max-height:288px;margin:0;padding:var(--e-1);overflow-y:auto;list-style:none;background:var(--superficie);border:1px solid var(--linea-fuerte);border-radius:var(--r-2);box-shadow:var(--sombra-2)}
.cli-sugerencias li{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:var(--e-2) var(--e-3);border-radius:var(--r-1);color:var(--texto);font-size:var(--t-m);font-weight:400;cursor:pointer}
.cli-sugerencias li b{font-weight:600}
.cli-sugerencias li small{color:var(--texto-2)}
.cli-sugerencias li:hover,.cli-sugerencias li[aria-selected=true]{background:var(--superficie-2);box-shadow:inset 3px 0 0 var(--amarillo)}
.cli-orden{margin-top:var(--e-3)}
.cli-orden>.ayuda{margin:0;font-size:var(--t-s)}
.cli-orden-elegido{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2) var(--e-3)}
.cli-orden-elegido>.ico{color:var(--texto-2)}
.cli-orden-elegido>span{min-width:0}
.cli-orden-elegido .btn-texto{min-height:32px;font-size:var(--t-s)}
.cli-orden-tit{margin:var(--e-3) 0 var(--e-2);font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
.cli-orden-carros{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.cli-orden-carros button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:100%;min-height:var(--control);padding:var(--e-2) var(--e-3);border:1px solid var(--borde-control);border-radius:var(--r-2);background:var(--superficie);text-align:left;transition:border-color var(--dur) var(--curva),box-shadow var(--dur) var(--curva)}
.cli-orden-carros button:hover{background:var(--superficie-2)}
.cli-orden-carros button b{font-weight:600}
.cli-orden-carros button small{color:var(--texto-2);font-size:var(--t-xs)}
.cli-orden-carros button[aria-checked=true]{border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta),inset 0 -3px 0 var(--amarillo)}
.cli-orden-carros+.ayuda,.cli-orden .cli-orden-elegido+.ayuda{margin:var(--e-2) 0 0;font-size:var(--t-s)}


/* ---------- 7. Taller y respaldo: recordatorios ---------- */
.rec-aj-tit{margin:var(--e-6) 0 var(--e-3);font-size:var(--t-m)}
#recAjustes>.rec-aj-tit:first-child{margin-top:0}
#recAjustes>.fila-botones{margin:var(--e-3) 0}
.rec-reglas{display:flex;flex-direction:column;gap:var(--e-2)}
.rec-regla{display:grid;grid-template-columns:minmax(12rem,1fr) minmax(14rem,1.6fr) 4.5rem 6.5rem var(--control);align-items:center;gap:var(--e-2)}
.rec-regla input{width:100%}
.rec-regla-cab span{font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
.rec-regla-etq{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rec-regla .x:hover{background:var(--rojo-fondo);color:var(--rojo)}
.rec-plantillas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4)}
.rec-plantillas textarea{width:100%;min-height:9.5rem;field-sizing:content}
.rec-marcadores{margin-top:var(--e-3)}
.rec-marcadores .ayuda{margin:0 0 var(--e-2);font-size:var(--t-s)}
.rec-marcador{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:var(--control);padding:6px 10px;border:1px solid var(--linea-fuerte);border-radius:var(--r-1);background:var(--superficie);color:var(--texto);text-align:left}
.rec-marcador:hover{border-color:var(--borde-control);background:var(--superficie-2)}
.rec-marcador .mono{font-size:var(--t-s);font-weight:600}
.rec-marcador small{font-size:var(--t-xs);color:var(--texto-2)}
.rec-previa{margin-top:var(--e-4);padding:var(--e-3) var(--e-4);background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-3)}
.rec-previa-tit{margin:0 0 var(--e-1);font-size:var(--t-s);font-weight:600;color:var(--texto-2)}
#recPrevia{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.rec-millas-dia{max-width:280px}
#recAjustes .ayuda.error{margin:var(--e-3) 0 0}

/* Modo invitado: nada de clientes (invitado.js también lo quita) */
body.invitado :is(#avisarHoyBloque,#menu a[data-v=clientes],#oCliente){display:none!important}


/* ---------- 8. Tableta y celular ---------- */
@media (max-width:1200px){
  .cli-ficha-rejilla{grid-template-columns:minmax(0,1fr)}
  .cli-cifras{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:960px){
  .cli-veh{grid-template-columns:minmax(0,1fr)}
  .cli-veh-botones{justify-content:flex-start;max-width:none}
  .rec-plantillas{grid-template-columns:minmax(0,1fr)}
  .cli-cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Tableta y celular (se toca con el dedo): los enlaces sueltos también miden 40 px de alto */
  .rec-quien a,.avisar-quien a,.avisar-hoy-cab a,#bRecFabrica,.rec-permiso a,.cli-datos dd a,.rec-sin-taller a{display:inline-flex;align-items:center;min-height:var(--control)}
  .avisar-quien a{align-self:flex-start}
}
@media (max-width:700px){
  /* Pestañas a todo lo ancho (son dos y caben: sin degradado) */
  .cli-pestanas{display:flex;width:100%;-webkit-mask-image:none!important;mask-image:none!important}
  .cli-pestanas a{flex:1 1 0;justify-content:center;min-height:var(--control);padding:6px 10px}
  #cliPanelLista .filtros>input{max-width:none}

  /* Lista de clientes: cada fila es una ficha (nombre y total arriba; carros, visita y próximo aviso debajo) */
  .cli-tabla{display:block;overflow:visible;border-top:1px solid var(--linea)}
  .cli-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cli-tabla tbody{display:block}
  .cli-tabla tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--e-3);padding:var(--e-3) var(--e-1);border-bottom:1px solid var(--linea)}
  .cli-tabla td{display:block;padding:0!important;border:0}
  .cli-tabla td:nth-child(1){grid-column:1;grid-row:1}
  .cli-tabla td:nth-child(4){grid-column:2;grid-row:1;font-size:var(--t-l)}
  .cli-tabla td:nth-child(2),.cli-tabla td:nth-child(3),.cli-tabla td:nth-child(5){grid-column:1/-1}
  .cli-tabla td:nth-child(3){font-size:var(--t-s);white-space:normal}
  .cli-tabla td:nth-child(3):not(:has(.sin-dato))::before{content:"Última visita: "}
  .cli-tabla td:nth-child(5):has(>.sin-dato:only-child){display:none}
  .cli-carro{display:inline}
  .cli-carro+.cli-carro::before{content:", "}
  .cli-carros small{display:inline;margin-left:var(--e-1)}
  .cli-tabla td:nth-child(5){margin-top:var(--e-1)}
  .cli-tabla td:nth-child(5) small{display:inline;margin-left:var(--e-2)}

  /* Órdenes del cliente: también como fichas */
  .cli-ordenes{display:block;overflow:visible;border-top:1px solid var(--linea)}
  .cli-ordenes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cli-ordenes tbody{display:block}
  .cli-ordenes tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--e-3);padding:var(--e-3) var(--e-1);border-bottom:1px solid var(--linea)}
  .cli-ordenes td{display:block;padding:0!important;border:0}
  .cli-ordenes td:nth-child(1){grid-column:1;grid-row:1}
  .cli-ordenes td:nth-child(2){grid-column:2;grid-row:1;text-align:right;font-size:var(--t-s)}
  .cli-ordenes td:nth-child(3){grid-column:1/-1}
  .cli-ordenes td:nth-child(4){grid-column:1;margin-top:var(--e-1)}
  .cli-ordenes td.n{grid-column:2;align-self:end;font-size:var(--t-l)}

  /* Ficha */
  .cli-ficha-cab>.btn{width:100%}
  .cli-contacto{padding:var(--e-4)}
  .cli-datos{grid-template-columns:minmax(0,1fr)}
  .cli-idioma .pestanas{display:flex;width:100%;-webkit-mask-image:none!important;mask-image:none!important}
  .cli-idioma .pestanas button{flex:1 1 0}
  .cli-sec-cab>.btn-gris{flex:1 1 100%}
  .cli-veh-botones>.btn-gris{flex:1 1 auto}

  /* Recordatorios: botones grandes al alcance del pulgar */
  .rec-acciones{flex-direction:column;align-items:stretch}
  .rec-enviar>*{flex:1 1 30%;padding-left:10px;padding-right:10px}
  .rec-enviar>[data-copiar]{flex-basis:100%}
  .rec-cambiar>.btn-gris{flex:1 1 auto}
  .rec-cambiar-etq{flex-basis:100%}
  .rec-cerrar{margin-left:0;padding:var(--e-3) 0 0;border-left:0;border-top:1px solid var(--linea)}
  .rec-cerrar>.btn-gris{flex:1 1 auto}
  .aviso-deshacer{bottom:var(--e-4);width:max-content}
  body:has(.barra-abajo:not([hidden])) .aviso-deshacer{bottom:calc(56px + var(--e-4))}
  .avisar-botones>*{flex:1 1 0}
  /* Con una mano: lo que se toca mide 40 px o más (enlaces a la ficha, «Ver el mensaje», «Ver todos») */
  .rec-msg summary{min-height:var(--control)}


  /* Diálogos */
  .cli-form .ancho-2{grid-column:1/-1}

  /* Reglas: cada servicio es una ficha con sus etiquetas */
  .rec-regla-cab{display:none}
  .rec-regla{grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--control);padding:var(--e-3);border:1px solid var(--linea);border-radius:var(--r-3);background:var(--superficie-2)}
  .rec-regla>label:nth-child(1){grid-column:1/3;grid-row:1}
  .rec-regla>.x{grid-column:3;grid-row:1;align-self:end}
  .rec-regla>label:nth-child(2){grid-column:1/-1}
  .rec-regla>label:nth-child(3){grid-column:1}
  .rec-regla>label:nth-child(4){grid-column:2/-1}
  .rec-regla-etq{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .rec-millas-dia{max-width:none}
}