/* Componentes y armazón de los portales. Móvil primero; escritorio desde 900 px. */

/* ---------- Iconos ---------- */
.icono {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Armazón: móvil ---------- */
.barra-lateral {
  display: none;
}

.barra-superior {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .25rem;
  min-height: calc(56px + var(--seguro-arriba));
  padding: var(--seguro-arriba) max(var(--espacio), var(--seguro-derecha)) 0 max(var(--espacio), var(--seguro-izquierda));
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.barra-superior .atras {
  margin-left: -.625rem;
}

.titulo-pagina {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 1.125rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.titulo-pagina:focus {
  outline: none;
}

.contenido {
  display: block;
  padding: var(--espacio) max(var(--espacio), var(--seguro-derecha)) calc(var(--alto-inferior) + var(--seguro-abajo) + 1.5rem) max(var(--espacio), var(--seguro-izquierda));
}

.contenido:focus {
  outline: none;
}

.barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0 var(--seguro-derecha) var(--seguro-abajo) var(--seguro-izquierda);
  background: var(--superficie);
  border-top: 1px solid var(--borde);
}

.inferior-enlace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--alto-inferior);
  padding: .375rem .25rem;
  border: 0;
  background: none;
  color: var(--texto-secundario);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.inferior-enlace:hover {
  color: var(--texto);
}

.inferior-enlace[aria-current='page'] {
  color: var(--acento);
}

/* Sin sesión (acceso, restablecer): sin barras. */
.sin-sesion .barra-lateral,
.sin-sesion .barra-superior,
.sin-sesion .barra-inferior {
  display: none;
}

.sin-sesion .contenido {
  padding: 0;
}

/* ---------- Armazón: escritorio ---------- */
@media (min-width: 900px) {
  .barra-lateral {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    width: var(--ancho-lateral);
    padding: 1.25rem .75rem;
    background: var(--superficie);
    border-right: 1px solid var(--borde);
  }

  .marco {
    margin-left: var(--ancho-lateral);
  }

  .barra-inferior {
    display: none;
  }

  .barra-superior {
    position: static;
    min-height: 0;
    max-width: var(--ancho-contenido);
    padding: 2rem 2rem .75rem;
    background: transparent;
    border: 0;
  }

  .titulo-pagina {
    font-size: 1.625rem;
    white-space: normal;
  }

  .contenido {
    max-width: var(--ancho-contenido);
    padding: .5rem 2rem 3rem;
  }

  .sin-sesion .marco {
    margin-left: 0;
  }

  .sin-sesion .contenido {
    max-width: none;
  }
}

/* ---------- Barra lateral ---------- */
.marca {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1.5rem;
  padding: 0 .5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.marca img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

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

.menu li + li {
  margin-top: .25rem;
}

.menu-enlace {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: var(--tactil);
  padding: .5rem .75rem;
  border: 0;
  border-radius: var(--radio-control);
  background: none;
  color: var(--texto);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-enlace:hover {
  background: var(--fondo);
  color: var(--texto);
}

.menu-enlace[aria-current='page'] {
  background: var(--acento-suave);
  color: var(--acento-hover);
}

.lateral-pie {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--borde);
}

.lateral-usuario {
  margin: 0 0 .5rem;
  padding: 0 .75rem;
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
  overflow-wrap: anywhere;
}

/* ---------- Tarjetas ---------- */
.tarjeta {
  margin: 0 0 1rem;
  padding: 1.25rem;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta > :last-child {
  margin-bottom: 0;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--tactil);
  padding: .625rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn:disabled {
  opacity: .65;
  cursor: default;
}

.btn-principal {
  background: var(--acento);
  color: #ffffff;
}

.btn-principal:hover:not(:disabled) {
  background: var(--acento-hover);
  color: #ffffff;
}

.btn-secundario {
  background: var(--superficie);
  border-color: var(--borde-control);
  color: var(--texto);
}

.btn-secundario:hover:not(:disabled) {
  background: var(--fondo);
  color: var(--texto);
}

.btn-bloque {
  width: 100%;
}

.btn-grande {
  min-height: 56px;
}

.btn-enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--acento);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn-enlace:hover {
  color: var(--acento-hover);
}

.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tactil);
  height: var(--tactil);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto);
  cursor: pointer;
}

.btn-icono:hover {
  background: var(--fondo);
  color: var(--texto);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1rem;
}

/* ---------- Campos ---------- */
.campo {
  margin: 0 0 1rem;
}

.campo-etiqueta {
  display: block;
  margin: 0 0 .375rem;
  font-weight: 600;
}

.campo-ayuda {
  margin: 0 0 .5rem;
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}

.campo-entrada {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .625rem .75rem;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-control);
  background: var(--superficie);
}

.campo-entrada:focus {
  border-color: var(--acento);
}

.campo-entrada[aria-invalid='true'] {
  border-color: var(--error);
}

.campo-con-boton {
  position: relative;
}

.campo-con-boton .campo-entrada {
  padding-right: 6rem;
}

.campo-ver {
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  min-width: var(--tactil);
  padding: 0 .75rem;
  border: 0;
  border-radius: var(--radio-control);
  background: var(--superficie);
  color: var(--acento);
  font-weight: 600;
  cursor: pointer;
}

.campo-error {
  margin: .375rem 0 0;
  color: var(--error);
  font-size: var(--texto-pequeno);
  font-weight: 600;
}

/* Reglas de la contraseña, siempre a la vista. */
.reglas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.regla {
  position: relative;
  padding-left: 1.5rem;
}

.regla::before {
  content: '•';
  position: absolute;
  left: .375rem;
}

.regla.cumple {
  color: var(--exito);
}

.regla.cumple::before {
  content: '✓';
  left: .125rem;
  font-weight: 700;
}

/* ---------- Avisos ---------- */
.aviso {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-left: 4px solid var(--acento);
  border-radius: var(--radio-control);
  background: var(--acento-suave);
  color: var(--texto);
}

.aviso-exito {
  border-left-color: var(--exito);
  background: var(--exito-suave);
}

.aviso-aviso {
  border-left-color: var(--aviso);
  background: var(--aviso-suave);
}

.aviso-error {
  border-left-color: var(--error);
  background: var(--error-suave);
}

.avisos {
  position: fixed;
  left: max(var(--espacio), var(--seguro-izquierda));
  right: max(var(--espacio), var(--seguro-derecha));
  bottom: calc(var(--alto-inferior) + var(--seguro-abajo) + .75rem);
  z-index: 50;
  pointer-events: none;
}

.sin-sesion .avisos {
  bottom: calc(var(--seguro-abajo) + 1rem);
}

.aviso-flotante {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .5rem;
  padding: .25rem .25rem .25rem 1rem;
  border-left: 4px solid var(--acento);
  border-radius: var(--radio-control);
  background: var(--superficie);
  box-shadow: var(--sombra), 0 0 0 1px var(--borde);
  pointer-events: auto;
  animation: aparecer .2s ease-out;
}

.aviso-flotante p {
  flex: 1;
  margin: 0;
}

.aviso-flotante.aviso-exito {
  border-left-color: var(--exito);
}

.aviso-flotante.aviso-aviso {
  border-left-color: var(--aviso);
}

.aviso-flotante.aviso-error {
  border-left-color: var(--error);
}

.aviso-cerrar {
  width: var(--tactil);
  height: var(--tactil);
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--texto-secundario);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

@media (min-width: 900px) {
  .avisos {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 380px;
  }
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Aviso de navegador no compatible (index.html): oculto al cargar y visible a los 1,5 s, para que no parpadee en
   los navegadores buenos (app.js lo quita antes). Si app.js no se puede ejecutar, se queda a la vista. */
.aviso-navegador {
  margin: var(--espacio);
  visibility: hidden;
  opacity: 0;
  animation: aparecer-tarde .3s ease-out 1.5s forwards;
}

/* app.js ha comprobado que el navegador no sirve (o el dominio no está configurado): a la vista ya. */
.aviso-navegador.aviso-navegador-ya {
  visibility: visible;
  opacity: 1;
  animation: none;
}

@keyframes aparecer-tarde {
  to {
    visibility: visible;
    opacity: 1;
  }
}

/* ---------- Estados: cargando, vacío, error ---------- */
.estado {
  padding: 2rem 1rem;
  color: var(--texto-secundario);
  text-align: center;
}

.estado p {
  margin: .5rem 0 1rem;
}

.estado-error {
  color: var(--error);
}

.girador {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--borde);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Panel (inferior en móvil, lateral en escritorio) ---------- */
.panel {
  width: 100%;
  max-width: 100%;
  max-height: 88dvh;
  margin: auto 0 0;
  padding: 0 0 var(--seguro-abajo);
  border: 0;
  border-radius: var(--radio) var(--radio) 0 0;
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--sombra);
  animation: subir .22s ease-out;
}

.panel::backdrop {
  background: rgba(17, 24, 39, .45);
}

.panel-cabecera {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .5rem .5rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.panel-titulo {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;
}

.panel-cuerpo {
  padding: 1.25rem;
}

.con-panel,
.con-visor {
  overflow: hidden;
}

@keyframes subir {
  from {
    transform: translateY(100%);
  }
}

@media (min-width: 900px) {
  .panel {
    width: 420px;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0 0 0 auto;
    padding: 0;
    border-radius: 0;
    animation-name: entrar-derecha;
  }
}

@keyframes entrar-derecha {
  from {
    transform: translateX(100%);
  }
}

/* ---------- Subida ---------- */
.botones-subida {
  display: grid;
  gap: .75rem;
}

@media (min-width: 600px) {
  .botones-subida {
    grid-template-columns: 1fr 1fr;
  }
}

.boton-subida:focus-within {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.progreso {
  margin: 1rem 0;
}

.progreso label {
  display: block;
  margin-bottom: .25rem;
  font-weight: 600;
}

.progreso progress {
  width: 100%;
  height: 12px;
  accent-color: var(--acento);
}

/* ---------- Pantallas sin sesión (acceso, restablecer) ---------- */
.acceso {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--seguro-arriba) + 1.5rem) max(var(--espacio), var(--seguro-derecha)) calc(var(--seguro-abajo) + 1.5rem) max(var(--espacio), var(--seguro-izquierda));
}

.tarjeta-acceso {
  width: 100%;
  max-width: 420px;
  padding: 1.75rem 1.25rem;
}

@media (min-width: 600px) {
  .tarjeta-acceso {
    padding: 2rem;
  }
}

.marca-acceso {
  margin: 0 0 1.25rem;
  padding: 0;
}

.tarjeta-acceso h1 {
  font-size: 1.5rem;
}

.pie-acceso {
  margin-top: .75rem;
  text-align: center;
}

/* ---------- Datos (lista de definiciones) ---------- */
.datos {
  margin: 0;
}

.datos dt {
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}

.datos dd {
  margin: 0 0 .875rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (min-width: 600px) {
  .datos {
    display: grid;
    grid-template-columns: 11rem 1fr;
    gap: .75rem 1rem;
  }

  .datos dt,
  .datos dd {
    margin: 0;
  }
}

/* Formularios del perfil: no a todo lo ancho en escritorio. */
.formulario-estrecho {
  max-width: 480px;
}

@media (min-width: 900px) {
  .formulario-estrecho .btn-bloque {
    width: auto;
  }
}

/* ---------- Solo en móvil / solo en escritorio ---------- */
@media (min-width: 900px) {
  .solo-movil {
    display: none !important;
  }
}

@media (max-width: 899.98px) {
  .solo-escritorio {
    display: none !important;
  }
}

/* ---------- Listado: búsqueda, filtros, resumen y paginación ---------- */
.barra-busqueda {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem;
  margin: 0 0 .75rem;
}

.barra-busqueda .campo {
  flex: 1 1 16rem;
  margin: 0;
}

.barra-busqueda-acciones {
  display: flex;
  gap: .75rem;
}

.barra-busqueda-acciones .btn {
  min-height: 48px; /* a la altura del campo */
}

.contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--acento);
  color: #ffffff;
  font-size: var(--texto-pequeno);
  line-height: 1;
}

.barra-filtros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
  gap: .75rem;
  margin: 0 0 1rem;
  padding: 1rem;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.barra-filtros .campo {
  margin: 0;
}

.barra-filtros-quitar {
  display: flex;
  align-items: center;
  min-height: 48px;
}

.listado-resumen {
  margin: 0 0 .75rem;
  color: var(--texto-secundario);
  font-weight: 600;
}

.listado-resumen:focus {
  outline: none;
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1rem;
}

.paginacion-texto {
  color: var(--texto-secundario);
  text-align: center;
}

.filtros-panel-acciones {
  display: grid;
  gap: .75rem;
  margin-top: 1.25rem;
}

.filtros-panel-exportar {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}

.filtros-panel-exportar p {
  margin-bottom: .75rem;
}

/* ---------- Insignias de estado ---------- */
.insignia {
  display: inline-block;
  padding: .125rem .625rem;
  border-radius: 999px;
  font-size: var(--texto-pequeno);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.insignia-en-curso {
  background: var(--acento-suave);
  color: var(--acento-hover);
}

.insignia-terminado {
  background: var(--exito-suave);
  color: var(--exito);
}

.insignia-anulado {
  background: var(--fondo);
  color: var(--texto-secundario);
  box-shadow: inset 0 0 0 1px var(--borde);
}

/* ---------- Tabla (escritorio) y tarjetas (móvil) ---------- */
.tabla-marco {
  display: none;
}

.tarjetas-lista {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tarjeta-fila {
  display: block;
  min-height: var(--tactil);
  padding: 1rem;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  color: var(--texto);
  text-decoration: none;
}

.tarjeta-fila:hover {
  color: var(--texto);
  box-shadow: var(--sombra), 0 0 0 1px var(--borde-control);
}

.tarjeta-fila-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .25rem;
}

.tarjeta-fila-titulo {
  min-width: 0;
  color: var(--acento-hover);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tarjeta-fila-dato {
  display: block;
  color: var(--texto-secundario);
  overflow-wrap: anywhere;
}

.tarjeta-fila-dato.dato-asegurado {
  color: var(--texto);
  font-weight: 600;
}

.tarjeta-fila-etiqueta {
  margin-right: .25rem;
}

@media (min-width: 900px) {
  .tabla-marco {
    display: block;
    overflow-x: auto;
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
  }

  .tarjetas-lista {
    display: none;
  }
}

.tabla {
  width: 100%;
  border-collapse: collapse;
}

.tabla th,
.tabla td {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  vertical-align: middle;
}

.tabla th {
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
  font-weight: 600;
  white-space: nowrap;
}

.tabla tbody tr:last-child td {
  border-bottom: 0;
}

.tabla td {
  overflow-wrap: anywhere;
}

.tabla .celda-referencia a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
  font-weight: 700;
}

.tabla .celda-referencia,
.tabla .celda-referencia a,
.tabla .celda-tipo,
.tabla .celda-fechaAlta,
.tabla .celda-estado {
  white-space: nowrap;
}

.fila-enlace {
  cursor: pointer;
}

.fila-enlace:hover {
  background: var(--fondo);
}

.orden-boton {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: var(--tactil);
  margin: -.625rem -.5rem;
  padding: 0 .5rem;
  border: 0;
  border-radius: var(--radio-control);
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.orden-boton:hover {
  background: var(--fondo);
  color: var(--texto);
}

/* Flecha del orden: decorativa (el estado lo da aria-sort en la cabecera). */
.orden-boton::after {
  content: '↕';
  content: '↕' / '';
  color: var(--borde-control);
}

th[aria-sort='ascending'] .orden-boton,
th[aria-sort='descending'] .orden-boton {
  color: var(--texto);
}

th[aria-sort='ascending'] .orden-boton::after {
  content: '↑';
  content: '↑' / '';
  color: var(--acento);
}

th[aria-sort='descending'] .orden-boton::after {
  content: '↓';
  content: '↓' / '';
  color: var(--acento);
}

/* ---------- Ficha del expediente ---------- */
.ficha-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem .75rem;
  margin: 0 0 1rem;
}

.ficha-cabecera p {
  margin: 0;
  overflow-wrap: anywhere;
}

.subtitulo {
  margin: 1.5rem 0 .75rem;
  font-size: 1rem;
}

.ficha-datos > .subtitulo:first-child,
.zona-subida .subtitulo {
  margin-top: 0;
}

.texto-con-saltos {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.entidades {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .entidades {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

.entidad {
  padding: .75rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.entidad-nombre {
  margin: 0 0 .5rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.entidad-datos {
  margin: 0;
}

.entidad-datos dt {
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}

.entidad-datos dd {
  margin: 0 0 .5rem;
  overflow-wrap: anywhere;
}

.entidad-datos dd:last-child {
  margin-bottom: 0;
}

.entidad-datos a {
  display: inline-block;
  min-width: var(--tactil);
  min-height: var(--tactil);
  padding: .625rem 0;
}

/* ---------- Pestañas (escritorio) y plegables (móvil) ---------- */
.seccion {
  margin: 0 0 .75rem;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.plegable-cabecera {
  /* Al abrir una sección se lleva su cabecera a la vista sin que la tape la barra superior fija. */
  scroll-margin-top: calc(56px + var(--seguro-arriba) + .5rem);
  margin: 0;
  font-size: 1rem;
}

.plegable-boton {
  display: flex;
  align-items: center;
  gap: .375rem;
  width: 100%;
  min-height: 56px;
  padding: .5rem 1rem;
  border: 0;
  border-radius: var(--radio);
  background: none;
  color: var(--texto);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.pestana-detalle {
  color: var(--texto-secundario);
  font-weight: 600;
}

.plegable-marca {
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease-out;
}

.plegable-boton[aria-expanded='true'] .plegable-marca {
  transform: rotate(-135deg);
}

.modo-plegables .seccion-panel {
  padding: 1rem;
  border-top: 1px solid var(--borde);
}

.pestanas-lista {
  display: flex;
  gap: .25rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
}

.pestana {
  min-height: var(--tactil);
  padding: .625rem 1rem;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--texto-secundario);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.pestana:hover {
  color: var(--texto);
}

.pestana[aria-selected='true'] {
  border-bottom-color: var(--acento);
  color: var(--acento-hover);
}

.modo-pestanas .seccion {
  margin: 0;
  background: none;
  box-shadow: none;
}

.modo-pestanas .seccion-panel {
  padding: 1.25rem;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

/* ---------- Comunicaciones ---------- */
.comunicaciones-zona:focus {
  outline: none;
}

/* Sin comunicaciones la caja de texto no se fija abajo: taparía el texto de lista vacía. */
.comunicaciones-zona.sin-comunicaciones + .comunicar {
  position: static;
  margin: 1rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.comunicaciones-zona[aria-busy='true'],
.fotos-zona[aria-busy='true'],
.documentos-zona[aria-busy='true'] {
  opacity: .6;
}

.comunicaciones-lista {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.comunicacion {
  max-width: 44rem;
  padding: .75rem 1rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.comunicacion-propia {
  align-self: flex-end;
  background: var(--acento-suave);
  border-color: #bfdbfe;
}

.comunicacion-cabeza {
  margin: 0 0 .25rem;
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}

.comunicacion-autor {
  color: var(--texto);
  font-weight: 700;
}

.comunicacion-texto {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comunicacion-acciones {
  margin-top: .25rem;
}

.confirmar p {
  margin: .25rem 0 .5rem;
  font-weight: 600;
}

.confirmar-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.btn-peligro {
  background: var(--error);
  color: #ffffff;
}

.btn-peligro:hover:not(:disabled) {
  background: #991b1b;
  color: #ffffff;
}

.comunicar {
  margin-top: 1.25rem;
}

.comunicar-fila {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
}

.comunicar-texto {
  flex: 1;
  min-width: 0;
  min-height: 3.25rem;
  max-height: 40vh;
  resize: vertical;
}

.comunicar-cuenta {
  margin: .25rem 0 0;
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}

/* Móvil: la caja de texto queda fija abajo, encima de la barra inferior y de la zona segura; mientras se escribe,
   la barra inferior se oculta y la caja sube lo que tape el teclado (--teclado, medido con visualViewport). */
@media (max-width: 899.98px) {
  .modo-plegables .comunicar {
    position: sticky;
    bottom: calc(var(--alto-inferior) + var(--seguro-abajo));
    z-index: 10;
    margin: 1rem -1rem -1rem;
    padding: .75rem 1rem;
    background: var(--superficie);
    border-top: 1px solid var(--borde);
    border-radius: 0 0 var(--radio) var(--radio);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
  }

  .escribiendo .barra-inferior {
    display: none;
  }

  .escribiendo .modo-plegables .comunicar {
    bottom: var(--teclado, 0px);
    padding-bottom: calc(.75rem + var(--seguro-abajo));
  }
}

/* ---------- Subida de fotos y documentos ---------- */
.zona-subida {
  margin: 0 0 1.5rem;
  padding: 1rem;
  border: 2px dashed var(--borde-control);
  border-radius: var(--radio);
}

.zona-subida.soltando {
  border-color: var(--acento);
  background: var(--acento-suave);
}

.zona-subida[aria-busy='true'] .boton-subida {
  opacity: .65;
  pointer-events: none;
}

.zona-subida-soltar {
  margin: .75rem 0 0;
}

/* «Hacer foto» abre la cámara: sobra donde hay ratón (escritorio), no por el ancho (un iPad apaisado la tiene). */
@media (hover: hover) and (pointer: fine) {
  .boton-hacer-foto {
    display: none !important;
  }
}

@media (min-width: 900px) {
  .zona-subida .botones-subida {
    display: flex;
    flex-wrap: wrap;
  }
}

/* ---------- Fotos ---------- */
.fotos-cuadricula {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .fotos-cuadricula {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
  }
}

.miniatura {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radio-control);
  background: var(--borde);
  cursor: zoom-in;
}

.miniatura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.miniatura-rota img {
  visibility: hidden;
}

.miniatura-aviso {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
  text-align: center;
}

/* ---------- Visor de fotos ---------- */
.visor {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: var(--seguro-arriba) var(--seguro-derecha) var(--seguro-abajo) var(--seguro-izquierda);
  border: 0;
  background: #000000;
  color: #ffffff;
}

.visor[open] {
  display: flex;
  flex-direction: column;
}

.visor::backdrop {
  background: #000000;
}

.visor :focus-visible {
  outline-color: #ffffff;
}

.visor-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .25rem .5rem .25rem 1rem;
}

.visor-posicion {
  margin: 0;
  font-weight: 600;
}

.visor .btn-icono {
  color: #ffffff;
}

.visor .btn-icono:hover:not(:disabled) {
  background: rgba(255, 255, 255, .15);
  color: #ffffff;
}

.visor-escena {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.visor-figura {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}

.visor-imagen {
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.visor-fallo {
  margin: 0;
  padding: 1rem;
  text-align: center;
}

.visor-pie {
  flex: none;
  max-width: 48rem;
  padding: .5rem 1rem .75rem;
  color: #e5e7eb;
  text-align: center;
  overflow-wrap: anywhere;
}

.visor-pie:empty {
  display: none;
}

.visor-flecha {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background: rgba(0, 0, 0, .45);
}

.visor-anterior {
  left: .5rem;
}

.visor-siguiente {
  right: .5rem;
}

.visor-flecha:disabled {
  opacity: .3;
  cursor: default;
}

/* ---------- Documentos ---------- */
.documentos-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.documento + .documento {
  border-top: 1px solid var(--borde);
}

.documento-enlace {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
  padding: .5rem 0;
  color: var(--texto);
  text-decoration: none;
}

.documento-enlace:hover {
  color: var(--texto);
}

button.documento-enlace {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.documento-enlace .icono {
  color: var(--acento);
}

.documento-texto {
  min-width: 0;
}

.documento-nombre {
  display: block;
  color: var(--acento);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.documento-enlace:hover .documento-nombre {
  color: var(--acento-hover);
}

.documento-detalle {
  display: block;
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}