/*
 * Estilos del panel.
 *
 * Reutiliza la paleta de la web (naranja y verde de marca) para que el cliente
 * reconozca donde esta, pero con tipografia de sistema y una densidad de
 * herramienta de trabajo: aqui no se viene a mirar, se viene a cambiar cosas.
 */

:root {
  --naranja: #f3890f;
  --naranja-oscuro: #d97706;
  /*
   * El naranja de los ENLACES, mas oscuro que el de la marca.
   *
   * `--naranja-oscuro` sobre blanco da 3,19:1 y el minimo legible para texto es
   * 4,5:1. En una tabla de 500 filas donde la referencia y el nombre son
   * enlaces, eso es casi todo lo que se lee. Este da 5,3:1 sobre blanco y aguanta tambien sobre los fondos con tinte,
   * y sigue siendo el mismo naranja, solo que un punto mas hondo.
   */
  --naranja-texto: #a85503;
  --verde: #7fb828;
  --tinta: #1d2125;
  --tinta-suave: #5b6570;
  --papel: #ffffff;
  --fondo: #f4f5f7;
  --linea: #dfe3e8;
  --mal: #a4241f;
  --bien: #1f7a3d;
  --radio: 10px;
  --radio-chico: 7px;
  /* Una sola sombra para todo: dos capas, muy suave. Antes cada tarjeta
     llevaba la suya y unas flotaban mas que otras. */
  --sombra: 0 1px 2px rgb(29 33 37 / 0.05), 0 4px 12px rgb(29 33 37 / 0.06);
  --sombra-alta: 0 2px 4px rgb(29 33 37 / 0.06), 0 12px 28px rgb(29 33 37 / 0.10);
  color-scheme: light;
}

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/*
 * Los enlaces NO van subrayados por defecto.
 *
 * Esto es un panel, no un articulo: en una tabla de 500 filas donde la
 * referencia y el nombre son enlaces, el subrayado de cada uno hace un rayado
 * que cansa. Se subrayan al pasar por encima, que es cuando importa saber que
 * son pulsables.
 *
 * En texto corrido (`.explica`, los avisos) SI se subrayan: ahi un enlace suelto
 * en medio de una frase no se distingue solo por el color.
 */
a {
  color: var(--naranja-texto);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.explica a,
.tarjeta--avisos a,
.mensaje a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Cabecera ------------------------------------------------------------- */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px 20px;
  background: var(--tinta);
  color: var(--papel);
}

/*
 * El rotulo de verdad, el mismo de la web.
 *
 * Se llama `.rotulo` y no `.marca` porque `.marca` YA existia mas abajo para
 * las casillas con texto de la pantalla de precios. Con el mismo nombre ganaba
 * la ultima y el logo se pintaba como una casilla.
 *
 * Alto fijo para que la cabecera no salte mientras carga la imagen.
 */
.rotulo {
  display: inline-flex;
  flex: none;
  align-items: center;
  text-decoration: none;
}

.rotulo img {
  display: block;
  width: auto;
  height: 42px;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-right: auto;
}

/*
 * Los desplegables del menu.
 *
 * Se abren al pasar el raton Y con el teclado (`focus-within`): si solo fuera
 * con el raton, a quien navegue con el tabulador el submenu no se le abriria
 * nunca. El padre sigue siendo un enlace normal, asi que pulsarlo lleva
 * directo a su pantalla sin abrir nada.
 */
.menu__grupo {
  position: relative;
}

.menu__flecha {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: 0.6;
}

.menu__desplegable {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  min-width: 220px;
  padding: 6px;
  border-radius: var(--radio);
  background: #1d2530;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.35);
}

/*
 * El ultimo desplegable (Configuracion) se abre hacia la izquierda. Esta pegado
 * al borde derecho del menu y, abriendose hacia la derecha, en el movil se salia
 * de la pantalla.
 */
.menu__grupo:last-child .menu__desplegable {
  right: 0;
  left: auto;
}

.menu__grupo:hover .menu__desplegable,
.menu__grupo:focus-within .menu__desplegable {
  display: block;
}

.menu__desplegable a {
  display: block;
  padding: 9px 12px;
  font-size: 14px;
}

.menu a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--radio);
  color: #cfd6dd;
  font-size: 15px;
  text-decoration: none;
}

.menu__icono {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.75;
}

.menu a:hover .menu__icono,
.menu a[aria-current] .menu__icono {
  opacity: 1;
}

.menu a:hover {
  background: rgb(255 255 255 / 0.1);
  color: var(--papel);
}

/* La seccion abierta: mismo criterio que los botones, texto oscuro sobre el
   naranja. En blanco eran 2,5:1 justo en la entrada que mas se mira. */
.menu a[aria-current] {
  background: var(--naranja);
  color: var(--tinta);
}

.salir {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.quien {
  color: #cfd6dd;
  font-size: 14px;
}

/*
 * OJO: las tallas van AL FINAL del bloque de la cabecera, detras de `.salir` y
 * `.quien`. Con la misma especificidad gana la ultima regla: puestas antes, el
 * `margin: 0` de `.salir` anulaba el `margin-left: auto` del movil y el boton
 * Salir se quedaba pegado al logo.
 */
/*
 * La barra en cinco tallas, segun el ancho que hay.
 *
 * Los cortes salen de MEDIR lo que ocupa cada version (17/09/2026, con los
 * rotulos actuales del menu), no de un numero redondo. El de antes (1250 px) no
 * correspondia a nada: la barra con rotulos necesita 1424 px, asi que entre 1251
 * y 1423 no cabia y "Ramon · Salir" saltaba a una segunda fila, justo en los
 * portatiles mas comunes (1280 y 1366 px).
 *
 *   1440 px o mas   rotulos completos               necesita 1424 px
 *   1320 a 1439     rotulos compactos, con nombre    necesita 1301 px
 *   1260 a 1319     rotulos compactos, sin nombre    necesita 1244 px
 *    641 a 1259     solo iconos (el rotulo sale al pasar el raton)
 *    640 o menos    movil: logo y Salir arriba, iconos debajo
 *
 * Se midio con las fuentes del laboratorio (Linux), que son de las anchas: en
 * Windows y Mac los rotulos ocupan algo menos. SI SE CAMBIA O SE ANADE UNA
 * ENTRADA DEL MENU, HAY QUE VOLVER A MEDIR: un rotulo mas largo mueve los cortes.
 */
@media (max-width: 1439px) {
  .cabecera {
    gap: 12px 14px;
  }

  .menu {
    gap: 2px;
  }

  .menu a {
    gap: 6px;
    padding: 7px 9px;
    font-size: 14px;
  }
}

/* El nombre de quien ha entrado se quita; sigue en el boton Salir, al pasar el raton. */
@media (max-width: 1319px) {
  .quien {
    display: none;
  }
}

/* Solo iconos. Los rotulos siguen en el HTML para quien use lector de pantalla. */
@media (max-width: 1259px) {
  .menu a span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .menu a {
    padding: 9px 11px;
  }

  .menu__icono {
    width: 18px;
    height: 18px;
  }
}

/*
 * Movil: logo y Salir en la primera fila, los iconos debajo a todo el ancho.
 * Antes eran tres filas y 172 px de cabecera en un movil de 390 px: casi un
 * cuarto de la pantalla.
 */
@media (max-width: 640px) {
  .cabecera {
    gap: 10px;
    padding: 10px 12px;
  }

  .rotulo img {
    height: 34px;
  }

  .salir {
    order: 2;
    margin-left: auto;
  }

  .menu {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    margin-right: 0;
  }

  .menu a {
    padding: 9px 8px;
  }
}

/* --- Estructura ----------------------------------------------------------- */

/*
 * El panel aprovecha el ancho del monitor.
 *
 * Antes estaba clavado a 1100 px y en una pantalla normal sobraba media
 * pantalla a cada lado mientras las tablas de precios y de reservas salian
 * apretadas. Aqui no se lee un articulo: se rellenan tablas, y cuantas mas
 * columnas se vean de una vez, menos hay que ir arriba y abajo.
 *
 * Los parrafos de texto SI se quedan estrechos (mas abajo): una linea de 200
 * caracteres no se lee, se adivina.
 */
.contenido {
  width: calc(100% - 48px);
  margin: 24px auto 64px;
}

/* El texto seguido, a medida de lectura aunque la pantalla sea enorme. */
.explica,
.campo small,
.tarjeta > p {
  max-width: 90ch;
}

h1 {
  margin: 0 0 4px;
  font-size: 26px;
}

h2 {
  margin: 32px 0 8px;
  font-size: 19px;
}

.explica {
  margin: 0 0 24px;
  color: var(--tinta-suave);
}

/*
 * Las tarjetas se levantan con una sombra suave en vez de con un borde gris.
 * El borde a 1 px dibujaba una reja: en una pantalla con seis tarjetas se veian
 * antes las lineas que el contenido.
 */
.tarjeta {
  padding: 22px;
  margin-bottom: 20px;
  background: var(--papel);
  border: 1px solid rgb(223 227 232 / 0.7);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* --- Avisos --------------------------------------------------------------- */

.aviso {
  padding: 12px 16px;
  margin: 0 0 20px;
  border-radius: var(--radio);
  border-left: 4px solid;
  white-space: pre-wrap;
  font-size: 15px;
}

.aviso--bien {
  border-color: var(--bien);
  background: #e8f5ec;
  color: #14532d;
}

.aviso--mal {
  border-color: var(--mal);
  background: #fdeceb;
  color: #7f1d1d;
}

/* --- Formularios ---------------------------------------------------------- */

.campo {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
}

.campo label {
  font-weight: 600;
  font-size: 14px;
}

.campo small {
  color: var(--tinta-suave);
  font-size: 13px;
}

/*
 * TODOS los campos con la misma pinta.
 *
 * `search`, `date` y `tel` faltaban en esta lista, y por eso los buscadores de
 * algunas pantallas se pintaban distintos de los de otras: cada uno acababa con
 * el estilo por defecto del navegador o con un apaño propio.
 */
input[type='text'],
input[type='search'],
input[type='date'],
input[type='tel'],
input[type='time'],
input[type='email'],
input[type='password'],
input[type='url'],
input[type='number'],
textarea,
select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  font: inherit;
}

textarea {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  resize: vertical;
}

/* --- Editor de textos ------------------------------------------------------ */

.editor {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  overflow: hidden;
}

.editor__barra {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px;
  background: #f7f8fa;
  border-bottom: 1px solid var(--linea);
}

.editor__barra button {
  min-width: 34px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--tinta);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}

.editor__barra button:hover {
  background: var(--papel);
  border-color: var(--linea);
  color: var(--tinta);
}

.editor__barra .negrita {
  font-weight: 800;
}

.editor__barra .cursiva {
  font-style: italic;
  font-family: Georgia, serif;
}

.editor__barra .sin-formato {
  text-decoration: line-through;
}

/* El area donde se escribe. Se parece a la web para que no haya sorpresas. */
.editor__area {
  min-height: 180px;
  max-height: 460px;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.6;
}

.editor__area:focus {
  outline: 2px solid var(--naranja);
  outline-offset: -2px;
}

.editor__area p {
  margin: 0 0 0.8em;
}

.editor__area a {
  color: var(--naranja-oscuro);
}

/* Los botones del contenido se ven como botones tambien mientras se editan. */
.editor__area a.btn {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--papel);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
}

.editor__codigo {
  border-top: 1px solid var(--linea);
  background: #fafbfc;
}

.editor__codigo summary {
  padding: 8px 14px;
  color: var(--tinta-suave);
  font-size: 13px;
  cursor: pointer;
}

.editor__codigo textarea {
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  background: #fafbfc;
}

/* --- La conversacion de un contacto ---------------------------------------- */

.charla {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}

.charla h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.charla ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

/* Lo suyo a la izquierda y lo nuestro a la derecha, como cualquier chat: de un
   vistazo se ve quien dijo que sin leer los nombres. */
.charla__linea {
  max-width: min(85%, 460px);
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--papel);
  border: 1px solid var(--linea);
}

.charla__linea--nuestro {
  margin-left: auto;
  background: color-mix(in srgb, var(--verde) 10%, white);
  border-color: color-mix(in srgb, var(--verde) 30%, var(--linea));
}

.charla__quien {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tinta-suave);
}

.charla__quien span {
  font-weight: 400;
}

.charla__aviso {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--mal);
}

.charla__texto {
  margin: 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --- Selector de imagen ---------------------------------------------------- */

.selector-imagen__actual {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}

.selector-imagen__actual .rotulo {
  color: var(--tinta-suave);
  font-size: 13px;
}

.selector-imagen__actual img {
  width: 92px;
  height: 66px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--fondo);
}

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

.calendario-movil[open] summary {
  margin-bottom: 10px;
}

.selector-imagen summary {
  padding: 8px 0;
  color: var(--naranja-oscuro);
  font-size: 14px;
  cursor: pointer;
}

button,
.boton {
  display: inline-block;
  padding: 10px 18px;
  border: 0;
  border-radius: var(--radio-chico);
  box-shadow: 0 1px 2px rgb(29 33 37 / 0.08);
  transition: background-color 0.12s, box-shadow 0.12s;
  background: var(--naranja);
  /*
   * Texto OSCURO sobre el naranja, no blanco.
   *
   * El blanco sobre este naranja da 2,5:1, que no llega ni de lejos al minimo
   * legible (4,5:1) y se notaba: los rotulos de los botones parecian
   * desvaidos. En oscuro son 6,5:1 sin tocar el color de la marca. La otra
   * salida era oscurecer el naranja hasta #b45c03, y eso si que cambiaba la
   * marca.
   */
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/*
 * Un icono dentro de un boton, si no se le dice el tamano, se estira hasta
 * ocupar el boton entero. Ya paso con las flechas de reordenar, que salian
 * como cuadrados naranjas; aqui salian dos sobres del tamano de un sello de
 * correos de verdad. El `display:inline-flex` es lo que pone el icono al lado
 * del texto y no encima.
 */
button:has(svg),
.boton:has(svg) {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

button > svg,
.boton > svg {
  width: 16px;
  height: 16px;
  flex: none;
}

button:hover,
.boton:hover {
  background: var(--naranja-oscuro);
  color: var(--tinta);
  box-shadow: 0 2px 6px rgb(217 119 6 / 0.30);
}

/*
 * Boton pequeno, para acciones que acompañan a una linea de texto: descargar
 * lo que se ve, copiar una lista. Antes eran enlaces subrayados en medio de una
 * frase y no parecian pulsables.
 */
.boton--mini,
button.boton--mini {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--papel);
  color: var(--tinta);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: none;
}

.boton--mini:hover,
button.boton--mini:hover {
  border-color: #b9b9b9;
  background: #fafbfc;
  color: var(--tinta);
  text-decoration: none;
  box-shadow: none;
}

.boton--mini.copiado {
  border-color: var(--verde);
  background: #eef7e0;
  color: #3d6b12;
}

.boton--mini > svg {
  width: 14px;
  height: 14px;
  flex: none;
}

button.secundario,
.boton.secundario {
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--tinta);
}

button.secundario:hover,
.boton.secundario:hover {
  background: #eceff2;
  color: var(--tinta);
}

/* Dos campos por linea cuando son cortos (codigo postal y poblacion, las
   redes): en una sola columna la pantalla queda medio vacia a la derecha. */
.campos-pareja {
  display: grid;
  gap: 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Las direcciones de las redes son largas: con columnas estrechas solo se ve
   "https://www.faceb..." y no sabes cual has pegado. */
.campos-pareja--anchos {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Un boton que se lee como un enlace: para acciones que no son "el" boton de
   la pantalla, como copiar una lista de correos. */
.enlace {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  color: var(--naranja-texto);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.enlace:hover {
  box-shadow: none;
  background: none;
  color: var(--naranja-texto);
}

.enlace.copiado {
  color: #3d6b12;
  text-decoration: none;
}

/* Las flechas de ordenar, a la derecha de cada pagina del menu. */
.lista__orden {
  display: flex;
  gap: 4px;
  align-items: center;
  padding-right: 12px;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}

/* --- Listas y tablas ------------------------------------------------------ */

.lista {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

@media (width >= 48rem) {
  .lista {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

.lista a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  color: var(--tinta);
  text-decoration: none;
}

.lista a:hover {
  border-color: var(--naranja);
}

.lista img {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--fondo);
  flex: none;
}

.lista .sub {
  display: block;
  color: var(--tinta-suave);
  font-size: 13px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
}

/*
 * Una tabla ancha se desplaza dentro de su caja, no arrastra la pagina entera.
 *
 * Las de reservas (1172 px) y contactos (1024 px) no caben en una tableta, y
 * ninguna cabe en un movil: sin esto la pagina entera se movia de lado y la barra
 * de arriba se iba con ella. Cada tabla va envuelta en su `.tabla`.
 *
 * `position: relative` no sobra. Un contenedor con scroll NO recorta lo que va en
 * posicion absoluta respecto a algo de fuera de el, y las cabeceras llevan textos
 * ocultos para lectores de pantalla (`.visualmente-oculto`, en posicion absoluta).
 * Sin esto, esos textos, colocados al final de las columnas anchas, seguian
 * estirando la pagina: reservas media 988 px en una pantalla de 768.
 */
.tabla {
  position: relative;
  overflow-x: auto;
}

/* Se ilumina la fila entera al pasar por encima: en una tabla ancha, seguir
   la linea con la vista de la referencia hasta los botones es incomodo. */
tbody tr {
  transition: background-color 0.12s;
}

tbody tr:hover {
  background: #fafbfc;
}

th,
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: middle;
}

th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tinta-suave);
}

td input[type='text'] {
  padding: 6px 8px;
}

/* --- Idiomas -------------------------------------------------------------- */

.idiomas {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.idiomas a {
  padding: 5px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta-suave);
  font-size: 14px;
  text-decoration: none;
}

.idiomas a[aria-current] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

/* --- Entrada -------------------------------------------------------------- */

.entrar {
  width: min(100% - 32px, 380px);
  margin: 12vh auto;
}

.entrar h1 {
  margin-bottom: 20px;
  text-align: center;
}

/* El texto que explica a donde ha ido el codigo, encima del campo. */
.entrar .ayuda {
  margin: 0 0 16px;
  color: var(--tinta-suave);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* El codigo, grande y separado: se copia de un correo mirando el movil. Es
   lo que se ve si no hay JavaScript; con el, los cuadros de abajo. */
.entrar input[name='codigo'] {
  font-size: 1.6rem;
  letter-spacing: 0.35em;
  text-align: center;
}

/*
 * Cada cifra en su cuadro (panel.js). La casilla de verdad va ENCIMA de los
 * cuadros, transparente: es la que recibe el dedo, el teclado y el pegar.
 */
.codigo-cajas {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.codigo-cajas__hueco {
  display: grid;
  place-items: center;
  height: 56px;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio-chico);
  background: var(--papel);
  color: var(--tinta);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.codigo-cajas__hueco--activo {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgb(243 137 15 / 0.25);
}

.entrar .codigo-cajas input[name='codigo'] {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  /* 16 px como minimo: con menos, el iPhone hace zoom al tocar la casilla. */
  font-size: 16px;
  letter-spacing: 0;
}

.codigo-cajas input[name='codigo']::selection {
  background: transparent;
}

.codigo-cajas input[name='codigo']:focus-visible {
  outline: none;
}

.campo--casilla label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.4;
}

.campo--casilla input {
  width: auto;
  margin-top: 2px;
}

.reenviar {
  margin-top: 14px;
  text-align: center;
}

/* --- Selector de imagen --------------------------------------------------- */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}

.galeria label {
  display: block;
  cursor: pointer;
}

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid transparent;
  border-radius: var(--radio);
}

.galeria input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.galeria input:checked + img {
  border-color: var(--naranja);
}

.galeria span {
  display: block;
  font-size: 11px;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}

/* Texto que viene del contenido, en la vista previa. */
.texto-cms :is(h1, h2, h3, h4) {
  font-size: 1.15em;
  margin: 0.6em 0 0.3em;
}

/* --- Traduccion ------------------------------------------------------------ */

/*
 * Los tres botones de traducir, en la pestaña de castellano.
 *
 * Cada uno es su propio formulario (un POST distinto), asi que la fila es un
 * flex de formularios y no de botones. Por eso `.traducir-a form` no lleva
 * margen: si no, se separarian entre si mas que el resto.
 */
.traducir-a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}

.traducir-a form {
  margin: 0;
}

.traducir-a__rotulo {
  font-weight: 600;
}

.traducir-a small {
  flex: 1 1 100%;
  color: var(--tinta-suave);
  font-size: 13px;
}

/* La vista previa: original y traduccion uno al lado del otro. */
.traduccion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--linea);
}

.traduccion:first-of-type {
  border-top: 0;
}

.traduccion__rotulo {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
}

/*
 * El original va apagado y sobre fondo gris: es de solo lectura y no debe
 * competir con el campo de al lado, que es el que se toca.
 */
.traduccion__texto {
  padding: 10px 12px;
  border-radius: var(--radio-chico);
  background: var(--fondo);
  color: var(--tinta-suave);
  font-size: 14px;
}

.traduccion__texto :first-child { margin-top: 0; }
.traduccion__texto :last-child { margin-bottom: 0; }

.traduccion .campo,
.traduccion .campo--largo {
  margin: 0;
}

/* En pantalla estrecha, la traduccion debajo del original. */
@media (max-width: 860px) {
  .traduccion {
    grid-template-columns: 1fr;
  }
}

.traduir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}

.traduir small {
  flex: 1;
  min-width: 240px;
  color: var(--tinta-suave);
  font-size: 13px;
}

.explica.nota {
  padding: 10px 14px;
  border-left: 3px solid var(--linea);
  background: var(--papel);
  border-radius: var(--radio);
  font-size: 14px;
}

/* Descripcio sota el nom del producte, a la pantalla d'aniversaris. */
tr.producto td textarea {
  width: 100%;
  margin-top: 0.35rem;
  font: inherit;
  font-size: 0.85rem;
  resize: vertical;
}

.norma + .norma {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e4e4e4;
}

/* Los avisos de la portada: lo primero que se ve al entrar. */
.tarjeta--avisos {
  border-left: 4px solid #f3890f;
  background: #fff8ef;
}

.tarjeta--avisos h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.tarjeta--avisos ul {
  margin: 0;
  padding-left: 1.2rem;
}

.tarjeta--avisos li + li {
  margin-top: 0.4rem;
}

/* --- Horarios del parque ------------------------------------------------- */

.tabla-horario .horario-franja {
  white-space: nowrap;
}

.tabla-horario input[type='time'] {
  width: auto;
}

.nota-horario {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
}

.nota-horario textarea {
  width: 100%;
}

/* --- Pestanas de una pantalla larga -------------------------------------- *
 *
 * La de cumpleanos tenia 176 campos en seis metros de scroll. Repartida en
 * cuatro pestanas, cada una cabe en pantalla y se guarda sola.
 */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 16px 0 24px;
  border-bottom: 2px solid #e4e4e4;
}

.pestanas a {
  padding: 10px 18px;
  text-decoration: none;
  color: var(--tinta);
  font-weight: 700;
  border-radius: 8px 8px 0 0;
  border: 2px solid transparent;
  border-bottom: 0;
  margin-bottom: -2px;
}

.pestanas a:hover {
  background: #f0f0f0;
}

.pestanas a[aria-current='page'] {
  background: #fff;
  border-color: #e4e4e4;
  color: var(--naranja-oscuro, #d97706);
}

/* Mientras se guarda: el formulario se apaga un poco y el cursor lo dice. */
.esta-guardando {
  opacity: 0.6;
  pointer-events: none;
  cursor: progress;
}

.esta-guardando button[disabled] {
  cursor: progress;
}

/* Buscador de la lista de paginas. */
/* El buscador de paginas usa la misma barra que los filtros del resto; aqui
   solo queda donde poner el contador de resultados. */


.cuantas {
  align-self: end;
  padding-bottom: 10px;
  color: var(--tinta-suave);
  font-size: 14px;
}

.lista li[hidden] {
  display: none;
}

/* Etiqueta que solo leen los lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Fichas de recuento por estado, arriba de las reservas --------------- */
.fichas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 20px;
  padding: 0;
}

.fichas a {
  display: block;
  min-width: 150px;
  padding: 12px 18px;
  background: #fff;
  border: 2px solid #e4e4e4;
  border-radius: 12px;
  text-decoration: none;
  color: var(--tinta);
}

.fichas a:hover {
  border-color: #c9c9c9;
}

.fichas a[aria-current='page'] {
  border-color: var(--naranja);
  box-shadow: 0 0 0 3px rgb(243 137 15 / 15%);
}

.fichas__numero {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
}

.fichas__que {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #5c5c5c;
}

.fichas__que svg,
.chip svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* --- Estados: color e icono, nunca solo color ---------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 800px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.chip--pagada { background: #e7f4d9; color: #3d6b12; }
.chip--pendiente { background: #fdf0d8; color: #8a5a05; }
.chip--anulada { background: #fbe3e3; color: #852b2b; }
.chip--devuelta { background: #e6eef7; color: #1f4c78; }

.ficha--pagada .fichas__numero { color: #3d6b12; }
.ficha--pendiente .fichas__numero { color: #8a5a05; }
.ficha--anulada .fichas__numero { color: #852b2b; }
.ficha--devuelta .fichas__numero { color: #1f4c78; }

/* Una fila anulada no tiene que gritar: se apaga y ya. */
/*
 * Una franja de color a la izquierda de cada fila, del mismo color que su
 * etiqueta de estado.
 *
 * Es para leer la lista de un vistazo sin ir chip a chip: en una tabla de 500
 * reservas lo que se busca es "cuales estan pendientes", y el color lo dice
 * antes que el texto. La etiqueta se queda igualmente, porque el color solo no
 * vale para quien no los distingue.
 */
.fila td:first-child { border-left: 4px solid transparent; }
.fila--pendiente td:first-child { border-left-color: #e0a327; }
.fila--pagada td:first-child { border-left-color: #7fb828; }
.fila--anulada td:first-child { border-left-color: #c98a8a; }
.fila--devuelta td:first-child { border-left-color: #6b93bf; }
.fila--nuevo td:first-child { border-left-color: #e0a327; }
.fila--contestado td:first-child { border-left-color: #7fb828; }
.fila--cerrado td:first-child { border-left-color: #c2c2c2; }

/* Las anuladas, ademas, apagadas: siguen ahi pero no compiten por la vista. */
.fila--anulada { opacity: 0.55; }

.apagado { color: #9a9a9a; }

.etiqueta {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 800px;
  background: #ececec;
  color: #5c5c5c;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.col-acciones { width: 1%; white-space: nowrap; }
.col-fecha { white-space: nowrap; }

/* Vale para <a> y para <button>: sin `background` y `font` explicitos, un
   boton se lleva el estilo del boton principal y sale naranja. Paso. */
/*
 * Vale para <a> y para <button>.
 *
 * `padding: 0` no sobra: un <button> se lleva el relleno del boton general
 * (9px 18px), y con 36 px de relleno dentro de una caja de 32 el icono se
 * encogia a CERO pixeles de ancho. Se veia como un cuadrado naranja vacio, y
 * solo se entendio midiendo el svg en el navegador.
 */
.icono {
  font: inherit;
  padding: 0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #5c5c5c;
  border: 1px solid #e4e4e4;
}

.icono svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.icono:hover {
  background: #f4f4f4;
  color: var(--tinta);
}

/* El idioma de la reserva, en letras. */
.idioma-etiqueta {
  display: inline-block;
  min-width: 30px;
  padding: 2px 6px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #5c5c5c;
}

/* Los filtros, en una fila: ocupaban media pantalla en vertical. */
/*
 * La barra de filtros y buscadores. La misma en Reservas, Contactos, Paginas y
 * en el alta de atracciones: antes cada pantalla tenia la suya.
 */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px;
  align-items: end;
}

.filtros .campo {
  margin: 0;
}

.filtros .campo {
  margin: 0;
}

.filtros .acciones {
  display: flex;
  gap: 8px;
  margin: 0;
  grid-column: 1 / -1;
}

@media (min-width: 1100px) {
  .filtros .acciones {
    grid-column: auto;
  }
}

/* --- Ficha de una reserva ------------------------------------------------ *
 *
 * Antes era una columna de dos metros y medio con las fichas de datos sin
 * estilo (las etiquetas y los valores caian uno debajo del otro, con sangria).
 * Ahora la informacion va en tres columnas y lo primero que se ve es con quien
 * hay que hablar y por cuanto.
 */
/*
 * El "volver" va DENTRO de la cabecera, no suelto encima.
 *
 * Antes era un enlace huerfano en la primera linea de la pagina: empujaba el
 * titulo hacia abajo y no se parecia a nada de lo que hay alrededor. Ahora es
 * un boton a la izquierda del titulo, a la misma altura, que es donde lo busca
 * la mano.
 */
.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 20px;
}

.ficha-cabecera__texto {
  margin-right: auto;
}

.volver {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fff;
  color: #5c5c5c;
  text-decoration: none;
}

.volver svg {
  width: 18px;
  height: 18px;
}

.volver:hover {
  border-color: #b9b9b9;
  background: #fafafa;
  color: var(--tinta);
}

.ficha-cabecera h1 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.ficha-resumen {
  margin: 6px 0 0;
  color: #5c5c5c;
}

/* Las acciones de contacto: lo que mas se usa, arriba y a mano. */
.acciones-rapidas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.accion {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/*
 * El color hay que repetirlo aqui SI O SI.
 *
 * `button:hover` pone el texto en blanco (es el naranja de los botones
 * normales). Como `.accion:hover` no decia nada del color, en los `.accion`
 * que son <button> ganaba el blanco y el texto desaparecia sobre este fondo
 * casi blanco. La especificidad se mira propiedad a propiedad: no basta con
 * que esta regla sea mas fuerte, tiene que declarar la propiedad.
 */
.accion:hover {
  border-color: #b9b9b9;
  background: #fafafa;
  color: var(--tinta);
}

.accion svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* WhatsApp con su verde: es el boton que mas se va a usar. */
.accion--whatsapp {
  background: #25d366;
  border-color: #1eb658;
  color: #06331a;
}

.accion--whatsapp:hover {
  background: #1eb658;
  border-color: #189a4a;
}

/* En los listados el boton es solo el icono: no se le puede poner "Copiado"
   sin estirar la columna, asi que el aviso es el color. */
.icono.copiado {
  border-color: #7fb828;
  background: #eef7e0;
  color: #3d6b12;
}

.accion.copiado {
  border-color: #7fb828;
  background: #eef7e0;
}

.rejilla-ficha {
  display: grid;
  gap: 20px;
  /* `min(…, 100%)`: la columna nunca pide mas ancho del que hay. Con un minimo fijo,
     en un movil la ficha de la reserva se salia de la pantalla. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  margin-bottom: 20px;
  align-items: start;
}

.rejilla-ficha--dos {
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
}

/* Etiqueta y valor en dos columnas, que es como se lee una ficha. */
.datos {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 6px 16px;
  margin: 0;
}

.datos dt {
  color: #6b6b6b;
  font-size: 13px;
}

.datos dd {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.compacta td,
.compacta th {
  padding: 6px 8px;
}

.compacta tfoot .destacada td,
.compacta tfoot .destacada th {
  font-size: 16px;
  font-weight: 700;
}

.historia {
  list-style: none;
  margin: 0;
  padding: 0;
}

.historia li {
  padding: 8px 0;
  border-bottom: 1px dashed #e4e4e4;
}

.historia li:last-child { border-bottom: 0; }

.historia time {
  color: #6b6b6b;
  font-variant-numeric: tabular-nums;
  margin-right: 10px;
}

.historia small {
  color: #9a9a9a;
  margin-left: 8px;
}

/* Los botones de contacto dentro de una fila de tabla. */
.botonera {
  display: flex;
  gap: 6px;
}

.botonera .icono {
  width: 30px;
  height: 30px;
}

/* WhatsApp mantiene su verde tambien en pequeno: se busca por el color. */
.icono--whatsapp {
  color: #128c3e;
  border-color: #b6e6c8;
  background: #eefaf2;
}

.icono--whatsapp:hover {
  background: #dcf5e6;
  color: #0b6b2e;
}

/* Iconos dentro de los titulos de seccion y de las cabeceras de tabla. */
h2 svg,
thead th svg {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 6px;
  opacity: 0.7;
}

/* --- Atracciones: una tarjeta por cada una ------------------------------- *
 *
 * Antes era una tabla de nueve columnas y cinco mil pixeles de alto: al bajar
 * desaparecia la fila de cabecera y ya no se sabia que era cada casilla. Aqui
 * cada campo lleva su rotulo al lado, asi que da igual por donde vayas.
 */
.atracciones {
  display: grid;
  gap: 16px;
}

.atraccion {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 14px;
  padding: 16px 18px;
}

.atraccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.atraccion__foto img {
  display: block;
  width: 96px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  background: #f0f0f0;
}

.atraccion__nombre {
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.atraccion__nombre strong {
  font-size: 17px;
}

.atraccion__nombre a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  width: fit-content;
}

.atraccion__nombre a svg {
  width: 13px;
  height: 13px;
}

.atraccion__orden {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* El rotulo de cada cosa: pequeno, gris y SIEMPRE al lado de su campo. */
.rotulo {
  display: block;
  font-size: 12px;
  color: #6b6b6b;
  margin-bottom: 2px;
}

.atraccion__orden .rotulo {
  margin: 0 4px 0 0;
}

.atraccion__ajustes {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 22px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e4e4e4;
}

.atraccion .campo {
  margin: 0;
  min-width: 150px;
}

.atraccion .campo--ancho {
  flex: 1 1 320px;
}

.atraccion .campo input,
.atraccion .campo select {
  width: 100%;
  font: inherit;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

/* Una casilla con su texto: se pulsa el texto entero, no solo el cuadradito. */
.marca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.marca svg {
  width: 15px;
  height: 15px;
  opacity: 0.6;
}

.precios {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #e4e4e4;
}

.precios > .rotulo {
  font-weight: 700;
  color: #4a4a4a;
  margin-bottom: 8px;
}

.precio {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fafafa;
}

.precio + .precio {
  margin-top: 8px;
}

.precio__nombre {
  flex: 1 1 190px;
  font-weight: 700;
  align-self: center;
}

.atraccion--sueltos {
  display: grid;
  gap: 8px;
}

/* --- Menos aire: la pantalla se hacia interminable --------------------- */
.atraccion {
  padding: 12px 14px;
}

.atraccion__ajustes {
  margin-top: 10px;
  padding-top: 10px;
  gap: 8px 18px;
}

.precios {
  margin-top: 10px;
  padding-top: 10px;
}

.precio {
  padding: 8px 10px;
  gap: 8px 14px;
}

.precio + .precio {
  margin-top: 6px;
}

/* Anadir precio: plegado, para no alargar la pantalla por 26 atracciones. */
.precio--nuevo {
  margin-top: 8px;
}

.precio--nuevo summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #6b6b6b;
  padding: 4px 0;
}

.precio--nuevo summary svg {
  width: 13px;
  height: 13px;
}

.precio--nuevo summary:hover {
  color: var(--tinta);
}

.precio--nuevo .precio {
  background: transparent;
  border: 1px dashed #d6d6d6;
}

/* Los editores de texto vacios ocupaban una pantalla cada uno. */
.editor__area {
  min-height: 90px;
}

.campo--largo + .campo--largo {
  margin-top: 10px;
}

/* El precio unico va en la misma linea que lo demas: sin borde ni fondo. */
.atraccion__ajustes .campo {
  min-width: 120px;
}

/* El mensaje de un contacto: se lee como un mensaje, no como un campo. */
.mensaje {
  background: #fafafa;
  border-left: 3px solid #e0e0e0;
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin: 12px 0 0;
  line-height: 1.6;
  white-space: pre-wrap;
}

.tarjeta--traduccion {
  margin-top: 14px;
  border: 1px dashed #d6d6d6;
  background: #fdfbf7;
}

.tarjeta--traduccion .mensaje {
  background: transparent;
  border-left-color: var(--naranja);
}

/* --- Asistente para crear una ficha ---------------------------------------- */

.asistente {
  width: min(760px, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}

/*
 * La vista previa de una traduccion va mas ancha: lleva dos columnas (el
 * original y la traduccion) donde el asistente de fichas lleva una. Tiene que
 * ir DESPUES de `.asistente`: las dos son una clase, asi que gana la ultima.
 */
.asistente--ancho {
  width: min(1100px, 96vw);
}

.asistente::backdrop {
  background: rgb(29 33 37 / 0.55);
}

.asistente form {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}

.asistente__cabecera {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--linea);
}

.asistente__cabecera h2 {
  margin: 0;
  font-size: 18px;
}

/*
 * `min-height: 0` no sobra: un hijo de flex no baja de su tamaño de contenido
 * aunque le pongas `overflow`, asi que sin esto la seccion crecia y se salia
 * del dialogo en vez de hacer scroll dentro.
 */
.asistente section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 22px 22px;
}

/* Los botones se quedan abajo mientras el contenido pasa por debajo. */
.asistente__acciones {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--linea);
  background: var(--papel);
}

/* De qué paso vamos: sin esto no se sabe si queda algo detrás. */
.asistente__paso {
  margin: 0 0 4px;
  color: var(--naranja-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* La galeria de varias: casillas en vez de radios, y mas apretada. */
.galeria--varias {
  max-height: 260px;
  overflow-y: auto;
}

/*
 * Titulo de pantalla con su boton de crear a la derecha.
 *
 * `align-items: baseline` no vale: el boton tiene su propio relleno y con la
 * linea base se sube. Se centran entre si.
 */
.titulo-accion {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.titulo-accion h1 {
  margin: 0;
}

/*
 * Borrar.
 *
 * En rojo y apartado del resto, al final de la pantalla: es la unica accion del
 * panel que no se arregla volviendo a escribir el campo. El boton NO es del
 * color de guardar a proposito, para que no se pulse por inercia.
 */
.tarjeta--peligro {
  border-color: color-mix(in srgb, var(--mal) 35%, var(--linea));
}

.tarjeta--peligro h2 {
  color: var(--mal);
}

button.peligro {
  background: var(--mal);
  border-color: var(--mal);
  color: var(--papel);
}

button.peligro:hover {
  background: color-mix(in srgb, var(--mal) 85%, black);
  color: var(--papel);
}