/* ============================================================
   components.css — Piezas de la interfaz
   ------------------------------------------------------------
   Cada bloque es una pieza independiente: pestanas, tablero de
   metricas, buscador, tarjeta de nota, formularios de alta,
   equipo, palabras clave, botones y dialogos.
   ============================================================ */

/* --- Pestanas --- */
.pestanas{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.pestana{flex:0 0 auto;background:none;border:1px solid var(--linea);border-radius:999px;
  padding:8px 14px;font:500 13.5px "IBM Plex Sans",sans-serif;color:var(--tenue);
  cursor:pointer;white-space:nowrap}
.pestana:hover{border-color:var(--guinda-claro);color:var(--guinda)}
.pestana[aria-selected="true"]{background:var(--guinda);border-color:var(--guinda);color:#fff}
.cuenta{font:500 11px "IBM Plex Mono",monospace;margin-left:6px;opacity:.75}


/* --- Tablero de metricas --- */
.tablero{display:grid;gap:6px;margin-bottom:12px}
.metrica{background:var(--papel);border:1px solid var(--linea);border-radius:3px;
  padding:11px 10px;text-align:left;cursor:pointer;font-family:inherit}
.metrica:hover{border-color:var(--guinda-claro)}
.metrica[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta)}
.metrica[aria-pressed="true"] .cifra,
.metrica[aria-pressed="true"] .rotulo{color:#fff}
.cifra{display:block;font:600 21px/1 "Archivo",sans-serif;letter-spacing:-.02em;
  color:var(--tinta);margin-bottom:4px}
.rotulo{display:block;font:500 10px/1.25 "IBM Plex Mono",monospace;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tenue)}
.metrica.urge .cifra{color:var(--guinda)}
.metrica.urge[aria-pressed="true"] .cifra{color:#fff}


/* --- Segundo tablero: desglose por estado --- */
.desglose{display:flex;gap:6px;overflow-x:auto;margin:-6px 0 14px;padding-bottom:2px;
  scrollbar-width:none}
.desglose::-webkit-scrollbar{display:none}
.paso{flex:0 0 auto;background:var(--papel);border:1px solid var(--linea);border-radius:2px;
  padding:7px 11px;cursor:pointer;font-family:inherit;display:flex;align-items:baseline;gap:7px}
.paso:hover{border-color:var(--guinda-claro)}
.paso[aria-pressed="true"]{background:var(--guinda);border-color:var(--guinda)}
.paso[aria-pressed="true"] .paso-n,
.paso[aria-pressed="true"] .paso-t{color:#fff}
.paso-n{font:600 14px/1 "Archivo",sans-serif;color:var(--tinta)}
.paso-t{font:400 12.5px/1 "IBM Plex Sans",sans-serif;color:var(--tenue);white-space:nowrap}


/* --- Buscador --- */
.buscador{position:relative;margin-bottom:16px}
.buscador input{width:100%;border:1px solid var(--linea);border-radius:2px;
  padding:9px 34px 9px 11px;font:400 14px "IBM Plex Sans",sans-serif;
  background:var(--papel);color:var(--tinta)}
.buscador input:focus{outline:2px solid var(--guinda-claro);outline-offset:1px;
  border-color:transparent}
.buscador button{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--tenue);font-size:17px;
  line-height:1;padding:4px 6px}
.buscador button:hover{color:var(--guinda)}


/* --- Fila de orden --- */
.fila-orden{display:flex;gap:10px;align-items:center;margin:-6px 0 16px;
  flex-wrap:wrap}
.fila-orden label{font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue)}
.fila-orden select{border:1px solid var(--linea);border-radius:2px;padding:6px 9px;
  font:500 13px "IBM Plex Sans",sans-serif;color:var(--tinta);background:var(--papel);
  cursor:pointer}
.fila-orden select:focus{outline:2px solid var(--guinda-claro);outline-offset:1px}
.fila-orden .cuenta-vista{margin-left:auto;font:400 12px "IBM Plex Mono",monospace;
  color:var(--tenue)}


/* --- Seleccion multiple --- */
.marca-sel{flex:0 0 auto;display:flex;align-items:flex-start;padding:15px 0 0 12px}
.marca-sel input{width:17px;height:17px;accent-color:var(--guinda);cursor:pointer}
.nota.elegida{border-color:var(--guinda-claro);box-shadow:inset 0 0 0 1px var(--guinda-claro)}
.barra-sel{position:sticky;top:0;z-index:5;background:var(--tinta);color:#fff;
  border-radius:3px;padding:10px 14px;margin-bottom:10px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.barra-sel .cuantas{font:600 13.5px "Archivo",sans-serif;flex:1}
.barra-sel button{background:none;border:1px solid rgba(255,255,255,.35);
  border-radius:2px;padding:6px 12px;color:#fff;cursor:pointer;
  font:500 13px "IBM Plex Sans",sans-serif}
.barra-sel button:hover{background:rgba(255,255,255,.14)}
.barra-sel button.salir-sel{border:none;text-decoration:underline;
  text-underline-offset:3px;opacity:.75}


/* --- Tarjeta de nota --- */
.nota{background:var(--papel);border:1px solid var(--linea);border-radius:3px;
  margin-bottom:10px;display:flex;overflow:hidden}
.nota.inactiva{opacity:.62}
.nota.inactiva:hover{opacity:1}
.espina{flex:0 0 4px;background:var(--neutro)}
.espina.alto{background:var(--alto)}
.espina.medio{background:var(--medio)}
.espina.bajo{background:var(--bajo)}
.cuerpo{flex:1;min-width:0;padding:14px 16px}

.cejilla{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  font:400 11.5px/1.5 "IBM Plex Mono",monospace;color:var(--tenue);
  letter-spacing:.03em;margin-bottom:8px}
.cejilla .id{color:var(--guinda);font:600 14px/1.2 "IBM Plex Mono",monospace;
  letter-spacing:.02em}
.cejilla a.liga{color:var(--guinda);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--guinda-claro)}
.cejilla a.liga:hover{color:#5C0E2A;border-bottom-width:2px}
.cejilla a.liga.buscar{color:var(--tenue);border-bottom-color:var(--linea)}
.cejilla a.liga.buscar:hover{color:var(--guinda);border-bottom-color:var(--guinda-claro)}
.sello-archivo{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue);border:1px solid var(--linea);
  border-radius:2px;padding:2px 6px}
.titulo{font:600 16.5px/1.32 "Archivo",sans-serif;letter-spacing:-.01em;margin:0 0 8px}
.titulo a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--guinda-claro)}
.titulo a:hover{color:var(--guinda)}

.detalle{margin:0 0 12px}
.detalle summary{cursor:pointer;font:500 12.5px "IBM Plex Sans",sans-serif;
  color:#15703C;list-style:none;display:inline-flex;align-items:center;gap:6px;
  background:#E9F5EE;border:1px solid #C3E3D1;border-radius:2px;padding:5px 11px}
.detalle summary::-webkit-details-marker{display:none}
.detalle summary::before{content:"+";font:500 13px "IBM Plex Mono",monospace}
.detalle[open] summary::before{content:"\2212"}
.detalle summary:hover{background:#D7EDE0;border-color:#A5D5BB;color:#0F5B30}
.detalle summary:focus-visible{outline:2px solid var(--bajo);outline-offset:2px}
.campos{margin:10px 0 0;padding:12px 0 0;border-top:1px dotted var(--linea);font-size:13.5px}
.campos dt{font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue);margin-top:9px}
.campos dt:first-child{margin-top:0}
.campos dd{margin:2px 0 0}


/* --- Controles editables de la tarjeta --- */
.acciones{border-top:1px solid var(--linea);padding-top:12px;display:grid;gap:11px}
.etiqueta{font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue);display:block;margin-bottom:5px}
.grupo{display:flex;flex-wrap:wrap;gap:5px}
.opcion{background:none;border:1px solid var(--linea);border-radius:2px;padding:6px 11px;
  font:500 13px "IBM Plex Sans",sans-serif;color:var(--tenue);cursor:pointer}
.opcion:hover{border-color:var(--guinda-claro);color:var(--guinda)}
.opcion[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.campo{width:100%;border:1px solid var(--linea);border-radius:2px;padding:8px 10px;
  font:400 14px "IBM Plex Sans",sans-serif;background:var(--papel);color:var(--tinta)}
.campo:focus{outline:2px solid var(--guinda-claro);outline-offset:1px;border-color:transparent}
input.campo[type="date"]{font-family:"IBM Plex Mono",monospace;font-size:13px}

.pie-nota{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:11px;padding-top:10px;border-top:1px dotted var(--linea)}
.mini{background:none;border:none;padding:0;cursor:pointer;color:var(--tenue);
  font:500 12.5px "IBM Plex Sans",sans-serif;text-decoration:underline;
  text-underline-offset:3px}
.mini:hover{color:var(--guinda)}
.mini.riesgo:hover{color:var(--alto)}
.guardado{font:400 11.5px "IBM Plex Mono",monospace;color:var(--bajo);opacity:0;
  transition:opacity .2s}
.guardado.ver{opacity:1}
.guardado.error{color:var(--alto)}

.mas{display:block;width:100%;background:none;border:1px dashed var(--linea);
  border-radius:3px;padding:13px;margin-top:6px;cursor:pointer;color:var(--tenue);
  font:500 13.5px "IBM Plex Sans",sans-serif}
.mas:hover{border-color:var(--guinda-claro);color:var(--guinda)}


/* --- Alta de links y formularios en caja --- */
.alta{background:var(--papel);border:1px solid var(--linea);border-left:4px solid var(--guinda);
  border-radius:3px;padding:16px;margin-bottom:18px}
.alta h2{font:600 16px "Archivo",sans-serif;margin:0 0 4px}
.alta p{font-size:13px;color:var(--tenue);margin:0 0 13px}
.alta input,.alta textarea{width:100%;border:1px solid var(--linea);border-radius:2px;
  padding:9px 10px;font:400 14px/1.5 "IBM Plex Sans",sans-serif;color:var(--tinta);
  background:var(--papel);margin-bottom:9px}
.alta textarea{min-height:64px;resize:vertical}
.alta input:focus,.alta textarea:focus{outline:2px solid var(--guinda-claro);
  outline-offset:1px;border-color:transparent}
.alta .pie{display:flex;align-items:center;gap:12px}
.recado{font:400 12.5px "IBM Plex Mono",monospace;color:var(--tenue)}
.recado.bien{color:var(--bajo)}
.recado.mal{color:var(--alto)}

.cola{background:var(--papel);border:1px solid var(--linea);border-radius:3px;
  padding:11px 14px;margin-bottom:7px;display:flex;gap:12px;align-items:baseline}
.cola .id{font:500 11px "IBM Plex Mono",monospace;color:var(--guinda);flex:0 0 auto}
.cola .liga{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.cola .liga a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--linea)}
.cola .liga a:hover{color:var(--guinda);border-bottom-color:var(--guinda-claro)}
.cola .nota-ctx{display:block;font-size:12.5px;color:var(--tenue);white-space:normal;
  margin-top:3px}
.estado{flex:0 0 auto;font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tenue)}
.estado.listo{color:var(--bajo)}
.estado.aviso{color:var(--medio)}
.cola .tirar{flex:0 0 auto;background:none;border:none;padding:2px 4px;cursor:pointer;
  color:var(--neutro);font-size:16px;line-height:1}
.cola .tirar:hover{color:var(--alto)}


/* --- Palabras clave --- */
.llaves{display:flex;flex-wrap:wrap;gap:6px}
.llave{background:var(--papel);border:1px solid var(--linea);border-radius:999px;
  padding:6px 12px;font:400 13px "IBM Plex Sans",sans-serif;color:var(--tinta)}
.llave.espera{background:#FDF3E7;border-color:#F0D9B8;color:#8A5A18}
.llave .marca{font:500 9.5px "IBM Plex Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;margin-left:7px;opacity:.8}


/* --- Equipo --- */
.persona{background:var(--papel);border:1px solid var(--linea);border-radius:3px;
  padding:12px 14px;margin-bottom:7px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.persona.baja{opacity:.55}
.persona .quien{flex:1;min-width:180px}
.persona .nom{font:600 14.5px "Archivo",sans-serif;display:block}
.persona .mail{font:400 12px "IBM Plex Mono",monospace;color:var(--tenue)}
.insignia{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--linea);border-radius:2px;padding:3px 7px;color:var(--tenue)}
.insignia.jefa{border-color:var(--guinda-claro);color:var(--guinda)}


/* --- Ranking de replicantes --- */
.ranking{display:flex;gap:6px;overflow-x:auto;margin:-6px 0 14px;padding-bottom:2px;
  scrollbar-width:none;align-items:center}
.ranking::-webkit-scrollbar{display:none}
.ranking .rot{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue);flex:0 0 auto;margin-right:2px}
.quien-chip{flex:0 0 auto;background:var(--papel);border:1px solid var(--linea);
  border-radius:999px;padding:5px 11px;font:400 12.5px "IBM Plex Sans",sans-serif;
  color:var(--tinta);white-space:nowrap}
.quien-chip b{font:600 12.5px "Archivo",sans-serif;color:var(--guinda);margin-right:5px}
.quien-chip button{background:none;border:none;padding:0 0 0 7px;cursor:pointer;
  color:var(--neutro);font-size:14px;line-height:1}
.quien-chip button:hover{color:var(--alto)}


/* --- Etiquetas del equipo --- */
/* Barra de filtro, arriba del listado. Misma forma que la del ranking de
   replicantes: una fila que se desliza si no cabe. */
.filtro-etq{display:flex;gap:6px;overflow-x:auto;margin:-6px 0 14px;padding-bottom:2px;
  scrollbar-width:none;align-items:center}
.filtro-etq::-webkit-scrollbar{display:none}
.filtro-etq .rot{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue);flex:0 0 auto;margin-right:2px}
.etq-filtro{flex:0 0 auto;background:var(--papel);border:1px solid var(--linea);
  border-radius:999px;padding:5px 11px;font:400 12.5px "IBM Plex Sans",sans-serif;
  color:var(--tinta);white-space:nowrap;cursor:pointer}
.etq-filtro:hover{border-color:var(--guinda-claro);color:var(--guinda)}
.etq-filtro b{font:600 12.5px "Archivo",sans-serif;color:var(--guinda);margin-left:6px}
.etq-filtro[aria-pressed="true"]{background:var(--guinda);border-color:var(--guinda);color:#fff}
.etq-filtro[aria-pressed="true"] b{color:#fff}
.etq-limpia{flex:0 0 auto;background:none;border:none;padding:5px 4px;cursor:pointer;
  color:var(--tenue);font:400 12px "IBM Plex Sans",sans-serif;text-decoration:underline}
.etq-limpia:hover{color:var(--guinda)}

/* Chips dentro de la tarjeta. */
.etiquetas-nota{display:flex;flex-wrap:wrap;gap:5px;align-items:center;
  border-top:1px dotted var(--linea);margin-top:12px;padding-top:11px}
.etq{background:#F3EAEE;border:1px solid #E2CDD6;border-radius:999px;padding:4px 9px;
  font:400 12px "IBM Plex Sans",sans-serif;color:var(--guinda);white-space:nowrap}
.etq button{background:none;border:none;padding:0 0 0 6px;cursor:pointer;
  color:var(--guinda-claro);font-size:13px;line-height:1}
.etq button:hover{color:var(--alto)}
.etq button:disabled{opacity:.4;cursor:default}
.etq-mas{background:none;border:1px dashed var(--linea);border-radius:999px;padding:4px 11px;
  font:400 12px "IBM Plex Sans",sans-serif;color:var(--tenue);cursor:pointer}
.etq-mas:hover{border-color:var(--guinda-claro);color:var(--guinda)}

/* Dialogo de eleccion. */
.etq-cuantas{font:500 12px "IBM Plex Mono",monospace;color:var(--guinda);
  margin:0 0 12px}
.etq-lista{display:flex;flex-wrap:wrap;gap:6px;max-height:240px;overflow-y:auto;
  padding:2px}
.etq-op{background:var(--papel);border:1px solid var(--linea);border-radius:999px;
  padding:6px 12px;font:400 13px "IBM Plex Sans",sans-serif;color:var(--tinta);
  cursor:pointer;text-align:left}
.etq-op:hover{border-color:var(--guinda-claro);color:var(--guinda)}
.etq-op[aria-pressed="true"]{background:var(--guinda);border-color:var(--guinda);color:#fff}
.etq-op.espera{background:#FDF3E7;border-color:#F0D9B8;color:#8A5A18;cursor:default}
.etq-op .marca{font:500 9.5px "IBM Plex Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;margin-left:7px;opacity:.8}
.etq-alta{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea)}
.etq-alta label{display:block;font:500 10.5px "IBM Plex Mono",monospace;letter-spacing:.05em;
  text-transform:uppercase;color:var(--tenue);margin-bottom:4px}
.etq-alta-fila{display:flex;gap:8px}
.etq-alta-fila input{flex:1;min-width:0;border:1px solid var(--linea);border-radius:2px;
  padding:9px 10px;font:400 13.5px "IBM Plex Sans",sans-serif;color:var(--tinta)}
.etq-alta-fila input:focus{outline:2px solid var(--guinda-claro);outline-offset:1px;
  border-color:transparent}
/* El recado va a la izquierda; los botones se quedan pegados a la derecha. */
#recadoEtq{margin-right:auto;text-align:left}


/* --- Correccion del texto de la IA --- */
/* Cerrado se lee de corrido; el lapiz abre el textarea. Con seis parrafos
   siempre abiertos la tarjeta seria ilegible. */
.parrafo-campo .etiqueta{display:flex;align-items:center;gap:6px}
.lapiz{background:none;border:none;padding:0 2px;cursor:pointer;color:var(--neutro);
  font-size:13px;line-height:1}
.lapiz:hover{color:var(--guinda)}
.lapiz[aria-pressed="true"]{color:var(--guinda)}
.parrafo-texto{margin:3px 0 0;font:400 13.5px/1.55 "IBM Plex Sans",sans-serif;
  color:var(--tinta);white-space:pre-wrap}
.parrafo-texto.sin-texto{color:var(--neutro);font-style:italic}
textarea.campo.parrafo{width:100%;margin-top:3px;resize:vertical;min-height:96px;
  font:400 13.5px/1.55 "IBM Plex Sans",sans-serif}


/* --- Guia --- */
.ayuda-btn{background:none;border:1px solid var(--linea);border-radius:999px;
  width:24px;height:24px;padding:0;cursor:pointer;color:var(--tenue);
  font:600 13px "Archivo",sans-serif;line-height:1;flex:0 0 auto}
.ayuda-btn:hover{border-color:var(--guinda);color:var(--guinda)}
.guia h3{font:600 15px "Archivo",sans-serif;margin:22px 0 6px;color:var(--tinta)}
.guia h3:first-of-type{margin-top:4px}
.guia p{font-size:13.5px;line-height:1.6;margin:0 0 8px;color:var(--tinta)}
.guia .mini-tabla{font-size:13px;margin:0 0 10px}
.guia .mini-tabla div{padding:5px 0;border-bottom:1px dotted var(--linea);
  display:flex;gap:10px}
.guia .mini-tabla div:last-child{border-bottom:none}
.guia .mini-tabla b{flex:0 0 118px;font-weight:600}


/* --- Botones --- */
.boton{background:var(--guinda);color:#fff;border:none;border-radius:2px;padding:11px 22px;
  font:600 14px "IBM Plex Sans",sans-serif;cursor:pointer}
.boton:hover{background:#66102F}
.boton:disabled{opacity:.55;cursor:default}
.boton.tenue{background:none;color:var(--tenue);border:1px solid var(--linea)}
.boton.tenue:hover{background:var(--fondo);color:var(--tinta)}

/* --- Dialogos, modales y tickets --- */
dialog{border:none;border-radius:3px;padding:0;max-width:520px;width:calc(100% - 32px);
  background:var(--papel);color:var(--tinta)}
dialog::backdrop{background:rgba(32,26,30,.42)}
.modal{padding:22px}
.modal h2{font:600 18px "Archivo",sans-serif;margin:0 0 4px}
.modal p.ayuda{font-size:13px;color:var(--tenue);margin:0 0 16px}
.modal textarea{width:100%;min-height:110px;resize:vertical;border:1px solid var(--linea);
  border-radius:2px;padding:10px;font:400 14px/1.5 "IBM Plex Sans",sans-serif;
  color:var(--tinta)}
.modal textarea:focus{outline:2px solid var(--guinda-claro);outline-offset:1px}
.pie-modal{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.historial{margin-top:20px;padding-top:16px;border-top:1px solid var(--linea)}
.historial h3{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 10px}
.ticket{font-size:13px;padding:9px 0;border-bottom:1px dotted var(--linea)}
.ticket:last-child{border-bottom:none}
.ticket .meta{font:400 11px "IBM Plex Mono",monospace;color:var(--tenue)}
.ticket .resp{margin-top:5px;padding-left:10px;border-left:2px solid var(--guinda-claro);
  color:var(--tenue)}

/* --- Estados vacios y avisos --- */
.vacio{text-align:center;padding:52px 20px;color:var(--tenue)}
.vacio strong{display:block;font:600 16px "Archivo",sans-serif;color:var(--tinta);
  margin-bottom:5px}
.aviso{background:#FDF3E7;border:1px solid #F0D9B8;border-radius:2px;padding:11px 13px;
  font-size:13px;margin-bottom:12px}

/* Selector de tipo de ticket. Antes iba como style= dentro del HTML;
   se movio aqui para que index.html quede solo con marcado. */
#tipoTicket{margin-bottom:12px}

/* --- Firma y version (pie de la pantalla de acceso) --- */
/* Apilado y centrado: el rotulo arriba, el logo como protagonista,
   y debajo la version y el aviso legal. */
.pie-marca{display:flex;flex-direction:column;align-items:center;
  margin-top:52px;text-align:center}
.pie-rotulo{font:500 10px "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--neutro)}
.pie-marca a{display:block;margin-top:13px;opacity:.88;transition:opacity .2s}
.pie-marca a:hover{opacity:1}
.pie-marca a:focus-visible{outline:2px solid var(--guinda-claro);
  outline-offset:4px;border-radius:2px;opacity:1}
/* El PNG viene a 2048x531: se muestra a 135 de ancho y el alto lo calcula
   el navegador, asi la proporcion es exacta y se ve nitido en retina. */
.pie-marca img{width:135px;height:auto;display:block}
.pie-version{margin-top:16px;font:500 13px "IBM Plex Mono",monospace;
  color:var(--tenue)}
.pie-legal{margin-top:3px;font:400 12.5px "IBM Plex Sans",sans-serif;
  color:var(--neutro)}

/* --- Pantallas anchas --- */
@media (min-width:640px){
  .acciones{grid-template-columns:1fr 1fr;align-items:end}
  /* Los grupos de botones y los parrafos ocupan el ancho completo: en media
     columna, un parrafo de la IA se lee en tiras de cuatro palabras. */
  .acciones > div:has(.grupo),
  .acciones > .parrafo-campo{grid-column:1 / -1}
}