/* ---- `hidden` siempre gana --------------------------------------------
   El navegador aplica `[hidden] { display: none }` con especificidad de elemento, así que
   CUALQUIER clase que declare `display:` le gana y el elemento sigue ocupando espacio
   aunque el JS lo marque como oculto. Pasó con los banners de suscripción y soporte: dos
   franjas de 34 px permanentes que empujaban y recortaban la barra de filtros del
   catálogo. `!important` está justificado aquí —es la única forma de que una utilidad de
   una sola declaración gane a reglas de componente— y evita tener que recordar añadir
   `.loquesea[hidden]` cada vez que se crea un componente ocultable.

   La hoja ya trataba esto **caso por caso** —`.marca-logo`, `.sesion`, `.sesion-cuenta`,
   `.aviso-version`, `.barra-seleccion`, `.seleccion-portada`— y aun así faltaban las dos
   que importaban. Esas guardas quedan redundantes; se conservan por no tocar seis reglas
   sin necesidad, pero **no hace falta añadir más**. */
[hidden] { display: none !important; }

/* =========================================================================
   Demo · Registro y Archivo de Obra
   Estética: galería editorial. Papel cálido, tinta casi negra, un único
   acento terracota. Chonburi para títulos, Inter para interfaz,
   JetBrains Mono para los identificadores.
   ========================================================================= */

:root {
  /* Identidad v2.0 · registerio.art */
  --papel: #F2EFEB;          /* crema · fondo principal */
  --papel-card: #FFFFFF;     /* blanco · tarjetas */
  --crema: #F2EFEB;
  --tinta: #1f1c18;          /* casi negro cálido · títulos y texto */
  --tinta-2: #5b554c;        /* texto secundario */
  --gris: #9AA0A6;           /* frío · etiquetas y texto silenciado */
  --linea: rgba(62,40,16,.14);
  --linea-fuerte: rgba(62,40,16,.24);
  --acento: #39665F;         /* pino · acento, enlaces, identificadores */
  --acento-osc: #2A4D47;     /* pino profundo · hovers */
  --pino-claro: #6E938C;
  --pino-pal: #E8F0ED;       /* pino pálido · fondos destacados */
  --beige: #C9C2B9;
  --cafe: #3E2810;           /* botones primarios */
  --cafe-texto: #3A362F;
  /* modo admin fundido en el acento de marca (un solo color) */
  --admin: #39665F;
  --admin-osc: #2A4D47;
  --sombra: 0 1px 2px rgba(62,40,16,.04), 0 8px 24px rgba(62,40,16,.06);
  --radio: 10px;             /* controles */
  --radio-card: 16px;        /* tarjetas */

  /* Tipografía de marca */
  --fuente-logo: "Syne", system-ui, sans-serif;
  --fuente-display: "Chonburi", Georgia, serif;
  --fuente-cuerpo: "Inter", system-ui, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Fundación mobile-first (Fase 3): escala de espaciado, tamaños y táctil.
     Convención de breakpoints: base = móvil; se escala con min-width
     640px (tablet) y 1000px (escritorio). */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px;
  --tactil: 44px;            /* objetivo táctil mínimo */
  --ancho-max: 1180px;       /* ancho máximo del contenido */

  /* Escala tipográfica relativa (raíz 16px) — mobile-first.
     Usar rem permite que respete el tamaño de texto del sistema del usuario. */
  --text-2xs: 0.6875rem;     /* ~11px — badges, micro-etiquetas */
  --text-xs:  0.75rem;       /* 12px  — etiquetas de campo, separadores */
  --text-sm:  0.8125rem;     /* 13px  — metadatos, notas, identificador */
  --text-cuerpo: 0.9rem;     /* ~14px — texto secundario y datos de UI */
  --text-base: 1rem;         /* 16px  — inputs, botones, valores, lectura */
  --text-md:  1.125rem;      /* 18px  — subtítulos, navbar */
  --text-lg:  1.25rem;       /* 20px  — nombres de tarjeta / artista */
  --text-xl:  1.375rem;      /* 22px  — títulos de formulario (móvil) */
  --text-2xl: 1.5rem;        /* 24px  — títulos de pantalla (móvil) */
  --text-3xl: 1.875rem;      /* 30px  — título de obra (móvil) */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  /* textura sutil de papel mediante un degradado muy tenue */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(57,102,95,.04), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(110,147,140,.05), transparent 45%);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Base mobile-first: medios fluidos para que nada desborde en pantallas
   estrechas. Los objetivos táctiles ≥44 px se aplican en cada control. */
img { max-width: 100%; height: auto; }
/* Evita el desbordamiento horizontal por títulos o identificadores largos. */
.detalle-titulo, .detalle-id, .detalle-sub, .intro-titulo { overflow-wrap: anywhere; }

/* ---- Acento por rol --------------------------------------------------- */
body[data-rol="admin"] { --acento-borde: var(--admin); }

/* ---- Cabecera --------------------------------------------------------- */
.cabecera {
  border-bottom: 1px solid var(--linea);
  background: rgba(247,244,238,.85);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.cabecera-interior {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
/* Lockup del encabezado. Se llamaba `.marca`, **el mismo nombre que las píldoras** de
   estado (línea ~787: «titular», «externo», «ve costos»), definidas después y por tanto
   ganadoras: el lockup quedaba como `inline-block` de 11 px. Renombrado a `.marca-app`. */
.marca-app { display: flex; align-items: center; gap: 18px; min-width: 0; }

/* Lockup de marca · header compacto (isotipo + wordmark + contexto) */
.lockup-app { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; min-width: 0; }
.iso-rg {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px; background: var(--pino-pal); color: var(--acento);
  font-family: var(--fuente-logo); font-weight: 700; font-size: 18px;
  display: grid; place-items: center; letter-spacing: -.04em;
}
.lockup-col { display: inline-flex; flex-direction: column; min-width: 0; }
.lockup-wm { font-family: var(--fuente-logo); font-weight: 600; line-height: 1; letter-spacing: -.01em; font-size: 22px; white-space: nowrap; }
.lockup-reg { color: var(--acento); }
.lockup-art { color: var(--beige); }
.lockup-app .marca-artista { margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lockup grande con descriptor · login / marca */
.lockup-grande { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 40px; }
.lockup-grande .lockup-wm { font-size: 1em; }
.lockup-desc { font-family: var(--fuente-mono); font-size: .29em; margin-top: .35em; letter-spacing: 0; text-transform: uppercase; color: var(--gris); }

.marca-artista { color: var(--gris); font-size: var(--text-sm); }
/* El isotipo de iniciales queda oculto: la marca fija es el lockup. */
.marca-logo[hidden] { display: none; }

/* Sesión activa (mockup de login) */
.sesion { display: inline-flex; align-items: center; gap: 12px; }
.sesion[hidden] { display: none; }
/* Selector de cuenta activa (multi-inquilino) */
.sesion-cuenta { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-2); }
.sesion-cuenta[hidden] { display: none; }
.sel-cuenta {
  font-family: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--tinta-2);
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: 5px 12px; background: var(--papel-card); cursor: pointer; max-width: 220px;
}
.sel-cuenta:disabled { cursor: default; opacity: 1; -webkit-appearance: none; appearance: none; }
.sel-cuenta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(57,102,95,.30); }
.sesion-rol {
  font-size: var(--text-sm); font-weight: 600; color: var(--tinta-2);
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  padding: 5px 14px; background: var(--papel-card);
}
body[data-rol="admin"] .sesion-rol { color: var(--admin); border-color: var(--admin); }

/* Pantalla de login (mockup) */
.login-caja {
  max-width: 460px; margin: 8vh auto 0; padding: 0 8px;
  display: flex; flex-direction: column; gap: 14px;
}
.login-label { font-size: var(--text-sm); font-weight: 600; color: var(--tinta-2); margin-bottom: -6px; }
.login-select { width: 100%; font-size: var(--text-cuerpo); padding: 12px 14px; }
.login-caja .boton-acento { align-self: flex-start; padding: 11px 26px; }
.login-nota { font-size: var(--text-sm); color: var(--gris); font-style: italic; margin-top: 2px; }
#form-login { display: flex; flex-direction: column; gap: 20px; }
.login-input {
  width: 100%; font-size: var(--text-base); padding: 12px 14px; min-height: var(--tactil);
  border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel-card); font-family: inherit; color: var(--tinta);
}
.login-error { color: #9b2222; font-size: var(--text-sm); margin: -4px 0 0; }
/* Pie de la caja de login y de las pantallas públicas (restablecer, verificar,
   invitación): enlace discreto de vuelta al inicio de sesión. */
.login-pie { font-size: var(--text-sm); margin: 2px 0 0; }
.login-pie a { color: var(--tinta-2); text-decoration: underline; }
.login-pie a:hover { color: var(--tinta); }
#pantalla-publica .form-acciones { margin-top: 4px; }
#pantalla-publica .intro-titulo { margin-bottom: 0; }

/* ---- Contenedor ------------------------------------------------------- */
.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: var(--esp-5) var(--esp-4) 80px; }
@media (min-width: 640px) { .contenedor { padding: var(--esp-6) var(--esp-5) 80px; } }
/* Pantallas de lectura/edición: ancho más cómodo que el catálogo. */
#pantalla-form, #pantalla-artista-form { max-width: 820px; }
#pantalla-detalle { max-width: 1000px; }

/* ---- Barra de herramientas -------------------------------------------- */
.barra { margin-bottom: 30px; }
.barra-fila {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
/* Panel de filtros: en móvil se pliega tras el botón "Filtros"; en escritorio
   siempre visible en línea (y el botón "Filtros" se oculta). */
.filtros-toggle { display: inline-flex; }
.barra-filtros {
  display: none; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px;
}
.barra-filtros.abierto { display: flex; }
@media (min-width: 681px) {
  /* Mayor especificidad para ganarle a .boton (mismo nivel, definido después). */
  .barra-fila .filtros-toggle { display: none; }
  .barra-filtros { display: flex; margin-top: 12px; }
  /* En pantallas grandes, los títulos recuperan algo de presencia editorial. */
  .intro-titulo { font-size: 1.625rem; }
  .form-titulo { font-size: var(--text-xl); }
}
.campo-busqueda {
  flex: 1 1 240px;
  min-width: 200px;
  min-height: var(--tactil);
  padding: 10px 14px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-card);
  font-family: inherit; font-size: var(--text-cuerpo); color: var(--tinta);
}
.filtro {
  min-height: var(--tactil);
  padding: 10px 12px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel-card);
  font-family: inherit; font-size: var(--text-cuerpo); color: var(--tinta-2);
  cursor: pointer;
}
.campo-busqueda:focus, .filtro:focus, .form-obra input:focus,
.form-obra select:focus, .form-obra textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(57,102,95,.18);
}

/* Botones */
.boton {
  border: none; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: var(--text-cuerpo);
  padding: 10px 18px; border-radius: var(--radio);
  min-height: var(--tactil);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .16s ease;
}
.boton-acento { background: var(--cafe); color: var(--crema); }
.boton-acento:hover { background: var(--cafe-texto); }
body[data-rol="admin"] .boton-acento { background: var(--cafe); }
body[data-rol="admin"] .boton-acento:hover { background: var(--cafe-texto); }
.boton-linea {
  background: transparent; border: 1px solid var(--linea-fuerte); color: var(--tinta);
}
.boton-linea:hover { border-color: var(--acento); background: rgba(57,102,95,.06); color: var(--acento-osc); }
.boton-texto {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: var(--text-sm); color: var(--gris);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 8px 6px;
}
.boton-texto:hover { color: var(--acento); }

/* Elementos que solo se ven en modo administrador */
.solo-admin { display: none; }
body.puede-usuarios .solo-admin { display: inline-flex; }
/* `solo-root`: el alta de usuarios ya no es cosa de los inquilinos —ahí se **invita**—,
   así que este botón solo lo ve el operador de la instalación. */
.solo-root { display: none; }
body[data-rol="root"] .solo-root { display: inline-flex; }
/* Acciones de "gestor" (consultor o admin): alta de artista, compartir. */
.solo-gestor { display: none; }
body.puede-crear-artista .solo-gestor { display: inline-flex; }
.intro-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
/* Menú de configuración (lista de submenús) */
.config-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
/* Encabezado de grupo del menú de configuración (ámbito: tu perfil / esta cuenta /
   Registerio). Discreto: ordena sin competir con los títulos de cada opción. */
.config-grupo {
  margin: 18px 0 2px; font-size: var(--text-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gris);
}
.config-grupo:first-child { margin-top: 4px; }
.config-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel-card); cursor: pointer; text-decoration: none;
  color: inherit; transition: border-color .15s, background .15s;
}
.config-item:hover { border-color: var(--acento-borde, var(--acento)); }
.config-item-titulo { font-weight: 600; }
.config-item-desc { font-size: var(--text-sm); color: var(--gris); }
.config-pref { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 2px; border-top: 1px solid var(--linea); margin-top: 8px; }
.config-pref .config-item-titulo { display: block; }
.config-pref select { max-width: 340px; }
/* Pie con la versión en ejecución (discreto) */
.pie-version {
  margin-top: 22px; text-align: center;
  font-size: var(--text-sm); color: var(--gris); opacity: .8;
}
/* Marca en la pantalla de inicio de sesión */
.login-marca { text-align: center; margin-bottom: 18px; }
.login-marca-nombre {
  font-family: var(--fuente-display); font-weight: 600;
  font-size: 2rem; letter-spacing: .5px; color: var(--acento);
}
.login-marca-slogan {
  font-size: var(--text-sm); color: var(--gris); margin-top: 2px;
}
/* Pie global con la versión, visible en todas las páginas */
.pie-global {
  padding: 18px 16px 24px; text-align: center;
}
.pie-global .pie-version { margin-top: 0; }
/* Aviso flotante de "nueva versión disponible" */
.aviso-version {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1200; display: flex; align-items: center; gap: 12px;
  background: var(--tinta, #2b2622); color: #f7f2ea;
  padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); font-size: var(--text-sm);
  max-width: calc(100vw - 24px);
}
.aviso-version[hidden] { display: none; }
.aviso-version .boton { padding: 6px 14px; min-height: auto; }
/* Campo de contraseña con botón "Ver/Ocultar" */
.campo-pass { position: relative; display: block; }
.campo-pass input { width: 100%; padding-right: 72px; }
.ver-pass {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: var(--text-sm);
  color: var(--acento); padding: 6px 10px; min-height: auto;
}
.campo-ayuda { font-size: var(--text-sm); color: var(--gris); margin: 0 0 10px; }
/* Ocultar las flechas de los campos numéricos: evita cambios accidentales
   (clic en la flecha o rueda del ratón). El teclado numérico en móvil se conserva. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
/* Filas de usuarios / accesos (administración) */
.acceso-fila {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.acceso-quien { flex: 1 1 220px; display: flex; flex-direction: column; }
.acceso-correo { font-size: var(--text-sm); color: var(--gris); }
.acceso-fila .u-rol { min-width: 130px; }

/* Enlace "volver" en las pantallas de detalle/formulario (Fase 2 del rediseño) */
.volver-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  color: var(--acento); font-family: inherit; font-size: var(--text-cuerpo);
  padding: 8px 0; margin-bottom: 4px; min-height: 44px;
}
.volver-link:hover { text-decoration: underline; }

/* Toggles de costos: visibles solo para el artista (el admin no ve costos). */
.solo-costos { display: none; }
body.puede-costos .solo-costos { display: inline-flex; }

/* Barra de selección múltiple */
.barra-seleccion {
  margin-top: 16px; padding: 14px 18px;
  background: var(--papel-card);
  border: 1px solid var(--linea); border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
}
.barra-seleccion[hidden] { display: none; }
.seleccion-conteo { font-size: var(--text-cuerpo); color: var(--tinta-2); }
.toggles { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.seleccion-portada {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); color: var(--gris); width: 100%; margin-top: 4px;
}
.seleccion-portada[hidden] { display: none; }
.seleccion-portada select { flex: 1; min-width: 0; max-width: 340px; }
.toggle { font-size: var(--text-sm); color: var(--tinta-2); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.toggle input { accent-color: var(--acento); width: 16px; height: 16px; }

/* ---- Catálogo (rejilla de tarjetas) ----------------------------------- */
.catalogo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px 22px;
}
.tarjeta {
  background: var(--papel-card);
  border: 1px solid var(--linea);
  border-radius: var(--radio-card);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  animation: aparecer .5s ease backwards;
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(62,40,16,.09);
  border-color: rgba(57,102,95,.35);
}
.tarjeta.seleccionada { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
.tarjeta-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--papel-2, #efe9df); }
.tarjeta-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s ease; }
.tarjeta:hover .tarjeta-img img { transform: scale(1.04); }

.tarjeta-check {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,253,248,.92);
  border: 1px solid var(--linea-fuerte);
  display: grid; place-items: center;
  cursor: pointer; z-index: 2;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* Área táctil ampliada (>=44px) sin agrandar el círculo visible: importante
   para tocar con el dedo en móvil (iPhone). El pseudo-elemento es parte del
   control y recibe el toque. */
.tarjeta-check::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
}
.tarjeta-check:hover { border-color: var(--acento); }
.tarjeta-check svg { width: 15px; height: 15px; opacity: 0; transition: opacity .15s; }
.tarjeta.seleccionada .tarjeta-check { background: var(--acento); border-color: var(--acento); }
.tarjeta.seleccionada .tarjeta-check svg { opacity: 1; }

.tarjeta-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta-id {
  font-family: var(--fuente-mono); font-size: var(--text-2xs);
  color: var(--acento); letter-spacing: .02em;
}
.tarjeta-titulo {
  font-family: var(--fuente-display); font-weight: 600; font-size: var(--text-lg);
  line-height: 1.15; color: var(--tinta);
}
.tarjeta-meta { font-size: var(--text-sm); color: var(--gris); margin-top: 2px; }
.chip {
  align-self: flex-start; margin-top: 8px;
  font-size: var(--text-2xs); padding: 3px 10px; border-radius: 999px;
  background: rgba(57,102,95,.08); color: var(--acento-osc);
  border: 1px solid rgba(57,102,95,.20);
}

.sin-resultados { text-align: center; color: var(--gris); padding: 60px; font-size: var(--text-base); }

/* ---- Detalle de obra -------------------------------------------------- */
.detalle { padding: 0; }
.detalle-cabecera {
  padding: 8px 0 24px; border-bottom: 1px solid var(--linea);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px;
}
.detalle-cabecera-texto { flex: 1 1 280px; min-width: 0; }
.detalle-portada {
  flex: 0 0 auto; flex-shrink: 0; padding: 0;
  border: 1px solid var(--linea); background: var(--papel-2, #efe9df);
  border-radius: var(--radio); overflow: hidden; cursor: zoom-in; line-height: 0;
  width: 150px; height: 150px; min-width: 150px;
}
.detalle-portada img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.detalle-id { font-family: var(--fuente-mono); font-size: var(--text-sm); color: var(--acento); }
.detalle-titulo { font-family: var(--fuente-display); font-weight: 700; font-size: 2rem; line-height: 1.06; margin: 8px 0 6px; }
.detalle-sub { color: var(--gris); font-size: var(--text-base); font-style: italic; font-family: var(--fuente-display); }
.detalle-cuerpo { padding: 24px 0 40px; }

.detalle-seccion { margin-top: 30px; }
.detalle-seccion h3 {
  font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--acento); margin: 0 0 4px; font-weight: 700;
}
.detalle-seccion .regla { height: 1px; background: var(--linea); margin-bottom: 16px; }

.datos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.dato-etq { font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.dato-val { font-size: var(--text-base); color: var(--tinta); margin-top: 2px; }

/* Galería de fotos por tipo */
.galeria-grupo { margin-bottom: 18px; }
.galeria-grupo h4 {
  font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-2); margin: 0 0 8px; font-weight: 700;
}
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.galeria figure { margin: 0; }
.galeria img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--papel-2, #efe9df); border-radius: var(--radio); border: 1px solid var(--linea); }
.galeria figcaption { font-size: var(--text-xs); color: var(--gris); margin-top: 5px; }

/* Lista de exposiciones */
.expo-item { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.expo-item:last-child { border-bottom: none; }
.expo-nombre { font-family: var(--fuente-display); font-size: var(--text-md); font-weight: 600; }
.expo-meta { font-size: var(--text-sm); color: var(--gris); margin-top: 2px; }

.detalle-obs { font-size: var(--text-cuerpo); color: var(--tinta-2); line-height: 1.6; }

.detalle-toggles-bloque {
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--linea);
}
.detalle-toggles { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
/* Barra inferior del detalle: el botón primario a la derecha. */
.detalle-barra { margin-top: 18px; }
.detalle-barra .boton-acento { margin-left: auto; }

/* Subida de fotos (admin) en el detalle */
.subir-foto {
  margin-top: 18px; padding: 16px; border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio); background: rgba(57,102,95,.05);
}
.subir-foto-fila { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---- Formulario ------------------------------------------------------- */
.form-titulo { font-family: var(--fuente-display); font-weight: 700; font-size: var(--text-lg); margin: 8px 0 4px; }
.form-obra { padding: 8px 0 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo.ancho-total { grid-column: 1 / -1; }
.campo label { font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--gris); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  min-height: var(--tactil);
  padding: 9px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel-card); font-family: inherit; font-size: var(--text-cuerpo); color: var(--tinta);
}
.campo textarea { resize: vertical; min-height: 70px; }
.form-acciones {
  grid-column: 1 / -1; display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--linea);
}
/* Barra de acciones fija al fondo, solo en los formularios de obra y artista. */
#form-obra .form-acciones, #form-artista .form-acciones {
  position: sticky; bottom: 0; background: var(--papel); z-index: 5;
  padding-bottom: 14px;
}

/* ---- Subsecciones del formulario y bloques nuevos --------------------- */
.form-sub {
  grid-column: 1 / -1;
  font-family: var(--fuente-display); font-weight: 600; font-size: var(--text-md);
  color: var(--tinta); margin: 10px 0 -4px;
  padding-bottom: 6px; border-bottom: 1px solid var(--linea);
}
.grupo-prestamo { /* visibilidad controlada por JS */ }

/* Filas de exposición dinámicas en el formulario */
.expo-fila {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 1fr auto auto 1fr auto;
  gap: 8px; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed var(--linea);
}
.expo-fila input {
  padding: 8px 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel-card); font-family: inherit; font-size: var(--text-sm); color: var(--tinta);
  min-width: 0;
}
.expo-fila .ex-quitar { white-space: nowrap; }
/* Campo de fecha con etiqueta visible (los type=date no muestran placeholder). */
.campo-fecha { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campo-fecha > span { font-size: var(--text-sm); color: var(--gris); }
.campo-fecha input { width: 100%; }
/* --- Bitácora / Actividad --- */
.actividad-filtros { margin: 4px 0 16px; display: flex; flex-wrap: wrap; gap: 10px 16px; }
.actividad-filtros label { font-size: var(--text-sm); color: var(--gris); display: inline-flex; flex-direction: column; gap: 4px; }
.actividad-filtros select, .actividad-filtros input[type="date"] { min-width: 150px; }
.acti-item { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.acti-cab { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.acti-fecha { font-family: var(--mono, monospace); font-size: var(--text-sm); color: var(--gris); }
.acti-actor { font-size: var(--text-sm); color: var(--tinta-suave, var(--gris)); }
.acti-desc { margin-top: 3px; }
.acti-detalle { margin-top: 6px; }
.acti-detalle > summary { cursor: pointer; font-size: var(--text-sm); color: var(--acento); }
.acti-bloque { margin: 8px 0 4px; padding-left: 12px; border-left: 2px solid var(--linea); }
.acti-bloque-tit { font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; }
.acti-campos { margin: 0; padding-left: 18px; }
.acti-campos li { font-size: var(--text-sm); }
.acti-mini { font-size: var(--text-sm); color: var(--gris); }
.actividad-mas { margin-top: 16px; text-align: center; }
.obra-actividad > summary { cursor: pointer; color: var(--acento); font-size: var(--text-sm); }
.obra-actividad-lista { margin-top: 8px; }

/* --- Galería con acciones, lightbox y confirmación --- */
.foto-fig { margin: 0; position: relative; }
.foto-ampliar { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; position: relative; }
.foto-badge { position: absolute; top: 6px; left: 6px; background: var(--acento); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px; }
.foto-acciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.foto-btn { font-size: 11px; padding: 3px 8px; border: 1px solid var(--linea); background: var(--papel, #fff); color: var(--tinta, #333); border-radius: 6px; cursor: pointer; line-height: 1.4; min-height: auto; }
.foto-btn:hover { border-color: var(--acento); color: var(--acento); }
.foto-btn.foto-borrar:hover { border-color: #b23b3b; color: #b23b3b; }
.foto-portada.activa { background: var(--acento); color: #fff; border-color: var(--acento); }

.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20,16,12,.92); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 24px; }
.lightbox[hidden] { display: none; }
.lightbox-fig { margin: 0; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lightbox-img { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: 4px; background: #00000022; }
.lightbox-pie { color: #f2ece2; font-size: var(--text-sm); text-align: center; max-width: 80vw; }
.lightbox-cerrar { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.lightbox-nav { background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 34px; width: 48px; height: 64px; border-radius: 8px; cursor: pointer; flex: none; }
.lightbox-nav:hover { background: rgba(255,255,255,.25); }

.confirmar-overlay { position: fixed; inset: 0; z-index: 1100; background: rgba(20,16,12,.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.confirmar-overlay[hidden] { display: none; }
.confirmar-caja { background: var(--papel-card); border-radius: var(--radio-card); padding: 24px 24px 20px; max-width: 380px; width: 100%; box-shadow: 0 18px 48px rgba(20,16,12,.28); }
.confirmar-caja p { margin: 0 0 16px; }
#prompt-msg { display: block; margin-bottom: 8px; }
.prompt-input { width: 100%; margin: 0 0 16px; }
.confirmar-acciones { display: flex; justify-content: flex-end; gap: 10px; }

/* Modal de datos del artista */
.modal-titulo { margin: 0 0 8px; font-size: var(--text-lg); }
#editar-contacto .confirmar-caja { text-align: left; max-width: 420px; }
#editar-contacto label { display: block; margin: 12px 0 4px; font-size: var(--text-sm); color: var(--tinta-2); }
.campo-modal { width: 100%; }
#editar-contacto .confirmar-acciones { margin-top: 18px; }

/* Avisos tipo "toast" */
.avisos {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 1200; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none; max-width: 92vw;
}
.aviso {
  pointer-events: auto; cursor: pointer; max-width: 92vw;
  background: var(--tinta); color: var(--papel);
  padding: 11px 16px; border-radius: var(--radio);
  font-size: var(--text-sm); line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.aviso.visible { opacity: 1; transform: translateY(0); }
.aviso-ok { background: #1f6f4f; }
.aviso-error { background: #9b3b2f; }

/* Propiedad y procedencia */
.procedencia { margin-top: 14px; border-top: 1px solid var(--linea); }
.proc-fila { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px dashed var(--linea); }
.proc-nombre { font-weight: 500; }
.proc-fecha { color: var(--gris); font-size: var(--text-sm); white-space: nowrap; }
.proc-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  background: var(--acento); color: #fff; font-size: .72rem; font-weight: 600;
  vertical-align: middle; }
.proc-actual .proc-nombre { color: var(--tinta); }

/* Fila de pieza (componente de obra multiparte): campos con etiqueta que se
   acomodan solos (flex-wrap), legibles en móvil y escritorio. */
.pieza-fila {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 12px 0; border-bottom: 1px dashed var(--linea);
}
.pieza-fila .mini-campo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 90px; }
.pieza-fila .mini-campo.mini-ancho { flex: 1 1 180px; }
.pieza-fila .mini-campo label {
  font-size: var(--text-2xs); letter-spacing: .05em; text-transform: uppercase;
  color: var(--gris); font-weight: 600;
}
.pieza-fila input {
  padding: 9px 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel-card); font-family: inherit; color: var(--tinta);
  min-width: 0; width: 100%; min-height: var(--tactil);
}
.pieza-fila .pz-quitar { white-space: nowrap; align-self: flex-end; }

/* Etiqueta con casilla en línea (ej. "¿Obra multiparte?"). */
.check-inline { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--text-cuerpo); }
.check-inline input { width: 18px; height: 18px; }

/* Encabezado de bloque administrativo (subir foto/doc, nuevo reporte) */
.bloque-admin-tit {
  margin: 0 0 12px; font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--admin); font-weight: 700;
}

/* Párrafos etiquetados en el detalle (notas de embalaje/montaje) */
.parrafo-bloque { margin-top: 14px; }
.parrafo-bloque .dato-etq { margin-bottom: 4px; }

/* Documentos adjuntos */
.doc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.doc-item:last-of-type { border-bottom: none; }
.doc-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-tipo {
  font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--acento); font-weight: 700;
}
body[data-rol="admin"] .doc-tipo { color: var(--admin); }
.doc-nombre {
  font-size: var(--text-cuerpo); color: var(--tinta); text-decoration: underline;
  text-underline-offset: 2px; word-break: break-word;
}
.doc-nombre:hover { color: var(--acento); }
.doc-desc { font-size: var(--text-sm); color: var(--gris); }

/* Reportes de condición */
.cond-card {
  border: 1px solid var(--linea); border-left: 3px solid var(--linea-fuerte);
  border-radius: var(--radio); padding: 14px 16px; margin-bottom: 12px;
  background: var(--papel-card);
}
.cond-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.cond-estado {
  font-size: var(--text-2xs); font-weight: 700; padding: 3px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--linea); color: var(--tinta-2);
}
.cond-excelente { background: rgba(57,102,95,.16); color: var(--acento-osc); }
.cond-bueno     { background: rgba(57,102,95,.10); color: var(--acento-osc); }
.cond-regular   { background: rgba(176,124,38,.13); color: #7a5618; }
.cond-delicado  { background: rgba(155,71,34,.14); color: #8a3d18; }
.cond-malo      { background: rgba(155,71,34,.20); color: #7c3315; }
.cond-fecha { font-size: var(--text-sm); color: var(--gris); }
.cond-cab .cond-pdf { margin-left: auto; }
.cond-cab .cond-pdf + .cond-borrar { margin-left: 0; }
.cond-card p { margin: 4px 0; font-size: var(--text-cuerpo); color: var(--tinta-2); line-height: 1.5; }
.cond-card p strong { color: var(--tinta); font-weight: 600; }
.cond-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.cond-form .campo.ancho-total { grid-column: 1 / -1; }
.cond-ayuda { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--gris); font-style: italic; margin: 4px 0 0; }

/* Galería de fotos de observación dentro de un reporte de condición. */
.cond-galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px; margin: 10px 0 4px;
}
.cond-foto { margin: 0; position: relative; }
.cond-foto img {
  width: 100%; aspect-ratio: 4/3; object-fit: contain;
  background: var(--papel-2, #efe9df);
  border-radius: var(--radio); border: 1px solid var(--linea);
}
.cond-foto figcaption { font-size: var(--text-2xs); color: var(--gris); margin-top: 4px; line-height: 1.35; }
.cond-foto-borrar {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(26,24,21,.6); color: #fff;
  font-size: var(--text-cuerpo); line-height: 1; cursor: pointer;
}
.cond-foto-borrar:hover { background: var(--acento); }
.cond-subir-foto {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--linea);
}
/* El input[type=file] nativo tiene un ancho intrínseco grande (botón + texto
   "ningún archivo seleccionado") que no encoge y desbordaba la tarjeta en móvil.
   Lo hacemos ocupar toda la línea y poder encoger dentro del contenedor. */
.subir-foto-fila > *,
.cond-subir-foto > * { max-width: 100%; box-sizing: border-box; }
.subir-foto-fila input[type="file"],
.cond-subir-foto input[type="file"] {
  flex: 1 1 100%; min-width: 0; width: 100%;
}

/* Botón "Seleccionar todas" deshabilitado */
.boton-linea:disabled { opacity: .45; cursor: default; }

/* --- Papelera (v30) ---------------------------------------------------
   El aviso de cuota es la pieza importante de esta pantalla: si no se ve,
   la gente asume que borrar libera espacio, que es justo lo que NO pasa. */
.boton-peligro { background: #9b2222; color: #fff; }
.boton-peligro:hover { background: #7d1b1b; }
.aviso-cuota {
  border-left: 3px solid var(--cafe);
  padding: 8px 12px; background: rgba(154,143,128,.10); border-radius: 4px;
}
.papelera-acciones { margin: 14px 0 6px; }
.papelera-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--linea); }
.papelera-fila .pf-datos { flex: 1; min-width: 0; }
.papelera-fila .pf-nombre { display: block; }
.papelera-fila .pf-meta { font-size: var(--text-sm); color: var(--tinta-2); }
.papelera-pronto { color: #9b2222; font-weight: 600; }
.papelera-grupo { margin-top: 20px; }

/* --- Marcas de rol/pertenencia (v32/Fase 4) ---------------------------
   Distinguen a simple vista al TITULAR de la cuenta y al personal de
   Registerio. La segunda importa sobre todo en Actividad: al auditar algo
   destructivo, lo primero que hay que poder ver es de qué lado estaba quien
   lo hizo. */
.marca {
  display: inline-block; font-size: 11px; line-height: 1.6; padding: 0 7px;
  border-radius: 999px; vertical-align: middle; margin-left: 4px;
  letter-spacing: .02em; white-space: nowrap;
}
.marca-titular { background: rgba(57,102,95,.14); color: var(--acento-osc); }
.marca-registerio { background: rgba(154,143,128,.20); color: var(--cafe-texto); }
.boton-linea:disabled:hover { border-color: var(--linea-fuerte); }
/* Botón en estado "Generando…" (PDF) */
.boton:disabled { opacity: .7; cursor: default; }
.boton.cargando::before {
  content: ""; display: inline-block; width: 13px; height: 13px;
  margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ---- Animaciones ------------------------------------------------------ */
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fundir { from { opacity: 0; } to { opacity: 1; } }

/* ---- Responsivo ------------------------------------------------------- */
/* Fundación mobile-first: en móvil los controles van a ≥16 px para que iOS no
   haga zoom al enfocar; en escritorio se compactan un poco. (Va después de las
   definiciones de los controles para ganar en el orden de cascada.) */
.campo-busqueda, .filtro, .login-select,
.campo input, .campo select, .campo textarea,
.pieza-fila input, .expo-fila input { font-size: var(--text-base); }
@media (min-width: 681px) {
  .campo-busqueda, .login-select, .campo input, .campo select, .campo textarea { font-size: var(--text-cuerpo); }
  .filtro { font-size: var(--text-cuerpo); }
  .pieza-fila input, .expo-fila input { font-size: var(--text-cuerpo); }
}

/* Barra de acciones fija al fondo (patrón móvil). Definida aquí; las pantallas
   la usan en la Fase 4 para dejar las acciones primarias al alcance del pulgar. */
.barra-inferior {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; gap: var(--esp-3); align-items: center; flex-wrap: wrap;
  padding: var(--esp-3) var(--esp-4);
  background: var(--papel-card);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -6px 20px rgba(26,24,21,.06);
}

@media (max-width: 680px) {
  .cabecera-interior { flex-direction: column; align-items: flex-start; gap: 14px; }
  .datos-grid, .form-obra, .cond-form { grid-template-columns: 1fr; }
  .expo-fila { grid-template-columns: 1fr; }
  .pieza-fila { grid-template-columns: 1fr; }
  /* Catálogo en móvil: búsqueda a todo el ancho; filtros apilados. */
  .campo-busqueda { flex: 1 1 100%; }
  .barra-filtros .filtro { flex: 1 1 100%; }
  /* En móvil el círculo y su zona táctil crecen un poco más. */
  .tarjeta-check { width: 32px; height: 32px; top: 8px; right: 8px; }
  .tarjeta-check::before { width: 48px; height: 48px; }
  .tarjeta-check svg { width: 17px; height: 17px; }
  .detalle-titulo { font-size: 1.6rem; }
  .detalle-cabecera { gap: 12px; }
  .detalle-portada { width: 104px; height: 104px; min-width: 104px; }
  .toggles { margin-left: 0; }
}

/* =========================================================================
   Pantalla inicial · lista de artistas
   ========================================================================= */
.intro { margin-bottom: 26px; }
.intro-titulo {
  font-family: var(--fuente-display); font-weight: 600;
  font-size: 1.35rem; line-height: 1.12; margin: 0 0 6px;
}
.intro-texto { color: var(--tinta-2); font-size: var(--text-cuerpo); margin: 0 0 16px; }

.lista-artistas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.artista-card {
  cursor: pointer;
  background: var(--papel-card);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  animation: aparecer .5s ease backwards;
}
.artista-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26,24,21,.10);
  border-color: var(--linea-fuerte);
}
.artista-portada {
  aspect-ratio: 16 / 10;
  background: var(--linea);
  overflow: hidden;
  display: grid; place-items: center;
}
.artista-portada img { width: 100%; height: 100%; object-fit: cover; }
.artista-iniciales {
  font-family: var(--fuente-mono);
  font-size: 2.5rem; font-weight: 600; letter-spacing: .06em;
  color: var(--gris);
}
.artista-cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.artista-iniciales-chip {
  align-self: flex-start;
  font-family: var(--fuente-mono);
  font-size: var(--text-2xs); letter-spacing: .08em;
  color: var(--acento);
  border: 1px solid var(--linea-fuerte);
  border-radius: 4px; padding: 2px 7px; margin-bottom: 4px;
}
body[data-rol="admin"] .artista-iniciales-chip { color: var(--admin); }
.artista-nombre { font-family: var(--fuente-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.1; }
.artista-meta { color: var(--gris); font-size: var(--text-sm); }

/* Botón de volver a la lista de artistas */
.btn-volver {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--linea-fuerte);
  background: var(--papel-card);
  border-radius: 50%;
  font-size: var(--text-md); color: var(--tinta-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-volver:hover { background: var(--tinta); color: var(--papel); }
.btn-volver[hidden] { display: none; }


/* =========================================================================
   Fase 3 · Pulido de componentes (identidad v2.0)
   ========================================================================= */
::selection { background: var(--acento); color: var(--crema); }

/* Barras de desplazamiento finas */
* { scrollbar-width: thin; scrollbar-color: var(--beige) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--beige); border-radius: 8px; border: 2px solid var(--papel); }
::-webkit-scrollbar-thumb:hover { background: var(--pino-claro); }

/* Anillo de foco accesible en Pino */
.boton:focus-visible, .boton-texto:focus-visible, .btn-volver:focus-visible,
.lockup-app:focus-visible, .tarjeta:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(57,102,95,.30);
}

/* Foco del campo de login coherente con el resto */
.login-input:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(57,102,95,.15);
}

/* Botón: leve presión al activar */
.boton:active { transform: translateY(1px); }

/* Íconos · lucide (sprite SVG), heredan color con currentColor */
.ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-izq { margin-right: .5em; margin-left: -.05em; }
.btn-volver .ico { width: 1.15em; height: 1.15em; vertical-align: middle; }
.login-label .ico { color: var(--gris); }
h3 .ico, .seccion-titulo .ico { color: var(--acento); margin-right: .45em; vertical-align: -.13em; }

/* =========================================================================
   Fase 4 · Ritmo de secciones y pulido
   ========================================================================= */

/* Login sin header; caja como tarjeta centrada sobre crema */
body[data-rol="ninguno"] .cabecera { display: none; }
.login-caja {
  background: var(--papel-card);
  border: 1px solid var(--linea);
  border-radius: var(--radio-card);
  padding: 32px 32px 28px;
  box-shadow: 0 10px 34px rgba(62,40,16,.07);
  margin: 12vh auto 0;
}
@media (max-width: 520px) { .login-caja { margin-top: 7vh; padding: 24px 20px; } }

/* Secciones del detalle como paneles blancos sobre crema (ritmo) */
.detalle-seccion {
  background: var(--papel-card);
  border: 1px solid var(--linea);
  border-radius: var(--radio-card);
  padding: 20px 22px;
  margin-top: 14px;
}

/* Bloque destacado (acciones de propiedad / admin) en pino pálido */
.bloque-admin {
  background: var(--pino-pal);
  border: 1px solid rgba(57,102,95,.20);
  border-radius: var(--radio-card);
  padding: 16px 18px;
  margin-top: 14px;
}
.bloque-admin .boton-linea { background: var(--papel-card); }

/* Rol root (v0.9.1): por ahora, mismo tratamiento visual y de acceso que admin. */
body[data-rol="root"] { --acento-borde: var(--admin); }
body[data-rol="root"] .sesion-rol { color: var(--admin); border-color: var(--admin); }
body[data-rol="root"] .doc-tipo { color: var(--admin); }
body[data-rol="root"] .artista-iniciales-chip { color: var(--admin); }
body[data-rol="root"] .boton-acento { background: var(--cafe); }
body[data-rol="root"] .boton-acento:hover { background: var(--cafe-texto); }

/* Pantalla de roles y permisos (Fase 4) */
.roles-lista { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 30px; }
.rol-card { background: var(--papel-card); border: 1px solid var(--linea); border-radius: var(--radio-card); padding: 18px 20px; }
.rol-card-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rol-nombre { font-family: var(--fuente-mono); font-weight: 600; font-size: var(--text-md); display: inline-flex; align-items: center; }
.rol-nombre .ico { color: var(--acento); margin-right: .4em; }
.rol-tag { font-family: var(--fuente-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--acento-osc); background: var(--pino-pal); padding: 2px 8px; border-radius: 6px; }
.rol-uso { margin-left: auto; font-size: var(--text-sm); color: var(--gris); }
.rol-desc { margin-bottom: 14px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px 20px; margin-bottom: 14px; }
.perm-check { display: flex; gap: 9px; align-items: flex-start; font-size: var(--text-sm); cursor: pointer; }
.perm-check input { margin-top: 3px; flex: none; }
.perm-check code { font-family: var(--fuente-mono); color: var(--tinta); }
.perm-check em { color: var(--gris); font-style: normal; display: block; line-height: 1.3; }
.perm-check input:disabled ~ span { opacity: .55; }
.rol-nota { color: var(--gris); font-size: var(--text-sm); margin: 4px 0 14px; }
.rol-acciones { display: flex; gap: 14px; align-items: center; }
#roles-nuevo { background: var(--pino-pal); border: 1px solid rgba(57,102,95,.20); border-radius: var(--radio-card); padding: 20px 22px; }

/* Badge "beta" junto al wordmark de registerio (v0.12.1) */
.lockup-beta {
  height: 39px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
.lockup-wm-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.lockup-beta-grande { height: 66px; }

/* Catálogo de planes (solo root) */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 10px 0; }
.plan-campo { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.plan-campo > span { color: var(--texto-tenue, #666); }
.plan-card .rol-uso { margin-left: auto; }

/* Suscripción y pago (Fase 6) */
/* Avisos de suscripción.
   Diseño deliberadamente DISCRETO: el objetivo es informar para que el cliente decida,
   no presionarlo. Un bloque grande y rojo lee como error del sistema y se ignora a los
   dos días.
   - `min-height` fija: el banner ocupa su sitio SIEMPRE, aunque esté vacío, así que
     aparecer o desaparecer NO desplaza el contenido de la página.
   - Fondo tenue con una barra lateral de color; el texto en color normal, no blanco
     sobre saturado. */
.banner-susc {
  min-height: 34px; padding: 7px 14px; font-size: 0.82rem;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  /* `flex-wrap` es imprescindible: sin él, en pantallas estrechas el banner no rompe
     línea y empuja/comprime los controles que tiene debajo (los filtros del catálogo
     salían cortados). */
  flex-wrap: wrap;
  border-left: 3px solid transparent;
  background: var(--fondo-tenue, #f5f4f1); color: var(--texto, #2b2b2b);
}
/* IMPRESCINDIBLE: `display: flex` de la regla anterior es más específico que el
   `display: none` que el navegador aplica a `[hidden]`, así que sin esto el banner
   NUNCA se oculta. Con `min-height` se veía como una banda vacía que empujaba y
   recortaba los controles de debajo. El resto de la hoja ya usa este patrón. */
.banner-susc-alerta { border-left-color: #b71c1c; background: rgba(183, 28, 28, 0.07); }
.banner-susc-aviso  { border-left-color: #c9902a; background: rgba(201, 144, 42, 0.07); }
/* Positivo: la prueba en curso es una oportunidad, no un problema. */
.banner-susc-ok     { border-left-color: #2e7d32; background: rgba(46, 125, 50, 0.07); }
.banner-susc .boton-texto { color: inherit; text-decoration: underline; font-weight: 600; }
.susc-tarjeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 14px; border-radius: 10px; border: 1px solid var(--borde, #ddd); }
.susc-tarjeta.susc-ok { border-left: 4px solid #2e7d32; }
.susc-tarjeta.susc-alerta { border-left: 4px solid #b71c1c; }
.susc-tarjeta > div { display: flex; flex-direction: column; gap: 2px; }
.susc-etq { font-size: 0.78rem; color: var(--texto-tenue, #666); }
.susc-uso-fila { display: grid; grid-template-columns: 130px 1fr 120px; gap: 10px; align-items: center; margin: 8px 0; font-size: 0.85rem; }
/* Barra de progreso del uso de cuotas. Se llamaba `.barra`, **el mismo nombre que la barra
   de herramientas del catálogo** (línea ~184), y al estar definida después ganaba: le
   imponía `height: 8px` y `overflow: hidden` a la barra de acciones entera, que aparecía
   recortada («Nueva obra», «Datos del artista»…). Renombrada a `.barra-uso` para que el
   nombre diga de qué barra habla. */
.barra-uso { height: 8px; background: var(--borde, #e5e5e5); border-radius: 5px; overflow: hidden; }
.barra-uso-int { height: 100%; background: #2e7d32; }
.barra-uso-int.barra-aviso { background: #c9902a; }
.barra-uso-int.barra-topado { background: #b71c1c; }
.susc-uso-txt { text-align: right; color: var(--texto-tenue, #666); }
.susc-plan-limites { font-size: 0.85rem; color: var(--texto-tenue, #666); margin: 6px 0; }

/* Exportación de datos (Fase 7) */
.susc-acciones-datos { margin: 16px 0; display: flex; flex-direction: column; gap: 6px; }
.susc-exportar-nota { font-size: 0.8rem; color: var(--texto-tenue, #666); }


/* Pastilla de plan/uso en el encabezado (junto al selector de cuenta).
   Hace descubrible la pantalla de suscripción y avisa del límite más comprometido:
   neutra por defecto, ámbar al 80 % y roja al topar. */
.sesion-plan {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea); background: transparent;
  color: var(--gris); font-size: var(--text-sm); font-family: inherit;
  white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.sesion-plan:hover { border-color: var(--pino); color: var(--pino); }
.sesion-plan-aviso { border-color: var(--ambar, #b7791f); color: var(--ambar, #b7791f); }
.sesion-plan-topado { border-color: var(--rojo, #c53030); color: var(--rojo, #c53030); }
@media (max-width: 640px) {
  /* En móvil el encabezado ya va justo: la pastilla se reduce al plan (sin el
     detalle de uso, que sigue disponible a un toque). */
  .sesion-plan { max-width: 120px; }
}


/* --- Entrada con una identidad externa (0.15.3-dev) --------------------- */
/* Separador entre el formulario de contraseña y la alternativa. La línea se
   dibuja con dos pseudoelementos para no meter marcado extra en cada pantalla. */
.entrada-o {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 10px; color: var(--tinta-2); font-size: var(--text-sm);
}
.entrada-o::before, .entrada-o::after {
  content: ""; flex: 1; height: 1px; background: var(--linea);
}
.boton-google { width: 100%; justify-content: center; }
/* La «G» va como texto y no como logotipo de Google a propósito: usar la marca
   obliga a seguir sus reglas de imagen (proporciones, color exacto, área libre),
   que es un trámite aparte del OAuth. Cuando se haga la verificación de marca,
   este span se sustituye por el SVG oficial y nada más cambia. */
.google-g {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-right: 8px; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); font-weight: 700; font-size: 12px;
  line-height: 1; color: var(--tinta);
}
#cuenta-identidades { margin-top: 8px; }


/* --- Indicador de pendientes (0.15.5-dev) ------------------------------- */
/* Campana con contador. Sin nada pendiente el botón va oculto: un indicador
   siempre visible en cero deja de mirarse a los dos días. */
.sesion-avisos {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer; padding: 4px 8px;
  color: var(--tinta); font: inherit; font-size: var(--text-sm);
}
.sesion-avisos:hover { color: var(--acento); }
.avisos-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--acento); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1;
}


/* --- Fotos en cola al crear una obra (0.15.8-dev) ------------------------- */
/* Miniaturas de imágenes elegidas que todavía NO están en el servidor: la obra
   aún no existe. Se distinguen de la galería real por el botón de quitar. */
.previa { position: relative; margin: 0; }
.previa img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--linea);
}
.previa-quitar {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .6); color: #fff; padding: 0;
}
.previa-quitar svg { width: 14px; height: 14px; }
.previa-quitar:hover { background: rgba(0, 0, 0, .85); }