/*
 * Estilos del panel editorial y de los bloques de sección.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Este archivo hace dos cosas: viste el centro editorial de /admin y las
 * herramientas de edición sobre la página, y define los bloques de sección que
 * museo-secciones.js dibuja en las páginas públicas desde la base de datos.
 *
 * Sobre las capas
 * ---------------
 * Todo va dentro de @layer panel, y el orden se declara en la línea de abajo.
 *
 * Antes el archivo entero estaba FUERA de toda capa, y en Tailwind 4 lo que
 * está fuera de capa gana a lo que está dentro sin que importe la
 * especificidad ni el orden de carga. Es decir: el CSS del panel mandaba sobre
 * el sistema de diseño del sitio —sobre .card, .btn, .chip, .section-band— y
 * hacía falta ir poniendo !important en global.css para recuperar el control.
 * La jerarquía estaba del revés.
 *
 * Con el orden declarado queda como debe ser: el sistema de diseño primero,
 * el panel encima —que es lo que hace falta para que .btn-sm o .btn-claro
 * afinen a .btn—, y las utilidades de Tailwind escritas en el marcado por
 * encima de todo, que es donde una excepción puntual tiene que poder ganar.
 *
 * La declaración va aquí y no en global.css porque este archivo se carga
 * antes: una capa no declarada se ordena por su primera aparición, así que si
 * el orden se declarara después ya sería tarde.
 */
@layer properties, theme, base, components, panel, utilities;

@layer panel {

  .admin-shell {
    display: grid;
    gap: 1.5rem;
  }

  .admin-hero,
  .admin-card,
  .admin-warning {
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.9);
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.06);
  }

  .admin-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
  }

  .admin-card {
    padding: 1.25rem;
  }

  .admin-card h2 {
    margin: 0;
    color: rgb(15 23 42);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .admin-card p {
    margin: 0.35rem 0 0;
    color: rgb(71 85 105);
  }

  .admin-warning {
    padding: 1rem;
    color: rgb(120 53 15);
    background: rgb(255 251 235 / 0.95);
  }

  .admin-auth-divider {
    height: 1px;
    margin: 1.25rem 0;
    background: rgb(226 232 240);
  }

  .admin-login {
    display: grid;
    gap: 1rem;
  }

  .admin-login {
    margin-top: 1rem;
  }
  .admin-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.6fr);
    gap: 1rem;
  }
  .admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .admin-login label {
    display: grid;
    gap: 0.35rem;
    color: rgb(51 65 85);
    font-size: 0.86rem;
    font-weight: 650;
  }

  .admin-login input {
    width: 100%;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.45rem;
    background: white;
    padding: 0.68rem 0.75rem;
    color: rgb(15 23 42);
    font: inherit;
    font-weight: 450;
  }

  .admin-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-top: 1.55rem;
  }

  .admin-check input {
    width: auto;
  }

  .admin-status {
    min-height: 1.4rem;
    color: rgb(5 94 72);
    font-size: 0.9rem;
    font-weight: 650;
  }

  .admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .admin-stat-card {
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background: rgb(248 250 252 / 0.9);
    padding: 0.9rem;
  }

  .admin-stat-card strong,
  .admin-stat-card span,
  .admin-stat-card small {
    display: block;
  }

  .admin-stat-card strong {
    color: rgb(15 23 42);
    font-size: 1.8rem;
    line-height: 1;
  }

  .admin-stat-card span {
    margin-top: 0.4rem;
    color: rgb(51 65 85);
    font-size: 0.88rem;
    font-weight: 750;
  }

  .admin-stat-card small {
    margin-top: 0.25rem;
    color: rgb(100 116 139);
    font-size: 0.76rem;
  }
  .danger {
    color: rgb(153 27 27);
  }

  .chip-draft {
    border-color: rgb(251 191 36 / 0.7) !important;
    background: rgb(255 251 235) !important;
    color: rgb(146 64 14) !important;
  }

  .is-draft {
    box-shadow: 0 0 0 2px rgb(251 191 36 / 0.34);
  }

  .db-collection-shell {
    display: grid;
    gap: 1.5rem;
  }

  .db-collection-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.6fr);
    gap: 0.75rem;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.88);
    padding: 1rem;
  }

  .db-collection-controls-heading {
    grid-column: 1 / -1;
  }

  .db-collection-controls-heading h2 {
    margin: 0.2rem 0 0;
    color: rgb(15 23 42);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .db-collection-controls label {
    display: grid;
    gap: 0.45rem;
    color: rgb(30 41 59);
    font-size: 0.82rem;
    font-weight: 700;
  }

  .db-collection-controls input,
  .db-collection-controls select {
    border: 1px solid rgb(203 213 225);
    border-radius: 0.45rem;
    background: white;
    padding: 0.8rem 0.9rem;
  }

  .db-group {
    scroll-margin-top: 7rem;
  }

  .db-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
  }

  .db-card-wrap {
    position: relative;
  }

  .db-card {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.9);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.06);
  }

  .db-card-media,
  .db-card-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid rgb(226 232 240);
    background: white;
  }

  .db-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .db-card-placeholder {
    display: grid;
    place-items: center;
    background: rgb(241 245 249);
    color: rgb(100 116 139);
  }

  .db-card-body {
    padding: 1rem;
  }

  .db-card-body h3 {
    margin: 0.65rem 0 0;
    color: rgb(15 23 42);
    font-size: 1.05rem;
    font-weight: 700;
  }

  .db-card-body p {
    margin: 0.55rem 0 0;
    color: rgb(71 85 105);
    font-size: 0.95rem;
  }

  .db-resource article {
    display: block;
    min-width: 0;
  }

  .db-resource article > * {
    min-width: 0;
  }

  .resource-editor-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .resource-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .resource-editor-badge {
    border: 1px solid rgb(203 213 225);
    border-radius: 999px;
    background: rgb(255 255 255 / 0.84);
    padding: 0.35rem 0.75rem;
    color: rgb(71 85 105);
    font-size: 0.76rem;
    font-weight: 700;
  }

  .edit-label,
  .edit-field-title {
    display: grid;
    gap: 0.45rem;
    color: rgb(71 85 105);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0;
  }

  .edit-control,
  .edit-title,
  .edit-lead,
  .edit-body {
    width: 100%;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.92);
    color: rgb(15 23 42);
    font: inherit;
    letter-spacing: 0;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }

  .edit-control {
    padding: 0.7rem 0.8rem;
    font-size: 0.95rem;
    font-weight: 500;
  }

  .edit-title {
    padding: 0.55rem 0.7rem;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    font-weight: 800;
  }

  .edit-lead {
    min-height: 7rem;
    padding: 0.8rem;
    color: rgb(51 65 85);
    font-size: 1.08rem;
    line-height: 1.65;
    resize: vertical;
  }

  .edit-body {
    min-height: 34rem;
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.7;
    resize: vertical;
  }

  .edit-control:focus,
  .edit-title:focus,
  .edit-lead:focus,
  .edit-body:focus {
    border-color: rgb(var(--accent-2) / 0.65);
    background: white;
    box-shadow: 0 0 0 3px rgb(var(--accent-2) / 0.14);
  }

  .video-card {
    position: relative;
  }

  .video-frame {
    border-bottom: 1px solid rgb(226 232 240);
  }

  .video-card-body-link {
    display: block;
    padding: 1.25rem 1.25rem 0;
    color: inherit;
    text-decoration: none;
  }

  .video-card-body-link:hover h3 {
    color: rgb(var(--accent-2-ink));
  }

  .video-placeholder {
    display: grid;
    place-items: center;
    min-height: 12rem;
    color: rgb(226 232 240);
    font-weight: 750;
  }

  .video-card-admin-actions,
  .video-hero-admin-actions {
    display: none;
  }

  .video-edit-mode .video-card-admin-actions,
  .video-edit-mode .video-hero-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .video-card-admin-actions {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 8;
    max-width: calc(100% - 1.5rem);
  }

  .video-hero-admin-actions {
    margin-top: 1rem;
  }

  .video-edit-mode [data-video-card],
  .video-edit-mode [data-admin-video-hero-id] {
    outline: 2px dashed rgb(var(--accent-2) / 0.36);
    outline-offset: 5px;
  }

  .tour-card {
    position: relative;
  }

  .tour-card-placeholder,
  .tour-featured-media {
    display: grid;
    aspect-ratio: 16 / 9;
    place-items: center;
    border-bottom: 1px solid rgb(226 232 240);
    background: rgb(var(--accent) / 0.09);
    color: rgb(var(--accent-2-ink));
    font-weight: 800;
  }

  .tour-featured-media {
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    text-decoration: none;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.06);
  }

  .tour-featured-media img,
  .tour-step-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .tour-sequence,
  .tour-step-list {
    display: grid;
    gap: 1rem;
  }

  .tour-step-card,
  .tour-step-editor-item {
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.9);
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.06);
  }

  .tour-step-card {
    padding: 1rem;
  }

  .tour-step-number {
    margin: 0 0 0.6rem;
    color: rgb(var(--accent-2-ink));
    font-size: 0.78rem;
    font-weight: 800;
  }

  .tour-step-link {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 0.65fr);
    gap: 1rem;
    color: inherit;
    text-decoration: none;
  }

  .tour-step-link img,
  .tour-step-placeholder {
    aspect-ratio: 16 / 9;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.45rem;
    background: rgb(241 245 249);
  }

  .tour-step-placeholder {
    display: grid;
    place-items: center;
    color: rgb(100 116 139);
    font-weight: 750;
  }

  .tour-step-link h3 {
    margin: 0;
    color: rgb(15 23 42);
    font-size: 1rem;
    font-weight: 800;
  }

  .tour-step-link p {
    margin: 0.45rem 0 0;
    color: rgb(71 85 105);
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .tour-resource-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .tour-step-editor-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
  }

  .tour-step-editor-item span,
  .tour-step-editor-item strong,
  .tour-step-editor-item small {
    display: block;
  }

  .tour-step-editor-item span {
    color: rgb(var(--accent-2-ink));
    font-size: 0.74rem;
    font-weight: 800;
  }

  .tour-step-editor-item strong {
    margin-top: 0.15rem;
    color: rgb(15 23 42);
    font-size: 0.98rem;
  }

  .tour-step-editor-item small {
    margin-top: 0.15rem;
    color: rgb(100 116 139);
    font-size: 0.75rem;
    font-weight: 650;
  }

  .tour-card-admin-actions,
  .tour-hero-admin-actions {
    display: none;
  }

  .tour-edit-mode .tour-card-admin-actions,
  .tour-edit-mode .tour-hero-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .tour-card-admin-actions {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 8;
    max-width: calc(100% - 1.5rem);
  }

  .tour-hero-admin-actions {
    margin-top: 1rem;
  }

  .tour-edit-mode [data-tour-card],
  .tour-edit-mode [data-admin-tour-hero-id] {
    outline: 2px dashed rgb(var(--accent-2) / 0.36);
    outline-offset: 5px;
  }

  .collection-admin-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-top: 1.5rem;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.5rem;
    background: rgb(255 255 255 / 0.92);
    padding: 1rem;
    box-shadow: 0 10px 30px rgb(15 23 42 / 0.06);
  }

  .collection-admin-panel.is-active {
    border-color: rgb(var(--accent-2) / 0.48);
    background: rgb(var(--brand-ivory) / 0.96);
  }

  .collection-admin-panel strong,
  .collection-admin-panel span,
  .collection-admin-kicker,
  .collection-admin-status {
    display: block;
  }

  .collection-admin-kicker {
    margin: 0 0 0.15rem;
    color: rgb(var(--accent-2-ink));
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
  }

  .collection-admin-panel strong {
    color: rgb(15 23 42);
    font-size: 1rem;
  }

  .collection-admin-panel span {
    margin-top: 0.15rem;
    color: rgb(100 116 139);
    font-size: 0.78rem;
    font-weight: 650;
  }

  .collection-admin-actions,
  .collection-group-actions,
  .collection-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }

  .collection-admin-status {
    flex-basis: 100%;
    margin: 0;
    min-height: 1.2rem;
    font-size: 0.86rem;
    font-weight: 700;
  }

  .collection-admin-btn,
  .collection-admin-mini {
    border: 1px solid rgb(var(--accent-2) / 0.45);
    border-radius: 999px;
    background: white;
    color: rgb(var(--accent-2-ink));
    font: inherit;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  }

  .collection-admin-btn {
    padding: 0.65rem 0.95rem;
    font-size: 0.86rem;
  }

  .collection-admin-mini {
    padding: 0.45rem 0.65rem;
    font-size: 0.76rem;
  }

  .collection-admin-btn:hover,
  .collection-admin-mini:hover {
    border-color: rgb(var(--accent-2) / 0.72);
    background: rgb(var(--accent-2) / 0.08);
  }

  .collection-admin-btn.primary,
  .collection-admin-mini.primary {
    border-color: rgb(var(--accent-2));
    background: rgb(var(--accent-2));
    color: white;
  }

  .collection-admin-btn.primary:hover,
  .collection-admin-mini.primary:hover {
    background: rgb(var(--accent-2-ink));
    box-shadow: 0 5px 16px rgb(var(--accent-2) / 0.24);
  }

  .collection-admin-btn.danger,
  .collection-admin-mini.danger,
  .btn.danger {
    border-color: rgb(220 38 38 / 0.5);
    background: white;
    color: rgb(153 27 27);
  }

  .collection-admin-btn.danger:hover,
  .collection-admin-mini.danger:hover,
  .btn.danger:hover {
    border-color: rgb(185 28 28 / 0.75);
    background: rgb(254 242 242);
    color: rgb(127 29 29);
  }

  .collection-admin-btn.danger-solid {
    border-color: rgb(185 28 28);
    background: rgb(185 28 28);
    color: white;
  }

  .collection-admin-btn.danger-solid:hover {
    border-color: rgb(127 29 29);
    background: rgb(127 29 29);
    box-shadow: 0 5px 16px rgb(185 28 28 / 0.24);
  }

  .collection-admin-btn:disabled,
  .collection-admin-mini:disabled {
    opacity: 0.58;
    cursor: wait;
  }

  .collection-group-actions,
  .collection-card-actions {
    display: none;
  }

  .collection-edit-mode .collection-group-actions,
  .collection-edit-mode .collection-card-actions {
    display: flex;
  }

  .collection-edit-mode [data-admin-group-id] {
    outline: 2px dashed rgb(var(--accent-2) / 0.36);
    outline-offset: 5px;
  }

  .collection-edit-mode [data-admin-resource-id] {
    position: relative;
    outline: 2px dashed rgb(var(--accent) / 0.45);
    outline-offset: 4px;
  }

  .collection-card-actions {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 8;
    max-width: calc(100% - 1.5rem);
  }

  .collection-empty-note {
    border: 1px dashed rgb(203 213 225);
    border-radius: 0.5rem;
    background: rgb(248 250 252 / 0.78);
    padding: 1rem;
    color: rgb(100 116 139);
    font-size: 0.92rem;
    font-weight: 650;
  }

  .collection-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: rgb(15 23 42 / 0.42);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .collection-dialog-overlay.is-open {
    opacity: 1;
  }

  .collection-dialog {
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.5rem;
    background: white;
    box-shadow: 0 24px 60px rgb(15 23 42 / 0.22);
  }

  .collection-dialog header,
  .collection-dialog footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-color: rgb(226 232 240);
    padding: 1rem;
  }

  .collection-dialog header {
    border-bottom: 1px solid rgb(226 232 240);
    background: rgb(248 250 252);
  }

  .collection-dialog footer {
    border-top: 1px solid rgb(226 232 240);
  }

  .collection-dialog h2,
  .collection-dialog p {
    margin: 0;
  }

  .collection-dialog header p {
    color: rgb(var(--accent-2-ink));
    font-size: 0.74rem;
    font-weight: 800;
  }

  .collection-dialog h2 {
    margin-top: 0.15rem;
    color: rgb(15 23 42);
    font-size: 1.2rem;
    font-weight: 800;
  }

  .collection-dialog-close {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.45rem;
    background: white;
    color: rgb(71 85 105);
    cursor: pointer;
  }

  .collection-dialog-body {
    display: grid;
    gap: 1rem;
    max-height: calc(100vh - 12rem);
    overflow: auto;
    padding: 1rem;
  }

  .collection-dialog label {
    display: grid;
    gap: 0.35rem;
    color: rgb(51 65 85);
    font-size: 0.82rem;
    font-weight: 750;
  }

  .collection-dialog input,
  .collection-dialog textarea {
    width: 100%;
    border: 1px solid rgb(203 213 225);
    border-radius: 0.45rem;
    background: white;
    padding: 0.7rem 0.8rem;
    color: rgb(15 23 42);
    font: inherit;
    font-size: 0.94rem;
  }

  .collection-dialog textarea {
    resize: vertical;
  }

  .collection-dialog-grid {
    display: grid;
    grid-template-columns: minmax(8rem, 0.55fr) minmax(10rem, 0.45fr);
    gap: 0.85rem;
  }

  .collection-dialog-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    padding-top: 1.6rem;
  }

  .collection-dialog-check input {
    width: auto;
  }

  .collection-dialog-status {
    min-height: 1.2rem;
    color: rgb(5 94 72);
    font-size: 0.86rem;
    font-weight: 750;
  }

  .museo-delete-copy {
    color: rgb(15 23 42);
    font-size: 1rem;
    line-height: 1.55;
  }

  .museo-delete-note {
    border: 1px solid rgb(254 202 202);
    border-radius: 0.5rem;
    background: rgb(254 242 242);
    padding: 0.85rem;
    color: rgb(127 29 29);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1.5;
  }

  .museo-delete-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 120;
    display: flex;
    width: min(28rem, calc(100vw - 2rem));
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgb(187 247 208);
    border-radius: 0.5rem;
    background: rgb(240 253 244);
    padding: 0.9rem;
    box-shadow: 0 18px 45px rgb(15 23 42 / 0.16);
  }

  .museo-delete-toast.is-error {
    border-color: rgb(254 202 202);
    background: rgb(254 242 242);
  }

  .museo-delete-toast strong,
  .museo-delete-toast span {
    display: block;
  }

  .museo-delete-toast strong {
    color: rgb(15 23 42);
    font-size: 0.88rem;
    font-weight: 800;
  }

  .museo-delete-toast span {
    margin-top: 0.15rem;
    color: rgb(51 65 85);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
  }

  .museo-delete-toast-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
  }

  .museo-delete-toast button {
    border: 1px solid rgb(203 213 225);
    border-radius: 999px;
    background: white;
    padding: 0.45rem 0.7rem;
    color: rgb(15 23 42);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
  }

  .museo-delete-toast button[data-delete-undo] {
    border-color: rgb(var(--accent-2));
    background: rgb(var(--accent-2));
    color: white;
  }
  @media (max-width: 900px) {
    .db-group {
      scroll-margin-top: 9rem;
    }

    .admin-grid,
    .admin-hero,
    .db-collection-controls,
    .tour-step-link,
    .tour-resource-picker {
      grid-template-columns: 1fr;
      flex-direction: column;
      align-items: stretch;
    }
  }

  /*
   * Aqui vivia el primer editor sobre la pagina: barra flotante, pastilla de
   * salud propia, barra de guardado, modal de ajustes y las marcas de "esto se
   * puede tocar". Todo colgaba de la clase .museo-edit-mode, que la ponia
   * museo-inline-edit.js, retirado hace tiempo. Eran 520 lineas que ademas se
   * peleaban con el editor de ahora: la regla .museo-modal de aquel modal
   * dejaba el selector de tipo de bloque desplazado y escalado, porque
   * museo-editor-vivo.js abre su fondo con otra clase y nunca llegaba el
   * .is-open que lo enderezaba.
   *
   * Lo que hace hoy esa labor esta mas abajo: .museo-bloque*, .museo-panel*,
   * .museo-guardado y .museo-modal-fondo.
   */


  /* ═══════════════════════════════════════════════════════════════════════════
     Sistema editorial por equipo — 25 de agosto de 2026.

     Tres piezas: la franja de arriba, la edición sobre la propia página, y el
     centro editorial de /admin. La regla que las une es que nada de esto puede
     taparle el sitio a lo que el museo quiere enseñar.
     ═══════════════════════════════════════════════════════════════════════════ */

  :root {
    --museo-editor: 14 116 144;      /* el color de "esto se puede tocar" */
    --museo-editor-suave: 236 254 255;
    --museo-panel-ancho: 24rem;
  }

  /* ── Perfil de la persona ───────────────────────────────────────────────── */

  .museo-rol-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .museo-rol-owner       { background: rgb(var(--accent) / .18);   color: rgb(var(--accent-2-ink)); }
  .museo-rol-admin       { background: rgb(var(--accent-2) / .18); color: rgb(var(--accent-2-ink)); }
  .museo-rol-editor      { background: rgb(16 122 87 / .16);       color: rgb(6 78 59); }
  .museo-rol-contributor { background: rgb(100 116 139 / .18);     color: rgb(51 65 85); }
  .museo-rol-sin_perfil  { background: rgb(148 163 184 / .22);     color: rgb(71 85 105); }

  /* ── La franja de arriba ────────────────────────────────────────────────────
     Fija arriba del todo y con la página empujada hacia abajo justo lo que
     mide. Antes esto era un panel flotante en la esquina: se veía bien en una
     captura y estorbaba en cuanto había algo debajo. */

  .museo-franja {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    height: var(--museo-franja-alto, 2.5rem);
    padding: 0 .75rem;
    background: rgb(8 47 62);
    color: rgb(226 240 245);
    font-size: .8rem;
    box-shadow: 0 1px 0 rgb(0 0 0 / .25);
  }

  .museo-franja.is-editando { background: rgb(var(--museo-editor)); }

  html.museo-con-franja body { padding-top: var(--museo-franja-alto, 2.5rem); }
  html.museo-con-franja .site-header { top: var(--museo-franja-alto, 2.5rem); }
  html.museo-con-franja { scroll-padding-top: calc(var(--museo-franja-alto, 2.5rem) + 5rem); }

  .museo-franja-lado   { display: flex; align-items: center; gap: .6rem; min-width: 0; }
  .museo-franja-centro { display: flex; align-items: center; gap: .4rem; }
  .museo-franja-derecha { justify-content: flex-end; }

  .museo-franja-marca {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: rgb(var(--accent));
    flex: none;
  }

  .museo-franja-quien {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
  }

  .museo-franja-quien strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
  }

  .museo-franja .museo-rol-pill {
    background: rgb(255 255 255 / .16);
    color: rgb(226 240 245);
  }

  .museo-franja-boton {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: .35rem;
    background: transparent;
    padding: .25rem .7rem;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
  }

  .museo-franja-boton:hover { background: rgb(255 255 255 / .14); }

  .museo-franja-boton.is-principal {
    border-color: rgb(var(--accent));
    background: rgb(var(--accent));
    color: rgb(6 40 24);
  }

  .museo-franja-boton.is-principal:hover { filter: brightness(1.08); }
  .museo-franja-boton.is-principal.is-on { background: white; border-color: white; color: rgb(var(--museo-editor)); }

  .museo-franja-salud { display: inline-flex; align-items: center; gap: .35rem; opacity: .85; }
  .museo-franja-punto { width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; }
  .museo-franja-salud.is-ok       { color: rgb(134 239 172); }
  .museo-franja-salud.is-bad      { color: rgb(252 165 165); }
  .museo-franja-salud.is-checking { color: rgb(203 213 225); }

  @media (max-width: 860px) {
    .museo-franja { font-size: .72rem; padding: 0 .5rem; gap: .4rem; }
    .museo-franja-quien strong { max-width: 6rem; }
    .museo-franja-salud span:last-child { display: none; }
  }

  /*
   * En el movil no cabe todo, y lo que pasaba antes es que cabia mal: el nombre
   * se cortaba en «ad...», la pastilla del perfil desaparecia y «Centro
   * editorial» se montaba encima de «Salir».
   *
   * Asi que en vez de encoger todo hasta que choque, se decide que sobra. En un
   * telefono lo unico que se necesita de esta franja es el boton de editar, la
   * puerta al centro editorial y la salida. Quien eres y como esta la base se
   * consultan en /admin, que es donde hay sitio para contarlo bien.
   */
  @media (max-width: 560px) {
    .museo-franja { gap: .3rem; padding: 0 .4rem; }
    .museo-franja-quien,
    .museo-franja-salud { display: none; }
    .museo-franja-boton { padding: .25rem .55rem; }
    .museo-franja-centro { flex: 1 1 auto; justify-content: center; min-width: 0; }
    .museo-franja-boton.is-principal {
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      max-width: 100%;
    }
  }

  /* ── Editar sobre la página ─────────────────────────────────────────────────
     Invisible mientras no haga falta. Al encender el modo edición aparecen los
     contornos, y solo al pasar por encima de un bloque se ve su barra. */

  html.museo-editando .museo-bloque {
    position: relative;
    border-radius: .5rem;
    transition: outline-color .15s, background-color .15s;
    outline: 2px dashed transparent;
    outline-offset: .35rem;
  }

  /*
   * Esto lo llevaba una clase que ponia y quitaba JavaScript con un par de
   * oyentes de mouseenter/mouseleave por bloque. Los oyentes se registraban de
   * nuevo en cada repintado sobre los MISMOS nodos —los bloques del sistema no
   * se sustituyen— y no se daban de baja nunca, asi que se acumulaban. Es un
   * estado de raton: le corresponde a :hover, que ademas no se acumula.
   */
  html.museo-editando .museo-bloque:hover {
    outline-color: rgb(var(--museo-editor) / .45);
  }

  html.museo-editando .museo-bloque.is-enfocado {
    outline: 2px solid rgb(var(--museo-editor));
    outline-offset: .35rem;
    background: rgb(var(--museo-editor) / .03);
  }

  html.museo-editando .museo-bloque.is-presentandose {
    outline-color: rgb(var(--museo-editor) / .55);
    animation: museo-destello 1.4s ease-out;
  }

  @keyframes museo-destello {
    0%   { background: rgb(var(--museo-editor) / .1); }
    100% { background: transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    html.museo-editando .museo-bloque.is-presentandose { animation: none; }
  }

  .museo-bloque-etiqueta {
    position: absolute;
    top: -.55rem;
    left: .5rem;
    z-index: 2;
    border-radius: .3rem;
    background: rgb(var(--museo-editor));
    padding: .1rem .5rem;
    color: white;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
  }

  .museo-bloque-etiqueta em { font-style: normal; opacity: .8; }

  html.museo-editando .museo-bloque:hover > .museo-bloque-etiqueta,
  html.museo-editando .museo-bloque.is-enfocado > .museo-bloque-etiqueta,
  html.museo-editando .museo-bloque.is-presentandose > .museo-bloque-etiqueta { opacity: 1; }

  .museo-bloque-barra {
    position: absolute;
    top: -.75rem;
    right: .5rem;
    z-index: 3;
    display: flex;
    gap: .15rem;
    border: 1px solid rgb(var(--museo-editor) / .3);
    border-radius: .4rem;
    background: white;
    padding: .15rem;
    box-shadow: 0 2px 8px rgb(15 23 42 / .12);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
  }

  html.museo-editando .museo-bloque:hover > .museo-bloque-barra,
  html.museo-editando .museo-bloque.is-enfocado > .museo-bloque-barra {
    opacity: 1;
    pointer-events: auto;
  }

  .museo-bloque-barra button {
    border: 0;
    border-radius: .3rem;
    background: transparent;
    padding: .2rem .45rem;
    color: rgb(51 65 85);
    font: inherit;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.3;
    cursor: pointer;
  }

  /* El boton del ojo lleva un dibujo, no una letra: hay que centrarlo a mano
     para que quede a la misma altura que «Ajustes» y las flechas. */
  .museo-bloque-barra button > svg { display: block; }
  .museo-bloque-barra button:has(> svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .4rem;
  }

  .museo-bloque-barra button:hover:not(:disabled) { background: rgb(var(--museo-editor) / .12); color: rgb(var(--museo-editor)); }
  .museo-bloque-barra button:disabled { opacity: .3; cursor: not-allowed; }
  .museo-bloque-barra button.es-peligro:hover { background: rgb(254 226 226); color: rgb(153 27 27); }

  /* El texto se puede escribir directamente. El subrayado punteado avisa de
     que eso es tuyo sin llenar la página de cajas. */
  html.museo-editando .museo-texto-editable {
    outline: none;
    border-radius: .2rem;
    cursor: text;
    transition: background .12s, box-shadow .12s;
  }

  html.museo-editando .museo-texto-editable:hover {
    background: rgb(var(--museo-editor) / .07);
    box-shadow: 0 0 0 .2rem rgb(var(--museo-editor) / .07);
  }

  html.museo-editando .museo-texto-editable.is-escribiendo {
    background: rgb(var(--museo-editor-suave));
    box-shadow: 0 0 0 .15rem rgb(var(--museo-editor) / .35);
  }

  html.museo-editando .museo-texto-editable:empty::before {
    content: "Escribe aquí…";
    color: rgb(148 163 184);
    font-style: italic;
  }

  /* Los bloques ocultos siguen viéndose para el equipo, pero se nota. */
  .museo-seccion-oculta { opacity: .55; }
  html.museo-editando .museo-seccion-oculta { opacity: .75; }

  /* Añadir un bloque entre dos: una línea fina que solo se nota al acercarse. */
  .museo-insertar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.6rem;
    opacity: 0;
    transition: opacity .15s;
  }

  .museo-insertar:hover, .museo-insertar:focus-within { opacity: 1; }

  .museo-insertar::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    border-top: 1px dashed rgb(var(--museo-editor) / .5);
  }

  .museo-insertar button {
    position: relative;
    border: 1px solid rgb(var(--museo-editor) / .4);
    border-radius: 999px;
    background: white;
    padding: .2rem .8rem;
    color: rgb(var(--museo-editor));
    font: inherit;
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
  }

  .museo-insertar button:hover { background: rgb(var(--museo-editor)); color: white; }

  /* ── Barra de guardado ──────────────────────────────────────────────────────
     Nada se escribe en la base hasta pulsar aquí. Aparece solo cuando hay algo
     que guardar, para no ocupar sitio el resto del tiempo. */

  .museo-guardado {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 55;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgb(15 23 42 / .1);
    border-radius: .7rem;
    background: white;
    padding: .6rem .85rem;
    box-shadow: 0 8px 28px rgb(15 23 42 / .18);
    transform: translate(-50%, calc(100% + 2rem));
    opacity: 0;
    transition: transform .22s ease-out, opacity .22s;
  }

  .museo-guardado.is-activa { transform: translate(-50%, 0); opacity: 1; }

  html.museo-panel-abierto .museo-guardado { left: calc(50% - var(--museo-panel-ancho) / 2); }

  .museo-guardado-texto { font-size: .85rem; font-weight: 650; color: rgb(146 64 14); }
  .museo-guardado.is-escribiendo .museo-guardado-texto::after { content: " ·"; animation: museo-latido 1s infinite; }

  @keyframes museo-latido { 50% { opacity: .3; } }

  .museo-guardado-botones { display: flex; gap: .4rem; }

  @media (max-width: 640px) {
    .museo-guardado { left: .5rem; right: .5rem; transform: translateY(calc(100% + 2rem)); flex-wrap: wrap; }
    .museo-guardado.is-activa { transform: translateY(0); }
    html.museo-panel-abierto .museo-guardado { left: .5rem; }
  }

  /* ── Panel de ajustes ───────────────────────────────────────────────────────
     Cajón lateral para lo que no se puede escribir encima: tarjetas, botones,
     imágenes. Empuja la página en pantallas anchas para que se siga viendo lo
     que se está tocando. */

  .museo-panel {
    position: fixed;
    top: var(--museo-franja-alto, 0);
    right: 0;
    bottom: 0;
    z-index: 58;
    width: var(--museo-panel-ancho);
    max-width: 100vw;
    overflow-y: auto;
    border-left: 1px solid rgb(15 23 42 / .12);
    background: white;
    box-shadow: -8px 0 28px rgb(15 23 42 / .1);
    transform: translateX(100%);
    transition: transform .22s ease-out;
  }

  html.museo-panel-abierto .museo-panel { transform: none; }

  @media (min-width: 1100px) {
    html.museo-panel-abierto body { padding-right: var(--museo-panel-ancho); }
  }

  .museo-panel-cabecera {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid rgb(15 23 42 / .1);
    background: rgb(var(--museo-editor));
    padding: .9rem 1rem;
    color: white;
  }

  .museo-panel-donde { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
  .museo-panel-cabecera h2 { margin: .15rem 0 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
  .museo-panel-tipo { margin: .2rem 0 0; font-size: .75rem; opacity: .85; }

  .museo-panel-cabecera button {
    flex: none;
    border: 0;
    border-radius: .35rem;
    background: rgb(255 255 255 / .18);
    width: 1.8rem;
    height: 1.8rem;
    color: white;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  .museo-panel-cabecera button:hover { background: rgb(255 255 255 / .3); }

  .museo-panel-cuerpo { display: grid; gap: 1rem; padding: 1rem; }

  .museo-panel-pista {
    margin: 0;
    border-radius: .45rem;
    background: rgb(var(--museo-editor-suave));
    padding: .6rem .7rem;
    font-size: .78rem;
    line-height: 1.5;
    color: rgb(15 60 74);
  }

  .museo-panel-nota { margin: 0; font-size: .78rem; line-height: 1.5; color: rgb(100 116 139); }
  .museo-panel-vacio { margin: 0; font-size: .8rem; font-style: italic; color: rgb(148 163 184); }

  .museo-panel-campo { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; font-weight: 650; color: rgb(51 65 85); }

  .museo-panel-campo input,
  .museo-panel-campo select,
  .museo-panel-campo textarea {
    border: 1px solid rgb(15 23 42 / .18);
    border-radius: .4rem;
    padding: .45rem .6rem;
    font: inherit;
    font-weight: 500;
    color: rgb(15 23 42);
    background: white;
  }

  .museo-panel-campo textarea { resize: vertical; }
  .museo-panel-campo small { font-weight: 500; color: rgb(100 116 139); line-height: 1.45; }

  .museo-panel-campo input:focus-visible,
  .museo-panel-campo select:focus-visible,
  .museo-panel-campo textarea:focus-visible {
    outline: 2px solid rgb(var(--museo-editor));
    outline-offset: 1px;
  }

  .museo-panel-casilla { display: flex; gap: .55rem; align-items: flex-start; font-size: .82rem; font-weight: 600; color: rgb(51 65 85); }
  .museo-panel-casilla input { margin-top: .2rem; }
  .museo-panel-casilla small { display: block; font-weight: 500; color: rgb(100 116 139); }

  .museo-panel-lista { display: grid; gap: .6rem; border-top: 1px solid rgb(15 23 42 / .08); padding-top: .9rem; }
  .museo-panel-lista-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .museo-panel-lista-cabecera h3 { margin: 0; font-size: .88rem; font-weight: 700; color: rgb(15 23 42); }

  .museo-panel-item {
    display: grid;
    gap: .5rem;
    border: 1px solid rgb(15 23 42 / .12);
    border-radius: .5rem;
    padding: .6rem;
    background: rgb(248 250 252);
  }

  .museo-panel-item-cabecera { display: flex; align-items: center; justify-content: space-between; }
  .museo-panel-item-cabecera > span { font-size: .72rem; font-weight: 800; color: rgb(148 163 184); }
  .museo-panel-item-cabecera div { display: flex; gap: .15rem; }

  .museo-panel-item-cabecera button {
    border: 1px solid rgb(15 23 42 / .12);
    border-radius: .3rem;
    background: white;
    padding: .1rem .4rem;
    font-size: .75rem;
    line-height: 1.3;
    cursor: pointer;
  }

  .museo-panel-item-cabecera button:disabled { opacity: .35; cursor: not-allowed; }
  .museo-panel-item-cabecera button.es-peligro { color: rgb(153 27 27); }

  .museo-panel-avanzado { border-top: 1px solid rgb(15 23 42 / .08); padding-top: .9rem; }
  .museo-panel-avanzado > summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: rgb(var(--museo-editor)); }
  .museo-panel-avanzado[open] { display: grid; gap: .7rem; }
  .museo-panel-avanzado textarea { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .75rem; }

  /* ── Elegir qué añadir ──────────────────────────────────────────────────── */

  .museo-modal-fondo {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background: rgb(15 23 42 / .45);
    padding: 1rem;
  }

  .museo-modal {
    width: min(38rem, 100%);
    max-height: 85vh;
    overflow-y: auto;
    border-radius: .8rem;
    background: white;
    padding: 1.25rem;
    box-shadow: 0 18px 50px rgb(15 23 42 / .3);
  }

  .museo-modal h2 { margin: 0 0 .9rem; font-size: 1.2rem; font-weight: 700; color: rgb(15 23 42); }
  .museo-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem; }

  .museo-tipos button {
    display: grid;
    gap: .2rem;
    border: 1px solid rgb(15 23 42 / .14);
    border-radius: .5rem;
    background: white;
    padding: .7rem .8rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }

  .museo-tipos button:hover { border-color: rgb(var(--museo-editor)); background: rgb(var(--museo-editor-suave)); }
  .museo-tipos strong { font-size: .9rem; color: rgb(15 23 42); }
  .museo-tipos span { font-size: .78rem; line-height: 1.45; color: rgb(100 116 139); }
  .museo-modal-pie { margin-top: 1rem; display: flex; justify-content: flex-end; }

  /* ── Aviso breve ────────────────────────────────────────────────────────── */

  .museo-aviso-breve {
    position: fixed;
    left: 50%;
    bottom: 5.5rem;
    z-index: 80;
    border-radius: 999px;
    background: rgb(15 23 42);
    padding: .45rem 1.1rem;
    color: white;
    font-size: .82rem;
    font-weight: 650;
    transform: translate(-50%, .5rem);
    opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: none;
  }

  .museo-aviso-breve.is-visible { opacity: 1; transform: translate(-50%, 0); }

  /* ── Bloque destacado ───────────────────────────────────────────────────────
     El aire oscuro reproduce la tarjeta social del taller, pero con el texto
     escrito en la página: se puede corregir, lo leen los buscadores y no hay
     que rehacer una imagen cada vez que cambie una palabra. */

  .museo-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 2rem;
  }

  .museo-cta-texto { min-width: 0; }
  .museo-cta-etiqueta { margin: 0; font-size: .78rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--accent-2-ink)); }
  .museo-cta-titulo { margin: .5rem 0 0; font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; line-height: 1.15; color: rgb(15 23 42); }
  .museo-cta-cuerpo { margin-top: .9rem; max-width: 34rem; color: rgb(51 65 85); font-size: .95rem; line-height: 1.75; }
  .museo-cta-cuerpo p { margin: 0 0 .6rem; }
  .museo-cta .museo-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
  .museo-cta-figura img { display: block; width: 100%; height: auto; border-radius: .5rem; }

  .museo-cta--oscuro {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    background: rgb(8 55 71);
    padding: clamp(1.75rem, 4vw, 3rem);
    gap: clamp(1.5rem, 4vw, 3rem);
  }

  .museo-cta--oscuro .museo-cta-etiqueta { color: rgb(var(--accent)); }
  .museo-cta--oscuro .museo-cta-titulo   { color: white; }
  .museo-cta--oscuro .museo-cta-cuerpo   { color: rgb(191 214 224); }

  /*
   * El disco se ancla al principio de su columna y sobresale solo por la
   * derecha, donde lo recorta el borde del bloque. Asi da la sensacion de que
   * la teselacion continua mas alla del recuadro —que es justo lo que hace una
   * teselacion hiperbolica— sin invadir nunca la columna del texto.
   */
  .museo-cta--oscuro .museo-cta-figura {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
  }

  .museo-cta--oscuro .museo-cta-figura img {
    width: 122%;
    max-width: none;
    border-radius: 0;
  }

  /*
   * En pantalla ancha el bloque oscuro lleva cuatro accesos —la seccion y sus
   * tres herramientas— y con las columnas al 1.05/.95 el ultimo boton caia
   * solo a una segunda linea. Un poco mas de sitio para el texto los deja en
   * una sola fila sin que el disco pierda presencia: sigue saliendose por la
   * derecha, que es lo que da la sensacion de teselacion infinita.
   */
  @media (min-width: 1024px) {
    .museo-cta--oscuro {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
    }
  }

  .btn-claro {
    display: inline-flex;
    align-items: center;
    border: 1px solid white;
    border-radius: .45rem;
    background: white;
    padding: .5rem 1.1rem;
    color: rgb(8 55 71);
    font-weight: 700;
    text-decoration: none;
    transition: filter .15s;
  }

  .btn-claro:hover { filter: brightness(.94); }

  .btn-contorno {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(255 255 255 / .45);
    border-radius: .45rem;
    background: transparent;
    padding: .5rem 1.1rem;
    color: white;
    font-weight: 650;
    text-decoration: none;
    transition: background .15s, border-color .15s;
  }

  .btn-contorno:hover { background: rgb(255 255 255 / .12); border-color: white; }

  @media (max-width: 860px) {
    .museo-cta { grid-template-columns: 1fr; }
    .museo-cta--oscuro .museo-cta-figura {
      margin: 0 calc(clamp(1.75rem, 4vw, 3rem) * -1) calc(clamp(1.75rem, 4vw, 3rem) * -1);
      justify-content: center;
    }
    .museo-cta--oscuro .museo-cta-figura img { width: 100%; }
  }

  .museo-seccion-encabezado { display: grid; gap: .2rem; }
  .museo-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }

  /* ═══ Centro editorial de /admin ═══════════════════════════════════════════ */

  .admin-acceso-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
  .admin-detalle { margin-top: 1rem; }
  .admin-detalle > summary { cursor: pointer; font-size: .85rem; font-weight: 650; color: rgb(var(--accent-2-ink)); }
  .admin-status[data-tono="error"] { color: rgb(153 27 27); }
  .admin-status[data-tono="ok"]    { color: rgb(5 94 72); }

  .centro-tabs {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin: 1.5rem 0 1.25rem; padding-bottom: .9rem;
    border-bottom: 1px solid rgb(var(--accent-2) / .14);
  }

  .centro-tab {
    border: 1px solid rgb(var(--accent-2) / .22);
    border-radius: 999px; background: white;
    padding: .45rem 1rem; font-size: .85rem; font-weight: 650;
    color: rgb(51 65 85); cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }

  .centro-tab:hover { border-color: rgb(var(--accent-2) / .45); }
  .centro-tab[aria-selected="true"] { background: rgb(var(--accent-2-ink)); border-color: rgb(var(--accent-2-ink)); color: white; }

  .centro-capacidades { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .35rem; }
  .centro-capacidades li { display: flex; gap: .55rem; align-items: baseline; font-size: .88rem; }
  .centro-capacidades li span { font-weight: 800; width: 1rem; }
  .centro-capacidades li.si { color: rgb(15 23 42); }
  .centro-capacidades li.si span { color: rgb(5 122 85); }
  .centro-capacidades li.no { color: rgb(148 163 184); }

  .centro-dos-columnas { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  @media (max-width: 900px) { .centro-dos-columnas { grid-template-columns: 1fr; } }

  .centro-lista-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem; }
  .centro-lista-paginas { position: sticky; top: calc(var(--museo-franja-alto, 0rem) + 1rem); }

  .centro-pagina-item {
    display: flex; flex-direction: column; gap: .15rem; width: 100%; margin-top: .4rem;
    border: 1px solid rgb(var(--accent-2) / .16); border-radius: .5rem;
    background: white; padding: .6rem .75rem; text-align: left; cursor: pointer;
  }

  .centro-pagina-item:hover { border-color: rgb(var(--accent-2) / .4); }
  .centro-pagina-item.is-activa { border-color: rgb(var(--accent-2-ink)); background: rgb(var(--accent-2) / .07); }
  .centro-pagina-nombre { font-weight: 700; color: rgb(15 23 42); font-size: .9rem; }
  .centro-pagina-ruta { font-size: .75rem; color: rgb(100 116 139); }

  .centro-form-pagina { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem; margin-top: 1.1rem; }
  .centro-form-pagina label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 650; color: rgb(51 65 85); }

  .centro-form-pagina input, .centro-form-pagina textarea, .centro-form-pagina select {
    border: 1px solid rgb(var(--accent-2) / .22); border-radius: .4rem;
    padding: .5rem .65rem; font: inherit; font-weight: 500; color: rgb(15 23 42); background: white;
  }

  .centro-ancho { grid-column: 1 / -1; }
  .centro-check { flex-direction: row !important; align-items: center; gap: .5rem; }
  .centro-check input { width: auto; }

  /*
   * La pestaña «Páginas → Secciones».
   *
   * Estas clases las escribía museo-centro.js desde el principio, pero nunca
   * llegaron a tener CSS: la lista de secciones de cada página se dibujaba con
   * los <details> pelados del navegador, mientras sus hermanas —grupos,
   * miembros, historial— sí tenían estilo. Se sigue el mismo patrón que
   * .centro-entrada, que es el vecino más parecido.
   */
  .centro-secciones { display: grid; gap: .45rem; margin-top: 1rem; }

  .centro-seccion {
    border: 1px solid rgb(var(--accent-2) / .14);
    border-radius: .45rem;
    background: white;
  }

  .centro-seccion > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
    padding: .6rem .75rem; cursor: pointer; font-size: .86rem; list-style: none;
  }
  .centro-seccion > summary::-webkit-details-marker { display: none; }
  .centro-seccion > summary:hover { background: rgb(var(--accent-2) / .04); }
  .centro-seccion[open] > summary { border-bottom: 1px solid rgb(var(--accent-2) / .12); }

  /* Una sección oculta se ve, pero apagada: está ahí y no sale en la página. */
  .centro-seccion.is-oculta > summary { opacity: .62; }

  .centro-seccion-tipo {
    border-radius: 999px;
    background: rgb(var(--accent-2) / .12);
    padding: .1rem .55rem;
    color: rgb(var(--accent-2-ink));
    font-size: .72rem;
    font-weight: 750;
  }

  .centro-seccion-titulo { color: rgb(15 23 42); font-weight: 650; }

  .centro-seccion-cuerpo { display: grid; gap: .8rem; padding: .85rem .75rem; }

  .centro-seccion-cuerpo > label {
    display: grid; gap: .3rem;
    color: rgb(51 65 85); font-size: .8rem; font-weight: 650;
  }

  .centro-seccion-cuerpo input,
  .centro-seccion-cuerpo textarea,
  .centro-seccion-cuerpo select {
    width: 100%;
    border: 1px solid rgb(203 213 225);
    border-radius: .4rem;
    background: white;
    padding: .5rem .6rem;
    color: rgb(15 23 42);
    font: inherit;
    font-size: .88rem;
    font-weight: 450;
  }

  .centro-seccion-cuerpo textarea { resize: vertical; line-height: 1.6; }
  .centro-seccion-cuerpo textarea[data-campo="config"] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .78rem;
  }

  .centro-seccion-orden { margin: 0; }

  .centro-ayuda {
    display: block;
    margin-top: .3rem;
    color: rgb(100 116 139);
    font-size: .75rem;
    font-weight: 450;
    line-height: 1.5;
  }

  .centro-avanzado {
    border: 1px solid rgb(var(--accent-2) / .12);
    border-radius: .4rem;
    background: rgb(248 250 252 / .7);
  }
  .centro-avanzado > summary {
    padding: .45rem .6rem; cursor: pointer;
    color: rgb(71 85 105); font-size: .78rem; font-weight: 700;
  }
  .centro-avanzado[open] > summary { border-bottom: 1px solid rgb(var(--accent-2) / .1); }
  .centro-avanzado > label,
  .centro-avanzado > small { display: grid; gap: .3rem; margin: .6rem; font-size: .8rem; font-weight: 650; color: rgb(51 65 85); }

  /* «Cambios sin guardar»: el mismo ámbar que el resto de avisos del panel. */
  .centro-sucio {
    border-radius: 999px;
    background: rgb(255 251 235);
    padding: .2rem .6rem;
    color: rgb(146 64 14);
    font-size: .74rem;
    font-weight: 700;
  }

  .centro-grupos { display: grid; gap: .45rem; }
  .centro-grupo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
    border: 1px solid rgb(var(--accent-2) / .16); border-radius: .45rem; padding: .5rem .7rem;
  }
  .centro-grupo small { display: block; font-size: .72rem; color: rgb(100 116 139); }

  .centro-invitar { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
  @media (max-width: 720px) { .centro-invitar { grid-template-columns: 1fr; } }

  .centro-equipo { display: grid; gap: .5rem; }
  .centro-miembro {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
    border: 1px solid rgb(var(--accent-2) / .16); border-radius: .5rem; padding: .7rem .85rem;
  }
  .centro-miembro-quien strong { display: block; color: rgb(15 23 42); }
  .centro-miembro-quien small { color: rgb(100 116 139); font-size: .78rem; }
  .centro-miembro-marcas { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
  .centro-miembro-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

  .centro-miembro-acciones select {
    border: 1px solid rgb(var(--accent-2) / .25); border-radius: .4rem;
    padding: .35rem .55rem; font: inherit; font-size: .82rem; background: white;
  }
  .centro-miembro-acciones select:disabled { background: rgb(241 245 249); color: rgb(100 116 139); cursor: not-allowed; }

  .centro-matriz { overflow-x: auto; margin-top: 1rem; }
  .centro-tabla { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .82rem; }
  .centro-tabla th, .centro-tabla td { border-bottom: 1px solid rgb(var(--accent-2) / .12); padding: .45rem .6rem; text-align: center; }
  .centro-tabla thead th { color: rgb(var(--accent-2-ink)); font-size: .78rem; }
  .centro-tabla tbody th { text-align: left; font-weight: 550; color: rgb(51 65 85); }
  .centro-tabla td span { font-weight: 800; }

  .centro-historial { display: grid; gap: .4rem; }
  .centro-entrada { border: 1px solid rgb(var(--accent-2) / .14); border-radius: .45rem; background: white; }
  .centro-entrada > summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
    padding: .55rem .75rem; cursor: pointer; font-size: .84rem; list-style: none;
  }
  .centro-entrada > summary::-webkit-details-marker { display: none; }

  .centro-entrada-accion {
    border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 750;
    background: rgb(var(--accent-2) / .12); color: rgb(var(--accent-2-ink));
  }
  .accion-eliminar { background: rgb(254 226 226); color: rgb(153 27 27); }
  .accion-publicar { background: rgb(209 250 229); color: rgb(6 95 70); }
  .accion-despublicar, .accion-ocultar { background: rgb(254 243 199); color: rgb(146 64 14); }

  .centro-entrada-que { color: rgb(15 23 42); font-weight: 550; }
  .centro-entrada-quien { color: rgb(100 116 139); }
  .centro-entrada time { margin-left: auto; color: rgb(148 163 184); font-size: .76rem; }
  .centro-entrada-resumen { margin: 0 .75rem .6rem; font-size: .82rem; color: rgb(51 65 85); }

  .centro-diferencias { display: grid; gap: .3rem; border-top: 1px solid rgb(var(--accent-2) / .1); padding: .6rem .75rem; }
  .centro-diferencia { display: grid; grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; font-size: .78rem; align-items: start; }
  .centro-diferencia-campo { font-weight: 700; color: rgb(var(--accent-2-ink)); }
  .centro-diferencia-antes { color: rgb(153 27 27); word-break: break-word; }
  .centro-diferencia-despues { color: rgb(5 94 72); word-break: break-word; }
  @media (max-width: 640px) { .centro-diferencia { grid-template-columns: 1fr; } }

  .centro-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-top: 1rem; }
  .centro-datos dt { font-size: .75rem; font-weight: 700; color: rgb(100 116 139); }
  .centro-datos dd { margin: .2rem 0 0; font-weight: 600; color: rgb(15 23 42); }

  .btn-peligro { border-color: rgb(185 28 28 / .35) !important; color: rgb(153 27 27) !important; }
  .btn-peligro:hover { background: rgb(254 226 226); }
  .btn-sm { padding: .3rem .7rem !important; font-size: .78rem !important; }

  /* ── Las acciones de una ficha ──────────────────────────────────────────────
     Los botones de «Editar la ficha completa» y «Eliminar» de un recurso, un
     video o un recorrido. Antes estaban siempre puestos para cualquiera con
     sesion; ahora salen solo con la edicion encendida, igual que el resto. */

  .museo-acciones-ficha {
    display: contents;
  }

  .museo-acciones-ficha[hidden] {
    display: none;
  }

  /* ── La ficha de un recurso, editable en su sitio ───────────────────────────
     Se comporta como un bloque mas: contorno al pasar por encima y etiqueta que
     dice que es. No lleva barra de mover ni de borrar, porque una ficha no se
     reordena dentro de su propia pagina. */

  html.museo-editando .museo-ficha-editable {
    position: relative;
  }

  html.museo-editando .museo-ficha-editable > .museo-bloque-etiqueta {
    top: -.4rem;
  }

  /* ── Deshacer un cambio desde el historial ────────────────────────────────── */

  .centro-entrada-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgb(226 232 240);
  }

  .centro-entrada-nota {
    color: rgb(100 116 139);
    font-size: .8rem;
  }

  /* ── Escribir un bloque en HTML ─────────────────────────────────────────────
     El aviso de lo que el filtro va a retirar aparece mientras se escribe, no
     al guardar: así explica en vez de castigar. */

  .museo-panel-avanzado textarea[data-html-bloque] {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: .78rem;
    line-height: 1.5;
    tab-size: 2;
  }

  .museo-panel-aviso-html {
    margin: .6rem 0 0;
    border-left: 3px solid rgb(180 83 9);
    border-radius: 0 .3rem .3rem 0;
    background: rgb(254 243 199 / .55);
    padding: .55rem .7rem;
    color: rgb(120 53 15);
    font-size: .8rem;
    line-height: 1.5;
  }

  .museo-panel-aviso-html[hidden] { display: none; }

  .museo-panel-nota code {
    border-radius: .2rem;
    background: rgb(241 245 249);
    padding: .05rem .25rem;
    font-size: .95em;
  }
}