/* ================================================================
   morosos-ruat.css — Plugin GAMS Morosos RUAT  v1.0
   Variables del tema gams:
     --texto-default  --texto-suave  --texto-muy-suave
     --background-default  --background-card  --background-input
     --borde-suave  --primary-main  --primary-navbg  --color-acento
     --radio  --radio-lg  --transicion  --sombra-card  --fuente
   ================================================================ */


/* ════════════════════════════════════════════════════════════
   0. CONTENEDOR RAÍZ
   ════════════════════════════════════════════════════════════ */
.moroso-historial {
  width:       100%;
  max-width:   100%;
  font-family: var(--fuente);
  font-size:   1rem;
  color:       var(--texto-default);
  display:     flex;
  flex-direction: column;
  gap:         12px;
}
.moroso-historial p,
.moroso-historial h2,
.moroso-historial h3,
.moroso-historial h4 { margin: 0 !important; font-size: inherit !important; }
.moroso-sin-resultados { color: var(--texto-suave); font-size: .875rem; }


/* ════════════════════════════════════════════════════════════
   1. CARD DEL HISTORIAL
   ════════════════════════════════════════════════════════════ */
.moroso-card {
  background:    var(--background-card);
  border:        1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  overflow:      hidden;
  transition:    box-shadow var(--transicion), transform var(--transicion);
}
.moroso-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  transform:  translateY(-1px);
}
.moroso-card-inner {
  display:     flex;
  align-items: stretch;
}
/* Franja lateral degradada */
.moroso-card-accent {
  width:      4px;
  background: linear-gradient(180deg, var(--primary-main), var(--color-acento));
  flex-shrink: 0;
}
/* Columna del ícono */
.moroso-card-icon {
  width:           64px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      color-mix(in srgb, var(--primary-main) 6%, var(--background-card));
  flex-shrink:     0;
  border-right:    1px solid var(--borde-suave);
}
.moroso-card-icon i {
  font-size: 1.75rem;
  color:     var(--primary-main);
  opacity:   .5;
}
/* Cuerpo del card */
.moroso-card-body {
  flex:    1;
  padding: .875rem 1rem;
  min-width: 0;
}
.moroso-card-titulo {
  font-size:     .875rem;
  font-weight:   600;
  color:         var(--texto-default);
  line-height:   1.35;
  margin-bottom: 5px;
  /* Truncar a 3 líneas en móvil — en desktop se ve completo */
}
.moroso-card-meta {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}
.moroso-card-meta span {
  font-size:   .75rem;
  color:       var(--texto-muy-suave);
  display:     flex;
  align-items: center;
  gap:         3px;
  white-space: nowrap;
  font-family: var(--fuente);
}
.moroso-card-meta i { font-size: .75rem; }

/* Footer del card */
.moroso-card-footer {
  border-top:      1px solid var(--borde-suave);
  padding:         .625rem 1rem;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--background-default);
}

/* ── Contador con tooltip ──────────────────────────────────── */
.moroso-contador {
  position:    relative;
  display:     flex;
  align-items: center;
  gap:         5px;
  cursor:      default;
  font-family: var(--fuente);
}
.moroso-contador > i {
  font-size: .875rem;
  color:     var(--primary-main);
}
.moroso-total {
  font-size:   .9375rem;
  font-weight: 700;
  color:       var(--primary-main);
}
.moroso-contador-label {
  font-size: .75rem;
  color:     var(--texto-muy-suave);
}
/* Tooltip */
.moroso-tooltip {
  display:          none;
  position:         absolute;
  bottom:           calc(100% + 8px);
  left:             0;
  background:       #1a1a2e;
  color:            #fff;
  border-radius:    8px;
  padding:          8px 12px;
  font-size:        .6875rem;
  white-space:      nowrap;
  z-index:          100;
  box-shadow:       0 4px 14px rgba(0,0,0,.25);
  pointer-events:   none;
  font-family:      var(--fuente);
}
.moroso-tooltip::after {
  content:      '';
  position:     absolute;
  top:          100%;
  left:         14px;
  border:       5px solid transparent;
  border-top-color: #1a1a2e;
}
.moroso-contador:hover .moroso-tooltip { display: block; }
.moroso-tooltip-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     2px 0;
}
.moroso-tooltip-ver i { color: #81c784; }
.moroso-tooltip-dl  i { color: #f5c88a; }

/* ── Botones de acción ────────────────────────────────────── */
.moroso-acciones {
  display:     flex;
  gap:         5px;
  align-items: center;
  flex-wrap:   nowrap;
}
.moroso-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             4px;
  padding:         5px 10px;
  border-radius:   var(--radio);
  border:          1px solid var(--borde-suave);
  background:      var(--background-card);
  color:           var(--texto-suave);
  font-size:       .75rem;
  cursor:          pointer;
  font-family:     var(--fuente);
  transition:      all var(--transicion);
  white-space:     nowrap;
  text-decoration: none;
}
.moroso-btn:hover { border-color: var(--primary-main); color: var(--primary-main); }
.moroso-btn-per {
  border-color: color-mix(in srgb, var(--color-acento) 35%, transparent);
  color:        var(--color-acento);
  background:   color-mix(in srgb, var(--color-acento) 6%, var(--background-card));
}
.moroso-btn-per:hover { border-color: var(--color-acento); }
.moroso-btn-dl {
  border-left:  2px solid var(--color-acento);
  border-color: color-mix(in srgb, var(--color-acento) 35%, transparent);
  background:   color-mix(in srgb, var(--color-acento) 8%, var(--background-card));
  color:        var(--color-acento);
  font-weight:  600;
}
.moroso-btn-dl:hover { background: color-mix(in srgb, var(--color-acento) 14%, var(--background-card)); }


/* ════════════════════════════════════════════════════════════
   2. MODALES — base compartida
   ════════════════════════════════════════════════════════════ */
.moroso-modal-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.5);
  z-index:         9999;
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding:         1.5rem 1rem;
  overflow-y:      auto;
}
.moroso-modal-backdrop[hidden] { display: none; }

.moroso-modal {
  background:     var(--background-card);
  border-radius:  var(--radio-lg);
  width:          100%;
  overflow:       hidden;
  box-shadow:     0 8px 32px rgba(0,0,0,.22);
  /* El modal entero nunca pasa del alto de pantalla — lo que no entra
     scrollea DENTRO del cuerpo (.moroso-modal-body), no empuja el
     encabezado/pie fuera de la vista. dvh primero por compatibilidad,
     luego dvh (alto "dinámico", correcto en el navegador de celulares
     donde vh incluye la barra de direcciones aunque esté oculta). */
  max-height:     90vh;
  max-height:     90dvh;
  display:        flex;
  flex-direction: column;
}
.moroso-modal-header {
  background:  linear-gradient(90deg, var(--primary-navbg), var(--primary-main));
  padding:     .875rem 1.25rem;
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}
.moroso-modal-icon {
  width:           34px;
  height:          34px;
  border-radius:   var(--radio);
  background:      rgba(255,255,255,.15);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.moroso-modal-icon i { font-size: 1.125rem; color: #fff; }
.moroso-modal-info { flex: 1; min-width: 0; }
.moroso-modal-titulo {
  font-size:     .875rem;
  font-weight:   700;
  color:         #fff;
  margin:        0;
  line-height:   1.3;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
  font-family:   var(--fuente);
}
.moroso-modal-subtitulo {
  font-size:   .6875rem;
  color:       rgba(255,255,255,.72);
  font-family: var(--fuente);
  margin-top:  2px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moroso-modal-close {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  border:          none;
  background:      rgba(255,255,255,.15);
  color:           #fff;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .8125rem;
  transition:      background var(--transicion);
  flex-shrink:     0;
}
.moroso-modal-close:hover { background: rgba(255,255,255,.28); }

.moroso-modal-body  {
  padding:    1.25rem;
  /* Esta es la única parte del modal que scrollea: el resto (header/footer)
     queda siempre visible aunque el contenido no entre en la pantalla. */
  overflow-y: auto;
  flex:       1 1 auto;
  min-height: 0; /* imprescindible en flexbox para que overflow-y funcione */
}
.moroso-modal-footer {
  padding:         .875rem 1.25rem;
  border-top:      1px solid var(--borde-suave);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      var(--background-default);
  flex-shrink:     0;
}
.moroso-modal-footer-btns { display: flex; gap: 8px; }
.moroso-btn-cerrar {
  padding:     7px 18px;
  border-radius: var(--radio);
  border:      1px solid var(--borde-suave);
  background:  var(--background-card);
  font-size:   .8125rem;
  cursor:      pointer;
  font-family: var(--fuente);
  color:       var(--texto-suave);
  transition:  background var(--transicion);
}
.moroso-btn-cerrar:hover { background: var(--background-default); }


/* ════════════════════════════════════════════════════════════
   3. MODAL PERIÓDICO
   ════════════════════════════════════════════════════════════ */
.moroso-per-modal { max-width: 680px; margin: auto; }

/* Pie del modal periódico: ahora sólo tiene el botón Cerrar, ya que
   Resolución Municipal, Medio y Fecha de publicación viven juntos en un
   único bloque (.moroso-per-rows) dentro del cuerpo del modal. */
.moroso-per-modal .moroso-modal-footer { justify-content: flex-end; }

/* Foto del periódico — protagonista del modal (hoja carta horizontal, 11×8.5") */
.moroso-per-foto-wrap {
  width:         100%;
  aspect-ratio:  1.294 / 1;   /* proporción carta horizontal: alto siempre proporcional al ancho */
  max-height:    42vh;   /* deja lugar a las 3 filas de datos agrupadas debajo */
  border-radius: var(--radio);
  overflow:      hidden;
  margin-bottom: .875rem;
  background:    var(--background-default);
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.moroso-per-foto {
  width:      100%;
  height:     100%;
  object-fit: contain;   /* contain para no cortar el periódico */
  display:    block;
  cursor:     zoom-in;
}
.moroso-per-foto-placeholder {
  height:          100%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  flex-direction:  column;
  gap:             8px;
}
.moroso-per-foto-placeholder i { font-size: 3rem; color: var(--borde-suave); }
.moroso-per-foto-placeholder span { font-size: .75rem; color: var(--texto-muy-suave); }

/* Filas de datos — Resolución Municipal, Medio y Fecha de publicación en
   UNA sola fila (ícono + valor); la etiqueta de cada dato no se muestra
   en pantalla, va en un tooltip oscuro que aparece al pasar el mouse o
   al enfocar con teclado (accesible también por lectores de pantalla,
   vía el <span> oculto .moroso-per-label-sr). En móvil no hay hover
   confiable, así que ahí la etiqueta se muestra siempre, chica, debajo
   del valor (ver media query más abajo). */
.moroso-per-rows {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.moroso-per-row {
  display:     flex;
  gap:         7px;
  padding:     .375rem .75rem;
  align-items: center;
  flex:        1 1 0;
  min-width:   0;
  position:    relative;
  border-right: 1px solid var(--borde-suave);
  cursor:      default;
  outline:     none;
}
.moroso-per-row:first-child { padding-left: 0; }
.moroso-per-row:last-child  { padding-right: 0; border-right: none; }
.moroso-per-icon {
  width:           22px;
  height:          22px;
  border-radius:   var(--radio);
  background:      color-mix(in srgb, var(--color-acento) 10%, var(--background-card));
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.moroso-per-icon i { font-size: .75rem; color: var(--color-acento); }
.moroso-per-row-content { min-width: 0; flex: 1 1 auto; }
/* Etiqueta accesible: oculta visualmente en desktop (va en el tooltip),
   visible de nuevo en móvil — ver media query. */
.moroso-per-label-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.moroso-per-val {
  font-size:     .75rem;
  font-weight:   600;
  color:         var(--texto-default);
  font-family:   var(--fuente);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.moroso-per-acento { color: var(--color-acento); }

/* Tooltip con el nombre del dato (Resolución Municipal / Medio de
   publicación / Fecha de publicación impresa), estilo consistente con
   el tooltip del contador de consultas. */
.moroso-per-row::after {
  content:        attr(data-tooltip);
  position:       absolute;
  bottom:         calc(100% + 8px);
  left:           50%;
  transform:      translateX(-50%);
  background:     #1a1a2e;
  color:          #fff;
  font-size:      .625rem;
  font-weight:    700;
  letter-spacing: .03em;
  white-space:    nowrap;
  padding:        5px 9px;
  border-radius:  8px;
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transition:     opacity var(--transicion);
  box-shadow:     0 4px 14px rgba(0,0,0,.25);
  z-index:        20;
}
.moroso-per-row::before {
  content:        '';
  position:       absolute;
  bottom:         calc(100% + 3px);
  left:           50%;
  transform:      translateX(-50%);
  border:         5px solid transparent;
  border-top-color: #1a1a2e;
  opacity:        0;
  visibility:     hidden;
  pointer-events: none;
  transition:     opacity var(--transicion);
  z-index:        20;
}
.moroso-per-row:hover::after,  .moroso-per-row:hover::before,
.moroso-per-row:focus::after,  .moroso-per-row:focus::before,
.moroso-per-row:focus-within::after, .moroso-per-row:focus-within::before {
  opacity:    1;
  visibility: visible;
}
.moroso-per-texto {
  font-size:   .8125rem;
  font-weight: 400;
  line-height: 1.6;
  max-height:  160px;
  overflow-y:  auto;
}
.moroso-per-legal {
  background:    color-mix(in srgb, var(--color-acento) 6%, var(--background-card));
  border:        1px solid color-mix(in srgb, var(--color-acento) 22%, transparent);
  border-radius: var(--radio);
  padding:       .75rem 1rem;
  margin-top:    .875rem;
  font-size:     .75rem;
  color:         var(--texto-suave);
  display:       flex;
  gap:           8px;
  align-items:   flex-start;
  font-family:   var(--fuente);
  line-height:   1.5;
}
.moroso-per-legal i { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }


/* ════════════════════════════════════════════════════════════
   4. MODAL PDF — buscador + viewer
   ════════════════════════════════════════════════════════════ */
.moroso-pdf-modal { max-width: 850px; }

/* Barra de búsqueda CI — sticky */
.moroso-search-bar {
  position:      sticky;
  top:           0;
  z-index:       10;
  background:    color-mix(in srgb, var(--color-acento) 5%, var(--background-card));
  border-bottom: 1px solid color-mix(in srgb, var(--color-acento) 18%, transparent);
  padding:       .625rem 1.25rem;
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-wrap:     wrap;
}
.moroso-search-inner {
  display:       flex;
  align-items:   center;
  gap:           7px;
  flex:          1;
  min-width:     180px;
  background:    var(--background-card);
  border:        1px solid color-mix(in srgb, var(--color-acento) 40%, transparent);
  border-radius: var(--radio);
  padding:       0 10px;
  height:        38px;
  overflow:      hidden;
}
.moroso-search-inner i {
  font-size:   16px !important;
  color:       var(--color-acento);
  flex-shrink: 0;
  line-height: 1;
}
.moroso-ci-input {
  flex:        1;
  border:      none;
  outline:     none;
  font-size:   14px !important;
  line-height: 1.4;
  padding:     7px 0;
  background:  transparent;
  font-family: var(--fuente);
  color:       var(--texto-default);
}
.moroso-ci-input:focus { outline: none; box-shadow: none; }
.moroso-ci-input::placeholder { font-size: 13px !important; color: var(--texto-muy-suave); opacity: 1; }
.moroso-search-inner:focus-within {
  border-color: var(--color-acento);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--color-acento) 10%, transparent);
}
.moroso-btn-buscar {
  padding:     6px 14px;
  border-radius: var(--radio);
  border:      none;
  background:  var(--primary-main);
  color:       #fff;
  font-size:   .8125rem;
  font-weight: 600;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  gap:         6px;
  font-family: var(--fuente);
  transition:  background var(--transicion);
  white-space: nowrap;
}
.moroso-btn-buscar:hover    { background: var(--primary-navbg); }
.moroso-btn-buscar:disabled { opacity: .6; cursor: wait; }
.moroso-search-hint {
  font-size:   .6875rem;
  color:       var(--color-acento);
  display:     flex;
  align-items: center;
  gap:         4px;
  font-family: var(--fuente);
}

/* Banner resultado */
.moroso-result-banner {
  padding:     7px 1.25rem;
  font-size:   .8125rem;
  display:     flex;
  align-items: center;
  gap:         8px;
  border-bottom: 1px solid var(--borde-suave);
  font-family: var(--fuente);
  line-height: 1.4;
  flex-wrap:   wrap;
}
.moroso-result-banner[hidden] { display: none; }
.moroso-result-ok { background: color-mix(in srgb, var(--primary-main) 8%, var(--background-card)); color: var(--primary-main); }
.moroso-result-no { background: #fff8e1; color: #f57f17; }
.moroso-result-info { background: #f0f0f0; color: #555; }
.moroso-ocurrencias {
  font-size:   .6875rem;
  font-weight: 600;
  margin-left: auto;
}
.moroso-ocurrencias[hidden] { display: none; }

/* Lista de resultados: nombre exacto + página de cada coincidencia, para
   ir directo a un registro con confianza (el salto es a nivel de página,
   que es sólido) sin depender únicamente del resaltado pixel a pixel. */
.moroso-match-list {
  max-height:   180px;
  overflow-y:   auto;
  border-bottom: 1px solid var(--borde-suave);
  background:   var(--background-card);
}
.moroso-match-list[hidden] { display: none; }
.moroso-match-item {
  display:       flex;
  align-items:   center;
  gap:           8px;
  width:         100%;
  padding:       .5rem 1.25rem;
  border:        none;
  border-bottom: 1px solid var(--borde-suave);
  background:    transparent;
  cursor:        pointer;
  text-align:    left;
  font-family:   var(--fuente);
  transition:    background var(--transicion);
}
.moroso-match-item:last-child  { border-bottom: none; }
.moroso-match-item:hover,
.moroso-match-item.activo      { background: color-mix(in srgb, var(--primary-main) 8%, var(--background-card)); }
.moroso-match-item-nombre {
  font-size:    .8125rem;
  font-weight:  600;
  color:        var(--texto-default);
  flex:         1 1 auto;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}
.moroso-match-item-pagina {
  font-size:     .6875rem;
  color:         var(--texto-suave);
  flex-shrink:   0;
  background:    var(--background-default);
  padding:       2px 8px;
  border-radius: var(--radio);
}

/* Navegador de coincidencias (anterior/siguiente), tipo buscador de navegador */
.moroso-match-nav {
  display:     flex;
  align-items: center;
  gap:         4px;
  margin-left: auto;
}
.moroso-match-nav[hidden] { display: none; }
.moroso-match-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          24px;
  height:         24px;
  border-radius:  50%;
  border:         none;
  background:     rgba(0,0,0,.06);
  color:          inherit;
  cursor:         pointer;
  font-size:      .8125rem;
  transition:     background var(--transicion);
}
.moroso-match-btn:hover { background: rgba(0,0,0,.14); }
.moroso-match-btn:disabled { opacity: .35; cursor: default; }
#moroso-match-contador {
  font-size:   .75rem;
  font-weight: 600;
  min-width:   58px;
  text-align:  center;
}

/* Toolbar de navegación */
.moroso-pdf-nav {
  background:  #3d3d3d;
  padding:     5px 1.25rem;
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}
.moroso-btn-pag {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       4px 10px;
  border-radius: var(--radio);
  border:        1px solid rgba(255,255,255,.2);
  background:    rgba(255,255,255,.08);
  font-size:     .75rem;
  cursor:        pointer;
  color:         #ccc;
  font-family:   var(--fuente);
  transition:    all var(--transicion);
}
.moroso-btn-pag:hover:not(:disabled) { background: rgba(255,255,255,.18); color: #fff; }
.moroso-btn-pag:disabled { opacity: .4; cursor: default; }
.moroso-pag-info { font-size: .75rem; color: #aaa; }
.moroso-zoom-sel {
  margin-left:   auto;
  padding:       3px 6px;
  border-radius: var(--radio);
  border:        1px solid rgba(255,255,255,.2);
  background:    rgba(255,255,255,.1);
  color:         #fff;
  font-size:     .75rem;
  font-family:   var(--fuente);
  outline:       none;
  cursor:        pointer;
}
.moroso-zoom-sel option { background: #3d3d3d; color: #fff; }

/* Área del viewer */
.moroso-pdf-area {
  background:     #525659;
  min-height:     400px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        1.25rem;
  overflow-y:     auto;
  max-height:     65vh;
}
.moroso-pdf-pages {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  width:          100%;
}
.moroso-pdf-page-wrap {
  background:    #fff;
  border-radius: 2px;
  box-shadow:    0 2px 8px rgba(0,0,0,.3);
  position:      relative;
}
.moroso-pdf-page-wrap canvas { display: block; max-width: 100%; height: auto; }

/* TextLayer — el ancho/alto lo fija JS en unidades "nativas" del PDF y se
   escala completo con transform: scale(); por eso NO usamos "inset:0" acá
   (competía con el width/height inline y producía el desfase del resaltado
   en pantallas angostas). */
.moroso-pdf-text-layer {
  position:       absolute;
  top:            0;
  left:           0;
  overflow:       hidden;
  line-height:    1;
  pointer-events: none;
}
.moroso-pdf-text-layer span {
  color:           transparent;
  position:        absolute;
  white-space:     pre;
  cursor:          text;
  transform-origin: 0% 0%;
}
.moroso-pdf-text-layer .highlight          { background: rgba(255,235,59,.5); border-radius: 2px; }
.moroso-pdf-text-layer .highlight.selected { background: rgba(0,100,255,.3); }

/* Estados */
.moroso-pdf-cargando {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  color:          rgba(255,255,255,.7);
  font-size:      .875rem;
  margin:         auto;
  font-family:    var(--fuente);
}
.moroso-pdf-cargando i { font-size: 1.75rem; animation: moroso-spin 1s linear infinite; }
@keyframes moroso-spin { to { transform: rotate(360deg); } }

.moroso-pdf-error {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            12px;
  color:          #ffcc80;
  font-size:      .875rem;
  text-align:     center;
  margin:         auto;
  font-family:    var(--fuente);
}
.moroso-pdf-error[hidden] { display: none; }
.moroso-pdf-error i { font-size: 2rem; }

/* Footer del modal PDF */
.moroso-pdf-footer-info {
  display:     flex;
  align-items: center;
  gap:         14px;
}
.moroso-footer-stat {
  display:     flex;
  align-items: center;
  gap:         4px;
  font-size:   .75rem;
  color:       var(--texto-muy-suave);
  font-family: var(--fuente);
}
.moroso-footer-ver i { color: var(--primary-main); font-size: .875rem; }
.moroso-footer-dl  i { color: var(--color-acento); font-size: .875rem; }


/* ════════════════════════════════════════════════════════════
   5. RESPONSIVE — MÓVIL
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Card — título truncado a 3 líneas */
  .moroso-card-titulo {
    display:           -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow:          hidden;
  }
  /* Ícono más pequeño */
  .moroso-card-icon { width: 48px; }
  .moroso-card-icon i { font-size: 1.25rem; }

  /* Ocultar label de botones — solo íconos */
  .moroso-btn-label { display: none; }
  .moroso-btn { padding: 6px 9px; }

  /* Tooltip en móvil — no hay hover, mostrar siempre el desglose */
  .moroso-tooltip { display: none !important; }
  .moroso-contador-label { display: none; }

  /* Modal desde abajo */
  .moroso-modal-backdrop { padding: 0; align-items: flex-end; }
  .moroso-pdf-modal {
    border-radius: 14px 14px 0 0;
    max-width:     100%;
    max-height:    96vh;
    overflow-y:    auto;
    display:       flex;
    flex-direction: column;
  }
  .moroso-per-modal { border-radius: 14px 14px 0 0; max-width: 100%; }

  /* Sin hover confiable en táctil: en vez de tooltip, la etiqueta de cada
     dato (Resolución Municipal / Medio / Fecha) se muestra siempre, chica,
     debajo del valor — y las 3 filas se apilan en vez de compartir una
     sola fila angosta. */
  .moroso-per-rows { flex-direction: column; }
  .moroso-per-row {
    border-right:  none;
    border-bottom: 1px solid var(--borde-suave);
    padding:       .5rem 0;
  }
  .moroso-per-row:first-child { padding-left: 0; }
  .moroso-per-row:last-child  { padding-right: 0; border-bottom: none; }
  .moroso-per-row::after, .moroso-per-row::before { display: none; }
  .moroso-per-label-sr {
    position:       static;
    width:          auto;
    height:         auto;
    padding:        0;
    margin:         0 0 1px;
    overflow:       visible;
    clip:           auto;
    white-space:    normal;
    display:        block;
    font-size:      .625rem;
    color:          var(--texto-muy-suave);
    letter-spacing: .04em;
  }

  /* Buscador compacto */
  .moroso-search-bar  { padding: .5rem .75rem; gap: 6px; flex-wrap: nowrap; }
  .moroso-search-hint { display: none; }
  .moroso-btn-buscar span { display: none; }
  .moroso-btn-buscar  { padding: 7px 10px; }
  .moroso-ci-input    { font-size: 14px !important; }

  /* Viewer adaptivo al ancho */
  .moroso-pdf-area { flex: 1; max-height: none; padding: .5rem; overflow-x: hidden; }
  .moroso-pdf-page-wrap { width: 100% !important; max-width: 100%; }
  .moroso-pdf-page-wrap canvas { width: 100% !important; height: auto !important; }

  /* Toolbar compacto */
  .moroso-pdf-nav { padding: 4px .75rem; flex-wrap: nowrap; }
  .moroso-btn-pag { padding: 4px 8px; font-size: .6875rem; }
  .moroso-zoom-sel { display: none; }

  /* Footer */
  .moroso-modal-footer { flex-wrap: wrap; gap: 6px; padding: .625rem .75rem; }
  .moroso-modal-footer-btns { width: 100%; justify-content: flex-end; }
}


/* ════════════════════════════════════════════════════════════
   6. MODO OSCURO
   ════════════════════════════════════════════════════════════ */
[data-theme="dark"] .moroso-card { background: var(--background-card); }
[data-theme="dark"] .moroso-card-titulo { color: var(--texto-default); }
[data-theme="dark"] .moroso-modal { background: var(--background-card); }
[data-theme="dark"] .moroso-modal-body { color: var(--texto-default); }
[data-theme="dark"] .moroso-per-val { color: var(--texto-default); }
[data-theme="dark"] .moroso-modal-footer { background: var(--background-default); }
[data-theme="dark"] .moroso-btn-cerrar { background: var(--background-card); border-color: var(--borde-suave); color: var(--texto-suave); }
[data-theme="dark"] .moroso-search-inner { background: var(--background-input); }
[data-theme="dark"] .moroso-ci-input { color: var(--texto-default); }