/* MiSiniestro · componentes de la zona de lectura: tarjetas, persona, botones, avisos, estados y campos.
   Botones de 52 px a todo el ancho; zonas táctiles de 48 px; texto de 18 px (16 px como mínimo en las notas). */

/* ---------- Tarjeta ---------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .875rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.tarjeta-titulo {
  font-size: var(--texto-base);
  font-weight: 700;
}

/* Persona (profesional o tramitador): inicial en círculo y su frase. */
.persona {
  flex-direction: row;
  align-items: center;
  gap: .75rem;
}

.inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 50%;
  background: var(--acero);
  color: var(--naranja);
  font-family: var(--fuente-panel);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: .02em;
}

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

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

/* ---------- Botones ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: var(--boton);
  padding: .5rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font-size: var(--texto-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s var(--salida), border-color .15s var(--salida), transform .1s var(--salida);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: .55;
}

.btn .icono {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
}

/* Principal: naranja de la marca con texto negro (7,6:1). */
.btn-principal {
  background: var(--naranja);
  color: var(--negro-marca);
}

.btn-principal:hover:not(:disabled) {
  background: var(--naranja-hover);
  color: var(--negro-marca);
}

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

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

/* Enlace con aspecto de texto pero con zona táctil de 48 px. */
.btn-enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil);
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--naranja-texto);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .18em;
  cursor: pointer;
}

/* ---------- Avisos (cajas en la página y flotantes de comun/ui/avisos.js) ---------- */
.aviso {
  padding: .75rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
}

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

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

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

.avisos {
  position: fixed;
  left: max(1rem, var(--seguro-izquierda));
  right: max(1rem, var(--seguro-derecha));
  bottom: calc(var(--alto-pestanas) + var(--seguro-abajo) + 1rem);
  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: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: 0 6px 20px rgba(20, 20, 20, .18);
  pointer-events: auto;
  animation: aparecer .2s var(--salida);
}

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

.aviso-flotante.aviso-error {
  border-color: #F0A8A3;
  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: 50%;
    right: auto;
    width: calc(var(--columna) - 2rem);
    transform: translateX(-50%);
  }
}

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

/* ---------- Estados de una lista o pantalla: cargando, vacío, error (siempre con texto) ---------- */
.estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem 0;
  color: var(--texto-secundario);
}

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

/* ---------- Campos ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

.campo-etiqueta {
  font-weight: 700;
}

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

.campo-entrada {
  width: 100%;
  min-height: var(--boton);
  padding: .5rem .75rem;
  border: 2px solid var(--borde-control);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: var(--texto-base);
}

.campo-entrada:focus-visible {
  border-color: var(--naranja-texto);
  outline-offset: 1px;
}

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

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

.casilla {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: var(--tactil);
  cursor: pointer;
}

.casilla input {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  margin: 0;
  accent-color: var(--naranja-texto);
}

/* ---------- Entrada: el código de 6 cifras (una casilla por cifra, como las paletas del panel) ---------- */
.grupo {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo > legend {
  margin-bottom: .5rem;
  padding: 0;
}

.codigo-form,
.codigo-otro {
  display: flex;
  flex-direction: column;
  gap: .875rem;
}

.codigo-otro {
  margin-top: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}

.codigo {
  display: flex;
  gap: .5rem;
  justify-content: center;
}

/* Seis casillas que caben en 360 px aunque la letra esté al 200 %: el ancho lo reparte el flex, no la letra. */
.codigo-cifra {
  flex: 1 1 0;
  min-width: 0;
  max-width: 3.25rem;
  min-height: 3.5rem;
  padding: 0;
  border: 2px solid var(--panel);
  border-radius: 4px;
  /* Ranura central de las paletas: mitad de arriba algo más clara que la de abajo. */
  background: linear-gradient(var(--paleta-arriba) 0 49%, var(--ranura) 49% 51%, var(--paleta-abajo) 51%);
  color: var(--letra-panel);
  caret-color: var(--naranja);
  font-family: var(--fuente-panel);
  font-weight: 700;
  font-size: min(2rem, 9vw);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.codigo-cifra:focus-visible,
.codigo-cifra:focus {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

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

.codigo-cifra::selection {
  background: var(--naranja);
  color: var(--negro-marca);
}

/* Vacío no ocupa sitio, pero sigue en el árbol de accesibilidad: la región viva se anuncia al llenarse. */
.codigo-error:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.btn[aria-busy='true'] {
  cursor: progress;
}

/* Pasos de ayuda (pantalla de enlace no válido). */
.pasos-ayuda {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .25rem 0 0;
  padding-left: 1.25rem;
}

/* ---------- Hoy y Expediente ---------- */
.persona-texto {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}

/* Trabajo pendiente de firmar: la tarjeta que hay que atender primero (borde completo, no una franja lateral). */
.tarjeta-pendiente {
  gap: .5rem;
  border: 2px solid var(--naranja-texto);
}

.tarjeta-pendiente .btn {
  margin-top: .25rem;
}

/* «Salir» y su nota, separados del resto: es lo último de la pantalla. */
.salir {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}

/* ---------- Mapa del seguimiento (Leaflet) ---------- */
/* Leaflet necesita una altura fija en el contenedor; el texto de debajo sigue a la vista en un móvil de 360 px. */
.mapa {
  height: 55vh;
  min-height: 16rem;
  max-height: 32rem;
  background: #DDE3D8; /* el verde claro del boceto mientras llegan las teselas */
  font-family: var(--fuente);
}

/* El contenedor del mapa se enfoca con el teclado (flechas para moverlo, + y - para el zoom). */
.mapa:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: -3px;
}

/* Atribución de las teselas: visible y legible. */
.mapa .leaflet-control-attribution {
  font-size: .8125rem;
  color: var(--texto);
}

.mapa .leaflet-control-attribution a {
  color: #0B4F9C;
}

/* Botones de zoom con zona táctil de 48 px. */
.mapa .leaflet-control-zoom a {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 1.5rem;
}

/* El profesional: círculo naranja con borde negro y un halo, como en el boceto. */
.marcador-profesional {
  border: 4px solid var(--negro-marca);
  border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 0 10px rgba(255, 115, 0, .25);
}

.mapa-hueco:empty {
  display: none;
}

/* ---------- Piezas de comun/ui que usa este portal (subida y visor), con los tokens de MiSiniestro ---------- */
/* Oculto a la vista pero disponible para el lector de pantalla y el teclado (los <input type=file> de la subida). */
.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.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 .icono {
  width: 1.5rem;
  height: 1.5rem;
}

.btn-enlace:disabled {
  color: var(--texto-secundario);
  text-decoration: none;
  cursor: not-allowed;
  opacity: .7;
}

/* Apartados de una pantalla (Fotos, Documentos): el título y su contenido, separados entre sí. */
.apartado {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.apartado + .apartado {
  margin-top: .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--borde);
}

.apartado-titulo {
  font-size: var(--texto-titulo);
}

/* Texto largo de la API (descripción del trabajo): se parte por donde haga falta. */
.texto-largo {
  overflow-wrap: anywhere;
}

/* ---------- Subida de fotos y documentos ---------- */
.zona-subida {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

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

/* Las dos opciones lado a lado solo si caben con holgura (con la letra al 200 %, una debajo de otra). */
@media (min-width: 30em) {
  .botones-subida {
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
  }
}

.boton-subida {
  position: relative;
}

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

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

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

.subida-progreso:empty {
  display: none;
}

.progreso label {
  display: block;
  margin-bottom: .375rem;
  font-weight: 700;
}

.progreso-cifra {
  font-variant-numeric: tabular-nums;
}

.progreso progress {
  width: 100%;
  height: 14px;
  accent-color: var(--naranja-texto);
}

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

.miniatura {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radio);
  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 (comun/ui/visor.js): negro mate del panel ---------- */
.con-visor {
  overflow: hidden;
}

.visor {
  --foco: var(--naranja);
  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: var(--panel);
  color: var(--letra-panel);
}

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

.visor::backdrop {
  background: var(--panel);
}

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

.visor-posicion {
  font-family: var(--fuente-panel);
  font-weight: 600;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.visor .btn-icono {
  color: var(--letra-panel);
}

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

.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 {
  padding: 1rem;
  text-align: center;
}

.visor-pie {
  flex: none;
  padding: .5rem 1rem .75rem;
  color: var(--letra-panel);
  text-align: center;
  overflow-wrap: anywhere;
}

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

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

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

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

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

/* ---------- Documentos ---------- */
.documentos-lista {
  margin: 0;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  list-style: none;
}

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

.documento-enlace {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 56px;
  padding: .5rem 1rem;
  border: 0;
  background: none;
  color: var(--texto);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.documento-enlace .icono {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--naranja-texto);
}

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

.documento-nombre {
  display: block;
  color: var(--naranja-texto);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}

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

/* ---------- Mensajes: el hilo y la caja de escribir fija abajo ---------- */
.lectura-mensajes {
  flex: 1;
}

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

/* Cada mensaje en su bocadillo: los suyos a la derecha, en naranja muy claro; los de la empresa, en blanco. */
.mensaje {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  max-width: 88%;
  padding: .625rem .875rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.mensaje-propio {
  align-self: flex-end;
  border-color: #F2C08F;
  background: var(--aviso-suave);
}

.mensaje-empresa {
  align-self: flex-start;
}

.mensaje-cabeza {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .75rem;
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}

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

.mensaje-fecha {
  font-variant-numeric: tabular-nums;
}

.mensaje-texto {
  overflow-wrap: anywhere;
}

/* La caja de escribir se queda pegada abajo, encima de las pestañas (--alto-barra lo mide mensajes.js; sin él, el
   alto normal de las pestañas). Mientras se escribe, las pestañas se ocultan y la caja baja hasta el teclado. */
.redactar {
  position: sticky;
  bottom: var(--alto-barra, calc(var(--alto-pestanas) + .625rem + 3px + var(--seguro-abajo)));
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  padding: .875rem max(1.125rem, var(--seguro-derecha)) 1rem max(1.125rem, var(--seguro-izquierda));
  border-top: 1px solid var(--borde);
  background: var(--superficie);
  box-shadow: 0 -4px 12px rgba(20, 20, 20, .08);
}

.escribiendo .pestanas {
  display: none;
}

.escribiendo .redactar {
  bottom: 0;
  padding-bottom: calc(1rem + var(--seguro-abajo));
}

/* Pantallas bajas (o letra muy ampliada: la medida va en em): la caja deja de ir fija y se queda al final del hilo. */
@media (max-height: 40em) {
  .redactar {
    position: static;
  }
}

/* El tipo de escrito y el teléfono: encima de la caja, sin fijar. */
.redactar-opciones {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .875rem max(1.125rem, var(--seguro-derecha)) .25rem max(1.125rem, var(--seguro-izquierda));
  border-top: 1px solid var(--borde);
  background: var(--superficie);
}

.redactar-texto {
  min-height: 4rem;
  resize: vertical;
}

/* Tipos de escrito: tres opciones con aspecto de botón (con su radio debajo, para el teclado y el lector). */
.tipo-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tipo-opcion {
  position: relative;
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: var(--tactil);
  padding: .375rem .875rem;
  border: 2px solid var(--borde-control);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: var(--texto-pequeno);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}

.tipo-opcion-entrada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

/* La elegida, como el panel: fondo negro y letra naranja (el botón principal al revés), además del radio
   marcado. */
.tipo-opcion-elegida {
  border-color: var(--negro-marca);
  background: var(--negro-marca);
  color: var(--naranja);
}

.tipo-opcion:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ---------- Conformidad: el recuadro de firma (boceto 5) ---------- */
.conformidad-firma {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.firma {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.firma-instrucciones {
  color: var(--texto-secundario);
  font-size: var(--texto-pequeno);
}

.firma-marco {
  border: 2px dashed var(--borde-control);
  border-radius: var(--radio);
  background: #ffffff;
}

/* 150 px de alto a todo el ancho; el dedo firma sin desplazar la página. */
.firma-lienzo {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: var(--radio);
  touch-action: none;
  cursor: crosshair;
}

.firma-pie {
  display: flex;
  justify-content: flex-end;
}

.no-conforme {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-top: .5rem;
}

.no-conforme .btn-enlace {
  align-self: center;
}