/*
  Sistema de diseño de GestionSocios (Casino d'Argentona).
  Inspirado en el logo del club (monograma "AC" en azul marino) y en el
  tono de www.casinoargentona.com: clásico, cálido, corporativo, sin
  estridencias. Pensado para pantallas con muchas tablas y formularios,
  así que prioriza la legibilidad sobre la decoración.
*/

:root {
  --azul-marino: #134375;
  --azul-marino-oscuro: #0d3159;
  --azul-marino-claro: #e8eef5;
  --dorado: #a9832b;
  --gris-texto: #2b2f36;
  --gris-suave: #6b7280;
  --gris-borde: #dde3ea;
  --gris-fondo: #f6f8fa;
  --blanco: #ffffff;
  --rojo-baja: #b3352b;
  --verde-alta: #2f7a4f;
  --radio: 8px;
  --sombra: 0 1px 3px rgba(19, 67, 117, 0.12), 0 1px 2px rgba(19, 67, 117, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--gris-fondo);
  color: var(--gris-texto);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3, h4 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  color: var(--azul-marino-oscuro);
  margin: 0 0 0.5em 0;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--azul-marino); }
a:hover { color: var(--azul-marino-oscuro); }

/* --- Cabecera --- */
.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Relleno lateral más pequeño en pantallas estrechas: en un móvil, tres rem
     de aire a los lados son casi un quinto de la pantalla. */
  padding: 0.6rem clamp(0.75rem, 4vw, 1.5rem);
  box-shadow: var(--sombra);
  /* 15 sep 2026: la cabecera se salía del móvil —estaba anotado desde la
     entrega 4— y al meterle el conmutador «Personal / Socio» se salía justo el
     control que hay que poder tocar. Ahora baja de línea en vez de desbordar. */
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cabecera .marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}

.cabecera .marca img { height: 40px; width: auto; }

.cabecera .marca .nombre-club {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 600;
  color: var(--azul-marino-oscuro);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.cabecera .usuario-actual {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.88rem;
  color: var(--gris-suave);
  flex-wrap: wrap;
  justify-content: flex-end;
  /* Que sea el bloque de la derecha el que se encoja, y no el logo. */
  min-width: 0;
}

.cabecera .marca img { max-width: 100%; }

.cabecera .usuario-actual form { margin: 0; }

.cabecera .usuario-actual button.enlace,
a.enlace-simple {
  background: none;
  border: none;
  color: var(--gris-suave);
  cursor: pointer;
  font-size: 0.88rem;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}

/* --- Conmutador «Personal / Socio» (15 sep 2026) ---
   Quien gestiona el club y además es socio puede mirar la aplicación de las
   dos formas sin cerrar sesión. Se dibuja como un interruptor de dos
   posiciones —y no como un enlace de «cambiar a...»— porque lo que importa no
   es la acción, es SABER EN CUÁL ESTÁS: la aplicación entera cambia de
   comportamiento según eso, y equivocarse es hacer algo creyendo que lo hacías
   desde el otro lado. */
.selector-modo {
  display: inline-flex;
  margin: 0;
  border: 1px solid var(--gris-borde);
  border-radius: 999px;
  overflow: hidden;
  background: var(--blanco);
}

.selector-modo-boton {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gris-suave);
  padding: 0.3rem 0.75rem;
  line-height: 1.4;
}

.selector-modo-boton:hover { background: var(--azul-marino-claro); }

.selector-modo-boton.activo {
  background: var(--azul-marino);
  color: var(--blanco);
  cursor: default;
}

.selector-modo-boton.activo:hover { background: var(--azul-marino); }

/* --- Selector de idioma (banderitas) --- */
.selector-idioma {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.selector-idioma-form { margin: 0; display: inline-flex; }

.selector-idioma-boton {
  background: none;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 1px;
  cursor: pointer;
  line-height: 0;
  opacity: 0.55;
  transition: opacity 0.15s, border-color 0.15s;
}

.selector-idioma-boton:hover { opacity: 0.85; }

.selector-idioma-boton.activo {
  opacity: 1;
  border-color: var(--azul-marino-oscuro, #1c3d5a);
}

.selector-idioma-boton svg { display: block; border-radius: 2px; }

.selector-idioma-flotante {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 20;
}

/* --- Estructura de dos columnas: menú lateral + contenido --- */
.diseno-app {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 64px);
}

.barra-lateral {
  flex: 0 0 56px;
  width: 56px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: calc(100vh - var(--alto-cabecera, 64px));
  /* 100dvh (11 sep 2026): en móvil, 100vh no cuenta con que la barra de
     direcciones del navegador aparece/desaparece al hacer scroll, lo que
     hacía que el menú se desanclara en páginas cortas como "Inicio" --
     100dvh sigue el alto real visible en cada momento. Los navegadores
     que no lo soportan se quedan con el 100vh de arriba. */
  /* Menos la cabecera (15 sep 2026). Antes era el alto entero de la ventana, y
     como el menú empieza DEBAJO de la cabecera, su parte de abajo caía fuera de
     la pantalla. Daba igual mientras no hubiera nada ahí; con «Solicitudes de
     Alta» anclada al fondo, era una sección invisible hasta hacer scroll. Los
     alto real de la cabecera lo mide el navegador y lo deja en
     `--alto-cabecera` (ver base.html): en el móvil la cabecera baja de línea y
     pasa de 64 a casi 170px, así que darlo por fijo volvería a dejar el pie
     fuera de la pantalla justo donde más molesta. Los 64px son el valor de
     reserva si no hay JavaScript. */
  height: calc(100dvh - var(--alto-cabecera, 64px));
  /* z-index (11 sep 2026): position:sticky crea su propio contexto de
     apilamiento -- sin esto, el z-index:30 de .bl-panel (más abajo) solo
     se compara consigo mismo, y el menú desplegado quedaba por DEBAJO de
     tablas y otro contenido de la página al pasar el ratón por encima. */
  z-index: 30;
  /* 11 sep 2026, a petición de Alberto: el ancho del propio <nav> (no solo
     el de .bl-panel dentro) tiene que crecer al expandir el menú -- así el
     hueco que reserva en el flex de .diseno-app crece con él, y
     .contenedor-app (flex:1 1 auto) se estrecha en vez de quedar tapado
     por el menú expandido superpuesto encima. */
  transition: flex-basis 0.15s ease, width 0.15s ease;
}

.barra-lateral.fijada {
  flex-basis: 218px;
  width: 218px;
}

/* Abrir el menú al pasar el ratón, SOLO donde hay ratón (15 sep 2026, a
   petición de Alberto).

   En un móvil no hay «pasar por encima»: al tocar el menú, Safari y Chrome
   simulan un :hover que se queda PEGADO hasta que tocas en otro sitio. El
   resultado era que el menú se abría solo, el botón de colapsar no parecía
   hacer nada —la clase se quitaba, pero el :hover pegado lo mantenía abierto—
   y la única forma de cerrarlo era tocar el logo del club, que es tocar «en
   otro sitio».

   Con esto, en pantalla táctil el menú lo abre y lo cierra el botón, y solo el
   botón. `.fijada` se queda fuera del media query a propósito: es lo que hace
   que ese botón siga funcionando en el móvil. */
@media (hover: hover) and (pointer: fine) {
  .barra-lateral:hover {
    flex-basis: 218px;
    width: 218px;
  }
}

.barra-lateral .bl-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: var(--blanco);
  border-right: 1px solid var(--gris-borde);
  overflow: hidden;
  white-space: nowrap;
  z-index: 30;
  display: flex;
  flex-direction: column;
  padding: 0.6rem 0;
}

.barra-lateral.fijada .bl-panel {
  box-shadow: var(--sombra);
}

@media (hover: hover) and (pointer: fine) {
  .barra-lateral:hover .bl-panel { box-shadow: var(--sombra); }
}

.bl-toggle {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gris-suave);
  padding: 0.55rem 1rem 0.9rem;
  font-family: inherit;
  font-size: 0.85rem;
}

.bl-toggle svg { flex: 0 0 auto; }

.barra-lateral.fijada .bl-toggle { color: var(--azul-marino); }

.bl-enlace {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--gris-texto);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.6rem 1rem;
  border-left: 3px solid transparent;
}

.bl-enlace .bl-icono { flex: 0 0 auto; }

.bl-enlace:hover {
  background: var(--azul-marino-claro);
  color: var(--azul-marino);
}

.bl-enlace.activo {
  background: var(--azul-marino-claro);
  color: var(--azul-marino);
  border-left-color: var(--dorado);
}

.bl-texto {
  opacity: 0;
  transition: opacity 0.1s ease;
}

.barra-lateral.fijada .bl-texto {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .barra-lateral:hover .bl-texto { opacity: 1; }
}

/* --- El pie del menú lateral: «Solicitudes de Alta» y su aviso ---
   (15 sep 2026, a petición de Alberto.)

   `margin-top:auto` dentro del .bl-panel, que es un flex en columna: empuja
   este bloque al fondo, quede el menú largo o corto. La raya de arriba lo
   separa del resto porque no es una sección más, es una bandeja de entrada. */
.bl-pie {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--gris-borde);
}

/* El icono lleva el punto encima, así que necesita ser su propio marco. */
.bl-icono-aviso {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}

/* El punto: se ve con el menú COLAPSADO, que es como vive el menú casi
   siempre. Sin él, el aviso solo existiría para quien ya ha abierto el menú,
   que es justo quien no lo necesita. */
.bl-punto {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c2410c;
  border: 1.5px solid var(--blanco);
}

/* Y el número, para cuando el menú está abierto: dice cuántas son, que es la
   diferencia entre «hay algo» y «hay catorce». */
.bl-aviso {
  margin-left: auto;
  background: #c2410c;
  color: var(--blanco);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.barra-lateral.fijada .bl-aviso { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .barra-lateral:hover .bl-aviso { opacity: 1; }
}

.contenedor-app {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Contenedor principal --- */
.contenedor {
  max-width: 1500px;
  margin: 0 auto;
  padding: 2rem 1.75rem 3rem;
}

/* --- Tarjetas --- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* --- Estadísticas del panel principal --- */
.fila-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--azul-marino);
  border-radius: var(--radio);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--sombra);
}

.stat .valor {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--azul-marino-oscuro);
  line-height: 1;
}

.stat .etiqueta {
  color: var(--gris-suave);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

/* --- Accesos directos --- */
.accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.acceso {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  padding: 1.3rem;
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.acceso:hover {
  border-color: var(--azul-marino);
  transform: translateY(-1px);
}

.acceso .titulo {
  font-weight: 600;
  color: var(--azul-marino-oscuro);
  margin-bottom: 0.25rem;
  display: block;
}

.acceso .descripcion {
  color: var(--gris-suave);
  font-size: 0.85rem;
}

/* --- Tablas --- */
table.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
}

table.tabla-datos th {
  text-align: left;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gris-suave);
  border-bottom: 2px solid var(--gris-borde);
  padding: 0.6rem 0.8rem;
}

table.tabla-datos td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--gris-borde);
  font-size: 0.92rem;
}

table.tabla-datos tbody tr:hover { background: var(--azul-marino-claro); }

/* --- Insignias de estado --- */
.insignia {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.insignia.alta { background: #e6f4ea; color: var(--verde-alta); }
.insignia.baja { background: #fbe9e7; color: var(--rojo-baja); }
.insignia.info { background: var(--azul-marino-claro); color: var(--azul-marino-oscuro); }

/* --- Tarjeta de aviso (checklist Holded, 11 sep 2026) --- */
.tarjeta-aviso {
  background: #fff8ec;
  border: 1px solid #eecb8c;
  border-left: 4px solid #b3781f;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.tarjeta-aviso h2 { margin-top: 0; color: #8a5300; }
.tarjeta-aviso ol { padding-left: 1.25rem; font-size: 0.9rem; margin-bottom: 0; }
.tarjeta-aviso li { margin-bottom: 0.5rem; }
.tarjeta-aviso li:last-child { margin-bottom: 0; }

/* --- Formularios --- */
label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gris-texto);
  margin-bottom: 0.3rem;
}

input[type="text"], input[type="password"], input[type="email"],
input[type="date"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--gris-texto);
  background: var(--blanco);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--azul-marino);
  box-shadow: 0 0 0 3px rgba(19, 67, 117, 0.12);
}

.campo { margin-bottom: 1rem; }

/* --- Rejilla de 2 columnas para fichas (datos de socio, familia, etc.) ---
   11 sep 2026, a petición de Alberto: en móvil se veía muy apretado con
   las dos columnas fijas, así que por debajo de 640px pasa a 1 sola
   columna. */
.rejilla-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.5rem;
}

@media (max-width: 640px) {
  .rejilla-2col {
    grid-template-columns: 1fr;
  }

  /* 17/09/2026. Las tablas anchas arrastraban la PÁGINA ENTERA a lo lado en el
     móvil: para leer una columna de la derecha había que mover también la
     cabecera y el menú. Los Logs medían 849 píxeles en una pantalla de 390, y
     Operadores 622.

     Con `display: block` la tabla se desplaza DENTRO de su caja y la página se
     queda quieta. El ancho mínimo va en las CELDAS y no en la tabla: puesto en
     la tabla la ensancharía a ella, y entonces la que vuelve a arrastrarse es
     la página. Sin ese mínimo, las columnas se encogen tanto que «Acceso a la
     gestión del club» sale en cuatro líneas.

     Las tablas PERSONALIZABLES quedan fuera a propósito: esas ya resuelven lo
     suyo truncando con «…» y con el selector de columnas, y meterles un
     desplazamiento cambiaría una decisión que ya está tomada. */
  table.tabla-datos:not([data-tabla-personalizable]) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table.tabla-datos:not([data-tabla-personalizable]) th,
  table.tabla-datos:not([data-tabla-personalizable]) td {
    min-width: 5.5rem;
  }
}

/* El nombre completo, como título de una ficha de socio. Del tamaño de un h2
   pero sin serlo: dentro de la tarjeta ya hay jerarquía de sobra y un h2 más
   por cada familiar ensuciaría el esquema de la página. */
.ficha-nombre {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--azul-marino-oscuro);
}

.campo-solo-lectura {
  margin: 0;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--gris-texto);
}

/* --- Botones --- */
.boton {
  display: inline-block;
  background: var(--azul-marino);
  color: var(--blanco);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.boton:hover { background: var(--azul-marino-oscuro); color: var(--blanco); }

.boton.secundario {
  background: var(--blanco);
  color: var(--azul-marino);
  border: 1px solid var(--azul-marino);
}
.boton.secundario:hover { background: var(--azul-marino-claro); }

.boton.peligro {
  background: var(--blanco);
  color: var(--rojo-baja);
  border: 1px solid var(--rojo-baja);
}
.boton.peligro:hover { background: var(--rojo-baja); color: var(--blanco); }

.boton.pequeno { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  background: var(--blanco);
  color: var(--gris-suave);
  cursor: pointer;
  vertical-align: middle;
}
.boton-icono:hover { background: var(--azul-marino-claro); color: var(--azul-marino); border-color: var(--azul-marino); }
.boton-icono.peligro:hover { background: #fbe9e7; color: var(--rojo-baja); border-color: var(--rojo-baja); }
.boton-icono + .boton-icono { margin-left: 0.35rem; }

/* --- Mensajes (django.contrib.messages) --- */
.mensajes { max-width: 1100px; margin: 1rem auto 0; padding: 0 1.5rem; }
.mensaje {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}
.mensaje.success { background: #e6f4ea; color: var(--verde-alta); }
.mensaje.error { background: #fbe9e7; color: var(--rojo-baja); }
.mensaje.info { background: var(--azul-marino-claro); color: var(--azul-marino-oscuro); }

/* --- Pantalla de login --- */
.pantalla-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--azul-marino-claro) 0%, var(--gris-fondo) 60%);
  padding: 1.5rem;
}

.caja-login {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: 0 4px 20px rgba(19, 67, 117, 0.15);
  padding: 2.5rem 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.caja-login img { height: 64px; margin-bottom: 1rem; }
.caja-login h1 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.caja-login .subtitulo { color: var(--gris-suave); font-size: 0.88rem; margin-bottom: 1.5rem; }
.caja-login form { text-align: left; }
.caja-login .boton { width: 100%; margin-top: 0.5rem; }

.pie-pagina {
  text-align: center;
  color: var(--gris-suave);
  font-size: 0.8rem;
  padding: 2rem 0 1rem;
}

/* --- Tablas personalizables (Socios / Familias): orden, columnas, anchos --- */
.tabla-personalizable-envoltorio { position: relative; }

.barra-columnas {
  display: flex;
  justify-content: flex-end;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--gris-borde);
}

.btn-columnas {
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 6px;
  color: var(--gris-texto);
  font-size: 0.85rem;
  font-family: inherit;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.btn-columnas:hover { border-color: var(--azul-marino); color: var(--azul-marino); }

.tabla-scroll { overflow-x: auto; }

table[data-tabla-personalizable] {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

table[data-tabla-personalizable] th,
table[data-tabla-personalizable] td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--gris-borde);
  text-align: left;
}

table[data-tabla-personalizable] thead th {
  position: relative;
  background: var(--gris-fondo);
  font-size: 0.82rem;
  color: var(--gris-suave);
  font-weight: 600;
  user-select: none;
}

table[data-tabla-personalizable] thead th.col-drop-objetivo {
  background: var(--azul-marino-claro);
}

table[data-tabla-personalizable] .col-titulo {
  padding-right: 0.5rem;
}

table[data-tabla-personalizable] .col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
}

table[data-tabla-personalizable] .col-resizer:hover {
  background: var(--dorado);
  opacity: 0.5;
}

.panel-columnas {
  position: absolute;
  z-index: 50;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.9rem;
  width: 260px;
  max-height: 70vh;
  overflow-y: auto;
}

.panel-columnas p {
  font-size: 0.82rem;
  color: var(--gris-suave);
  margin: 0 0 0.6rem;
}

.panel-columnas-fila {
  display: block;
  font-size: 0.88rem;
  padding: 0.25rem 0;
}

.panel-columnas-botones {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.panel-columnas-botones .boton { flex: 1; text-align: center; padding: 0.4rem 0.6rem; font-size: 0.85rem; }