/* Identidad de Pampa Software (logo oficial): violeta #755da4 y verde #10be41, tipografía Raleway.
   El violeta tiene buen contraste con texto blanco y se usa directo en botones, enlaces y foco. El
   verde es muy claro para texto (2,5:1): queda solo como decoración (franja, isotipo); el éxito en
   texto usa una versión oscurecida (--exito). Sin degradados: fondos neutros y radios chicos. */
:root {
  --marca-violeta: #755da4;
  --marca-verde: #10be41;
  --fondo: #f7f6fa;
  --superficie: #ffffff;
  --texto: #29263a;
  --texto-suave: #625d70;
  --borde: #e2dfea;
  --borde-fuerte: #cfcadb;
  --neutro-suave: #efedf3;
  --primario: #755da4;
  --primario-hover: #5f4a8a;
  --primario-suave: #efebf6;
  --exito: #127a2e;
  --exito-suave: #e6f7eb;
  --peligro: #b3412e;
  --peligro-suave: #fbe9e5;
  --atencion: #8a5a00;
  --atencion-suave: #fdf1d8;
  --radio: 10px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(42, 30, 60, 0.05), 0 1px 4px rgba(42, 30, 60, 0.04);
  --sombra-elevada: 0 2px 4px rgba(42, 30, 60, 0.06), 0 6px 16px rgba(42, 30, 60, 0.06);
  --alto-franja: 4px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--alto-franja);
  background: var(--fondo);
  color: var(--texto);
  font-family: "Raleway", system-ui, sans-serif;
  /* Raleway trae números de estilo antiguo: en un panel de números se leen mejor alineados. */
  font-variant-numeric: lining-nums;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

/* Franja con los dos colores del logo, en la proporción del isotipo (1 cuadrado verde, 3 violetas).
   Va en el body para que se vea también sin sesión (ingreso, baja, error). Cortes duros, sin degradé. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--alto-franja);
  z-index: 20;
  background: linear-gradient(90deg, var(--marca-verde) 0 25%, var(--marca-violeta) 25% 100%);
}

a { color: var(--primario); }
a:hover { color: var(--primario-hover); }

/* --- Foco visible ----------------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
.boton:focus-visible, .boton-link:focus-visible, .nav a:focus-visible, .pestanas a:focus-visible,
.lista-archivos a:focus-visible, .item-borrador:focus-visible, .tarjeta-link:focus-visible, .marca:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}
.item-borrador:focus-visible, .tarjeta-link:focus-visible { border-color: var(--primario); }

/* Enlace para saltar el encabezado con teclado: aparece solo al recibir foco. */
.saltar {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 30;
  padding: 8px 14px;
  border-radius: var(--radio-chico);
  background: var(--primario);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: calc(var(--alto-franja) + 8px); color: #fff; }

/* --- Encabezado ------------------------------------------------------- */
.encabezado {
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: var(--alto-franja);
  z-index: 10;
}
.encabezado-interior {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; border-radius: 4px; }
.marca img { height: 34px; width: auto; display: block; }
.marca span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  border-left: 1px solid var(--borde);
  padding-left: 10px;
}
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a {
  padding: 6px 12px;
  border-radius: var(--radio-chico);
  text-decoration: none;
  color: var(--texto-suave);
  font-weight: 500;
}
.nav a:hover { background: var(--neutro-suave); color: var(--texto); }
.nav a.activo { background: var(--primario-suave); color: var(--primario); font-weight: 600; }
/* Cuántos borradores o respuestas esperan a alguien. */
.insignia {
  display: inline-block;
  min-width: 20px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--primario);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.salir { display: flex; align-items: center; gap: 8px; color: var(--texto-suave); font-size: 13px; }
.salir a { color: var(--texto-suave); }

main:focus { outline: none; }
main { flex: 1 0 auto; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }

/* --- Tipografía ------------------------------------------------------- */
h1, h2, h3 { color: var(--texto); line-height: 1.25; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: 0.01em; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 600; letter-spacing: 0.01em; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 600; letter-spacing: 0.01em; margin: 0 0 8px; }
.subtitulo { color: var(--texto-suave); margin: 0 0 20px; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.88em;
  background: var(--neutro-suave);
  border-radius: 4px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

/* --- Cabecera de página ----------------------------------------------- */
/* Fila con el bloque de título a la izquierda y las acciones a la derecha; en celular se apilan. */
.cabecera-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.cabecera-pagina > :first-child { min-width: 0; }
.cabecera-pagina .subtitulo { margin-bottom: 0; }
.cabecera-pagina .acciones { margin-top: 0; }
.volver {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-suave);
  text-decoration: none;
}
.volver:hover { color: var(--primario); text-decoration: underline; }

/* --- Tarjetas y tablas ------------------------------------------------ */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 16px;
}
.cabecera-tarjeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cabecera-tarjeta h2, .cabecera-tarjeta h3 { margin: 0; }
/* Tarjeta entera clickeable (un <a class="tarjeta tarjeta-link">). */
.tarjeta-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.tarjeta-link:hover { color: inherit; border-color: var(--primario); box-shadow: var(--sombra-elevada); }
.tabla-contenedor { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
th.columna-casilla, td.columna-casilla { width: 1%; padding-right: 0; }
.barra-seleccion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 8px 0; border-top: 1px solid var(--borde); }
.barra-seleccion select { width: auto; }

.lista-borradores { display: grid; gap: 10px; }
.item-borrador {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.item-borrador:hover { color: inherit; border-color: var(--primario); box-shadow: var(--sombra-elevada); }
.item-borrador .asunto { font-weight: 600; }
.item-borrador .meta { color: var(--texto-suave); font-size: 13px; }
.item-borrador .lado { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* --- Etiquetas -------------------------------------------------------- */
/* La clase usa el valor crudo del enum (etiqueta-no_interesado); el texto pasa por el filtro rotulo.
   Base gris neutra: cualquier valor sin color propio se ve igual de prolijo. */
.etiqueta {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.5;
  background: var(--neutro-suave);
  color: var(--texto-suave);
  white-space: nowrap;
  vertical-align: middle;
}
.etiqueta-alta, .etiqueta-interesado, .etiqueta-calificada, .etiqueta-enviado, .etiqueta-aprobado, .etiqueta-ok {
  background: var(--exito-suave); color: var(--exito);
}
.etiqueta-derivada, .etiqueta-nueva, .etiqueta-contactada, .etiqueta-investigada { background: var(--primario-suave); color: var(--primario); }
.etiqueta-media, .etiqueta-pregunta, .etiqueta-respondio, .etiqueta-revisar, .etiqueta-borrador {
  background: var(--atencion-suave); color: var(--atencion);
}
.etiqueta-baja, .etiqueta-no_interesado, .etiqueta-descartada, .etiqueta-descartado, .etiqueta-error {
  background: var(--peligro-suave); color: var(--peligro);
}
.etiqueta-fuera_oficina, .etiqueta-otro { background: var(--neutro-suave); color: var(--texto-suave); }
/* Confianza del modelo: «baja» es un aviso (ámbar), no el rojo de una empresa dada de baja. */
.etiqueta-confianza-alta { background: var(--exito-suave); color: var(--exito); }
.etiqueta-confianza-media { background: var(--neutro-suave); color: var(--texto-suave); }
.etiqueta-confianza-baja { background: var(--atencion-suave); color: var(--atencion); }

/* --- Detalle de borrador ---------------------------------------------- */
.dos-columnas { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; align-items: start; }
.dos-columnas.columnas-parejas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dato { margin-bottom: 12px; }
.dato-titulo { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--texto-suave); font-weight: 600; }
.senales { margin: 4px 0 0; padding-left: 18px; }
.firma {
  white-space: pre-wrap;
  font-size: 13px;
  color: var(--texto-suave);
  background: var(--fondo);
  border-radius: var(--radio-chico);
  padding: 10px 12px;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

/* --- Formularios ------------------------------------------------------ */
label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
input[type="search"], select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--superficie);
  padding: 9px 11px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
}
textarea { resize: vertical; min-height: 120px; }
textarea.cuerpo { min-height: 260px; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: -1px; border-color: var(--primario); }
.campo { margin-bottom: 14px; }
.rubros-busqueda {
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  padding: 8px 12px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 4px 12px;
}
.rubros-busqueda legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
.opcion { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; margin: 0; cursor: pointer; }
.opcion input { accent-color: var(--primario); width: 16px; height: 16px; }
.grilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros select { width: auto; min-width: 160px; }
.filtros .buscar { width: auto; flex: 1 1 260px; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 16px;
  border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.12s, border-color 0.12s;
}
.boton:hover { border-color: var(--texto-suave); color: var(--texto); }
.boton-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.boton-primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: #fff; }
.boton-peligro { color: var(--peligro); border-color: var(--peligro); }
.boton-peligro:hover { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro); }
.boton-chico { padding: 5px 10px; font-size: 13px; }
.boton-bloque { width: 100%; }
.boton-link { background: none; border: none; color: var(--texto-suave); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; border-radius: 2px; }
.boton-link:hover { color: var(--primario); }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acciones form { margin: 0; }
.acciones > div:empty { display: none; }
.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
/* Respuestas ya atendidas: siguen a mano, pero no compiten con las pendientes. */
.tarjeta.atendida { opacity: 0.72; }
.tarjeta.atendida:hover, .tarjeta.atendida:focus-within { opacity: 1; }

details summary { cursor: pointer; font-weight: 600; border-radius: 4px; }
details summary:hover { color: var(--primario); }
details.accion { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 12px; }
details.accion form { margin-top: 10px; }

/* --- Avisos ----------------------------------------------------------- */
.aviso { padding: 10px 12px; border-radius: var(--radio-chico); margin: 0 0 10px; font-size: 14px; border-left: 3px solid transparent; }
.aviso-error { background: var(--peligro-suave); color: var(--peligro); border-left-color: var(--peligro); }
.aviso-tareas { margin-bottom: 18px; }
tr.inactivo td { color: var(--texto-suave); }
.aviso-tareas a { color: inherit; font-weight: 600; white-space: nowrap; }
.aviso-atencion { background: var(--atencion-suave); color: var(--atencion); border-left-color: var(--atencion); }
.aviso-ok { background: var(--exito-suave); color: var(--exito); border-left-color: var(--exito); }
.aviso-neutro { background: var(--neutro-suave); color: var(--texto); border-left-color: var(--texto-suave); }
.contador { font-size: 13px; color: var(--texto-suave); }
.contador.excedido { color: var(--peligro); font-weight: 600; }
/* Botones del borrador: quedan pegados abajo de la pantalla mientras se lee el mail
   (sticky dentro del formulario: al terminar el formulario se quedan en su lugar). */
.barra-acciones {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 12px -10px rgba(42, 30, 60, 0.25);
}
.barra-acciones .acciones { margin-top: 0; }
.barra-estado { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
.confirmar-aprobacion { margin: 12px 0 4px; padding: 12px; border: 1px solid var(--atencion); border-radius: var(--radio-chico); }
.confirmar-aprobacion p { margin: 0 0 10px; font-size: 14px; }
/* Estado vacío: el isotipo tenue arriba lo pone el CSS, la plantilla solo escribe el texto. */
.vacio { text-align: center; color: var(--texto-suave); padding: 40px 16px; }
.vacio::before {
  content: "";
  display: block;
  width: 44px;
  height: 40px;
  margin: 0 auto 12px;
  background: url("/static/favicon.svg") center / contain no-repeat;
  opacity: 0.3;
}
/* Dentro de un dato o una celda el vacío es una línea más, sin isotipo. */
.dato .vacio, td.vacio { padding: 4px 0; text-align: left; }
.dato .vacio::before, td.vacio::before { display: none; }
td.vacio { padding: 16px 8px; text-align: center; }
td.quebrar { overflow-wrap: anywhere; }
td.sin-cortes { white-space: nowrap; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }

/* --- Utilidades ------------------------------------------------------- */
.pre-linea { white-space: pre-line; }
.sin-margen { margin: 0; }
.mt { margin-top: 16px; }

/* --- Tablero ---------------------------------------------------------- */
.correr-ahora { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 20px; }
.correr-ahora h3 { font-size: 15px; margin: 0 0 4px; }
.correr-ahora .contador { margin: 0 0 12px; }
/* Los botones quedan alineados abajo aunque las descripciones tengan largos distintos. */
.correr-ahora .tarjeta { display: flex; flex-direction: column; }
.correr-ahora .tarjeta > button, .correr-ahora .acciones-columna { margin-top: auto; }
.acciones-columna { flex-direction: column; margin-top: 0; }
.acciones-columna .boton { width: 100%; }
.boton:disabled { opacity: 0.6; cursor: default; }
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.numero .valor { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; font-variant-numeric: tabular-nums; }
/* Estos rótulos llevan aclaraciones largas: en mayúsculas pesarían demasiado. */
.numero .rotulo { color: var(--texto-suave); font-size: 13px; font-weight: 500; }

/* --- Configuración ---------------------------------------------------- */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; overflow-x: auto; overflow-y: hidden; }
.pestanas a {
  padding: 8px 14px;
  text-decoration: none;
  color: var(--texto-suave);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.pestanas a:focus-visible { outline-offset: -2px; }
.pestanas a.activo, .pestanas a:hover { color: var(--primario); border-bottom-color: var(--marca-violeta); }
.config-archivos { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
.lista-archivos { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.lista-archivos a { padding: 7px 10px; border-radius: var(--radio-chico); text-decoration: none; color: var(--texto); font-size: 14px; }
.lista-archivos a.activo, .lista-archivos a:hover { background: var(--primario-suave); color: var(--primario); font-weight: 600; }
textarea.editor {
  min-height: 60vh;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.grupo-diagnostico { font-size: 14px; margin: 16px 0 6px; }
.chequeos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chequeos li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* --- Historial -------------------------------------------------------- */
.historial { display: grid; gap: 10px; }
.cuerpo-mail { white-space: pre-wrap; font-size: 14px; margin: 8px 0 0; overflow-wrap: anywhere; }

/* --- Ingreso y páginas sueltas ---------------------------------------- */
.centrado { max-width: 420px; margin: 6vh auto; }
.logo-grande { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto 24px; }
.centrado h1, .centrado > .subtitulo { text-align: center; }
/* Página interna de formulario corto (cuenta): layout normal, ancho acotado. */
.contenido-angosto { max-width: 480px; }
/* Tarjeta de mensaje (baja, error): logo, título y texto centrados. */
.tarjeta-mensaje { text-align: center; padding: 32px 24px; }
.tarjeta-mensaje .logo-grande { max-width: 200px; }
.tarjeta-mensaje p { margin: 0 0 12px; }
.tarjeta-mensaje .acciones { justify-content: center; margin-top: 20px; }
.codigo-error {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primario);
}
.contacto { font-size: 14px; color: var(--texto-suave); border-top: 1px solid var(--borde); padding-top: 16px; }
.tarjeta-mensaje .contacto { margin: 20px 0 0; }
.ingreso .tarjeta { padding: 24px; }
.ingreso .boton-bloque { margin-top: 6px; }
.lema {
  margin: 20px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/* Isotipo grande y muy tenue de fondo en la pantalla de ingreso. Va en un pseudo-elemento fijo
   para poder bajarle la opacidad sin afectar al formulario. */
.pagina-ingreso::after {
  content: "";
  position: fixed;
  right: -90px;
  bottom: -70px;
  width: 460px;
  height: 424px;
  z-index: -1;
  pointer-events: none;
  background: url("/static/favicon.svg") center / contain no-repeat;
  opacity: 0.05;
}

/* --- Pie -------------------------------------------------------------- */
.pie { border-top: 1px solid var(--borde); background: var(--superficie); }
.pie-interior {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 6px 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--texto-suave);
}
.pie-interior img { width: 20px; height: auto; display: block; }
.pie-interior strong { font-weight: 600; color: var(--texto); }
.pie-interior a { margin-left: auto; color: var(--texto-suave); }
.pie-interior a:hover { color: var(--primario); }

/* La navegación pasa a su propio renglón antes de partirse en dos (con cinco secciones no entra bajo ~960px). */
@media (max-width: 960px) {
  .encabezado-interior { justify-content: space-between; gap: 8px; }
  .nav { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .nav a { white-space: nowrap; }
}

/* Lo que se muestra solo en pantallas angostas (ver el media query de abajo). */
.solo-celular { display: none; }

@media (max-width: 760px) {
  h1 { font-size: 22px; }
  main { padding-top: 18px; }
  /* En dos renglones si hace falta: deslizando de costado, "Configuración" quedaba fuera de la pantalla. */
  .nav { flex-wrap: wrap; overflow-x: visible; }
  .nav a { padding: 6px 8px; font-size: 14px; }
  .dos-columnas, .dos-columnas.columnas-parejas { grid-template-columns: 1fr; }
  .config-archivos { grid-template-columns: 1fr; }
  .lista-archivos { flex-direction: row; overflow-x: auto; }
  .lista-archivos a { white-space: nowrap; }
  .item-borrador { grid-template-columns: 1fr; }
  .item-borrador .lado { flex-direction: row; justify-content: flex-start; align-items: center; }
  .acciones .boton { flex: 1; }
  .cabecera-pagina { flex-direction: column; align-items: stretch; }
  .centrado { margin: 4vh auto; }
  .pie-interior a { margin-left: 0; }
  .pagina-ingreso::after { width: 280px; height: 258px; right: -70px; bottom: -50px; }
  .ocultar-celular { display: none; }
  .solo-celular { display: block; }
}