/* idegest: la interfaz del panel, con la identidad de la marca
   (paleta de la familia, Urbanist, esquinas con un radio sutil). */

@font-face {
  font-family: "Urbanist";
  src: url("/fuentes/Urbanist.woff2") format("woff2-variations"),
       url("/fuentes/Urbanist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* La paleta de la familia */
  --blanco-roto: #fafaf7;
  --tinta: #111111;
  --magenta: #e6007e;          /* fondos, con texto blanco */
  --magenta-texto: #c4006b;    /* enlaces y texto pequeño sobre claro */
  --magenta-luminoso: #ff3da0; /* sobre negro */

  /* Lo que sale de ella */
  --rosa: #fce4f0;
  --gris: #f0eee9;
  --borde: #e4e2dc;
  --borde-fuerte: #8a867d;     /* 3,7:1 sobre blanco: pasa el 3:1 de WCAG para el borde de un control */
  --texto: #3d3b37;
  --suave: #67645e;
  --blanco: #ffffff;
  --mal: #b3261e;
  --bien: #1e6b34;
  --bien-punto: #2b9a4a;
  --bien-fondo: #e6f3e8;
  --rosa-suave: #fdf0f7;

  /* Esquinas sutiles, un poco de relieve y transiciones cortas (9-10-2026) */
  --radio: 6px;
  --radio-chico: 4px;
  --sombra-1: 0 1px 2px rgb(17 17 17 / 0.06), 0 1px 1px rgb(17 17 17 / 0.03);
  --sombra-2: 0 2px 4px rgb(17 17 17 / 0.05), 0 14px 30px -10px rgb(17 17 17 / 0.16);
  --paso: 150ms cubic-bezier(0.3, 0, 0.2, 1);

  --letra: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* Lo que el HTML esconde con `hidden` no lo vuelve a enseñar un display de una clase */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--blanco-roto);
  color: var(--texto);
  font: 500 1.0625rem/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  color: var(--tinta);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

a { color: var(--magenta-texto); text-underline-offset: 0.18em; }
a:hover { color: var(--tinta); }

:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 2px;
}

img { display: block; }

/* Los iconos de la interfaz (plantillas/iconos.twig): de trazo, del color del texto */
.icono {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--tinta);
  color: var(--blanco);
  font-weight: 700;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; color: var(--blanco); }

/* Botones: magenta con texto blanco; los secundarios, con borde de tinta */

.boton, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.75rem;
  border: 2px solid var(--magenta);
  border-radius: var(--radio);
  background: var(--magenta);
  color: var(--blanco);
  font: 700 1.125rem/1.2 var(--letra);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--paso), border-color var(--paso), color var(--paso), box-shadow var(--paso);
}
.boton:hover, button:hover { background: var(--magenta-texto); border-color: var(--magenta-texto); color: var(--blanco); }
.boton--ancho { width: 100%; }
.boton--secundario { border-color: var(--tinta); background: transparent; color: var(--tinta); }
.boton--secundario:hover { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.boton--peligro { border-color: var(--mal); background: var(--mal); }
.boton--peligro:hover { border-color: var(--tinta); background: var(--tinta); }
.boton--tinta { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.boton--tinta:hover { border-color: #2b2b2b; background: #2b2b2b; color: var(--blanco); }

button.secundario {
  min-height: 2.5rem;
  padding: 0.35rem 1rem;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--blanco);
  color: var(--tinta);
  font-size: 0.95rem;
}
button.secundario:hover { border-color: var(--tinta); background: var(--blanco); color: var(--tinta); }

button.enlace {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--magenta-texto);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
button.enlace:hover { background: none; color: var(--tinta); }

/* Campos */

.campo { margin: 0 0 1.4rem; }

label, .rotulo, legend {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--tinta);
  font-weight: 700;
}
.obligatorio { font-weight: 500; color: var(--suave); font-size: 0.95rem; }
.ayuda { margin: -0.15rem 0 0.5rem; color: var(--suave); font-size: 0.95rem; }

input[type="text"], input[type="email"], input[type="date"], textarea, select {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  font: 500 1.0625rem/1.4 var(--letra);
  transition: border-color var(--paso), box-shadow var(--paso);
}
textarea { resize: vertical; line-height: 1.55; }
input[type="text"]:hover, input[type="email"]:hover, input[type="date"]:hover, textarea:hover, select:hover { border-color: var(--tinta); }
/* El foco de un campo: borde de tinta y un halo magenta, que se ve igual de bien que el contorno de siempre */
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="date"]:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--tinta);
  box-shadow: 0 0 0 3px rgb(230 0 126 / 0.3);
  outline: none;
}

.casilla { display: flex; gap: 0.6rem; align-items: center; }

.campo--error input, .campo--error textarea, .campo--error select { border-color: var(--mal); border-width: 2px; }
.error { margin: 0.4rem 0 0; color: var(--mal); font-weight: 700; }

.campo--bloqueado {
  padding: 0.9rem 1rem;
  border: 1.5px dashed var(--borde-fuerte);
}
.campo--bloqueado .ayuda { margin: 0; }

/* Una lista (teléfonos, platos) es un panel con su título, y sus filas se apoyan en él */
fieldset {
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem 1.2rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco-roto);
}
legend { padding: 0 0.4rem; }
.fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--borde);
}
.fila:first-child { border-top: 0; padding-top: 0.25rem; }
.fila .campo { flex: 1 1 13rem; margin-bottom: 0.6rem; }
.fila__acciones { flex-basis: 100%; display: flex; gap: 0.5rem; }

/* Entrar: la marca a la izquierda y el formulario a la derecha */

.acceso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.acceso__marca {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
  padding: clamp(2rem, 5vw, 5rem);
  background: var(--magenta);
  color: var(--blanco);
}
.acceso__monograma { width: 5.125rem; height: auto; }
.acceso__lema {
  margin: 0 0 2rem;
  font-size: clamp(3rem, 6.5vw, 5.75rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.acceso__entradilla { max-width: 34rem; margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.45; }
.acceso__firma { margin: 0; font-weight: 700; }

.acceso__caja {
  align-self: center;
  width: min(100% - 3rem, 30rem);
  margin: 3rem auto;
}
.acceso__logotipo { width: 10rem; height: auto; margin-bottom: 2.25rem; }
.acceso__caja h1 { margin-bottom: 0.75rem; font-size: clamp(1.8rem, 2.6vw, 2.25rem); }
.acceso__texto { margin: 0 0 1.75rem; }
.acceso__caja form { margin-bottom: 1.5rem; }
.acceso__nota { margin: 1.5rem 0 0; color: var(--suave); font-size: 0.95rem; }

@media (max-width: 52rem) {
  .acceso { grid-template-columns: 1fr; }
  .acceso__marca { gap: 1.5rem; padding: 1.5rem; }
  .acceso__monograma { width: 3.5rem; }
  .acceso__lema { margin-bottom: 1rem; font-size: 2.6rem; }
  .acceso__entradilla, .acceso__firma { display: none; }
}

/* El panel: menú lateral y contenido */

.panel {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}
.panel > .lateral { grid-column: 1; grid-row: 1 / span 2; }
.panel > .barra { grid-column: 2; grid-row: 1; }
.panel > .principal { grid-column: 2; grid-row: 2; }

.lateral {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100vh;
  padding: 1.4rem 1rem 1rem;
  background: var(--blanco);
  border-right: 1px solid var(--borde);
}

.lateral__marca {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0 0.5rem;
  color: var(--tinta);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.lateral__marca img { width: 2.5rem; height: 2.5rem; border-radius: var(--radio); }

/* La web que se edita: con varias webs es un enlace a la lista, con una sola no lleva flecha */
.web {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco-roto);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color var(--paso), background var(--paso);
}
.web--cambiar:hover { border-color: var(--borde-fuerte); background: var(--blanco); color: var(--tinta); }
.web__inicial {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: var(--blanco);
  font-weight: 800;
}
/* El favicon llena el cuadrado entero: uno de 16 px se estira y pixela un poco, pero sin hueco alrededor */
.web__inicial--favicon { overflow: hidden; background: var(--blanco); box-shadow: 0 0 0 1px var(--borde); }
.web__inicial--favicon img { width: 100%; height: 100%; object-fit: contain; }
.web__texto { flex: 1; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.web__etiqueta { display: block; color: var(--suave); font-size: 0.82rem; font-weight: 600; }
.web__texto strong { display: block; font-size: 1rem; font-weight: 800; }
.web .icono { width: 1.05rem; height: 1.05rem; color: var(--suave); }

/* El menú: sin iconos de contenido (no escalan a cada cliente); lo sostienen la tipografía,
   el contador y la marca del elemento activo */
.menu { flex: 0 1 auto; min-height: 0; overflow-y: auto; margin: 0 -0.25rem; padding: 0 0.25rem; }
.menu__grupo {
  margin: 0 0 0.35rem;
  padding: 0 0.75rem;
  color: var(--suave);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.menu ul { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.menu li + li { margin-top: 2px; }
.menu a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radio);
  color: var(--texto);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background var(--paso), color var(--paso);
}
.menu a:hover { background: var(--blanco-roto); color: var(--tinta); }
.menu a[aria-current="page"] { background: var(--rosa-suave); color: var(--tinta); font-weight: 800; }
.menu a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: -0.25rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--magenta);
}
.menu__cuantas {
  min-width: 1.5rem;
  padding: 0 0.45rem;
  border-radius: var(--radio-chico);
  background: var(--blanco-roto);
  color: var(--suave);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.menu a[aria-current="page"] .menu__cuantas { background: var(--blanco); color: var(--magenta-texto); }

.lateral__pie {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--borde);
  font-size: 0.95rem;
}
.lateral__usuario { display: flex; align-items: center; gap: 0.7rem; padding: 0 0.25rem; }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radio);
  background: var(--rosa);
  color: var(--magenta-texto);
  font-size: 0.95rem;
  font-weight: 800;
}
.lateral__quien { min-width: 0; margin: 0; line-height: 1.25; }
.lateral__quien strong, .lateral__quien span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral__quien strong { color: var(--tinta); }
.lateral__quien span { color: var(--suave); font-size: 0.85rem; }
.lateral__acciones { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 0.25rem; }
.lateral__acciones form { margin: 0; }
.lateral__ehundu { margin: 0; color: var(--suave); font-size: 0.85rem; }

/* La barra de publicar, arriba del contenido: el estado de la web en una píldora, la vista previa
   y publicar, que es lo único magenta */

.barra {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  min-height: 4.25rem;
  padding: 0.7rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--borde);
  background: rgb(250 250 247 / 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--tinta);
}
.barra__texto { position: relative; display: flex; flex: 1 1 18rem; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; }
.barra p { margin: 0; }
.barra strong { font-weight: 800; }
.barra__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.95rem 0.4rem 0.8rem;
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: inset 0 0 0 1px var(--borde);
  font-weight: 600;
}
.barra__punto {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 4px rgb(230 0 126 / 0.16);
}
.barra__lista { position: relative; }
.barra__lista summary {
  color: var(--magenta-texto);
  font-weight: 700;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.barra__lista summary::-webkit-details-marker { display: none; }
.barra__lista summary:hover { color: var(--tinta); }
/* Las páginas pendientes salen en un desplegable, sin estirar la barra */
.barra__lista ul {
  position: absolute;
  z-index: 6;
  top: calc(100% + 0.6rem);
  left: 0;
  min-width: 16rem;
  max-width: min(26rem, 80vw);
  margin: 0;
  padding: 0.6rem 0.9rem 0.6rem 1.9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-2);
  color: var(--texto);
}
.barra__lista li { padding: 0.15rem 0; }
.barra__lista a { color: var(--tinta); font-weight: 600; }
.barra__lista a:hover { color: var(--magenta-texto); }
.barra .barra__detalle { flex-basis: 100%; color: var(--suave); font: 0.85rem var(--mono); overflow-wrap: anywhere; }
.barra__botones { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.barra__botones form { margin: 0; }
.barra__vista, .barra__web, .barra__publicar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radio);
  font: 700 1.05rem/1.2 var(--letra);
  text-decoration: none;
}
.barra__vista, .barra__web { border: 1.5px solid var(--borde-fuerte); background: var(--blanco); color: var(--tinta); }
.barra__vista:hover, .barra__web:hover { border-color: var(--tinta); color: var(--tinta); }
.barra__publicar { padding-inline: 1.4rem; box-shadow: 0 1px 0 rgb(0 0 0 / 0.12), 0 6px 14px -6px rgb(230 0 126 / 0.65); }
.barra .icono { width: 1.1rem; height: 1.1rem; }

.barra--al-dia .barra__punto { background: var(--bien-punto); box-shadow: 0 0 0 4px rgb(43 154 74 / 0.18); }

.barra--mal { border-bottom-color: #f0c9c5; background: rgb(251 238 237 / 0.95); }
.barra--mal .barra__estado { color: var(--mal); box-shadow: inset 0 0 0 1px #f0c9c5; }
.barra--mal .barra__punto { background: var(--mal); box-shadow: 0 0 0 4px rgb(179 38 30 / 0.16); }

.principal {
  width: min(100% - 3rem, 62rem);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) 0 4rem;
}

@media (max-width: 52rem) {
  .panel { grid-template-columns: 1fr; grid-template-rows: auto; }
  .panel > .barra { position: static; grid-column: 1; grid-row: 1; }
  .panel > .lateral { grid-column: 1; grid-row: 2; }
  .panel > .principal { grid-column: 1; grid-row: 3; }
  .lateral { position: static; height: auto; gap: 1rem; padding: 1rem; border-right: 0; border-bottom: 1px solid var(--borde); }
  .lateral__pie { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0; padding-top: 0; border-top: 0; }
  .principal { width: min(100% - 2rem, 62rem); }
}

.migas { margin: 0 0 0.5rem; font-weight: 700; }
.migas a { color: var(--suave); text-decoration: none; }
.migas a:hover { color: var(--magenta-texto); }
.migas a::before { content: "← "; }

.cabeza {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin: 0 0 2rem;
}
.cabeza h1 { font-size: clamp(2.2rem, 4vw, 3.25rem); letter-spacing: -0.035em; }
.cabeza__cuenta { margin: 0.3rem 0 0; color: var(--suave); font-size: 1.2rem; }

.nada {
  padding: 2.5rem 1.5rem;
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--suave);
  text-align: center;
}

/* Listados: una tarjeta con sus filas, y la fila entera abre la página */

.tabla {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
}
.tabla th {
  padding: 0.8rem 1.4rem;
  border-bottom: 1px solid var(--borde);
  background: var(--blanco-roto);
  color: var(--suave);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-align: left;
  text-transform: uppercase;
}
.tabla td {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--borde);
  font-size: 1.1rem;
}
.tabla tbody tr:first-child td { border-top: 0; }
.tabla tbody tr { position: relative; transition: background var(--paso); }
.tabla tbody tr:hover { background: var(--rosa-suave); }
.tabla td:first-child { width: 100%; }
.tabla td:not(:first-child) { white-space: nowrap; }
.tabla td:not(:first-child):not(.ir) { color: var(--suave); font-size: 1rem; font-weight: 600; }
.tabla a { color: var(--tinta); font-weight: 700; text-decoration: none; }
.tabla a:hover { color: var(--magenta-texto); }
/* El enlace del título cubre toda la fila, con el asa de arrastrar por encima */
.tabla td:not(.asa) a::after { content: ""; position: absolute; inset: 0; }
.tabla td.asa { position: relative; z-index: 1; }
/* Bajo el título, la dirección de la página en la web */
.tabla__direccion {
  display: block;
  margin-top: 0.1rem;
  color: var(--suave);
  font-size: 0.88rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
/* Quién edita qué: las webs de cada persona, como etiquetas; las de la agencia no se abren */
.tabla td.webs { white-space: normal; }
.tabla strong.tabla__titulo { color: var(--tinta); font-weight: 700; }
.tabla tbody tr.sin-enlace:hover { background: none; }
.etiqueta {
  display: inline-block;
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0.1rem 0.6rem;
  background: var(--blanco-roto);
  box-shadow: inset 0 0 0 1px var(--borde);
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.etiqueta--agencia { background: var(--rosa-suave); box-shadow: inset 0 0 0 1px var(--rosa); color: var(--magenta-texto); }
.nada-aqui { color: var(--suave); font-size: 0.95rem; }
.ayuda--pie { margin-top: 0.9rem; }
.webs-de-la-persona__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.6rem 1.25rem; padding: 0.3rem 0 0.2rem; }
.webs-de-la-persona__lista .casilla { font-weight: 600; color: var(--tinta); }
.webs-de-la-persona__lista input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--magenta); }
.tabla .ir { width: 1%; padding-left: 0; color: var(--borde-fuerte); text-align: right; }
.tabla .ir .icono { display: block; margin-left: auto; transition: color var(--paso), transform var(--paso); }
.tabla tbody tr:hover .ir .icono { color: var(--magenta); transform: translateX(3px); }

@media (max-width: 40rem) {
  .tabla th, .tabla td { padding: 0.8rem; }
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.1rem 0.7rem;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.6;
}
.estado::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
/* La ficha de un tipo con borradores: su estado y el botón para cambiarlo, junto al título */
.estado-ficha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin: 0; }
.estado--publicada { background: var(--bien-fondo); color: var(--bien); }
.estado--borrador { background: var(--gris); color: var(--suave); box-shadow: inset 0 0 0 1px var(--borde); }
.estado--programada { background: var(--rosa); color: var(--magenta-texto); }

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tarjeta { background: var(--blanco); border: 1px solid var(--borde); }
.tarjeta a { display: block; padding: 1.25rem 1.4rem; color: var(--tinta); text-decoration: none; }
.tarjeta a:hover { border-left: 4px solid var(--magenta); background: var(--rosa); }
.tarjeta strong { display: block; font-size: 1.3rem; font-weight: 800; }
.tarjeta span { display: block; margin-top: 0.3rem; color: var(--suave); font-size: 0.95rem; }
.tarjeta > strong, .tarjeta > .error { padding: 1rem 1.4rem 0; }

/* Los sitios propios de la agencia: cómo fue su última noche, sin abrirlos */
.propios { margin-top: 2.5rem; }
.propios h2 { margin: 0; font-size: 1.1rem; }
.propios__nota { margin: 0.25rem 0 1rem; color: var(--suave); font-size: 0.9rem; }
.propios__lista { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.propio { padding: 0.8rem 1.1rem; background: var(--blanco); border: 1px solid var(--borde); }
.propio > strong { font-weight: 800; }
.propio span { display: block; margin-top: 0.2rem; color: var(--suave); font: 0.85rem var(--mono); overflow-wrap: anywhere; }
.propio--aviso { border-left: 4px solid var(--mal); }
.propio--aviso span { color: var(--mal); }

/* El formulario de una página */

.ficha {
  padding: clamp(1.25rem, 4vw, 2.25rem);
  background: var(--blanco);
  border: 1px solid var(--borde);
}
.acciones { margin: 2rem 0 0; }
.acciones .boton { border-color: var(--tinta); background: var(--tinta); }
.acciones .boton:hover { border-color: #2b2b2b; background: #2b2b2b; }

.aviso, .errores {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid;
}
.aviso { border-color: var(--bien); background: #eef7ef; color: var(--bien); }
.aviso--mal, .errores { border-color: var(--mal); background: #fbeeed; color: var(--mal); }
.aviso p, .errores p { margin: 0; }
.aviso ul, .errores ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.errores a { color: var(--mal); font-weight: 700; }
.aviso p + p, .errores p + p { margin-top: 0.6rem; }
.errores .detalle { font: 0.85rem var(--mono); overflow-wrap: anywhere; white-space: pre-line; }

/* Lo que había puesto quien edita, cuando su cambio choca con otro */
.tuyo { margin: 0.25rem 0 0; }
.tuyo dt { margin: 0.75rem 0 0; font-weight: 700; }
.tuyo dd { margin: 0.2rem 0 0; padding-left: 0.75rem; border-left: 2px solid; color: var(--texto); white-space: pre-line; overflow-wrap: anywhere; }

/* Debajo del formulario: el fichero y quitar la página; y la confirmación */
.pie-ficha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
}
.pie-ficha .fichero { margin: 1rem 0 0; }
.quitar { margin-top: 1rem; color: var(--mal); font-weight: 700; }
.quitar:hover { color: var(--tinta); }
.confirmar__texto { margin: 0 0 1.5rem; }
.confirmar__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin: 0; }
.confirmar__acciones a { font-weight: 700; }

.fichero {
  margin: 1rem 0 0;
  color: var(--suave);
  font: 0.85rem var(--mono);
  overflow-wrap: anywhere;
}

/* Un formulario en varios idiomas, compacto (formato, §11.2 y §11.3): un texto
   por idioma son tres cajas en una línea, con el idioma de placeholder y el
   castellano primero; la fecha y el número, juntos; los platos, una línea cada
   uno, con sus alérgenos debajo en cinco columnas. */

.oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.campo { position: relative; }
.idiomas { display: grid; gap: 0.5rem; }
.idiomas--fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.idiomas--bloques { gap: 0.9rem; }
.idioma label { margin: 0 0 0.2rem; font-weight: 600; }

/* Si una caja de un texto lleva algo y otra no, la que falta se pone roja hasta que se escriba */
input.falta, textarea.falta { border-color: var(--mal); background: #fdeceb; }
input.falta::placeholder, textarea.falta::placeholder { color: var(--mal); opacity: 1; }

.ficha--idiomas input[type="text"], .ficha--idiomas input[type="date"], .ficha--idiomas textarea, .ficha--idiomas select {
  min-height: 2.6rem;
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
}
.ficha--idiomas input::placeholder, .ficha--idiomas textarea::placeholder { color: var(--suave); opacity: 1; }
.ficha--idiomas .obligatorio { color: var(--magenta-texto); font-weight: 800; }

/* El rótulo a la izquierda y lo que se escribe a su lado, en una línea */
.ficha--idiomas .campo--fila {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0 0.9rem;
  margin: 0 0 0.6rem;
}
.ficha--idiomas .campo--fila > label, .ficha--idiomas .campo--fila > .rotulo { margin: 0; }
.ficha--idiomas .campo--fila > .ayuda, .ficha--idiomas .campo--fila > .error { grid-column: 2; margin: 0.25rem 0 0; }
.ficha--idiomas .campo--sinrotulo { grid-template-columns: minmax(0, 1fr); }

/* La fecha, un número y una casilla, uno junto a otro */
.ficha--idiomas .campo--compacto {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.9rem;
  vertical-align: middle;
  margin: 0 1.4rem 0.6rem 0;
}
/* Rótulo, caja y ayuda en una línea, como las demás filas; el error, debajo */
.ficha--idiomas .campo--compacto > label { order: 1; margin: 0; }
.ficha--idiomas .campo--compacto > input, .ficha--idiomas .campo--compacto > textarea { order: 2; }
.ficha--idiomas .campo--compacto > .ayuda { order: 3; margin: 0; font-size: 0.95rem; }
.ficha--idiomas .campo--compacto > .error { order: 4; flex-basis: 100%; margin: 0; }
/* Solo, el rótulo ocupa lo mismo que el de las filas y la caja queda a su altura */
.ficha--idiomas .campo--compacto:not(:has(+ .campo--compacto)):not(.campo--compacto + .campo--compacto) > label:not(.casilla) { min-width: 10.5rem; }
.ficha--idiomas .campo--compacto input[type="date"] { width: 11.5rem; }
.ficha--idiomas .campo--compacto input[type="text"] { width: 7rem; }
.ficha--idiomas .campo--compacto .casilla { min-height: 2.6rem; }

/* Listas: los grupos son tarjetas, y dentro lleva cada uno la lista de sus platos */
.ficha--idiomas fieldset.lista { margin: 0 0 1rem; padding: 0; border: 0; background: none; }
.ficha--idiomas fieldset.lista > legend { padding: 0; margin: 0 0 0.45rem; font-size: 1.1rem; }
.ficha--idiomas .lista--n1 > legend { font-size: 0.95rem; color: var(--suave); }
.ficha--idiomas .lista > .ayuda { margin: -0.2rem 0 0.5rem; }

.ficha--idiomas .fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--borde);
}
.ficha--idiomas .fila:first-child { padding-top: 0.15rem; border-top: 0; }
.ficha--idiomas .fila > * { grid-column: 1 / -1; min-width: 0; }
.ficha--idiomas .fila > .campo:first-of-type { grid-column: 1; }
.ficha--idiomas .fila > .fila__acciones { grid-column: 2; grid-row: 1; }
.ficha--idiomas .fila .campo { margin-bottom: 0; }

.ficha--idiomas .lista--n0 > .filas > .fila {
  margin: 0 0 0.8rem;
  padding: 0.7rem 0.85rem 0.5rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-1);
}
.ficha--idiomas .lista--n0 > .filas > .fila > .lista { margin: 0.2rem 0 0.4rem; background: none; }
.ficha--idiomas .lista--n1 > .filas > .fila:first-child { border-top: 0; }
.ficha--idiomas .lista > button[data-anadir] { min-height: 2.25rem; padding: 0.15rem 0.9rem; font-size: 0.92rem; }

.fila__acciones { display: flex; gap: 0.25rem; }
button.icono {
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: 0;
  border: 1.5px solid var(--borde);
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 700;
}
button.icono:hover { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
button.icono--quitar:hover { border-color: var(--mal); background: var(--mal); }

/* Las filas se ordenan arrastrando por su asa (a la izquierda); lo que lleva textos en varios
   idiomas es una línea de lectura, con lápiz, que se edita en una ventana */

.fila--asa { position: relative; padding-left: 2.2rem; }
.ficha--idiomas .fila.fila--asa { padding-left: 1.9rem; }
.ficha--idiomas .lista--n0 > .filas > .fila.fila--asa { padding-left: 2.3rem; }
button.fila__asa {
  position: absolute;
  left: 0;
  top: 2.2rem;
  width: 1.7rem;
  min-height: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--suave);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.2em;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
/* Sin líneas de la rejilla: así el asa se coloca respecto a la fila, no a su contenido */
.ficha--idiomas .fila > button.fila__asa { grid-area: auto; top: 0.5rem; }
.ficha--idiomas .fila:first-child > button.fila__asa { top: 0.15rem; }
.ficha--idiomas .lista--n0 > .filas > .fila > button.fila__asa { top: 0.7rem; left: 0.25rem; }
.fila:first-child > button.fila__asa { top: 1.55rem; }
button.fila__asa:hover, button.fila__asa:focus-visible { background: none; color: var(--tinta); }
.fila.arrastrando {
  position: relative;
  z-index: 3;
  background: var(--blanco);
  box-shadow: 0 0.5rem 1.5rem rgb(17 17 17 / 0.22);
  outline: 2px solid var(--tinta);
  outline-offset: -1px;
}

/* Quitar, sin protagonismo hasta que se apunta a él */
.fila__acciones button.icono { border-color: transparent; background: none; color: var(--suave); }
.fila__acciones button.icono:hover, .fila__acciones button.icono:focus-visible { border-color: var(--mal); background: var(--mal); color: var(--blanco); }

button.resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1rem 0.9rem;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.25rem 0.5rem 0.25rem 0.7rem;
  border: 2px solid transparent;
  background: none;
  color: var(--tinta);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
}
button.resumen:hover { border-color: var(--rosa); background: var(--rosa-suave); color: var(--tinta); }
.resumen__texto { min-width: 0; overflow-wrap: anywhere; }
.resumen__detalle { color: var(--suave); font-size: 0.92rem; font-weight: 500; }
.resumen__detalle--aviso { color: var(--mal); font-weight: 700; }
.resumen__falta { padding: 0 0.45rem; border: 1.5px solid var(--mal); color: var(--mal); font-size: 0.78rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.resumen__detalle:empty, .resumen__falta:empty { display: none; }
.resumen__lapiz { display: inline-flex; margin-left: auto; color: var(--magenta-texto); }
.resumen--vacio .resumen__texto { color: var(--suave); font-weight: 500; font-style: italic; }
button.resumen.resumen--error { border-color: var(--mal); }

/* De una fila solo se ve su línea (y su asa y su papelera): lo demás está en su ventana */
.ficha--idiomas .fila > .resumen { grid-column: 1; grid-row: 1; }
.ficha--idiomas .campo.plegable > .resumen { grid-column: 2; grid-row: 1; }
/* El título de un grupo, sin rótulo: se lee como su cabecera */
.ficha--idiomas .fila .campo.plegable { grid-template-columns: minmax(0, 1fr); }
.ficha--idiomas .fila .campo.plegable > .rotulo { display: none; }
.ficha--idiomas .fila .campo.plegable > .resumen { grid-column: 1; }
.ficha--idiomas .lista--n0 > .filas > .fila > .campo.plegable button.resumen { font-size: 1.15rem; font-weight: 800; }

/* La ventana de edición: un idioma por línea y los alérgenos a la vista */
dialog.editor {
  width: min(36rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 1.25rem 1.4rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto);
  box-shadow: 0 0.75rem 2.5rem rgb(17 17 17 / 0.35);
}
/* El fondo se desenfoca: se ve que la ficha sigue detrás, pero no se lee. Quien pide menos transparencia lo ve liso */
dialog.editor::backdrop {
  background: rgb(17 17 17 / 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
@media (prefers-reduced-transparency: reduce) {
  dialog.editor::backdrop { background: rgb(17 17 17 / 0.55); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.editor__titulo { margin: 0 0 0.9rem; font-size: 1.35rem; }
.editor .campo, .editor .campo--fila { display: block; margin: 0 0 0.6rem; }
.editor .idiomas--fila { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.editor .idioma { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: center; gap: 0 0.7rem; }
.idioma { position: relative; }
.idioma__nombre { display: none; }
.editor .idioma > .sugerencias { left: 7.2rem; }
.editor .idioma__nombre { display: block; color: var(--tinta); font-size: 0.95rem; font-weight: 700; }
@media (max-width: 30rem) {
  .editor .idioma { grid-template-columns: minmax(0, 1fr); gap: 0.15rem 0; }
  .editor .idioma > .sugerencias { left: 0; }
}
.editor .seleccion { border-width: 0; background: none; }
.editor .seleccion > summary { padding: 0.3rem 0 0.4rem; cursor: default; pointer-events: none; }
.editor .seleccion > summary::before { display: none; }
.editor .seleccion__opciones { padding: 0 0 0.2rem; }
.editor__error { margin: 0.6rem 0 0; font-weight: 700; }
.editor__pie { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1rem; }
.editor__pie button:not(.enlace) { min-height: 2.6rem; padding: 0.4rem 1.7rem; border-color: var(--tinta); background: var(--tinta); font-size: 1rem; }
.editor__pie button:not(.enlace):hover { border-color: #2b2b2b; background: #2b2b2b; }

/* Una imagen del sitio en su campo (formato §11.6): su miniatura, su nombre y su peso, y «Cambiar» y «Quitar».
   La ruta escrita, que es lo que se guarda, solo se ve sin JavaScript */
.imagen {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
}
.imagen__miniatura {
  flex: none;
  width: 9rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio-chico);
  object-fit: cover;
  background: var(--gris);
}
.imagen__datos { display: grid; flex: 1 1 auto; gap: 0.2rem; min-width: 0; }
.imagen__datos > .imagen__ruta { width: 100%; }
.imagen__nombre { overflow-wrap: anywhere; color: var(--tinta); font-weight: 800; }
.imagen__detalle { color: var(--suave); font-size: 0.92rem; }
.imagen__detalle--aviso { color: var(--mal); font-weight: 700; }
.imagen__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 0.45rem; }
.imagen--vacia { border-style: dashed; background: var(--gris); }
.imagen--vacia .imagen__miniatura {
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--borde-fuerte);
  background: var(--blanco);
  color: var(--suave);
}
.imagen button:not(.enlace) { min-height: 2.25rem; padding: 0.15rem 0.9rem; font-size: 0.92rem; }
.campo--error .imagen { border-color: var(--mal); }
/* Dentro de una fila de una lista, como una tarjeta: la miniatura arriba, a lo ancho de su celda, y debajo lo demás */
.fila .imagen { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.5rem; }
.fila .imagen__miniatura { width: 100%; }
.fila .imagen__datos { width: 100%; }
.fila .imagen__nombre { overflow: hidden; font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap; }
.fila .imagen__acciones { gap: 0.8rem; margin-top: 0.15rem; }
/* Sin foto, en una fila, basta una línea: el recuadro vacío ocuparía más que todo lo demás de la fila */
.fila .imagen--vacia { flex-direction: row; align-items: center; gap: 0.7rem; padding: 0.4rem 0.6rem; }
.fila .imagen--vacia .imagen__miniatura { display: none; }
.fila .imagen--vacia .imagen__datos { width: auto; flex: 1 1 auto; grid-auto-flow: column; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fila .imagen--vacia .imagen__nombre { font-size: 0.92rem; font-weight: 600; color: var(--suave); }
.fila .imagen--vacia .imagen__acciones { margin-top: 0; }
@media (max-width: 30rem) {
  .imagen__miniatura { width: 6.5rem; }
}

/* La ventana de elegir una foto: subir una nueva, o elegir entre las de la web */
dialog.editor--fotos { width: min(46rem, calc(100vw - 2rem)); }
/* El cuerpo se desplaza y el pie, con «Usar esta foto», se queda a la vista aunque la ventana no quepa (un móvil) */
dialog.editor--fotos[open] { display: flex; flex-direction: column; overflow: hidden; }
dialog.editor--fotos .editor__cuerpo { flex: 1 1 auto; min-height: 0; margin: 0 -0.4rem; padding: 0 0.4rem; overflow: auto; }
dialog.editor--fotos .editor__pie { flex: none; }
.subida { margin: 0 0 1.1rem; }
button.subida__boton, button.subida__boton:hover {
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  width: 100%;
  min-height: 0;
  padding: 1rem;
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--tinta);
  font: 700 1.05rem/1.25 var(--letra);
}
button.subida__boton:hover, button.subida__boton.soltando { border-color: var(--tinta); background: var(--rosa-suave); }
.subida__boton svg { color: var(--magenta-texto); }
.subida__ayuda { color: var(--suave); font-size: 0.92rem; font-weight: 500; }
.subida__estado { padding: 0.9rem 1rem; border: 1.5px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--blanco); }
.subida__estado p { margin: 0 0 0.5rem; font-weight: 700; }
.subida__barra { height: 0.5rem; border-radius: 99px; background: var(--gris); overflow: hidden; }
.subida__barra span { display: block; width: 0; height: 100%; background: var(--magenta); transition: width 0.3s cubic-bezier(0.3, 0, 0.2, 1); }
.subida__barra--espera span { width: 40%; animation: subida-espera 1.1s ease-in-out infinite alternate; }
@keyframes subida-espera { from { margin-left: 0; } to { margin-left: 60%; } }
@media (prefers-reduced-motion: reduce) {
  .subida__barra--espera span { width: 100%; animation: none; }
}
.subida__hecho { margin: 0.6rem 0 0; color: var(--bien); font-weight: 700; }
.subida__hecho span { display: block; color: var(--suave); font-weight: 500; font-size: 0.92rem; }

.fotos__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.6rem; }
.fotos__cabecera h3 { margin: 0; font-size: 1.05rem; }
.fotos__cuenta { margin-left: 0.3rem; padding: 0 0.45rem; border-radius: var(--radio-chico); background: var(--gris); color: var(--suave); font-size: 0.85rem; font-weight: 700; }
.fotos__cabecera input[type="search"] { width: 13rem; min-height: 2.4rem; padding: 0.3rem 0.7rem; font-size: 0.95rem; }
.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.7rem;
  max-height: 19rem;
  margin: 0 -0.25rem 1rem;
  padding: 0.25rem;
  overflow: auto;
  scroll-padding: 0.5rem;
}
.fotos__vacia { grid-column: 1 / -1; margin: 0; color: var(--suave); }
@media (max-width: 40rem) {
  /* Ya se desplaza la ventana: una rejilla que también se desplaza dentro sería un desplazamiento dentro de otro */
  .fotos { max-height: none; overflow: visible; }
  .fotos__cabecera { flex-wrap: wrap; }
  .fotos__cabecera input[type="search"] { width: 100%; }
}
button.foto, button.foto:hover {
  position: relative;
  display: grid;
  gap: 0.3rem;
  justify-items: stretch;
  min-height: 0;
  padding: 0.3rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--texto);
  font: 600 0.82rem/1.25 var(--letra);
  text-align: left;
}
button.foto:hover { border-color: var(--borde-fuerte); }
button.foto[aria-selected="true"], button.foto[aria-selected="true"]:hover { border-color: var(--magenta); background: var(--rosa-suave); }
.foto img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radio-chico); object-fit: cover; background: var(--gris); }
.foto__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto__marca {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  padding: 0 0.4rem;
  border-radius: var(--radio-chico);
  background: var(--tinta);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.6;
}
.foto__marca--nueva { background: var(--magenta); }
.foto__tic {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  display: none;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--magenta);
  color: var(--blanco);
}
.foto[aria-selected="true"] .foto__tic { display: grid; }

/* Lo escrito en la ficha y no guardado, y el orden que se ha cambiado: una barra clara pegada
   abajo, con un punto magenta, y el botón en tinta (lo único magenta de la pantalla es Publicar) */
.cambios, .orden {
  position: sticky;
  bottom: 1rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 1.25rem;
  padding: 0.7rem 0.8rem 0.7rem 1.25rem;
  border: 1px solid var(--borde);
  background: var(--blanco);
  box-shadow: var(--sombra-2);
  color: var(--tinta);
}
.cambios__texto, .orden__texto { display: flex; flex: 1 1 12rem; align-items: center; gap: 0.6rem; margin: 0; font-weight: 700; }
.cambios__texto::before, .orden__texto::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--magenta); }
.cambios button, .orden .boton:not(.boton--secundario) { min-height: 2.5rem; padding: 0.3rem 1.5rem; border-color: var(--tinta); background: var(--tinta); font-size: 1rem; }
.cambios button:hover, .orden .boton:not(.boton--secundario):hover { border-color: #2b2b2b; background: #2b2b2b; }
.orden .boton--secundario { min-height: 2.5rem; padding: 0.3rem 1.25rem; font-size: 1rem; }

/* Selección múltiple: casillas con nombre, plegadas con lo marcado a la vista, y abiertas en cinco columnas */

.seleccion { border: 1px solid var(--borde); background: var(--blanco); }
.seleccion > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.8rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  list-style: none;
}
.seleccion > summary::-webkit-details-marker { display: none; }
.seleccion > summary::before { content: "▸"; color: var(--magenta-texto); }
.seleccion[open] > summary::before { content: "▾"; }
.seleccion > summary .rotulo { margin: 0; }
.seleccion__resumen { color: var(--texto); font-weight: 600; }
.campo--error .seleccion { border-color: var(--mal); border-width: 3px; }
.seleccion > .ayuda { margin: 0 0.8rem 0.5rem; }
.seleccion__opciones {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.2rem 0.8rem 0.8rem;
}
@media (max-width: 44rem) {
  .idiomas--fila { grid-template-columns: minmax(0, 1fr); }
  .ficha--idiomas .campo--fila { grid-template-columns: minmax(0, 1fr); gap: 0.25rem 0; }
  .ficha--idiomas .campo--fila > .ayuda, .ficha--idiomas .campo--fila > .error { grid-column: 1; }
  .seleccion__opciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.3rem 0.5rem;
  min-height: 2.3rem;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--blanco);
  color: var(--tinta);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: background var(--paso), border-color var(--paso), color var(--paso);
}
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:hover { border-color: var(--tinta); background: var(--rosa-suave); }
.chip:has(input:checked) { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.chip:has(input:focus-visible) { outline: 3px solid var(--magenta); outline-offset: 2px; }
.chip--ninguno { border-style: dashed; }
.chip--viejo { border-color: var(--mal); }

/* Lo que el panel recuerda: sugerencias al escribir y la opción de recordar un cambio */

.sugerencias {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.15rem 0 0;
  padding: 0;
  border: 1.5px solid var(--borde-fuerte);
  background: var(--blanco);
  box-shadow: var(--sombra-2);
  list-style: none;
}
.sugerencias li + li { border-top: 1px solid var(--borde); }
button.sugerencia {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0.55rem 0.8rem;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font-weight: 700;
  text-align: left;
}
button.sugerencia:hover, button.sugerencia:focus { background: var(--rosa); color: var(--tinta); }
.aviso-recordado { flex: 1 1 100%; margin: 0 0 0.4rem; color: var(--suave); font-size: 0.95rem; }
.recordar { flex: 1 1 100%; display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.4rem; font-weight: 600; }

/* El listado de lo que se ordena a mano: el asa para arrastrar la fila entera y la barra de guardar */

.tabla th.asa, .tabla td.asa:first-child { width: 1%; padding: 0 0 0 0.6rem; }
.tabla td.asa + td { width: 100%; }
.tabla td.asa { touch-action: none; cursor: grab; }
button.asa__agarre {
  display: block;
  width: 2.4rem;
  min-height: 2.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--suave);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.2em;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}
.tabla tr:hover .asa__agarre, button.asa__agarre:focus-visible { color: var(--tinta); background: none; }
button.asa__agarre:hover { background: none; color: var(--tinta); }

/* Mientras se arrastra, la fila se despega, con su borde y su sombra, y todo el cursor es el de agarrar */
body.arrastrando-fila, body.arrastrando-fila * { cursor: grabbing !important; user-select: none; }
.tabla tr.arrastrando {
  position: relative;
  z-index: 3;
  background: var(--blanco);
  box-shadow: 0 0.5rem 1.5rem rgb(17 17 17 / 0.22);
  outline: 2px solid var(--tinta);
  outline-offset: -1px;
}
.tabla tr.arrastrando > td { background: var(--blanco); border-top-color: transparent; }
/* La tarjeta recorta sus esquinas; mientras se arrastra, deja ver la sombra de la fila */
body.arrastrando-fila .tabla { overflow: visible; }

/* Lo que falta por traducir de una página, y nada cuando están todos los idiomas */
.faltan {
  margin-left: 0.6rem;
  padding: 0.1rem 0.5rem;
  background: var(--rosa);
  color: var(--magenta-texto);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Guardada pero todavía no en la web: la página se ve como estaba, sin estos cambios */
.por-publicar {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.1rem 0.6rem;
  background: var(--rosa-suave);
  box-shadow: inset 0 0 0 1px var(--rosa);
  color: var(--magenta-texto);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: 0.08em;
}
.por-publicar::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }

/* La espera (espera.js): mientras se guarda o se publica, el botón queda ocupado y arriba corre una
   barra fina; si tarda, un velo tapa la página y en el centro una rueda dice que se está trabajando */

.rueda {
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--borde);
  border-top-color: var(--magenta);
  border-radius: 50%;
  animation: gira 0.9s linear infinite;
}
.rueda--chica { width: 1.05rem; height: 1.05rem; border-width: 2.5px; border-color: rgb(255 255 255 / 0.35); border-top-color: var(--blanco); }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes pulso { 50% { opacity: 0.35; } }

button.ocupado, .boton.ocupado { opacity: 0.92; pointer-events: none; }

.espera {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgb(250 250 247 / 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: aparece 0.2s ease-out;
}
@keyframes aparece { from { opacity: 0; } }
.espera__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  min-width: min(17rem, calc(100vw - 2rem));
  max-width: 24rem;
  padding: 2rem 2.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  box-shadow: var(--sombra-2);
  text-align: center;
}
.espera__caja p { margin: 0; }
.espera__titulo { color: var(--tinta); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.espera__ayuda { color: var(--suave); font-size: 0.97rem; line-height: 1.45; }
.espera__lento { color: var(--magenta-texto); font-size: 0.95rem; font-weight: 700; }

.barra-carga { position: fixed; top: 0; left: 0; right: 0; z-index: 101; height: 3px; overflow: hidden; }
.barra-carga::after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--magenta); animation: desliza 1.2s ease-in-out infinite; }
@keyframes desliza { from { left: -35%; } to { left: 100%; } }

/* Quien pide menos movimiento ve un parpadeo suave en lugar de giros y deslizamientos */
@media (prefers-reduced-motion: reduce) {
  .rueda { animation: pulso 1.6s ease-in-out infinite; }
  .espera { animation: none; }
  .barra-carga::after { left: 0; width: 100%; opacity: 0.6; animation: pulso 1.6s ease-in-out infinite; }
}

/* Esquinas: las superficies siguen el radio de las variables y lo pequeño, el chico */
.ficha, .tarjeta, .propio, .aviso, .errores, .seleccion, .sugerencias, .cambios, .orden, .campo--bloqueado { border-radius: var(--radio); }
.estado, .faltan, .por-publicar, .etiqueta, .chip, button.resumen, .resumen__falta { border-radius: var(--radio-chico); }

/* Fechas (formato, §11.7): un calendario de trece meses con una casilla por día. Sin JavaScript se ven todos
   uno tras otro; con él (formulario.js) se enseñan unos pocos a la vez. Un día marcado es magenta y, además,
   lleva la palabra a los lectores de pantalla: el color no es lo único que lo dice. */
.fechas__resumen { margin: 0 0 0.7rem; color: var(--tinta); font-weight: 700; }
.fechas__navegacion { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.8rem; }
.fechas__rango { flex: 1 1 auto; color: var(--suave); font-size: 0.95rem; font-weight: 700; text-align: center; }
.fechas__meses { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1rem; }

.mes {
  width: 100%;
  padding: 0.6rem 0.6rem 0.7rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
}
.mes caption { padding: 0 0.25rem 0.3rem; color: var(--tinta); font-size: 1.1rem; font-weight: 800; text-align: left; }
.mes th { padding: 0 0 0.15rem; color: var(--suave); font-size: 0.8rem; font-weight: 700; }
.mes abbr { text-decoration: none; }
.mes td { padding: 0; text-align: center; }

.dia {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  border: 1.5px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--blanco);
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
label.dia { cursor: pointer; transition: background var(--paso), border-color var(--paso), color var(--paso); }
label.dia:hover { border-color: var(--tinta); background: var(--rosa); }
/* La casilla es el propio día: invisible, pero con todo el foco y el teclado de una casilla */
.dia input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
label.dia:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: 2px; }
label.dia:has(input:checked) { border-color: var(--magenta); background: var(--magenta); color: var(--blanco); }
label.dia:has(input:checked):hover { border-color: var(--tinta); background: var(--magenta-texto); }
.dia--hoy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.3rem;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}
/* Lo que ya ha pasado se ve, pero no se toca */
.dia--pasado { border-color: transparent; background: var(--gris); color: var(--suave); font-weight: 600; }
.dia--pasado.dia--marcado { background: var(--borde-fuerte); color: var(--blanco); text-decoration: line-through; text-decoration-thickness: 2px; }
.ayuda--aviso { color: var(--tinta); font-weight: 600; }

@media (max-width: 36rem) {
  .fechas__navegacion { flex-wrap: wrap; }
  .fechas__navegacion button { flex: 1 1 8rem; }
  .fechas__rango { order: -1; flex-basis: 100%; }
}
.fechas__navegacion button:disabled { border-color: var(--borde); color: var(--suave); opacity: 0.55; cursor: default; }

/* El avance de un trabajo repartido en varias peticiones (plantillas/trabajo.twig) */
.trabajo__barra { display: block; width: 100%; max-width: 32rem; height: 0.75rem; margin: 0 0 0.4rem; border: 0; border-radius: var(--radio); background: var(--gris); accent-color: var(--magenta); }
.trabajo__barra::-webkit-progress-bar { background: var(--gris); border-radius: var(--radio); }
.trabajo__barra::-webkit-progress-value { background: var(--magenta); border-radius: var(--radio); }
.trabajo__barra::-moz-progress-bar { background: var(--magenta); border-radius: var(--radio); }
.trabajo__cuanto { margin: 0 0 1.25rem; color: var(--suave); font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.trabajo__aviso { margin: 0 0 0.75rem; color: var(--tinta); font-weight: 600; }