@charset "UTF-8";
:root {
  --bg: #f4f4f6;
  --panel: rgba(255, 255, 255, 0.84);
  --panel-strong: rgba(255, 255, 255, 0.96);
  --line: rgba(17, 24, 39, 0.12);
  --line-strong: rgba(17, 24, 39, 0.2);
  --text: #141417;
  --muted: #6d717a;
  --soft: #343942;
  --red: #d7172f;
  --red-dark: #9e1021;
  --primary: #fabd00;
  --primary-dark: #d4a017;
  --green: #16874a;
  --amber: #a36305;
  --radius: 16px;
  --radius-lg: 24px;
  /* Sombra plana, casi imperceptible — antes era una sombra «flotante» de 46px
     de difusión digna de una tarjeta de producto, no de una tabla de gestión. El
     admin de WordPress no usa apenas sombra: un borde de 1px hace casi todo el
     trabajo de separar tarjetas. */
  --shadow: 0 1px 2px rgba(17, 24, 39, 0.06);

  /* Densidad al estilo del admin de WordPress: letra más pequeña, controles más
     bajos, radios más discretos. Un solo sitio que retocar — el resto del panel
     hereda de aquí, sección tocada o no. Los colores de marca (--red/--primary/
     --green/--amber de arriba) no se tocan: solo tamaño y espaciado. */
  --admin-font-size: 13px;
  --admin-control-height: 30px;
  --admin-radius-sm: 4px;
  --admin-panel-padding: 16px;
  --admin-sidebar-bg: #1d2327;
  --admin-sidebar-bg-hover: #2c3338;
  --admin-sidebar-text: #c3c4c7;
  --admin-sidebar-text-strong: #ffffff;
  --admin-sidebar-label: #7c8288;
}

* {
  box-sizing: border-box;
}

html {
  /* El «rem» de TODO este fichero se mide desde aquí, no desde <body> — un
     font-size en <body> no reescala nada que esté en rem, solo su propio texto y
     lo que herede en em. Este es el único sitio que hay que tocar para que la
     letra de todo el panel (títulos, botones, tablas...) baje de golpe. */
  font-size: var(--admin-font-size);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

html[data-auth-checking] body {
  visibility: hidden;
}

/* Ojo con volver a poner aquí «overflow-x: hidden».
   Estaba, y rompía en silencio TODO lo que se queda pegado al desplazarse: la columna
   de carpetas de Multimedia, la barra de arriba y la de la izquierda. Al declararlo,
   el navegador convierte el body en una caja con desplazamiento propio que nunca se
   desplaza —quien se desplaza es la página—, y una caja pegajosa solo puede pegarse
   dentro de la caja que se desplaza. Con la declaración solo en <html>, el recorte
   horizontal se mantiene igual y lo pegajoso vuelve a funcionar. */
body {
  margin: 0;
  min-width: 320px;
  background: #f5f5f7;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* El tamaño de verdad se fija en <html> (ver arriba, para que el rem escale);
     aquí solo hace falta la interlínea. 13px, como el admin de WordPress: un panel
     de gestión no es una revista, no necesita el cuerpo de una página de lectura —
     y en un listado de 7.839 hermandades, eso son varias pantallas menos de
     desplazamiento. */
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

img {
  display: block;
}

[hidden] {
  display: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(250, 189, 0, 0.85);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--text);
  color: #fff;
  transform: translateY(-140%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.admin-shell {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100svh;
  min-width: 0;
}

/* Columna oscura, como el admin de WordPress: separa de un vistazo «esto es el
   panel de gestión» de «esto es una tarjeta de contenido», y con tantas secciones
   como tiene ya este panel, el contraste ayuda a no perderse en la lista. El resto
   del panel (fondo, tarjetas) se queda claro — el oscuro es solo la navegación. */
.admin-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: grid;
  min-width: 0;
  min-height: 100svh;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  padding: 0 0 16px;
  background: var(--admin-sidebar-bg);
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: var(--admin-sidebar-text-strong);
  font-weight: 700;
  font-size: 0.94rem;
}

.admin-brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}

.admin-nav {
  display: grid;
  min-width: 0;
  gap: 18px;
  align-content: start;
  padding: 0 8px;
}

.admin-nav__group {
  display: grid;
  gap: 1px;
}

.admin-nav__label {
  margin: 0 0 4px;
  padding-inline: 10px;
  color: var(--admin-sidebar-label);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  position: relative;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--admin-sidebar-text);
  text-align: left;
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease, transform 100ms ease;
}

.admin-nav__icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.85;
}

.admin-nav__item:hover {
  background: var(--admin-sidebar-bg-hover);
  color: var(--admin-sidebar-text-strong);
}

.admin-nav__item.is-active {
  background: var(--admin-sidebar-bg-hover);
  color: var(--admin-sidebar-text-strong);
  font-weight: 650;
}

.admin-nav__item.is-active .admin-nav__icon {
  opacity: 1;
}

.admin-nav__item.is-active::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--red);
  content: "";
}

.admin-nav__item:active,
.primary-button:active,
.ghost-button:active {
  transform: scale(0.97);
}

.admin-sidebar__status {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin: 0 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--admin-radius-sm);
  background: rgba(255, 255, 255, 0.06);
}

.admin-sidebar__status strong {
  display: block;
  color: var(--admin-sidebar-text-strong);
  font-size: 0.9rem;
}

.admin-sidebar__status span {
  display: block;
  color: var(--admin-sidebar-text);
  font-size: 0.8rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
}

.status-dot--ok {
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(67, 209, 122, 0.12);
}

.admin-main {
  --admin-inline: clamp(18px, 3vw, 34px);
  min-width: 0;
  max-width: 100%;
  padding: 22px var(--admin-inline) 44px;
}

.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: -22px calc(var(--admin-inline) * -1) 22px;
  padding: 14px var(--admin-inline);
  border-bottom: 1px solid var(--line);
  background: rgba(245, 245, 247, 0.9);
  backdrop-filter: blur(18px);
}

.admin-topbar__context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.admin-topbar__path {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 650;
}

.admin-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  place-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.admin-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.admin-sidebar-backdrop {
  display: none;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.15;
}

h2 {
  margin-bottom: 0;
  font-size: 1.3rem;
  line-height: 1.16;
}

h3 {
  margin-bottom: 0;
  font-size: 0.98rem;
}

.admin-actions,
.form-actions,
.table-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.table-toolbar {
  margin-bottom: 16px;
}

.bulk-toolbar {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin: -4px 0 16px;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.bulk-toolbar__summary {
  display: grid;
  gap: 2px;
  min-width: 168px;
}

.bulk-toolbar__summary strong {
  color: var(--text);
  font-size: 0.88rem;
}

.bulk-toolbar__summary span {
  color: var(--muted);
  font-size: 0.82rem;
}

.bulk-toolbar label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.bulk-toolbar select {
  min-height: 42px;
  min-width: 160px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.primary-button,
.ghost-button {
  display: inline-flex;
  min-height: var(--admin-control-height);
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: var(--admin-radius-sm);
  font-size: 0.92rem;
  font-weight: 650;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.primary-button {
  border: 1px solid rgba(215, 23, 47, 0.28);
  background: var(--red);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(215, 23, 47, 0.16);
}

.ghost-button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
  color: var(--soft);
}

.primary-button:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 2px 6px rgba(215, 23, 47, 0.2);
  color: #ffffff;
}

.ghost-button:hover {
  border-color: var(--line-strong);
  background: #ffffff;
  color: var(--text);
}

.admin-section {
  display: none;
}

.admin-section.is-active {
  display: block;
  animation: revealSection 220ms ease both;
}

.auth-page {
  min-height: 100svh;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(360px, 520px);
  gap: clamp(34px, 6vw, 92px);
  width: min(1120px, calc(100% - 36px));
  min-height: 100svh;
  align-items: center;
  margin: 0 auto;
  padding-block: 46px;
}

.auth-brand {
  min-width: 0;
}

.auth-logo {
  display: inline-flex;
  width: 92px;
  height: 92px;
  margin-bottom: 28px;
}

.auth-logo img {
  width: 100%;
  height: 100%;
  border-radius: 22px;
  object-fit: contain;
  box-shadow: var(--shadow);
}

.auth-brand h1 {
  max-width: 620px;
}

.auth-brand p {
  max-width: 560px;
  margin: 18px 0 0;
  color: var(--soft);
  font-size: 1.02rem;
  line-height: 1.65;
}

.auth-home-link {
  display: inline-flex;
  margin-top: 24px;
  color: var(--red-dark);
  font-weight: 850;
}

.auth-card {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
    var(--panel);
  box-shadow: var(--shadow);
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-copy {
  margin: 0;
  color: var(--soft);
  line-height: 1.58;
}

.auth-remember {
  margin-block: 2px 4px;
}

.auth-link-button {
  width: fit-content;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--red-dark);
  font-weight: 850;
  text-align: left;
}

.auth-status {
  min-height: 24px;
  margin: 16px 0 0;
  color: var(--muted);
  font-weight: 760;
}

.auth-status[data-tone="ok"] {
  color: #146c3f;
}

.auth-status[data-tone="error"] {
  color: var(--red-dark);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(260px, 0.52fr);
  gap: clamp(18px, 4vw, 48px);
  align-items: end;
  margin: 12px 0 16px;
}

.section-heading > p {
  margin: 0;
  color: var(--soft);
  font-size: 0.96rem;
  line-height: 1.62;
}

.metric-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 840px) {
  .metric-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .metric-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

.metric-card,
.admin-panel,
.tool-card {
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.metric-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: auto;
  padding: 11px 14px;
  border-radius: 12px;
  color: inherit;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 150ms ease,
              box-shadow 150ms ease;
  animation: adminPanelFadeIn 240ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.metric-card:nth-child(1) { animation-delay: 20ms; }
.metric-card:nth-child(2) { animation-delay: 45ms; }
.metric-card:nth-child(3) { animation-delay: 70ms; }
.metric-card:nth-child(4) { animation-delay: 95ms; }
.metric-card:nth-child(5) { animation-delay: 120ms; }
.metric-card:nth-child(6) { animation-delay: 145ms; }
.metric-card:nth-child(7) { animation-delay: 170ms; }
.metric-card:nth-child(8) { animation-delay: 195ms; }

.metric-card:hover {
  border-color: rgba(250, 189, 0, 0.45);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.metric-card:active {
  transform: scale(0.98);
}

.metric-board span {
  display: block;
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.metric-board strong {
  display: block;
  margin: 3px 0 1px;
  color: var(--text);
  font-size: 1.30rem;
  font-weight: 850;
  line-height: 1.1;
  font-feature-settings: "tnum";
}

.metric-board small {
  display: block;
  font-size: 0.70rem;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}

@media (max-width: 960px) {
  .insight-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.insight-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  animation: adminPanelFadeIn 300ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.insight-grid > .insight-panel:nth-child(1) { animation-delay: 110ms; }
.insight-grid > .insight-panel:nth-child(2) { animation-delay: 160ms; }
.insight-grid > .insight-panel:nth-child(3) { animation-delay: 210ms; }
.insight-grid > .insight-panel:nth-child(4) { animation-delay: 260ms; }

.insight-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
  border-color: rgba(17, 24, 39, 0.15);
}

.insight-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.insight-stats div {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.insight-stats span,
.insight-stats small {
  display: block;
  font-size: 0.74rem;
  color: var(--muted);
}

.insight-stats strong {
  display: block;
  margin: 4px 0 2px;
  color: var(--text);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
}

.insight-stats small {
  color: var(--green);
  font-weight: 750;
}

/* Gráficas auténticas en SVG */
.dashboard-chart-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legend-item--blue::before { background: #2563eb; }
.legend-item--purple::before { background: #8b5cf6; }
.legend-item--green::before { background: #059669; }
.legend-item--teal::before { background: #0d9488; }

.dashboard-chart-container {
  position: relative;
  height: 140px;
  width: 100%;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  overflow: hidden;
}

.dashboard-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -120%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 100ms ease;
  z-index: 5;
}

.chart-tooltip.is-visible {
  opacity: 1;
}

/* Listado de oportunidades SEO */
.dashboard-seo-quick-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-seo-quick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--muted);
}

.dashboard-seo-quick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 2px;
}

.dashboard-seo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  font-size: 0.82rem;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
  cursor: pointer;
}

.dashboard-seo-item:hover {
  background: rgba(250, 189, 0, 0.06);
  border-color: rgba(250, 189, 0, 0.4);
  transform: translateX(2px);
}

.dashboard-seo-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dashboard-seo-item-title {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-seo-item-meta {
  font-size: 0.72rem;
  color: var(--soft);
}

.dashboard-seo-item-badge {
  flex-shrink: 0;
}

/* Ficha de Seguridad y Accesos */
.dashboard-security-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-sec-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  padding-bottom: 6px;
}

.sec-tab {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 120ms ease;
}

.sec-tab:hover {
  color: var(--text);
  background: rgba(17, 24, 39, 0.04);
}

.sec-tab.is-active {
  color: var(--text);
  background: rgba(17, 24, 39, 0.08);
  font-weight: 750;
}

.dashboard-sec-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding-right: 2px;
}

.sec-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(17, 24, 39, 0.07);
  border-radius: 10px;
  background: #fff;
  font-size: 0.80rem;
}

.sec-item-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #10b981);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.sec-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sec-item-name {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sec-item-sub {
  font-size: 0.70rem;
  color: var(--soft);
}

.dashboard-quick-loading {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

.insight-reading {
  padding: 12px 14px;
  border: 1px solid rgba(215, 23, 47, 0.18);
  border-radius: 14px;
  background: rgba(215, 23, 47, 0.04);
}

.insight-reading strong {
  display: block;
  color: var(--red-dark);
}

.insight-reading p {
  margin: 0;
  color: var(--soft);
  font-size: 0.94rem;
  line-height: 1.58;
}

.insight-reading .ghost-button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  white-space: normal;
  text-align: center;
  word-break: break-word;
}

/* ==========================================================================
   ANIMACIONES SUAVES Y ELEGANTES (Emil Design Engineering)
   ========================================================================== */
@keyframes adminPanelFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes chartPathDraw {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes chartAreaReveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dashboard-chart-line {
  stroke-dasharray: 800;
  animation: chartPathDraw 650ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dashboard-chart-line-secondary {
  stroke-dasharray: 800;
  animation: chartPathDraw 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dashboard-chart-area {
  animation: chartAreaReveal 500ms ease-out forwards;
}

/* Feedback táctil en botones interactivos */
.ghost-button,
.primary-button,
.btn,
.sec-tab {
  transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 140ms ease,
              border-color 140ms ease,
              box-shadow 140ms ease;
}

.ghost-button:active,
.primary-button:active,
.btn:active,
.sec-tab:active {
  transform: scale(0.98);
}

/* Respeto riguroso a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .metric-card,
  .insight-panel,
  .dashboard-chart-line,
  .dashboard-chart-line-secondary,
  .dashboard-chart-area,
  .pulse-dot {
    animation: none !important;
    transition: none !important;
  }
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-grid--dashboard {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

/* Sección «Vídeos»: una sola tarjeta con muchas herramientas dentro, no varias
   tarjetas repartidas en .admin-grid (que a una sola tarjeta le deja la mitad
   derecha vacía — el hueco que se veía). Aquí la tarjeta ocupa todo el ancho y
   sus herramientas se reparten en 2 columnas por dentro, para no obligar a bajar
   y bajar por una tira vertical de bloques que caben perfectamente en paralelo. */
.integration-card--full {
  width: 100%;
}

.video-tools-grid {
  display: grid;
  /* Siempre 2 columnas iguales en pantalla ancha, nunca 3 ni 4: con auto-fit el
     número de columnas cambiaba según lo ancho que estuviera el navegador (a veces
     4, a veces 1), así que ninguna tarjeta se alineaba con la de al lado de forma
     previsible. Ver el HTML: las tarjetas se cuentan a propósito en pares. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 860px) {
  .video-tools-grid {
    grid-template-columns: 1fr;
  }
}

.video-tools-grid__full {
  grid-column: 1 / -1;
}

/* Consola de la última pulsación de «Importar canales de hermandades»: antes solo
   había tres cifras y ningún nombre — cuando algo no cuadraba (dos hermandades con
   el mismo canal, un enlace roto...) no había forma de saber cuál sin mirar el
   código. Lista compacta con scroll propio, no empuja el resto de la rejilla hacia
   abajo aunque haya 50+ filas. */
/* Buscador y paginación de las listas del panel.
   Estas dos clases venían de la web pública (site.css), que admin.html NO carga: en el
   panel salían sin estilo ninguno. Aquí van con los tokens de densidad de docs/11, no
   copiadas de la versión pública, que es más grande y de otro público. */
.toolbar-search {
  margin: 8px 0;
}

.toolbar-search input {
  max-width: 420px;
}

.directory-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.86rem;
}

.directory-pagination button {
  min-height: var(--admin-control-height);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--admin-radius-sm);
  background: #fff;
  color: var(--soft);
  font-size: 0.9rem;
  font-weight: 650;
}

.directory-pagination button:hover:not(:disabled) {
  border-color: var(--line-strong);
  color: var(--text);
}

.directory-pagination button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Diálogo del panel. Usa <dialog> nativo, así que el fondo, el foco atrapado y el
   cierre con Escape no hay que programarlos. Densidad según docs/11: tokens, no
   valores sueltos. */
.admin-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.18);
}

.admin-dialog::backdrop {
  background: rgba(17, 24, 39, 0.45);
}

.admin-dialog__form {
  display: grid;
  gap: 8px;
  padding: var(--admin-panel-padding);
}

.admin-dialog__form h4 {
  margin: 0;
  font-size: 0.98rem;
}

.admin-dialog__form label {
  margin-top: 4px;
}

.admin-dialog__form .form-actions {
  margin-top: 8px;
}

/* El aviso de error, en rojo y solo cuando hay algo que decir. */
[data-rename-error] {
  color: var(--red);
  font-weight: 650;
}

.import-log {
  display: grid;
  gap: 2px;
  max-height: 220px;
  margin-top: 4px;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--admin-radius-sm);
  background: #fafafb;
}

.import-log:empty::before {
  content: "Nada todavía.";
  padding: 6px 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.import-log__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 0.86rem;
}

.import-log__item:nth-child(odd) {
  background: rgba(17, 24, 39, 0.03);
}

.import-log__hermandad {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-log__estado {
  flex: none;
  font-weight: 650;
}

.import-log__estado--completo { color: var(--green); }
.import-log__estado--avance { color: var(--soft); }
.import-log__estado--guardado { color: var(--soft); }
.import-log__estado--error,
.import-log__estado--sin_resolver { color: var(--red); }

.admin-panel,
.tool-card {
  border-radius: 6px;
  min-width: 0;
  padding: var(--admin-panel-padding);
}

.panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--soft);
  font-size: 0.74rem;
  font-weight: 850;
  white-space: nowrap;
}

.badge--ok {
  border-color: rgba(22, 135, 74, 0.24);
  color: #146c3f;
}

.badge--warning {
  border-color: rgba(163, 99, 5, 0.24);
  color: #8a5304;
}

.badge--danger {
  border-color: rgba(215, 23, 47, 0.3);
  color: var(--red-dark);
}

.badge--draft,
.badge--new {
  border-color: rgba(215, 23, 47, 0.28);
  color: var(--red-dark);
}

.task-list,
.publish-checks,
.permission-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.task-list li,
.permission-list div {
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.task-list strong,
.task-list span,
.permission-list strong,
.permission-list span {
  display: block;
}

.task-list span,
.permission-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.92rem;
}

.publish-checks label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--soft);
}

.publish-checks input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
}

.publish-checks span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bot-trap-panel {
  margin-top: 18px;
}

.bot-trap-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.bot-trap-summary div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: #fff;
}

.bot-trap-summary span,
.bot-trap-summary small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.bot-trap-summary strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 1.55rem;
  line-height: 1;
}

.bot-trap-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(140px, 0.65fr)) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}

.bot-trap-settings label {
  min-width: 0;
}

.bot-trap-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 16px;
}

.bot-trap-log {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.bot-trap-log h4 {
  margin: 0 0 12px;
  font-size: 0.95rem;
}

.bot-trap-table {
  display: grid;
  gap: 8px;
  max-height: 420px;
  overflow: auto;
}

.bot-trap-row {
  display: grid;
  grid-template-columns: minmax(104px, 0.45fr) minmax(110px, 0.45fr) minmax(0, 1.1fr) minmax(78px, 0.35fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 14px;
  background: #fff;
  color: var(--soft);
  font-size: 0.82rem;
}

.bot-trap-row strong,
.bot-trap-row span,
.bot-trap-row small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-trap-row strong {
  color: var(--text);
}

.bot-trap-row--compact {
  grid-template-columns: minmax(110px, 0.7fr) minmax(60px, 0.25fr) minmax(0, 1fr);
}

.switch-label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
  color: var(--soft);
  overflow-wrap: anywhere;
}

.switch-label input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 1px 0 0;
}

.entity-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  overflow-x: auto;
}

.entity-tab {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: var(--soft);
  font-weight: 850;
}

.entity-tab.is-active {
  border-color: rgba(250, 189, 0, 0.45);
  background: rgba(250, 189, 0, 0.16);
  color: var(--text);
}

.entity-panel {
  display: none;
}

.entity-panel.is-active {
  display: block;
}

.content-split {
  display: grid;
  grid-template-columns: minmax(330px, 0.82fr) minmax(0, 1.18fr);
  min-width: 0;
  gap: 18px;
  align-items: start;
}

.city-admin-layout {
  display: grid;
  gap: 18px;
}

.city-list-panel,
.city-form-panel {
  min-width: 0;
}

.search-field {
  flex: 1 1 260px;
  min-width: min(100%, 320px);
}

.admin-form {
  display: grid;
  gap: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 14px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--soft);
  font-size: 0.84rem;
  font-weight: 760;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: var(--admin-radius-sm);
  background-color: #fff;
  color: var(--text);
  color-scheme: light;
  font-weight: 400 !important;
}

input,
select {
  min-height: var(--admin-control-height);
  padding: 0 10px;
}

select {
  padding-right: 32px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236d717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

select option {
  background: #fff;
  color: var(--text);
}

textarea {
  min-height: 90px;
  padding: 8px 10px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #73737a;
}

.media-picker-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.media-picker-field input[readonly] {
  cursor: default;
}

.media-picker-field .ghost-button,
.media-picker-field .primary-button {
  min-height: 44px;
  white-space: nowrap;
}

/* Image Upload Widget Styles */
.image-upload-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.image-upload-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.image-upload-wrapper input[type="text"] {
  flex: 1;
}

.image-upload-wrapper button {
  min-height: 44px;
  white-space: nowrap;
}

.image-upload-preview {
  margin-top: 8px;
  border-radius: 4px;
  overflow: hidden;
  max-width: 100%;
}

.image-upload-preview img {
  display: block;
  max-height: 120px;
  border-radius: 4px;
  border: 1px solid #e1e1e6;
  object-fit: cover;
}

/* Quill WYSIWYG Editor Container Styles and Overrides */
.wysiwyg-editor-container,
.ql-toolbar,
.ql-container,
.ql-editor {
  font-weight: 400;
  box-sizing: border-box;
}

.wysiwyg-editor-container p,
.wysiwyg-editor-container span,
.ql-editor p,
.ql-editor span {
  font-weight: 400;
}

.wysiwyg-editor-container strong,
.wysiwyg-editor-container b,
.ql-editor strong,
.ql-editor b {
  font-weight: 700 !important;
}

.wysiwyg-editor-container {
  border: 1px solid #c2c2c9;
  border-radius: 6px;
  background: #ffffff;
  margin-top: 4px;
  color: #111111;
  overflow: hidden;
}

.ql-toolbar.ql-snow,
.wysiwyg-editor-container .ql-toolbar {
  border: none !important;
  padding: 8px !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: #f4f4f6 !important;
  border-bottom: 1px solid #e1e1e6 !important;
}

.ql-toolbar.ql-snow button,
.wysiwyg-editor-container .ql-toolbar button {
  background: none !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  color: #374151 !important;
  transition: all 150ms ease;
}

.ql-toolbar.ql-snow button:hover,
.wysiwyg-editor-container .ql-toolbar button:hover {
  background-color: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #111827 !important;
}

.ql-toolbar.ql-snow button.ql-active,
.wysiwyg-editor-container .ql-toolbar button.ql-active {
  background-color: #fabd00 !important;
  border-color: rgba(250, 189, 0, 0.4) !important;
  color: #111111 !important;
}

.ql-toolbar.ql-snow button svg,
.wysiwyg-editor-container .ql-toolbar button svg {
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.ql-toolbar.ql-snow button svg path,
.wysiwyg-editor-container .ql-toolbar button svg path,
.ql-toolbar.ql-snow button svg rect,
.wysiwyg-editor-container .ql-toolbar button svg rect,
.ql-toolbar.ql-snow button svg line,
.wysiwyg-editor-container .ql-toolbar button svg line,
.ql-toolbar.ql-snow button svg polygon,
.wysiwyg-editor-container .ql-toolbar button svg polygon {
  stroke: currentColor !important;
  stroke-width: 2 !important;
}

.ql-toolbar.ql-snow .ql-formats,
.wysiwyg-editor-container .ql-toolbar .ql-formats {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

.wysiwyg-editor-container .ql-container.ql-snow {
  border: none;
  min-height: 120px;
  max-height: 350px;
  overflow-y: auto;
  font-family: inherit;
  font-size: 0.95rem;
}

.wysiwyg-editor-container .ql-editor {
  min-height: 120px;
  font-weight: 400;
  color: #111827;
}

.wysiwyg-editor-container:focus-within {
  border-color: #fabd00;
  box-shadow: 0 0 0 2px rgba(250, 189, 0, 0.2);
}

.span-2 {
  grid-column: 1 / -1;
}

.nested-fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 16px;
}

.nested-fieldset legend {
  padding: 0 8px;
  color: var(--red-dark);
  font-weight: 850;
}

.repeater-block {
  display: grid;
  grid-column: 1 / -1;
  gap: 12px;
  min-width: 0;
}

.repeater-block__header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.repeater-block__header strong {
  color: var(--text);
}

/* Barra superior de cada fila: posición a la izquierda, flechas a la derecha.
   Ocupa el ancho completo de la rejilla para no robar sitio a los campos. */
.repeater-item__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
  min-height: 26px;
}

/* Con una sola fila no hay nada que ordenar. */
.repeater-item__bar.is-single {
  display: none;
}

.repeater-item__pos {
  font-size: 0.74rem;
  font-weight: 600;
  color: #8a8a92;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.repeater-item__moves {
  display: inline-flex;
  gap: 4px;
}

.repeater-item__move {
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  border-radius: 7px;
  font-size: 0.82rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, color 120ms ease;
}

.repeater-item__move:disabled {
  opacity: 0.3;
  cursor: default;
}

.repeater-item__move:not(:disabled):hover {
  background: rgba(17, 24, 39, 0.07);
}

/* El botón de añadir vive aquí, al final del bloque, para que quede siempre junto a
   la última fila al encadenar varias altas. */
.repeater-block__footer {
  display: flex;
  min-width: 0;
}

.repeater-block__footer > button {
  width: 100%;
  justify-content: center;
  border-style: dashed;
}

.repeater-item {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  background: rgba(248, 248, 250, 0.82);
}

.admin-table {
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: 8px;
}

.admin-table__head,
.admin-table button {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(90px, 0.8fr) minmax(90px, 0.8fr) minmax(78px, 0.52fr);
  gap: 10px;
  align-items: center;
}

.admin-table__head {
  padding: 0 12px 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.admin-table button {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--soft);
  text-align: left;
}

.admin-table button:hover,
.admin-table button.is-selected {
  border-color: rgba(250, 189, 0, 0.45);
  background: rgba(250, 189, 0, 0.12);
  color: var(--text);
}

.admin-table [hidden] {
  display: none !important;
}

.city-admin-table {
  overflow-x: auto;
  padding-bottom: 4px;
}

.city-admin-table button {
  display: inline-flex;
  width: auto;
  grid-template-columns: none;
  gap: 0;
  align-items: center;
}

.city-table-body {
  display: grid;
  gap: 8px;
}

.city-admin-table {
  --col-1: minmax(150px, 1.15fr);
  --col-2: minmax(120px, 0.82fr);
  --col-3: minmax(140px, 0.9fr);
  --col-4: minmax(220px, 1.45fr);
  --col-5: minmax(280px, 1.75fr);
  --col-6: minmax(92px, 0.58fr);
  --col-7: minmax(92px, 0.58fr);
}

.city-admin-table[data-managed-table] {
  --col-1: minmax(160px, 1.1fr);
  --col-2: minmax(120px, 0.74fr);
  --col-3: minmax(120px, 0.74fr);
  --col-4: minmax(230px, 1.35fr);
  --col-5: minmax(300px, 1.65fr);
  --col-6: minmax(92px, 0.52fr);
  --col-7: minmax(92px, 0.52fr);
}

.city-admin-table[data-managed-table="artisans"] {
  --col-1: minmax(160px, 1.1fr);
  --col-2: minmax(120px, 0.74fr);
  --col-3: minmax(120px, 0.74fr);
  --col-4: minmax(120px, 0.74fr);
  --col-5: minmax(230px, 1.35fr);
  --col-6: minmax(300px, 1.65fr);
  --col-7: minmax(92px, 0.52fr);
  --col-8: minmax(92px, 0.52fr);
}

.city-table-row {
  display: grid;
  min-width: 1360px;
  grid-template-columns:
    48px
    var(--col-1)
    var(--col-2)
    var(--col-3)
    var(--col-4)
    var(--col-5)
    var(--col-6)
    var(--col-7)
    210px;
  gap: 10px;
  align-items: center;
}

.managed-table-row,
.managed-table-row--head {
  min-width: 1460px;
  grid-template-columns:
    48px
    var(--col-1)
    var(--col-2)
    var(--col-3)
    var(--col-4)
    var(--col-5)
    var(--col-6)
    var(--col-7)
    210px;
}

.city-admin-table[data-managed-table="artisans"] .managed-table-row,
.city-admin-table[data-managed-table="artisans"] .managed-table-row--head {
  grid-template-columns:
    48px
    var(--col-1)
    var(--col-2)
    var(--col-3)
    var(--col-4)
    var(--col-5)
    var(--col-6)
    var(--col-7)
    var(--col-8)
    210px;
}

.column-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.column-resize-handle::after {
  content: "";
  width: 2px;
  height: 50%;
  background-color: rgba(17, 24, 39, 0.18);
  border-radius: 1px;
  align-self: center;
  transition: background-color 0.2s, height 0.2s;
}

.column-resize-handle:hover::after,
.column-resize-handle:active::after {
  background-color: var(--primary);
  height: 100%;
}

body.is-resizing {
  cursor: col-resize;
  user-select: none;
}

.bulk-row-checkbox-cell,
.header-checkbox-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.bulk-row-checkbox-cell input[type="checkbox"],
.header-checkbox-cell input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}

.city-table-row--head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 12px 4px;
  background: rgba(248, 248, 250, 0.96);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.city-table-row--head button {
  min-height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-transform: inherit;
  font-weight: inherit;
}

.city-table-row--head > span:last-child {
  text-align: center;
}

.city-table-row--head button::after {
  content: " ↕";
  color: rgba(250, 189, 0, 0.65);
}

.city-table-row[data-search-text] {
  /* Las filas son lo que más se recorre: cada píxel de alto se paga 7.839 veces. */
  min-height: 44px;
  padding: 5px 10px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--soft);
}

/* ── El rayado gris de los listados ──
   Igual que en las fichas: una fila sí y otra no, para no perder el renglón cuando la
   tabla es ancha y hay que leerla de izquierda a derecha. */
.city-table-row[data-search-text].fila-impar {
  background: rgba(17, 24, 39, 0.045);
}

/* ── Se indexa o no se indexa ──
   Un tinte muy flojo en la fila y la etiqueta a todo color en su columna. El tinte solo
   sitúa; el que se lee es la etiqueta. */
.city-table-row[data-search-text][data-robots="noindex"] {
  background: rgba(215, 23, 47, 0.07);
  border-color: rgba(215, 23, 47, 0.24);
}

.city-table-row[data-search-text][data-robots="noindex"].fila-impar {
  background: rgba(215, 23, 47, 0.115);
}

.city-table-row[data-search-text][data-robots="index"] {
  border-color: rgba(22, 135, 74, 0.16);
}

.robots-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.robots-tag--si {
  color: #0f5c33;
  background: rgba(22, 135, 74, 0.16);
}

.robots-tag--no {
  color: #8c0f22;
  background: rgba(215, 23, 47, 0.18);
}

/* El resaltado del ratón manda sobre el rayado y sobre el tinte: si no, en las filas
   grises no se notaba por dónde ibas. */
.city-table-row[data-search-text]:hover,
.city-table-row[data-search-text].is-selected {
  border-color: rgba(250, 189, 0, 0.45);
  background: rgba(250, 189, 0, 0.12);
  color: var(--text);
}

.city-table-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.city-table-row .city-seo-description {
  color: var(--muted);
}

.table-row-actions {
  display: flex;
  grid-column: -2 / -1;
  min-width: 210px;
  justify-content: center;
  gap: 8px;
  align-items: center;
  overflow: visible;
}

.bulk-row-select {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 850;
}

.bulk-row-select input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.city-edit-button {
  display: inline-flex !important;
  flex: 0 0 auto;
  justify-self: center;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(250, 189, 0, 0.35);
  border-radius: 10px;
  background: rgba(250, 189, 0, 0.08);
  color: #9b7100;
  font-weight: 850;
  text-align: center;
  transition: all 0.15s ease;
}

.city-edit-button:hover {
  background: rgba(250, 189, 0, 0.22);
  border-color: rgba(250, 189, 0, 0.6);
  color: #7b5900;
}

.city-delete-button {
  display: inline-flex !important;
  flex: 0 0 auto;
  justify-self: center;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--soft);
  font-weight: 850;
  text-align: center;
  transition: all 0.15s ease;
}

.city-delete-button:hover {
  background: rgba(215, 23, 47, 0.08);
  border-color: rgba(215, 23, 47, 0.32);
  color: var(--red-dark);
}

.city-table-empty {
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  color: var(--muted);
}

.table-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--soft);
}

.table-pagination__group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.table-pagination__status {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.table-pagination__page {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 4px;
}

.bulk-toolbar__pagination {
  margin-left: auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bulk-toolbar__pagination .table-pagination__status {
  font-size: 0.8rem;
  color: var(--muted);
}

.bulk-toolbar__pagination .table-pagination__group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

.bulk-toolbar__pagination select {
  min-height: 32px;
  padding: 0 24px 0 8px;
  border-radius: 8px;
  font-size: 0.8rem;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 800;
}

.bulk-toolbar__pagination button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--soft);
  font-weight: 850;
  cursor: pointer;
}

.bulk-toolbar__pagination button:not(:disabled):hover {
  border-color: rgba(250, 189, 0, 0.45);
  color: #9b7100;
}

.bulk-toolbar__pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.table-pagination__jump-input {
  width: 50px;
  height: 32px;
  padding: 0 4px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
  font-size: 0.84rem;
  color: var(--text);
  margin: 0 4px;
}

.table-pagination__jump-input::-webkit-outer-spin-button,
.table-pagination__jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.table-pagination select {
  width: auto;
  min-height: 36px;
  padding: 0 34px 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 10px;
  background-color: #fff;
  color: var(--text);
  font-weight: 800;
}

.table-pagination button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--soft);
  font-weight: 850;
}

.table-pagination button:not(:disabled):hover {
  border-color: rgba(250, 189, 0, 0.45);
  color: #9b7100;
}

.table-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.integration-card .admin-form {
  gap: 14px;
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tool-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.tool-card p {
  margin: 0;
  color: var(--muted);
}

.itinerary-research-panel {
  margin-top: 24px;
}

.geolocation-panel {
  display: grid;
  gap: 18px;
}

.geolocation-form {
  grid-template-columns: minmax(240px, 1fr) minmax(140px, 0.4fr) minmax(260px, 0.8fr) auto;
  align-items: end;
}

.geolocation-progress {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: #fff;
}

.geolocation-progress__bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
}

.geolocation-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red-dark), var(--red));
  transition: width 180ms ease;
}

.geolocation-progress__text,
.geolocation-summary,
.geolocation-results {
  display: grid;
  gap: 12px;
}

.geolocation-progress__text {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.geolocation-progress__text strong {
  color: var(--red-dark);
}

.geolocation-progress__text span {
  color: var(--muted);
}

.geolocation-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.geolocation-summary div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

.geolocation-summary span,
.geolocation-results span {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
}

.geolocation-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 1.55rem;
  line-height: 1;
}

.geolocation-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.geolocation-results section {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: #fff;
}

.geolocation-results h4 {
  margin: 0 0 12px;
}

.geolocation-results ul {
  display: grid;
  max-height: 320px;
  gap: 8px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.geolocation-results li {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(244, 244, 246, 0.78);
}

.geolocation-results strong {
  display: block;
  overflow-wrap: anywhere;
}

.itinerary-search-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.7fr) minmax(90px, 0.25fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
}

.itinerary-search-form--simple {
  grid-template-columns: minmax(260px, 1fr) 140px 190px auto;
}

.itinerary-search-form label,
.verified-source-row {
  min-width: 0;
}

.itinerary-research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 18px;
  margin-top: 20px;
}

.itinerary-source-panel {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.panel-title--compact {
  margin-bottom: 12px;
}

.itinerary-source-list,
.itinerary-checks,
.verified-source-list {
  display: grid;
  gap: 10px;
}

.itinerary-source-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  background: #fff;
}

.itinerary-source-card strong,
.itinerary-source-card small,
.itinerary-source-card p {
  display: block;
  min-width: 0;
}

.itinerary-source-card strong {
  color: var(--text);
}

.itinerary-source-card small,
.source-priority {
  color: var(--muted);
  font-size: 0.78rem;
}

.source-priority {
  display: inline-flex;
  margin-bottom: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(190, 18, 60, 0.08);
  color: var(--accent);
  font-weight: 800;
}

.itinerary-source-card p {
  margin: 8px 0 0;
  color: var(--soft);
}

.itinerary-checks label {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.verified-source-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1fr) minmax(150px, 0.65fr);
  gap: 10px;
}

.media-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  grid-template-areas:
    "tree library"
    "actions library";
  gap: 18px;
  align-items: start;
}

.media-tree-panel {
  grid-area: tree;
}

/* La columna de carpetas se queda a la vista mientras se baja por los archivos.
   Antes había que bajar hasta el final para marcar una foto y volver a subir para
   asignarle el fotógrafo: el formulario estaba arriba y se perdía de vista. Ahora la
   columna acompaña, la lista de carpetas se desplaza por dentro, y el formulario de
   la foto seleccionada está siempre donde se está mirando. */
@media (min-width: 1181px) {
  /* Una sola fila, y esto NO es cosmética: es lo que hace que lo de arriba funcione.
     La rejilla tenía dos filas —«tree» y «actions»— y el panel de archivos las cruzaba
     las dos. Al repartirse su altura entre ambas, la casilla del árbol medía la mitad
     de lo que mide la lista, y una caja pegajosa solo puede recorrer su propia casilla:
     acompañaba media pantalla y se iba. Con una fila, la casilla mide lo que mide la
     lista y la columna acompaña hasta el final. El panel de acciones está oculto con
     display:none, así que no es un elemento de la rejilla y no echa nada de menos. */
  .media-layout {
    grid-template-areas: "tree library";
    grid-template-rows: minmax(0, 1fr);
  }

  .media-tree-panel {
    position: sticky;
    top: 68px;
    align-self: start;
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - 88px);
  }

  .media-tree {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Con el formulario abierto la lista de carpetas cede sitio, pero no del todo:
       siempre se ve dónde se está. */
    scrollbar-width: thin;
  }

  .media-seo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* Con una foto seleccionada manda su formulario: es lo que se ha venido a hacer.
     El listado de carpetas cede sitio hasta poco más de un tercio —lo justo para no
     perder de vista dónde estás— y el resto es para los datos de la imagen. */
  .media-tree-panel:has(.media-seo:not([hidden])) .media-tree {
    /* En vh y no en %: el panel no tiene altura declarada —solo un tope— y un
       porcentaje contra una altura automática no resuelve, se queda en nada. */
    max-height: 30vh;
  }
}

.media-library-panel {
  grid-area: library;
}

.media-actions-panel {
  grid-area: actions;
  display: none !important;
}

.icon-button {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(250, 189, 0, 0.45);
  border-radius: 50%;
  background: rgba(250, 189, 0, 0.12);
  color: #9b7100;
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1;
}

.media-tree {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Datos SEO de la imagen seleccionada, bajo el listado de carpetas. */
.media-seo {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
}

.media-seo[hidden] {
  display: none;
}

.media-seo__title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.media-seo__file {
  margin: 0;
  color: var(--soft);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.media-seo label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.media-seo input,
.media-seo textarea,
.media-seo select {
  width: 100%;
  font: inherit;
  font-weight: 400;
  padding: 7px 9px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 8px;
  background: #fff;
}

.media-seo textarea {
  resize: vertical;
}

.media-seo__hint {
  margin: -4px 0 0;
  color: var(--soft);
  font-size: 0.74rem;
  line-height: 1.35;
}

.media-seo__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.media-seo__actions button {
  flex: 1 1 auto;
}

.media-seo__status {
  color: var(--soft);
  font-size: 0.76rem;
  min-height: 1em;
}

.media-tree__branch {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 12px;
  padding-left: 10px;
  border-left: 1px solid rgba(17, 24, 39, 0.05);
}

.media-tree__branch.is-collapsed {
  display: none;
}

.media-folder {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: 6px 8px;
  border: none !important;
  background: transparent !important;
  color: #374151 !important;
  text-align: left;
  font-size: 13px !important;
  font-weight: 400 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
  overflow-wrap: anywhere;
}

.media-folder:hover {
  background: rgba(17, 24, 39, 0.05) !important;
  color: #111111 !important;
}

.media-folder.is-selected {
  background: #fabd00 !important;
  color: #111111 !important;
  font-weight: 500 !important;
}

.panel-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

/* Solo queda el contador de archivos: una línea de estado, no una barra de acciones
   (copiar/mover/pegar/atrás viven en el menú contextual del clic derecho). */
.media-finder-toolbar {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.media-finder-toolbar .panel-note {
  margin: 0;
}

.media-card {
  cursor: default;
  content-visibility: auto;
  contain-intrinsic-size: 280px;
}

.media-card.is-selected {
  border-color: #c8102e;
  box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.14);
}

/* Los archivos se marcan pulsándolos, así que tienen que responder al pulsar: sin este
   acuse de recibo, marcar veinte fotos seguidas parece que no hace nada. */
.media-card[data-media-src] {
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.media-card[data-media-src]:active {
  transform: scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  .media-card[data-media-src] {
    transition: none;
  }
}

.media-load-more {
  display: block;
  margin: 18px auto 0;
}

.media-card {
  display: grid;
  /* start, no stretch: si una foto alta estira la fila, el nombre debe seguir
     pegado a su icono/miniatura en lugar de separarse. */
  align-content: start;
  min-width: 0;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

.media-card[hidden] {
  display: none !important;
}

.media-card__preview {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.8), transparent 20%),
    linear-gradient(135deg, rgba(250, 189, 0, 0.16), rgba(17, 24, 39, 0.04)),
    #f1f1f3;
  overflow: hidden;
}

.media-card__preview::after {
  position: absolute;
  inset: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  color: rgba(17, 24, 39, 0.58);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.media-card__preview--crest::after {
  content: "Escudo";
}

.media-card__preview--photo::after {
  content: "Foto";
}

.media-card__preview--poster::after {
  content: "Cartel";
}

.media-card__preview--logo::after {
  content: "Logo";
}

.media-card__preview--video::after {
  content: "Vídeo";
}

.media-card__preview--image {
  display: grid;
  place-items: center;
  background: #121214;
}

.media-card__preview--image::after {
  display: none;
}

.media-card__preview--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

.media-card__preview--image.is-missing::after {
  content: "Sin miniatura";
  display: grid;
}

.media-card strong,
.media-card span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Nombre del archivo o carpeta: cuerpo menor, centrado bajo su icono y sin negrita,
   igual en carpetas y en fotos para que la rejilla se lea como una sola cosa. */
.media-card strong {
  width: 100%;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
}

.media-rules span {
  color: var(--muted);
  font-size: 0.9rem;
}

.media-rules {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(67, 209, 122, 0.18);
  border-radius: 14px;
  background: rgba(67, 209, 122, 0.055);
}

.media-path-preview {
  display: block;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(250, 189, 0, 0.35);
  border-radius: 14px;
  background: rgba(250, 189, 0, 0.08);
  color: #9b7100;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.media-picker-modal[hidden] {
  display: none !important;
}

.media-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 22px;
}

.media-picker-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(244, 244, 246, 0.72);
  backdrop-filter: blur(18px);
}

.media-picker-dialog {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column !important;
  width: 80vw !important;
  height: 80vh !important;
  max-width: none !important;
  max-height: none !important;
  padding: 0 !important;
  border: 1px solid rgba(17, 24, 39, 0.13);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(250, 189, 0, 0.08), rgba(255, 255, 255, 0.72) 38%),
    #ffffff;
  box-shadow:
    0 24px 64px rgba(17, 24, 39, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

.media-picker-dialog .panel-title {
  padding: 20px 24px;
  border-bottom: 1px solid #e1e1e6;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.media-picker-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

.media-picker-sidebar {
  border-right: 1px solid #e1e1e6;
  background: #f8f8fa;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.media-picker-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.media-picker-tabs {
  display: flex;
  border-bottom: 1px solid #e1e1e6;
  background: #f4f4f6;
  padding: 0 16px;
}

.media-picker-tab-btn {
  padding: 14px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--soft);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 150ms ease;
}

.media-picker-tab-btn:hover {
  color: var(--text);
}

.media-picker-tab-btn.is-active {
  color: #111111;
  border-bottom-color: #fabd00;
}

.media-picker-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  min-height: 0;
}

.media-picker-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 0.85rem;
  color: var(--soft);
  margin-bottom: 14px;
  font-weight: 500;
}

.media-picker-breadcrumb__link {
  border: none;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
}

.media-picker-breadcrumb__link:last-child {
  color: var(--text);
}

.media-picker-breadcrumb__link:hover {
  background: rgba(17, 24, 39, 0.06);
  color: var(--text);
}

.media-picker-upload-zone {
  border: 2px dashed #c2c2c9;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  background: rgba(244, 244, 246, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: all 150ms ease;
  cursor: pointer;
}

.media-picker-upload-zone:hover,
.media-picker-upload-zone.is-dragover {
  border-color: #fabd00;
  background: rgba(250, 189, 0, 0.04);
}

.media-picker-upload-zone p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.media-picker-upload-zone span {
  font-size: 0.82rem;
  color: var(--soft);
}

.media-picker-upload-zone .zone-actions {
  display: flex;
  gap: 12px;
}

.media-picker-footer {
  padding: 16px 24px;
  border-top: 1px solid #e1e1e6;
  background: #f4f4f6;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Media folder widget styles on forms */
.media-folder-widget-container {
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 12px;
  padding: 14px;
  background: #fcfcfd;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.media-folder-current-path {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--soft);
  background: #f3f4f6;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  word-break: break-all;
  display: block;
}

.media-picker-option {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--soft);
  font-weight: 820;
  text-align: left;
  overflow-wrap: anywhere;
}

.media-picker-option:hover,
.media-picker-option.is-selected {
  border-color: rgba(250, 189, 0, 0.45);
  background: rgba(250, 189, 0, 0.12);
  color: var(--text);
}

.admin-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  max-width: min(360px, calc(100vw - 44px));
  padding: 14px 16px;
  border: 1px solid rgba(22, 135, 74, 0.24);
  border-radius: 14px;
  background: rgba(241, 250, 245, 0.96);
  color: #146c3f;
  box-shadow: var(--shadow);
}

@keyframes revealSection {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes spin-importador {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* macOS-inspired content workspace: compact segmented navigation, Finder-like lists and record inspector. */
.entity-tabs {
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 10px;
  background: #e9e9ed;
}

.entity-tab {
  min-height: 34px;
  padding-inline: 13px;
  border-radius: 7px;
}

.entity-tab.is-active {
  border-color: rgba(17, 24, 39, 0.1);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.12);
}

.table-toolbar {
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f6f6f8;
}

.table-toolbar .search-field {
  gap: 4px;
  color: var(--muted);
  font-size: 0.76rem;
}

/* Dos cajas de búsqueda (nombre y ciudad) tienen que caber una al lado de la
   otra: con el mínimo de 320px que traían se apilaban siempre. */
.table-toolbar .search-field {
  flex: 1 1 190px;
  min-width: min(100%, 190px);
}

.table-toolbar input[type="search"] {
  min-height: 38px;
  border-radius: 8px;
}

[data-city-new]::before,
[data-managed-new]::before,
[data-repeater-add]::before {
  margin-right: 6px;
  content: "+";
  font-size: 1.15em;
  line-height: 1;
}

[data-export-entity]::before {
  margin-right: 7px;
  content: "⇩";
  font-size: 1rem;
  line-height: 1;
}

.city-admin-table {
  max-height: min(68svh, 760px);
  padding-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  overflow: auto;
}

.city-table-body {
  gap: 0;
}

.city-table-row--head {
  top: 0;
  z-index: 3;
  padding: 5px 12px;
  border-bottom: 1px solid var(--line);
  background: #f1f1f4;
}

.city-table-row[data-search-text] {
  min-height: 48px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0;
  background: #ffffff;
}

.city-table-row[data-search-text]:hover,
.city-table-row[data-search-text].is-selected {
  border-color: transparent;
  background: rgba(0, 122, 255, 0.08);
}

.table-row-actions .ghost-button,
.table-row-actions .primary-button {
  min-height: 32px;
  padding-inline: 11px;
  border-radius: 7px;
  font-size: 0.78rem;
}

.city-edit-button,
.city-delete-button {
  min-height: 32px;
  padding-inline: 11px;
  border-radius: 7px;
  font-size: 0.78rem;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 100ms ease;
}

.city-edit-button {
  border-color: rgba(17, 24, 39, 0.14);
  background: #ffffff;
  color: var(--text);
}

.city-edit-button:hover {
  border-color: rgba(0, 122, 255, 0.3);
  background: rgba(0, 122, 255, 0.08);
  color: #0057b8;
}

.city-delete-button {
  border-radius: 7px;
}

.city-edit-button:active,
.city-delete-button:active {
  transform: scale(0.96);
}

/* «Borrar» en rojo también en los listados, como en las fichas. Era el único sitio
   donde seguía gris, con el mismo aspecto que «Editar»: dos botones idénticos uno al
   lado del otro y uno de ellos borra la ficha. */
.city-delete-button {
  border-color: rgba(215, 23, 47, 0.35);
  background: rgba(215, 23, 47, 0.09);
  color: var(--red-dark);
  font-weight: 600;
}

.city-delete-button:hover,
.city-delete-button:focus-visible {
  border-color: var(--red);
  background: var(--red);
  color: #ffffff;
}

.nested-fieldset {
  border-radius: 10px;
  background: #ffffff;
}

.nested-fieldset legend {
  width: 100%;
  padding: 0;
  color: var(--text);
}

.form-section-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 8px;
  border: 0;
  background: #ffffff;
  color: inherit;
  text-align: left;
  font-weight: inherit;
}

.form-section-toggle span:last-child {
  transition: transform 160ms ease;
}

.nested-fieldset.is-collapsed > :not(legend) {
  display: none !important;
}

.nested-fieldset.is-collapsed .form-section-toggle span:last-child {
  transform: rotate(-90deg);
}

.repeater-item {
  border-radius: 9px;
  background: #f7f7f9;
}

/* ── Fichas por secciones ─────────────────────────────────────────────────────
   Antes la ficha era un corrido de cajas y botones de arriba abajo, sin saber
   dónde acababa una cosa y empezaba otra. Cada bloque es ahora una sección con
   su titular, separada de la siguiente y con el fondo alternando blanco y gris
   para que la vista distinga los bordes sin tener que leer. */
.form-grid--sections {
  gap: 0;
}

.form-grid--sections > .nested-fieldset {
  padding: 0 22px 22px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 14px;
  gap: 14px;
  background: #ffffff;
}

.form-grid--sections > .nested-fieldset + .nested-fieldset {
  margin-top: 22px;
}

/* Empieza en gris y va alternando. El alterno se cuenta entre fieldsets: el resto
   de hijos de la rejilla son campos ocultos y no entran en :nth-of-type. */
.form-grid--sections > .nested-fieldset:nth-of-type(odd) {
  background: #e6e7ec;
  border-color: rgba(17, 24, 39, 0.16);
}

/* El titular va DENTRO de la caja, no partiendo el borde. Un <legend> normal se
   coloca encima de la línea del fieldset; flotándolo se comporta como una fila
   más y queda dentro, con su filete propio separándolo de los campos. */
.form-grid--sections > .nested-fieldset > legend {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.form-grid--sections > .nested-fieldset > legend .form-section-toggle {
  padding: 18px 0 12px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.14);
  background: transparent;
}

.form-grid--sections > .nested-fieldset > legend .form-section-toggle span:last-child {
  color: var(--soft);
  font-size: 0.9rem;
}

/* Sobre gris, solo se quedan en blanco las cajas que hay que rellenar. Las cajas
   contenedoras (filas de repetidor, bloques de multimedia, buscador de AEMET…)
   se funden con el fondo de la sección: si no, la sección parecía blanca. */
.form-grid--sections > .nested-fieldset:nth-of-type(odd) .repeater-item,
.form-grid--sections > .nested-fieldset:nth-of-type(odd) .media-folder-widget-container,
.form-grid--sections > .nested-fieldset:nth-of-type(odd) .aemet-city-finder,
.form-grid--sections > .nested-fieldset:nth-of-type(odd) .photographer-photos {
  background: transparent;
  border-color: rgba(17, 24, 39, 0.16);
}

.form-grid--sections > .nested-fieldset:nth-of-type(odd) .media-folder-current-path {
  background: rgba(255, 255, 255, 0.55);
}

/* Subtítulo dentro de una sección (p. ej. «Sede canónica» dentro de Sedes). */
/* ── Aviso de cambios sin guardar ─────────────────────────────────────────────
   Cuadro centrado, al estilo del aviso del sistema: sale por encima de todo y
   no deja seguir hasta decidir qué se hace con lo escrito. */
.aviso-cambios {
  max-width: min(420px, calc(100vw - 32px));
  margin: auto;
  padding: 26px 26px 22px;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 18px;
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 30px 70px rgba(17, 24, 39, 0.28);
}

.aviso-cambios::backdrop {
  background: rgba(17, 24, 39, 0.42);
}

.aviso-cambios__titulo {
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.aviso-cambios__texto {
  margin: 0 0 20px;
  color: var(--soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.aviso-cambios__botones {
  display: grid;
  gap: 8px;
}

.aviso-cambios__botones button {
  width: 100%;
}

.aviso-cambios .ghost-button {
  border-color: rgba(212, 160, 23, 0.55);
  background: #fdf3d2;
  color: #7a5a00;
}

/* Salir sin guardar es la que destruye trabajo: se deja discreta y en rojo, para
   que no se pulse por inercia. */
.aviso-cambios .aviso-cambios__descartar {
  border-color: rgba(215, 23, 47, 0.3);
  background: transparent;
  color: var(--red-dark);
}

/* Los botones de la ficha llevan el amarillo de la casa, para que se vea a la
   primera que hay que pulsarlos. El rojo puro queda solo para Guardar, que es
   la única acción que escribe en la base de datos. */
.record-inspector .ghost-button {
  border-color: rgba(212, 160, 23, 0.55);
  background: #fdf3d2;
  color: #7a5a00;
}

.record-inspector .ghost-button:hover {
  border-color: rgba(212, 160, 23, 0.85);
  background: #fbe6a4;
  color: #6a4e00;
}

.record-inspector .primary-button {
  border-color: rgba(215, 23, 47, 0.28);
  background: var(--red);
  color: #ffffff;
}

.form-subhead {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.form-grid--sections > .nested-fieldset > .form-subhead:first-of-type {
  margin-top: 0;
}

@media (max-width: 720px) {
  .form-grid--sections > .nested-fieldset {
    padding: 16px;
  }
  .form-grid--sections > .nested-fieldset + .nested-fieldset {
    margin-top: 16px;
  }
}

/* Ventana lateral sobre el listado, como fue siempre: el listado no se toca y la
   ficha se desplaza entera por dentro. Lo único que cambia respecto al original es
   que Guardar / Previsualizar / Cerrar viven en la barra de título, que va pegada
   arriba, así que están siempre a la vista pese al scroll. */
.record-inspector {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  width: min(780px, calc(100vw - 292px));
  max-height: 100svh;
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: #f5f5f7;
  box-shadow: -28px 0 70px rgba(17, 24, 39, 0.18);
}

/* Barra de la ficha: título a la izquierda, acciones a la derecha. Pegada al borde
   superior de la ventana, por encima del contenido que pasa por debajo. */
.record-inspector > .panel-title {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  /* Una sola fila SIEMPRE. Con «wrap», un título largo —«Humildad y Paciencia»— empujaba
     los botones a una segunda línea y la cabecera cambiaba de forma según la hermandad
     que abrieras. Ahora el que cede es el título, que se corta con puntos suspensivos. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 250, 252, 0.94);
  backdrop-filter: blur(18px);
}

.record-inspector > .panel-title > h3 {
  min-width: 0;
  margin-right: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
})

.record-inspector__tools,
.record-inspector__actions {
  flex: 0 0 auto;
}

.record-inspector > .panel-title button {
  white-space: nowrap;
}

/* Empuja herramientas y acciones al lado derecho. */
.record-inspector__tools {
  margin-left: auto;
}

.record-inspector__actions {
  display: flex;
  /* Los tres botones, juntos y en una fila. Sin esto se partían solos en cuanto el
     título ocupaba sitio, y era la mitad del problema. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  /* Separador respecto a "Contraer bloques": aquello cambia la vista, esto decide
     qué pasa con la ficha. No son la misma clase de acción. */
  padding-left: 10px;
  border-left: 1px solid var(--line);
}

/* Los cuatro controles de la barra, con la misma caja: heredados de sitios distintos
   venían con alturas dispares (58 px frente a 40) y el grupo quedaba descuadrado. */
.record-inspector > .panel-title button {
  min-height: 34px;
  height: 34px;
  padding-block: 0;
  padding-inline: 13px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}

.record-inspector > .admin-form {
  padding: 18px;
}

/* Red de seguridad: si la barra de botones no ha llegado a subir a la cabecera —por
   ejemplo con un admin.js antiguo en la caché del navegador— se queda pegada al
   borde inferior de la ventana en lugar de perderse al final del formulario. */
.record-inspector > .admin-form .form-actions {
  position: sticky;
  bottom: -18px;
  z-index: 2;
  margin-top: 8px;
  padding: 12px 0;
  background: rgba(250, 250, 252, 0.96);
}

.record-inspector__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.record-inspector__toggle-all {
  min-height: 32px;
  padding-inline: 10px;
  border-radius: 7px;
  font-size: 0.76rem;
}

.record-inspector input,
.record-inspector select {
  min-height: 38px;
  border-radius: 8px;
}

.record-inspector textarea {
  border-radius: 8px;
}

@media (max-width: 1180px) {
  .auth-shell {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
  }

  .auth-brand {
    max-width: 720px;
  }

  .admin-shell {
    grid-template-columns: 238px minmax(0, 1fr);
  }

  .record-inspector {
    width: min(740px, calc(100vw - 238px));
  }

  .tool-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .itinerary-search-form,
  .itinerary-research-grid,
  .geolocation-results {
    grid-template-columns: minmax(0, 1fr);
  }

  .geolocation-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .geolocation-form .primary-button {
    grid-column: 1 / -1;
  }

  .metric-board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .content-split,
  .media-layout,
  .admin-grid,
  .admin-grid--dashboard {
    grid-template-columns: minmax(0, 1fr);
  }

  .bot-trap-settings,
  .bot-trap-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bot-trap-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .geolocation-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .media-layout {
    grid-template-areas:
      "tree"
      "library"
      "actions";
  }
}

@media (max-width: 820px) {
  .admin-shell {
    display: block;
  }

  .record-inspector {
    width: 100vw;
  }

  .record-inspector > .admin-form {
    padding: 16px;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    width: min(320px, calc(100vw - 44px));
    max-width: none;
    min-height: 100svh;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
    box-shadow: 24px 0 54px rgba(17, 24, 39, 0.18);
    transform: translateX(-105%);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .admin-nav-open {
    overflow: hidden;
  }

  .admin-nav-open .admin-sidebar {
    transform: translateX(0);
  }

  .admin-sidebar-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    border: 0;
    background: rgba(17, 17, 20, 0.44);
    backdrop-filter: blur(3px);
  }

  .admin-nav {
    display: grid;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: visible;
  }

  .admin-nav__item {
    width: 100%;
  }

  .admin-sidebar__status {
    display: none;
  }

  .admin-topbar,
  .section-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  .admin-topbar {
    position: sticky;
    grid-template-columns: minmax(0, 1fr);
    margin-top: -22px;
  }

  .admin-topbar__context {
    align-items: center;
  }

  .admin-nav-toggle {
    display: grid;
    flex: 0 0 auto;
  }

  .admin-actions {
    padding-left: 56px;
  }

  .metric-board,
  .geolocation-form,
  .geolocation-summary,
  .geolocation-progress__text,
  .bot-trap-summary,
  .insight-stats,
  .tool-grid,
  .itinerary-source-card,
  .verified-source-row,
  .media-grid,
  .form-grid,
  .nested-fieldset,
  .repeater-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .media-picker-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .bot-trap-row,
  .bot-trap-row--compact {
    grid-template-columns: minmax(0, 1fr);
  }

  .span-2 {
    grid-column: auto;
  }

  .admin-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  .admin-table__head,
  .admin-table button {
    min-width: 620px;
  }
}

@media (max-width: 520px) {
  .auth-shell {
    width: min(100% - 28px, 520px);
    padding-block: 28px;
  }

  .auth-card {
    padding: 20px;
    border-radius: 22px;
  }

  .admin-main {
    padding-inline: 14px;
  }

  .admin-sidebar {
    padding: 16px;
  }

  .admin-topbar {
    margin-inline: -14px;
    padding-inline: 14px;
  }

  .admin-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
  }

  .admin-actions [data-admin-save] {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .metric-board {
    grid-template-columns: 1fr;
  }

  .admin-panel,
  .tool-card {
    padding: 18px;
    border-radius: 20px;
  }

  .panel-title {
    display: grid;
  }

  .record-inspector > .panel-title {
    display: flex;
    /* En estrecho sí bajan de línea: es lo que quieren las reglas de aquí abajo. */
    flex-wrap: wrap;
    align-items: center;
  }

  .record-inspector > .panel-title > h3 {
    white-space: normal;
  }

  .record-inspector__tools {
    width: 100%;
  }

  .record-inspector__toggle-all {
    width: 100%;
  }

  /* En pantallas estrechas las acciones bajan a su propia línea, ocupando el ancho. */
  .record-inspector__actions {
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .record-inspector__actions button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.aemet-city-finder {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.inline-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
}

.aemet-city-results {
  display: grid;
  gap: 8px;
}

.aemet-city-results button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8f8fa;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.aemet-city-results button:hover,
.aemet-city-results button:focus-visible {
  border-color: rgba(196, 18, 43, 0.34);
  background: #fff4f6;
}

.aemet-city-results small {
  color: var(--muted);
}

.youtube-review-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.youtube-review-list:empty::before {
  content: "Nada pendiente de revisar.";
  color: var(--muted);
}

.youtube-review-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8f8fa;
}

.youtube-review-item img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: #e6e6ea;
}

.youtube-review-item .youtube-review-item__meta {
  min-width: 0;
}

.youtube-review-item .youtube-review-item__meta strong {
  display: block;
}

.youtube-review-item .youtube-review-item__meta small {
  display: block;
  color: var(--muted);
}

.youtube-review-item .form-actions {
  margin-top: 0;
}

.media-card__preview[style*="background-image"]::after {
  display: none !important;
}

.duplicates-table-wrap {
  margin-top: 10px;
  overflow-x: auto;
}

.duplicates-table {
  width: 100%;
  border-collapse: collapse;
}

.duplicates-table:not([hidden]) {
  display: table;
}

.duplicates-table th,
.duplicates-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.duplicates-table th {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.duplicates-table tbody tr:hover {
  background: #f8f8fa;
}

.duplicates-table td:first-child,
.duplicates-table th:first-child {
  width: 36px;
}

.duplicates-table__group-title {
  font-weight: 600;
}

.duplicates-table__group-title small {
  display: block;
  font-weight: 400;
  color: var(--muted);
}

.media-card {
  position: relative;
}

.media-card__delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.68);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
  padding: 0 0 2px 0;
}

.media-card__delete:hover {
  background: #d7172f;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(215, 23, 47, 0.4);
}

.city-table-row--foot {
  margin-top: 8px;
  border-top: 2px solid var(--border);
  padding: 12px 12px 4px;
  background: rgba(248, 248, 250, 0.96);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.city-table-row--foot button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  text-align: left;
}

.city-table-row--foot button::after {
  content: "↕";
  font-size: 0.68rem;
  opacity: 0.5;
}

.city-table-row--head > button,
.city-table-row--head > span:not(:last-child),
.city-table-row--head > div:not(.header-checkbox-cell),
.city-table-row--foot > button,
.city-table-row--foot > span:not(:last-child),
.city-table-row--foot > div:not(.header-checkbox-cell) {
  position: relative;
  border-right: 1px solid rgba(17, 24, 39, 0.15) !important;
  padding-right: 12px;
}

/* Premium Right-Click Context Menu */
.media-context-menu {
  position: fixed;
  z-index: 10000;
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, 0.15);
  padding: 6px;
  min-width: 180px;
  display: none;
}

.media-context-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  transition: background 150ms ease;
}

.media-context-menu__item:hover {
  background: #f3f4f6;
  color: #111111;
}

.media-context-menu__item--danger {
  color: #d7172f;
}

.media-context-menu__item--danger:hover {
  background: rgba(215, 23, 47, 0.08);
  color: #d7172f;
}

/* Folder cards premium styles */
.media-card--folder {
  border: none !important;
  background: transparent !important;
  padding: 4px !important;
  box-shadow: none !important;
  border-radius: 12px;
  cursor: pointer;
  /* Sin esto, los dos toques para abrir dejaban el nombre resaltado en azul por la
     selección de texto del navegador, y parecía que eso era «la carpeta marcada». */
  user-select: none;
  -webkit-user-select: none;
}

/* La carpeta marcada, al estilo de macOS: la tarjeta entera teñida de azul, no solo
   el nombre. Lleva «!important» porque la regla de arriba fuerza fondo transparente
   y sin él no se veía absolutamente nada al pulsar una carpeta. */
.media-card--folder.is-selected {
  background: rgba(90, 167, 242, 0.22) !important;
  box-shadow: inset 0 0 0 1px rgba(47, 127, 209, 0.45) !important;
}

.media-card--folder.is-selected strong {
  color: #123a68;
}

.media-card--folder .media-card__preview--folder {
  border: none !important;
  background: transparent !important;
  /* Sin aspect-ratio: con alto fijo dejaba el recuadro en 100px de ancho y el icono
     quedaba pegado a la izquierda mientras el nombre se centraba en toda la tarjeta.
     A ancho completo, icono y nombre comparten el mismo eje central. */
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.media-card--folder.is-dragover {
  background: rgba(90, 167, 242, 0.1) !important;
  border-radius: 12px;
}

.mac-folder-icon {
  flex: none;
  display: inline-block;
  filter: drop-shadow(0 1px 1px rgba(17, 24, 39, 0.12));
}

.media-folder .mac-folder-icon {
  vertical-align: -3px;
}

.media-card__preview--video {
  background: #111 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.media-card__preview--video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-card__preview--video:has(video)::after {
  display: none !important;
}

/* ===== Selector de punto focal de la cabecera de portada ===== */
.cover-header-field .form-note { margin: 0 0 10px; }
.cover-focus__stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid var(--line, rgba(17,24,39,0.12));
  background: #0c0c0e;
}
.cover-focus__stage img {
  display: block;
  max-width: 100%;
  max-height: 340px;
  height: auto;
}
.cover-focus__dot {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(215, 23, 47, 0.55);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 2px 10px rgba(0,0,0,0.45);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 120ms ease, top 120ms ease;
}

/* ===== Fotos acreditadas a un fotógrafo ===== */
.photographer-photos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}
.photographer-photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: #0c0c0e;
  border: 1px solid var(--line, rgba(17,24,39,0.12));
}
.photographer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photographer-photo__remove {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(215, 23, 47, 0.92); color: #fff;
  font-size: 11px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
/* Foto marcada dentro del selector múltiple */
.media-picker-modal .media-card.is-selected {
  outline: 3px solid #d7172f;
  outline-offset: -3px;
  border-radius: 12px;
}

/* Foto que ya está acreditada a este fotógrafo (dentro del selector múltiple) */
.media-picker-modal .media-card.is-assigned::before {
  content: "Ya asignada";
  position: absolute;
  top: 8px; left: 8px; z-index: 6;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.95);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.media-picker-modal .media-card { position: relative; }

/* ---------------------------------------------------------------------------
   SEO · Mapa de enlaces internos
   El grafo se dibuja en un canvas propio, sin librerías: son miles de puntos y
   una librería de gráficos genérica aquí solo añadiría peso y dependencias.
   --------------------------------------------------------------------------- */
.seo-graph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.seo-graph-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

.seo-graph-field > span { white-space: nowrap; }

.seo-graph-field select {
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fff;
  font-size: 0.85rem;
}

.seo-graph-note {
  margin: 12px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
}

.seo-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
}

.seo-graph-legend button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--soft);
  border-radius: 6px;
}

.seo-graph-legend button[aria-pressed="false"] {
  opacity: 0.4;
  text-decoration: line-through;
}

.seo-graph-legend .dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.seo-graph-legend .count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.seo-graph-canvas-wrap {
  position: relative;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfbfd;
  overflow: hidden;
}

#seo-grafo-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: grab;
}

#seo-grafo-canvas.is-empty { opacity: 0; }

.seo-graph-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.seo-graph-tooltip {
  position: absolute;
  z-index: 5;
  max-width: 320px;
  padding: 8px 11px;
  border-radius: 9px;
  background: rgba(20, 20, 23, 0.94);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1.4;
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.seo-graph-tooltip strong {
  display: block;
  margin-bottom: 2px;
  font-size: 0.82rem;
}

.seo-graph-tooltip .meta {
  color: rgba(255, 255, 255, 0.72);
  word-break: break-all;
}

.seo-graph-levels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.seo-graph-levels .level {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
  color: var(--soft);
}

.seo-graph-levels .level strong { font-variant-numeric: tabular-nums; }
.seo-graph-levels .level.is-far { border-color: rgba(215, 23, 47, 0.4); color: var(--red-dark); }

.seo-graph-console-wrap {
  margin-top: 16px;
  font-size: 0.85rem;
}

.seo-graph-console-wrap summary {
  cursor: pointer;
  color: var(--muted);
}

.seo-graph-console {
  width: 100%;
  min-height: 200px;
  margin-top: 10px;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #1c1c1f;
  color: #00ff66;
  font-family: monospace;
  font-size: 0.8rem;
  line-height: 1.5;
  resize: vertical;
}


/* Nota explicativa dentro de un repetidor (p. ej. el punto de salida de la procesión) */
.repeater-hint {
  margin: 2px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ── Cuentas del público ─────────────────────────────────────────────────────── */
/* Todas las columnas tienen que medir lo mismo en la cabecera y en las filas. La
   última era «auto», o sea que se ajustaba al contenido de cada fila: la cabecera
   medía lo que ocupa la palabra ACCIONES y las filas lo que ocupan dos botones, así
   que cada rejilla repartía el sobrante de forma distinta y no coincidía ni una.
   Con anchos fijos o en fracciones, las dos salen calcadas. */
.users-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.5fr) 130px 150px 96px 110px 190px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.07);
  font-size: 0.86rem;
  min-width: 0;
}

/* Filas alternas: en un listado largo, el gris de fondo evita perder el renglón al
   pasar de una columna a otra. Es el mismo gris marcado de las secciones de las
   fichas; uno más suave no se distingue del blanco. */
.users-row:nth-child(even) {
  background: #e9eaee;
}

.users-row--head {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--soft);
  background: #dcdee4;
  border-radius: 10px 10px 0 0;
}

.users-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.users-nombre {
  font-weight: 700;
  color: var(--text);
}

.users-correo {
  color: var(--soft);
}

.users-row select {
  min-height: 36px;
  font-size: 0.82rem;
}

/* Los dos botones, uno debajo del otro y del mismo ancho. Antes iban en fila con
   salto automático: al no caber acababan apilados igual, pero desiguales y con el
   aspecto de haberse roto. */
.users-acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

/* «Correo de contraseña» no cabe en una línea en 190px, así que el texto se salía
   de la caja y se leía encima de la columna de al lado. Se le deja partir en dos
   líneas y crecer a lo alto.
   El display se declara aquí a mano: estos botones acababan calculados como
   «grid», que colocaba el texto fuera del recuadro. Con inline-flex y el centrado
   explícito, el texto va donde tiene que ir pase lo que pase en el resto de la
   hoja. */
.users-acciones .ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 34px;
  height: auto;
  padding: 7px 10px;
  font-size: 0.76rem;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

.users-acciones .badge--danger {
  border-color: rgba(215, 23, 47, 0.3);
  color: var(--red-dark);
}

.users-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--muted);
}

/* En pantallas estrechas la rejilla de siete columnas no cabe: cada cuenta pasa a
   ser una tarjeta con su rótulo delante de cada dato. */
@media (max-width: 1100px) {
  .users-row--head {
    display: none;
  }
  .users-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 12px;
    margin-bottom: 10px;
  }
  .users-row > span:nth-child(3)::before { content: "Tipo: "; font-weight: 700; color: var(--muted); }
  .users-row > span:nth-child(4)::before { content: "Estado: "; font-weight: 700; color: var(--muted); }
  .users-row > span:nth-child(5)::before { content: "Alta: "; font-weight: 700; color: var(--muted); }
  .users-row > span:nth-child(6)::before { content: "Último acceso: "; font-weight: 700; color: var(--muted); }
}

/* ── Solicitudes de fotógrafo ────────────────────────────────────────────────── */
.solicitud {
  padding: 16px 18px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  background: #ffffff;
  margin-bottom: 12px;
}

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

.solicitud__estado {
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.solicitud__estado--pendiente { background: #fdf3d2; color: #7a5a00; }
.solicitud__estado--aprobada  { background: #e8f6ee; color: #0f6136; }
.solicitud__estado--rechazada { background: #fdeaec; color: #9e1021; }

.solicitud__fecha {
  font-size: 0.78rem;
  color: var(--muted);
}

.solicitud__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 18px;
  margin: 0 0 12px;
}

.solicitud__datos dt {
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.solicitud__datos dd {
  margin: 3px 0 0;
  font-size: 0.86rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.solicitud__mensaje {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f6f6f8;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--soft);
}

.solicitud__acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: end;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 24, 39, 0.09);
}

.solicitud__acciones label {
  display: grid;
  gap: 5px;
  font-size: 0.76rem;
}

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

.solicitud__botones button {
  flex: 1 1 auto;
  min-height: 42px;
}

/* Acreditar de golpe todas las fotos de una carpeta. Va dentro del bloque de la
   carpeta, debajo de las miniaturas, para que se vea a qué fotos afecta. */
.media-folder-photographer {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(17, 24, 39, 0.09);
}

.media-folder-photographer label {
  display: grid;
  gap: 5px;
  font-size: 0.76rem;
}

.media-folder-photographer select {
  min-height: 40px;
}

.media-folder-photographer .ghost-button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.media-folder-photographer__nota {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 560px) {
  .media-folder-photographer {
    grid-template-columns: 1fr;
  }
}

/* ── Cuarentena: lo que sube la gente, antes de publicarse ─────────────────────── */

/* Vista previa a la izquierda y datos a la derecha: hay que ver lo que se aprueba,
   no leer el nombre del fichero y fiarse. */
/* ── Operaciones ─────────────────────────────────────────────────────────────────
   Índice a la izquierda, la herramienta elegida a la derecha y la consola debajo,
   plegada. Antes eran diecinueve tarjetas una detrás de otra en una columna estrecha:
   había que leerlas todas para encontrar la que se buscaba. */

.ops {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 8px;
}

.ops__indice {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  background: #ffffff;
}

.ops__grupo {
  margin: 14px 0 4px;
  padding: 0 10px;
  color: #8a8e96;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops__grupo:first-child {
  margin-top: 2px;
}

.ops__lista {
  display: grid;
  gap: 2px;
}

.ops__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.ops__item:hover {
  background: rgba(17, 24, 39, 0.05);
}

.ops__item.is-active {
  background: rgba(215, 23, 47, 0.1);
  color: #b0102a;
  font-weight: 600;
}

.ops__item:focus-visible {
  outline: 2px solid #fabd00;
  outline-offset: 1px;
}

/* Lo que todavía no existe se dice, no se disimula. */
.ops__pendiente {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.07);
  color: #6d717a;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.ops__ficha h3 .ops__pendiente {
  margin-left: 8px;
  vertical-align: 3px;
}

.ops__detalle {
  min-width: 0;
  padding: 22px 24px 24px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  background: #ffffff;
}

/* La ficha acompaña al bajar por el índice: casi todas ocupan mucho menos que la
   lista de la izquierda, y si no, al elegir la última hay que subir a leerla. */
@media (min-width: 1181px) {
  .ops__detalle {
    position: sticky;
    top: 68px;
  }
}

.ops__ficha[hidden] {
  display: none;
}

.ops__ficha h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}

.ops__ficha p {
  margin: 0 0 12px;
  max-width: 68ch;
  color: #3a3f47;
  font-size: 0.95rem;
  line-height: 1.6;
}

.ops__nota {
  padding: 10px 12px;
  border-left: 3px solid rgba(250, 189, 0, 0.7);
  border-radius: 0 8px 8px 0;
  background: rgba(250, 189, 0, 0.08);
  font-size: 0.9rem !important;
}

.ops__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.ops__acciones--campo {
  align-items: end;
}

.ops__campo {
  display: grid;
  gap: 5px;
  flex: 1 1 240px;
  min-width: 0;
  color: #6d717a;
  font-size: 0.82rem;
}

.ops__campo--corto {
  flex: 0 1 180px;
}

.ops__campo input {
  padding: 9px 11px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
}

/* ── La consola ── */
.ops-consola {
  margin-top: 18px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.ops-consola__cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ops-consola__cabecera::-webkit-details-marker {
  display: none;
}

/* El triángulo se dibuja aquí para poder girarlo al abrir sin depender del que
   pinta cada navegador por su cuenta. */
.ops-consola__cabecera::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid #8a8e96;
  transition: transform 160ms ease;
}

.ops-consola[open] .ops-consola__cabecera::before {
  transform: rotate(90deg);
}

.ops-consola__titulo {
  flex: 1 1 auto;
  font-size: 0.95rem;
  font-weight: 600;
}

.ops-consola__cuerpo {
  display: grid;
  gap: 10px;
  justify-items: end;
  padding: 0 18px 18px;
}

.ops-consola__cuerpo textarea {
  width: 100%;
  min-height: 280px;
  padding: 14px;
  border: 0;
  border-radius: 10px;
  background: #1c1c1f;
  color: #4ade80;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  resize: vertical;
}

@media (max-width: 1180px) {
  .ops {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ops__item,
  .ops-consola__cabecera::before {
    transition: none;
  }
}

/* Barra de selección en tanda. Se queda pegada arriba al bajar por la lista: con
   veinte fotos por revisar, el botón de publicar tiene que estar siempre a mano. */
.cuarentena-lote {
  position: sticky;
  top: 62px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 18px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(250, 189, 0, 0.5);
  border-radius: 12px;
  background: rgba(255, 249, 230, 0.96);
  backdrop-filter: blur(8px);
}

.cuarentena-lote[hidden] {
  display: none;
}

.cuarentena-lote__todas {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.cuarentena-lote__cuenta {
  color: #6d717a;
  font-size: 0.85rem;
}

.cuarentena-lote__nota {
  flex: 1 1 240px;
  min-width: 0;
}

.cuarentena-lote__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.cuarentena-lote button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.cuarentena {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 12px;
  background: #ffffff;
}

/* La casilla va encima de la miniatura, no en una columna aparte: así se marca
   mirando la foto, que es lo que se está decidiendo. */
.cuarentena__marca {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.28);
  cursor: pointer;
}

.cuarentena__marca input {
  width: 17px;
  height: 17px;
  margin: 0;
  cursor: pointer;
}

.cuarentena--pendiente:has([data-cuarentena-marca]:checked) {
  border-color: rgba(250, 189, 0, 0.8);
  box-shadow: 0 0 0 3px rgba(250, 189, 0, 0.18);
}

.cuarentena__vista {
  overflow: hidden;
  border-radius: 10px;
  background: #111113;
}

.cuarentena__vista img,
.cuarentena__vista video {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #111113;
}

.cuarentena__cuerpo {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.cuarentena__cuerpo code {
  overflow-wrap: anywhere;
  font-size: 0.82em;
}

/* Cuántas cosas esperan revisión, en la propia navegación: si hay que entrar a
   mirarlo, no se mira. */
.admin-nav__aviso {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 99px;
  background: #c8102e;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 720px) {
  .cuarentena { grid-template-columns: 1fr; }
  .cuarentena__vista img,
  .cuarentena__vista video { max-height: 220px; }
}

/* Maqueta de comentarios: se ve el diseño, pero no se toca. Que no parezca que
   funciona y no funciona. */
.comentario--maqueta {
  opacity: 0.72;
}

.comentario--maqueta::before {
  content: "Ejemplo";
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(17, 24, 39, 0.08);
  color: #6b7078;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mensaje-admin__cuerpo,
.mensaje-admin__respuesta p {
  margin: 0;
  color: #3a3f47;
  line-height: 1.6;
  /* Se guardó tal cual lo escribieron: los saltos de línea se respetan. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mensaje-admin__respuesta {
  margin-top: 12px;
  padding: 12px 14px;
  border-left: 3px solid #c8102e;
  border-radius: 0 10px 10px 0;
  background: rgba(17, 24, 39, 0.04);
}

.mensaje-admin__respuesta strong {
  display: block;
  margin-bottom: 4px;
  color: #9e1021;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Cartel de «estos datos no vienen de la base de datos». Va en rojo y ocupando el ancho
   porque editar una ficha partiendo de una copia vieja la guarda mal, y eso no se puede
   descubrir tres días después. */
.aviso-datos-viejos {
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid rgba(215, 23, 47, 0.4);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  background: rgba(215, 23, 47, 0.08);
  color: var(--red-dark);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.5;
}

/* El aviso de «usuarios» no es una alerta: es un dato. Va en gris, no en rojo, para
   que no parezca que hay 340 cosas pendientes de hacer. */
.admin-nav__aviso--suave {
  /* Pensada para fondo claro; el menú ahora es oscuro (ver .admin-sidebar), así
     que aquí necesita blanco translúcido, no oscuro — con el original, oscuro
     sobre oscuro, esta insignia era invisible. */
  background: rgba(255, 255, 255, 0.14);
  color: var(--admin-sidebar-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Qué ficha gestiona cada cuenta
   ═══════════════════════════════════════════════════════════════════════════
   Se despliega dentro de la fila, ocupando las siete columnas: es información
   de esa cuenta y sacarla a otro sitio obligaría a perder de vista de quién es.
   ═══════════════════════════════════════════════════════════════════════════ */
.users-fichas {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding: 14px 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.03);
}

.users-fichas__vacio {
  margin: 0;
  color: #5b6068;
}

.users-fichas__titulo {
  margin: 0 0 2px;
  font-weight: 700;
}

.users-fichas__tipo {
  font-weight: 400;
  color: #5b6068;
}

/* La ficha borrada se marca en rojo: la cuenta sigue apuntando a algo que ya no
   está, y eso hay que verlo sin tener que ir a comprobarlo. */
.users-fichas__roto {
  color: #b91c1c;
}

.users-fichas__compis {
  margin: 0 0 10px;
  color: #3a3f47;
  line-height: 1.5;
}

/* El botón se estiraba a todo el ancho: dentro de la caja no hay rejilla que lo
   sujete y los botones del panel son de ancho completo por defecto. */
.users-fichas__ficha .ghost-button {
  width: auto;
}

.users-fichas__alta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.users-fichas__alta input {
  flex: 1 1 16rem;
  min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cambios en fichas
   ═══════════════════════════════════════════════════════════════════════════
   Una línea por guardado, y al pulsar se despliega qué cambió campo a campo.
   Lo que hay que leer de un vistazo es la ficha y qué se tocó; la fecha y quién
   fue van en gris, que son la letra pequeña.
   ═══════════════════════════════════════════════════════════════════════════ */
.revisiones__fila {
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.revisiones__cabecera {
  display: grid;
  grid-template-columns: 120px minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: 12px;
  align-items: baseline;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

.revisiones__cabecera:hover {
  background: rgba(17, 24, 39, 0.03);
}

.revisiones__cuando,
.revisiones__quien {
  color: #5b6068;
}

.revisiones__ficha {
  font-weight: 700;
}

.revisiones__que,
.revisiones__ficha,
.revisiones__quien {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revisiones__detalle {
  padding: 4px 14px 16px;
}

.revisiones__campo {
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 2px solid rgba(17, 24, 39, 0.12);
}

.revisiones__campo-nombre {
  margin: 0 0 3px;
  font-weight: 700;
  font-size: 0.82rem;
}

.revisiones__valor {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  /* El texto largo de una descripción tiene que poder cortarse por donde sea:
     una URL de doscientos caracteres si no ensancha la tabla entera. */
  overflow-wrap: anywhere;
}

.revisiones__valor span {
  color: #5b6068;
}

/* El «antes» apagado y el «ahora» en negro: lo que hay ahora es lo que está
   publicado, y es lo que hay que leer primero al decidir si deshacer. */
.revisiones__valor--antes {
  color: #6b7280;
}

.revisiones__valor--ahora {
  color: #141417;
}

.revisiones__roto {
  color: #b91c1c;
}

.revisiones__detalle .ghost-button {
  width: auto;
  margin-top: 4px;
}

@media (max-width: 900px) {
  .revisiones__cabecera {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .revisiones__que,
  .revisiones__ficha,
  .revisiones__quien {
    white-space: normal;
  }
}

/* Los cambios que aún no se han mirado, con un punto delante. El aviso del menú
   se apaga al abrir la sección, así que sin esto no habría forma de saber cuáles
   eran los nuevos una vez dentro. */
.revisiones__fila--nueva .revisiones__cuando::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #d7172f;
  vertical-align: middle;
}

.revisiones__fila--nueva .revisiones__ficha {
  color: #141417;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   Conversaciones y denuncias (mensajes directos)
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Para las etiquetas que tienen que existir para quien usa lector de pantalla pero no
   se pintan. No la había en esta hoja. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dm-admin {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 14px;
  align-items: start;
}

.dm-admin__lista {
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.dm-admin__fila {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dm-admin__fila:hover {
  background: rgba(0, 0, 0, 0.04);
}

.dm-admin__fila.is-active {
  background: rgba(215, 23, 47, 0.09);
}

.dm-admin__nombre {
  font-weight: 700;
  font-size: 0.9rem;
}

.dm-admin__ultimo {
  grid-column: 1;
  overflow: hidden;
  color: #5a5f68;
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-admin__fecha {
  grid-column: 2;
  grid-row: 1;
  color: #7a7f88;
  font-size: 0.74rem;
  white-space: nowrap;
}

.dm-admin__hilo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.dm-admin__con {
  margin: 0;
  font-weight: 700;
}

.dm-admin__mensajes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 340px;
  padding: 12px;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.dm-admin__mensaje {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 12px 12px 12px 4px;
  background: #f0f1f3;
}

/* Lo que ha escrito la casa, a la derecha: en una denuncia hay que distinguir de un
   vistazo quién dijo qué. */
.dm-admin__mensaje--mio {
  align-self: flex-end;
  border-radius: 12px 12px 4px 12px;
  background: #d7172f;
  color: #ffffff;
}

.dm-admin__autor {
  display: block;
  color: #5a5f68;
  font-size: 0.72rem;
  font-weight: 700;
}

.dm-admin__texto {
  margin: 0;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.dm-admin__fecha-msg {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  opacity: 0.7;
}

.dm-admin__escribir {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.dm-admin__escribir textarea {
  flex: 1;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font: inherit;
  resize: vertical;
}

.dm-denuncia {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.dm-denuncia__motivo {
  grid-column: 1;
  color: #5a5f68;
  font-size: 0.86rem;
}

.dm-denuncia__acciones {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
}

.dm-denuncia.is-revisada {
  opacity: 0.55;
}

@media (max-width: 860px) {
  .dm-admin {
    grid-template-columns: 1fr;
  }
}

/* Grupo de radios «¿de qué tipo es?» del alta manual de canales. El «label»
   genérico (display:grid + input a ancho completo, ver arriba) está pensado para
   un campo de texto con su etiqueta encima, no para «radio + texto» en línea, así
   que aquí se pisa lo justo para que quede como una fila normal. */
.add-channel-tipo {
  border: 0;
  padding: 0;
  margin: 4px 0 0;
  display: grid;
  gap: 8px;
}

.add-channel-tipo legend {
  padding: 0;
  color: var(--soft);
  font-size: 0.84rem;
  font-weight: 760;
}

.add-channel-tipo label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 400;
  font-size: 0.92rem;
}

.add-channel-tipo input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  border: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* --- Agente SEO Autónomo ---------------------------------------------------- */
.seo-agent-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.seo-agent-kpi-card {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--admin-radius-sm);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.seo-agent-kpi-val {
  font-size: 1.6rem;
  font-weight: 750;
  color: var(--text);
  line-height: 1.1;
}

.seo-agent-kpi-lbl {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.seo-agent-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.seo-agent-card {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: var(--admin-radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 150ms ease;
}

.seo-agent-card:hover {
  border-color: var(--line-strong);
}

.seo-agent-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.seo-agent-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seo-agent-metrics {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--muted);
}

.seo-agent-metric-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.seo-agent-metric-item strong {
  color: var(--text);
}

.seo-agent-diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 800px) {
  .seo-agent-diff-grid {
    grid-template-columns: 1fr;
  }
}

.seo-agent-box {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--admin-radius-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.seo-agent-box--proposed {
  background: rgba(22, 135, 74, 0.04);
  border-color: rgba(22, 135, 74, 0.25);
}

.seo-agent-box-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
}

.seo-agent-box-val {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.45;
}

.seo-agent-char-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--line);
  color: var(--soft);
}

.seo-agent-char-count.is-ok {
  background: rgba(22, 135, 74, 0.15);
  color: var(--green);
}

.seo-agent-char-count.is-warning {
  background: rgba(163, 99, 5, 0.15);
  color: var(--amber);
}

.seo-agent-char-count.is-danger {
  background: rgba(215, 23, 47, 0.15);
  color: var(--red);
}

.seo-agent-reasoning {
  font-size: 0.84rem;
  color: var(--muted);
  font-style: italic;
  padding: 8px 12px;
  border-left: 3px solid var(--line-strong);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
}

.seo-agent-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 6px;
}

/* ── Panel de Seguridad y Live Traffic ────────────────────────────────── */
.sec-live-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.sec-live-summary > div {
  padding: 12px 14px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sec-live-summary strong {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

.sec-live-summary span {
  font-size: 0.76rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 650;
  letter-spacing: 0.03em;
}

.sec-events-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 4px;
}

.sec-event-row {
  display: grid;
  grid-template-columns: 100px 135px 125px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 12px;
  background: #fff;
  font-size: 0.82rem;
  color: var(--soft);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.sec-event-row:hover {
  background: #fafbfc;
  border-color: rgba(17, 24, 39, 0.18);
}

.sec-event-time {
  font-size: 0.76rem;
  color: var(--muted);
  white-space: nowrap;
}

.sec-event-ip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--text);
}

.sec-country-tag {
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(17, 24, 39, 0.07);
  color: var(--soft);
  font-weight: 700;
}

.sec-event-details {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
}

.sec-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 12px;
}

.sec-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(215, 23, 47, 0.18);
  border-radius: 10px;
  background: rgba(215, 23, 47, 0.03);
  font-size: 0.82rem;
}

.sec-block-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sec-block-info strong {
  color: var(--text);
}

.sec-block-info span {
  font-size: 0.76rem;
  color: var(--muted);
}

.sec-manual-block-form {
  display: grid;
  grid-template-columns: 1.2fr 1.5fr 1fr auto;
  gap: 8px;
  align-items: end;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
}

.sec-manual-block-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--soft);
}

.sec-manual-block-form input,
.sec-manual-block-form select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(17, 24, 39, 0.15);
  border-radius: 8px;
  font-size: 0.82rem;
  background: #fff;
}

@media (max-width: 1024px) {
  .sec-event-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .sec-live-summary {
    grid-template-columns: repeat(2, 1fr);
  }
  .sec-manual-block-form {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Bandeja de Contacto Web (RGPD/LOPDGDD)
   ═══════════════════════════════════════════════════════════════════════════ */
.contact-submissions-container {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.contact-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.contact-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
  table-layout: fixed;
}

.contact-table th {
  padding: 12px 14px;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  user-select: none;
}

.contact-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  vertical-align: middle;
  color: var(--text);
  box-sizing: border-box;
}

.contact-table tr:last-child td {
  border-bottom: none;
}

.contact-table tr {
  transition: background-color 140ms ease;
}

.contact-table tr:hover td {
  background: rgba(0, 122, 255, 0.035);
}

.contact-table tr.is-unread td {
  background: rgba(0, 122, 255, 0.055);
}

.contact-table tr.is-unread:hover td {
  background: rgba(0, 122, 255, 0.08);
}

/* Proporciones de columnas optimizadas para ocupar el 100% de la pantalla */
.contact-col-status {
  width: 38px;
  min-width: 38px;
  max-width: 44px;
  text-align: center;
  padding-right: 0 !important;
  padding-left: 12px !important;
}

.contact-col-date {
  width: 14%;
  min-width: 135px;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.82rem;
}

.contact-col-sender {
  width: 18%;
  min-width: 160px;
}

.contact-col-contact {
  width: 20%;
  min-width: 190px;
  font-size: 0.82rem;
}

.contact-col-subject {
  width: 36%;
  min-width: 240px;
}

.contact-col-actions {
  width: 12%;
  min-width: 130px;
  text-align: right;
  white-space: nowrap;
  padding-right: 16px !important;
}

.contact-subject-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contact-subject-title {
  display: block;
  font-size: 0.88rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-subject-snippet {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
}

.contact-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}

.contact-dot--unread {
  background: #007aff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

.contact-dot--read {
  background: #cbd5e1;
}

.contact-actions-cell {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
}

.contact-btn-view,
.contact-btn-delete {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 11px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  transition: all 140ms ease !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.contact-btn-view {
  background: rgba(0, 122, 255, 0.08) !important;
  border: 1px solid rgba(0, 122, 255, 0.25) !important;
  color: #0066cc !important;
}

.contact-btn-view:hover {
  background: #007aff !important;
  border-color: #007aff !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.contact-btn-delete {
  background: rgba(220, 38, 38, 0.06) !important;
  border: 1px solid rgba(220, 38, 38, 0.2) !important;
  color: #dc2626 !important;
}

.contact-btn-delete:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Modal de Detalle de Contacto */
.contact-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: contactModalFadeIn 160ms ease-out;
}

.contact-modal-backdrop[hidden] {
  display: none !important;
}

@keyframes contactModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.contact-modal-dialog {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 10px;
  max-width: 680px;
  width: 100%;
  box-shadow: 0 25px 50px -12px rgba(17, 24, 39, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--text);
  animation: contactModalZoomIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes contactModalZoomIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.contact-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.contact-modal-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.contact-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-modal-status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.contact-modal-status-badge.is-unread {
  background: rgba(0, 122, 255, 0.12);
  color: #0066cc;
}

.contact-modal-status-badge.is-read {
  background: #e2e8f0;
  color: var(--muted);
}

.contact-modal-body {
  padding: 18px 20px;
  max-height: 72vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  background: #f8fafc;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.contact-meta-item span {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.contact-meta-item strong,
.contact-meta-item a,
.contact-meta-item div {
  font-size: 0.88rem;
  color: var(--text);
}

.contact-meta-item a {
  color: #0066cc;
  text-decoration: underline;
}

.contact-subject-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-subject-block span {
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.contact-subject-block strong {
  font-size: 1rem;
  color: var(--text);
}

.contact-message-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-message-block span {
  font-size: 0.74rem;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.contact-message-box {
  border: 1px solid var(--line);
  background: #ffffff;
  border-radius: 6px;
  padding: 14px 16px;
  line-height: 1.65;
  font-size: 0.92rem;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}

.contact-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
  gap: 12px;
}

.contact-modal-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* --- Palabras Clave e Intenciones de Búsqueda ---------------------------- */
.seo-kw-table-wrap {
  overflow-x: auto;
  margin-top: 14px;
}

.seo-kw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.seo-kw-table th {
  background: var(--panel-strong);
  padding: 10px 14px;
  text-align: left;
  font-weight: 650;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}

.seo-kw-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.seo-kw-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.seo-kw-primary {
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.seo-kw-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.seo-kw-chip {
  display: inline-block;
  font-size: 0.78rem;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  color: var(--text-soft);
}

.seo-kw-badge-intent {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--admin-radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.seo-kw-badge-intent--informational {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.seo-kw-badge-intent--commercial {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.seo-kw-badge-intent--transactional {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.seo-kw-badge-intent--local {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.seo-kw-badge-year {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 750;
  background: rgba(215, 23, 47, 0.15);
  color: #f87171;
  border: 1px solid rgba(215, 23, 47, 0.35);
}

.seo-kw-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}

.seo-kw-modal-card {
  background: var(--card-surface, #1e1e1e);
  border: 1px solid var(--line-strong, #333);
  border-radius: var(--admin-radius, 8px);
  width: 100%;
  max-width: 580px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.seo-kw-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.seo-kw-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seo-kw-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--panel-strong);
}

/* Campo seguro con máscara y alternancia de visibilidad */
.input-password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-password-wrapper input {
  width: 100%;
  padding-right: 38px;
  font-family: inherit;
}

.btn-toggle-field-visibility {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--admin-radius-sm, 4px);
  color: var(--muted, #64748b);
  transition: color 0.15s ease, background-color 0.15s ease;
  line-height: 1;
}

.btn-toggle-field-visibility:hover {
  color: var(--text, #0f172a);
  background-color: rgba(0, 0, 0, 0.05);
}

.btn-toggle-field-visibility:focus-visible {
  outline: 2px solid var(--accent, #b91c1c);
  outline-offset: 1px;
}

.btn-toggle-field-visibility svg {
  display: block;
  pointer-events: none;
}