:root {
  --fondo: #f6f7f4;
  --panel: #ffffff;
  --panel-2: #fafbf8;
  --texto: #1e2420;
  --texto-2: #545c56;
  --texto-3: #848b85;
  --borde: #e2e6df;
  --borde-fuerte: #cdd3c9;
  --acento: #4f7f1a;
  --acento-hover: #436d15;
  --acento-texto: #ffffff;
  --acento-suave: #eef5e3;
  --lima: #8cc63f;
  --resaltado: #e1f0c8;
  --peligro: #b42318;
  --peligro-suave: #fdecea;
  --info-suave: #eef1f6;
  --sombra: 0 1px 2px rgba(20, 30, 20, 0.05), 0 6px 20px rgba(20, 30, 20, 0.06);
  --radio: 10px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121512;
    --panel: #1b1f1b;
    --panel-2: #20251f;
    --texto: #e6ebe5;
    --texto-2: #b1b9b2;
    --texto-3: #848c85;
    --borde: #2c332c;
    --borde-fuerte: #3b443b;
    --acento: #8cc63f;
    --acento-hover: #9fd456;
    --acento-texto: #132100;
    --acento-suave: #22301a;
    --resaltado: #3a5220;
    --peligro: #f0857a;
    --peligro-suave: #3a1d1a;
    --info-suave: #232a33;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--fondo);
  color: var(--texto);
  font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}

button, input, select, textarea { font: inherit; color: inherit; }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
}

.marca { display: flex; align-items: center; gap: 14px; min-width: 0; }

.marca-logo {
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 4px 8px;
  border: 1px solid var(--borde);
}

.marca-logo img { height: 34px; display: block; }

.marca-titulo { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }

.marca-sub { color: var(--texto-3); font-size: 12.5px; }

.pestanas {
  display: flex;
  gap: 4px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 3px;
}

.pestana {
  border: 0;
  background: transparent;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--texto-2);
  font-weight: 550;
}

.pestana:hover { color: var(--texto); }

.pestana.activa { background: var(--panel); color: var(--texto); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

/* Presupuestos generados desde otro dispositivo que aún no se han visto */
.contador {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--acento);
  color: var(--acento-texto);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
}

main { flex: 1; overflow: auto; }

.vista { max-width: 1400px; margin: 0 auto; padding: 20px 28px 40px; }

/* ---------------------------------------------------------------- barra */

.barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.buscador {
  flex: 1 1 340px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 0 12px;
  height: 40px;
}

.buscador:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

.buscador svg { width: 18px; height: 18px; fill: none; stroke: var(--texto-3); stroke-width: 2; stroke-linecap: round; flex: none; }

.buscador input { flex: 1; border: 0; outline: 0; background: transparent; height: 100%; min-width: 0; }

select {
  height: 40px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--panel);
  padding: 0 10px;
  max-width: 260px;
}

.barra-acciones { display: flex; gap: 8px; margin-left: auto; }

/* ---------------------------------------------------------------- botones */

.boton {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.12s, border-color 0.12s;
}

.boton:disabled { opacity: 0.6; cursor: default; }

.boton.primario { background: var(--acento); color: var(--acento-texto); }

.boton.primario:hover:not(:disabled) { background: var(--acento-hover); }

.boton.secundario { background: var(--panel); border-color: var(--borde-fuerte); }

.boton.secundario:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }

.boton.fantasma { background: transparent; color: var(--texto-2); }

.boton.fantasma:hover:not(:disabled) { background: var(--fondo); color: var(--texto); }

.boton.pequeno { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }

.boton.suave { background: var(--acento-suave); color: var(--acento); }

.boton.suave:hover { border-color: var(--acento); }

.boton.peligro:hover:not(:disabled) { background: var(--peligro-suave); color: var(--peligro); }

.boton.primario.peligro { background: var(--peligro); color: #fff; }

.boton.primario.peligro:hover:not(:disabled) { background: var(--peligro); filter: brightness(0.92); }

.enlace { border: 0; background: none; color: var(--acento); cursor: pointer; padding: 0 4px; font-weight: 600; text-decoration: underline; }

/* ---------------------------------------------------------------- progreso y estado */

.progreso {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px 14px;
}

.progreso-cabecera { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }

.progreso-cabecera span { color: var(--texto-2); font-variant-numeric: tabular-nums; }

.progreso-barra { height: 6px; background: var(--fondo); border-radius: 99px; margin: 8px 0 6px; overflow: hidden; }

.progreso-barra div { height: 100%; width: 0; background: var(--acento); border-radius: 99px; transition: width 0.25s; }

.progreso.indeterminado .progreso-barra div { width: 30% !important; animation: vaiven 1.2s ease-in-out infinite; }

@keyframes vaiven { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

.progreso-detalle { color: var(--texto-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }

.estado-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin: 16px 2px 10px;
  color: var(--texto-2);
  font-size: 13px;
}

.estado-linea .aviso-linea { color: var(--peligro); }

.estado-linea .info-linea { color: var(--texto-3); }

/* ---------------------------------------------------------------- lista */

.lista {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
  overflow: hidden;
}

.lista:empty { display: none; }

.fila {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 11px 16px;
  border-top: 1px solid var(--borde);
}

.fila:first-child { border-top: 0; }

.fila:hover { background: var(--panel-2); }

.tipo {
  width: 42px;
  height: 46px;
  border-radius: 7px;
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: linear-gradient(135deg, transparent 0 9px, rgba(255, 255, 255, 0.22) 9px 10px, transparent 10px), #2f6fb5;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.tipo-pdf { background-color: #c0392b; }

.tipo-ods { background-color: #1d7a46; }

.fila-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fila-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--texto-3); font-size: 12.5px; margin-top: 2px; align-items: center; }

.fila-meta .carpeta { color: var(--texto-2); }

.chip { border-radius: 99px; padding: 0 8px; font-size: 11.5px; font-weight: 600; line-height: 19px; }

.chip.palabras { background: var(--info-suave); color: var(--texto-2); }

.chip.significado { background: var(--acento-suave); color: var(--acento); }

.chip.nuevo { background: var(--acento); color: var(--acento-texto); }

.chip.en-historico { background: var(--info-suave); color: var(--texto-2); }

.fila-fragmento {
  margin-top: 6px;
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

mark { background: var(--resaltado); color: inherit; border-radius: 3px; padding: 0 2px; }

.fila-acciones { display: flex; gap: 4px; opacity: 0.55; transition: opacity 0.12s; }

.fila:hover .fila-acciones, .fila:focus-within .fila-acciones { opacity: 1; }

.vacio { text-align: center; padding: 56px 20px; color: var(--texto-2); }

.vacio svg { width: 56px; height: 56px; fill: none; stroke: var(--lima); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.vacio h2 { color: var(--texto); font-size: 18px; margin: 10px 0 6px; }

.vacio p { margin: 0 auto 18px; max-width: 460px; }

.vacio .fila-botones { justify-content: center; }

.mas { text-align: center; padding: 12px; color: var(--texto-3); font-size: 13px; border-top: 1px solid var(--borde); }

/* ---------------------------------------------------------------- ajustes */

/* En mosaico: dos columnas que se rellenan solas, sin huecos bajo las tarjetas cortas */
#vista-ajustes { max-width: 1180px; }

.tarjetas { columns: 2 420px; column-gap: 16px; }

.tarjetas > .tarjeta { break-inside: avoid; margin-bottom: 16px; }

.tarjetas > .tarjeta.ancha { column-span: all; }

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: var(--sombra);
}

.tarjeta.tenue { box-shadow: none; background: transparent; border-style: dashed; }

.tarjeta h2 { font-size: 15.5px; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }

.tarjeta h3 { font-size: 14px; margin: 20px 0 4px; }

.ayuda { color: var(--texto-2); font-size: 13px; margin: 0 0 12px; }

.ruta {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  word-break: break-all;
}

.dato { font-weight: 600; margin-bottom: 12px; }

.fila-botones { display: flex; flex-wrap: wrap; gap: 8px; }

.opciones { display: grid; gap: 8px; margin-bottom: 12px; }

.opcion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 10px 12px;
  cursor: pointer;
}

.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }

.opcion input { margin-top: 3px; accent-color: var(--acento); }

.opcion strong { display: block; }

.opcion small { color: var(--texto-2); font-size: 12.5px; }

.estado-busqueda { font-size: 13px; color: var(--texto-2); }

.estado-busqueda .error { color: var(--peligro); }

.fila-clave { display: flex; gap: 8px; }

.fila-clave input {
  flex: 1;
  height: 40px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--panel);
  padding: 0 12px;
  min-width: 0;
}

.fila-clave input:focus { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

.clave-guardada { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13.5px; }

.punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.punto.ok { background: var(--lima); }

.etiqueta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--acento); background: var(--acento-suave); border-radius: 99px; padding: 2px 8px; }

.version { text-align: center; color: var(--texto-3); font-size: 12px; margin-top: 24px; }

/* ---------------------------------------------------------------- soltar archivos */

.soltar {
  position: fixed;
  inset: 0;
  background: rgba(79, 127, 26, 0.12);
  backdrop-filter: blur(2px);
  display: grid;
  place-items: center;
  z-index: 20;
  pointer-events: none;
}

.soltar-caja {
  display: grid;
  justify-items: center;
  gap: 6px;
  background: var(--panel);
  border: 2px dashed var(--acento);
  border-radius: 16px;
  padding: 36px 56px;
  box-shadow: var(--sombra);
}

.soltar-caja svg { width: 40px; height: 40px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.soltar-caja strong { font-size: 17px; }

.soltar-caja span { color: var(--texto-2); }

/* ---------------------------------------------------------------- diálogos */

.dialogo {
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 0;
  width: min(520px, calc(100vw - 48px));
  background: var(--panel);
  color: var(--texto);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.dialogo.ancho { width: min(860px, calc(100vw - 48px)); }

.dialogo::backdrop { background: rgba(10, 15, 10, 0.45); }

.dialogo-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 10px; }

.dialogo-cabecera h2 { font-size: 16px; margin: 0; }

.dialogo-sub { color: var(--texto-3); font-size: 12.5px; margin-top: 2px; }

.dialogo-cuerpo { margin: 0; padding: 0 20px 6px; color: var(--texto-2); }

.dialogo-pie { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 20px 18px; }

.dialogo-pie .ayuda { margin: 0 auto 0 0; }

.cerrar { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--texto-3); padding: 0 4px; }

.cerrar:hover { color: var(--texto); }

.texto-documento {
  margin: 0 20px;
  padding: 14px 16px;
  max-height: 60vh;
  overflow: auto;
  white-space: pre-wrap;
  font: 13px/1.55 "Segoe UI", system-ui, sans-serif;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 10px;
}

/* ---------------------------------------------------------------- avisos */

.avisos {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: grid;
  gap: 8px;
  z-index: 30;
  width: min(380px, calc(100vw - 40px));
}

.aviso {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--texto-3);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: var(--sombra);
  cursor: pointer;
  animation: entrar 0.18s ease-out;
  transition: opacity 0.4s, transform 0.4s;
}

.aviso.ok { border-left-color: var(--lima); }

.aviso.error { border-left-color: var(--peligro); }

.aviso ul { margin: 6px 0 0; padding-left: 18px; color: var(--texto-2); font-size: 12.5px; }

.aviso.saliendo { opacity: 0; transform: translateY(6px); }

@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- asistente */

.vista-chat { display: flex; flex-direction: column; height: 100%; padding-bottom: 14px; }

/* El chat ocupa todo el ancho de la ventana para que su barra de desplazamiento quede en el
   borde y no en medio de la pantalla; lo de dentro va centrado, hasta --chat-ancho */
.vista.vista-chat { --chat-ancho: 1200px; --chat-margen: 28px; max-width: none; padding-left: 0; padding-right: 0; }

.vista-chat > .chat-barra,
.vista-chat > .chat-compositor { width: min(var(--chat-ancho), calc(100% - 2 * var(--chat-margen))); margin-inline: auto; }

.chat-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }

.chat-modelo {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--borde);
  background: var(--panel);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  color: var(--texto-2);
  font-size: 13px;
}

.chat-modelo:hover { border-color: var(--acento); color: var(--texto); }

.punto.error { background: var(--peligro); }

.chat-mensajes {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 16px;
  padding-inline: max(var(--chat-margen), calc((100% - var(--chat-ancho)) / 2));
  scrollbar-width: thin;
  scrollbar-color: var(--borde-fuerte) transparent;
}

.msg { max-width: 82%; }

.msg-usuario { align-self: flex-end; }

.msg-usuario .burbuja { background: var(--acento-suave); border-radius: 14px 14px 4px 14px; padding: 10px 14px; }

.msg-asistente { align-self: flex-start; }

.msg-asistente .burbuja {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px 14px 14px 4px;
  padding: 10px 16px;
  box-shadow: var(--sombra);
}

.burbuja p { margin: 0 0 8px; }

.burbuja p:last-child { margin-bottom: 0; }

.burbuja ul, .burbuja ol { margin: 4px 0 8px; padding-left: 20px; }

.burbuja code { font-family: Consolas, monospace; font-size: 12.5px; background: var(--fondo); padding: 1px 4px; border-radius: 4px; }

.msg-paso { align-self: flex-start; display: flex; align-items: center; gap: 8px; color: var(--texto-3); font-size: 13px; padding-left: 4px; }

.msg-paso.activo { color: var(--texto-2); }

.icono-paso { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--lima); flex: none; position: relative; }

.icono-paso::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--lima); }

.msg-paso.activo .icono-paso { border-color: var(--borde-fuerte); border-top-color: var(--acento); animation: girar 0.8s linear infinite; }

.msg-paso.activo .icono-paso::after { display: none; }

@keyframes girar { to { transform: rotate(360deg); } }

.msg-nota { align-self: flex-start; color: var(--texto-3); font-size: 13px; font-style: italic; padding-left: 4px; }

.msg-nota p { margin: 0; }

.msg-archivo {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--lima);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: var(--sombra);
}

.archivo-info { min-width: 0; flex: 1 1 220px; }

.archivo-origen { font-size: 12px; color: var(--acento); font-weight: 600; }

.archivo-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-error { align-self: stretch; max-width: 100%; background: var(--peligro-suave); color: var(--peligro); border-radius: 10px; padding: 10px 14px; }

.chip-adjunto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 2px 8px 2px 10px;
  font-size: 12.5px;
  margin: 4px 6px 4px 0;
}

.chip-adjunto button { border: 0; background: none; cursor: pointer; color: var(--texto-3); font-size: 15px; line-height: 1; padding: 0 2px; }

.chip-adjunto button:hover { color: var(--peligro); }

.msg-usuario .chip-adjunto { background: var(--panel); }

.adjuntos-enviados { margin-top: 4px; }

.bienvenida { margin: auto; max-width: 640px; text-align: center; padding: 24px; color: var(--texto-2); }

.bienvenida h2 { color: var(--texto); font-size: 20px; margin: 0 0 8px; }

.bienvenida p { margin: 0 0 16px; }

.sugerencias { display: grid; gap: 8px; margin-top: 4px; }

.sugerencia {
  text-align: left;
  border: 1px solid var(--borde);
  background: var(--panel);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13.5px;
}

.sugerencia:hover { border-color: var(--acento); }

.chat-compositor {
  background: var(--panel);
  border: 1px solid var(--borde-fuerte);
  border-radius: 14px;
  padding: 6px 10px 6px;
  box-shadow: var(--sombra);
}

.chat-compositor:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

.chat-adjuntos:empty { display: none; }

.chat-entrada { display: flex; align-items: flex-end; gap: 8px; }

.chat-entrada textarea {
  flex: 1;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  line-height: 1.45;
  padding: 9px 4px;
  max-height: 200px;
}

.chat-pie { color: var(--texto-3); font-size: 11.5px; padding: 0 6px; }

.boton.icono { width: 40px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--texto-2); }

.boton.icono:hover { background: var(--fondo); color: var(--texto); }

.boton.icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- ajustes del asistente */

.opciones.dos-columnas { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 10px; }

.campo { display: grid; gap: 6px; font-size: 13px; color: var(--texto-2); font-weight: 600; }

.campo > input {
  height: 40px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--panel);
  padding: 0 12px;
  font-weight: 400;
  color: var(--texto);
}

.campo > input:focus { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

.campo > select { max-width: none; font-weight: 400; color: var(--texto); }

.nota-campo { font-weight: 400; color: var(--texto-3); font-size: 12px; }

.fila-clave input { font-weight: 400; }

.fila-botones.separada { margin-top: 14px; align-items: center; }

.estado-busqueda .ok { color: var(--acento); }

.instrucciones { margin-top: 18px; border-top: 1px solid var(--borde); padding-top: 12px; }

.instrucciones summary { cursor: pointer; font-weight: 600; }

.instrucciones .ayuda { margin-top: 8px; }

.instrucciones textarea {
  width: 100%;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--panel);
  padding: 10px 12px;
  font: 12.5px/1.5 "Cascadia Mono", Consolas, monospace;
  margin: 0 0 10px;
  resize: vertical;
}

.claves-lista { display: grid; gap: 14px; }

.clave-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }

.clave-estado { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }

.clave-estado.tenue { color: var(--texto-3); }

/* ---------------------------------------------------------------- acceso desde el móvil (ajustes) */

a.boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.movil-estado { margin-bottom: 12px; }

/* Usuario, contraseña y «Guardar» en una fila (debajo, si no caben) */
.movil-credenciales { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }

.movil-activo { display: flex; gap: 14px; align-items: center; margin: 14px 0 4px; padding: 12px; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radio); }

.movil-datos { flex: 1 1 0; min-width: 0; }

.movil-datos .ruta { margin-bottom: 6px; background: var(--panel); }

.movil-datos .ayuda { margin-bottom: 6px; }

.movil-sesiones { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; color: var(--texto-2); }

.movil-qr { background: #fff; border-radius: 8px; padding: 5px; width: 116px; height: 116px; flex: none; }

.movil-qr svg { width: 100%; height: 100%; display: block; }

.opciones-simples { display: grid; gap: 8px; margin: 12px 0; font-size: 13.5px; }

.opciones-simples label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }

.opciones-simples input { margin-top: 3px; accent-color: var(--acento); }

/* Filas sueltas dentro de una tarjeta: texto a la izquierda y su botón a la derecha */
.ajuste-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }

.ajuste-fila strong { display: block; font-size: 13.5px; }

.ajuste-fila span { display: block; color: var(--texto-2); font-size: 13px; }

.ajuste-fila b { color: var(--texto); }

.en-linea { display: flex; gap: 6px; align-items: center; flex: none; }

.en-linea input { width: 90px; height: 32px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--panel); color: var(--texto); padding: 0 8px; font: inherit; }

/* Dictado: rojo mientras graba, apagado mientras se pasa a texto */
#chat-microfono.grabando { background: #d93838; color: #fff; animation: latido 1.2s ease-in-out infinite; }

#chat-microfono.grabando:hover { background: #c22f2f; color: #fff; }

#chat-microfono.transcribiendo { opacity: 0.5; cursor: progress; }

@keyframes latido { 50% { box-shadow: 0 0 0 6px rgba(217, 56, 56, 0.25); } }

@media (prefers-reduced-motion: reduce) { #chat-microfono.grabando { animation: none; } }

#aj-voz .estado-busqueda { margin-bottom: 10px; }

/* Correo preparado por el asistente, para revisarlo en el chat */
.msg-correo {
  align-self: stretch;
  max-width: 760px;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.correo-cabecera { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }

.correo-cabecera svg { width: 18px; height: 18px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.correo-hecho { color: var(--acento); font-weight: 600; }

.msg-correo .campo > input, .msg-correo textarea {
  width: 100%;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-weight: 400;
}

.msg-correo .campo > input { height: 36px; padding: 0 10px; }

.msg-correo textarea { padding: 8px 10px; resize: vertical; line-height: 1.45; }

.correo-adjuntos { display: flex; flex-wrap: wrap; gap: 6px; }

.tipo-mini { display: inline-block; margin-right: 6px; padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; background: #c0392b; }

.tipo-mini.tipo-odt { background: #2a6fdb; }

.msg-correo .ayuda { margin: 0; }

#aj-correo h3 { margin-top: 6px; }

#aj-correo h3 + .estado-busqueda { margin-bottom: 10px; }

/* Identificador de la app de Microsoft y «Conectar» en una fila */
.outlook-conectar { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }

.outlook-conectar .campo > input { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }

.nota-correo { margin-top: 8px; }

/* Hay una versión nueva: aviso discreto junto al nombre de la app */
.aviso-version {
  border: 1px solid var(--acento);
  background: var(--acento-suave);
  color: var(--acento);
  border-radius: 999px;
  padding: 3px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.aviso-version:hover { background: var(--acento); color: var(--acento-texto); }

/* Al modificar un presupuesto se sobrescribe: su tarjeta anterior queda apagada */
.msg-archivo.sustituido { opacity: 0.55; }

.pasos { margin: 8px 0 0; padding-left: 20px; color: var(--texto-2); }

.pasos li { margin-bottom: 4px; }

/* ---------------------------------------------------------------- en el móvil */

.movil .solo-escritorio { display: none !important; }

body:not(.internet) .solo-internet { display: none !important; }

/* ---------------------------------------------------------------- página de entrada (por internet) */

.pagina-entrada main { display: grid; place-items: center; padding: 24px 16px; }

.entrada { width: 100%; max-width: 380px; display: grid; gap: 14px; }

.entrada-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }

.entrada-error { color: var(--peligro); font-size: 13px; min-height: 18px; margin: 0; }

.entrada .boton { width: 100%; }

@media (max-width: 900px) {
  .cabecera, .vista { padding-left: 16px; padding-right: 16px; }
  .vista.vista-chat { --chat-margen: 16px; padding-left: 0; padding-right: 0; }
  .cabecera .marca-sub { display: none; }
  .barra-acciones { margin-left: 0; }
  .fila { grid-template-columns: 46px minmax(0, 1fr); }
  .fila-acciones { grid-column: 2; opacity: 1; flex-wrap: wrap; }
}

/* Después de la de 900 px para que mande en pantallas pequeñas */
@media (max-width: 700px) {
  /* Una sola fila: el logo y las pestañas, que ocupan el resto (en pantallas muy estrechas, debajo) */
  .cabecera { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .marca-logo { padding: 3px 6px; }
  .marca-logo img { height: 26px; }
  .cabecera .marca-titulo { display: none; }
  .pestanas { flex: 1 1 auto; }
  .pestana { flex: 1 1 auto; padding: 6px 8px; font-size: 13.5px; white-space: nowrap; }
  .vista { padding: 12px 12px 24px; }
  .vista-chat { padding-bottom: 8px; }
  .vista.vista-chat { --chat-margen: 12px; padding-left: 0; padding-right: 0; }
  .chat-barra { margin-bottom: 6px; }
  .chat-barra .boton { height: 34px; padding: 0 12px; }
  .msg { max-width: 92%; }
  .chat-pie { display: none; }
  .bienvenida { padding: 12px 4px; }
  .barra { gap: 8px; }
  .buscador { flex-basis: 100%; }
  .barra select { flex: 1; max-width: none; }
  .barra-acciones { width: 100%; }
  .barra-acciones .boton { flex: 1; }
  .fila { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .tipo { width: 36px; height: 40px; }
  .fila-acciones { grid-column: 1 / -1; opacity: 1; flex-wrap: wrap; }
  .fila-acciones .boton { height: 34px; }
  .avisos { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .tarjetas { columns: 1; }
  .movil-credenciales { grid-template-columns: 1fr; }
  .outlook-conectar { grid-template-columns: 1fr; }
}