@page {
  size: A4 landscape;
  margin: 10mm;
}

body {
  background: #FFFFFF !important;
  color: #111111 !important;
  font-family: 'Inter', Arial, sans-serif !important;
}

/* Sólo se imprime #printArea: el panel completo queda fuera del papel */
#loginScreen,
#app,
.bg-canvas,
.app-canvas,
.no-print,
#toastWrap,
.modal-backdrop,
/* Éstos viven FUERA de #app, así que ocultar la aplicación no les llegaba y
   se colaban en el papel: la barra inferior del móvil salía impresa debajo
   del listado. */
#navInferior,
.nav-inferior,
#mobileDrawer,
#modalContainer,
.barra-temporada,
#avisoGuardado {
  display: none !important;
}

#printArea {
  display: block !important;
  color: #111111;
  font-size: 9.5px;
}

#printArea .pr-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 2.5px solid #F26522;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

/* El escudo manda: arriba del todo y pegado al margen izquierdo */
#printArea .pr-head img {
  width: 26mm;
  height: 26mm;
  object-fit: contain;
  flex: 0 0 auto;
}

#printArea .pr-titulo {
  flex: 1;
  min-width: 0;
}

#printArea h1 {
  font-family: 'Outfit', Arial, sans-serif;
  font-size: 18px;
  font-weight: 800;
  margin: 0;
  color: #111111;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

#printArea h2 {
  font-size: 10.5px;
  font-weight: 700;
  margin: 3px 0 0;
  color: #F26522;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#printArea .pr-meta {
  font-size: 9px;
  color: #4B5563;
  margin-top: 5px;
  line-height: 1.5;
}

/* Sello de emisión, alineado a la derecha de la cabecera */
#printArea .pr-sello {
  flex: 0 0 auto;
  text-align: right;
  font-size: 8.5px;
  color: #6B7280;
  line-height: 1.6;
  border-left: 1px solid #E5E7EB;
  padding-left: 12px;
}

#printArea .pr-sello b {
  display: block;
  font-size: 10px;
  color: #111111;
}

#printArea .pr-kpis {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

#printArea .pr-kpi {
  border: 1.5px solid #111111;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 700;
  background: #F9FAFB;
}

#printArea .pr-kpi b {
  color: #F26522;
}

#printArea table {
  width: 100%;
  border-collapse: collapse;
  font-size: 8.4px;
  table-layout: fixed;
}

/* Que la cabecera se repita al pasar de hoja: sin esto, a partir de la
   segunda página no se sabe qué es cada columna. */
#printArea thead {
  display: table-header-group;
}

#printArea tfoot {
  display: table-footer-group;
}

/* Una fila no debe partirse entre dos hojas */
#printArea tr {
  page-break-inside: avoid;
  break-inside: avoid;
}

#printArea th {
  background: #F26522 !important;
  color: #FFFFFF !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 7.8px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#printArea th,
#printArea td {
  border: 0.5px solid #D1D5DB;
  padding: 3.5px 5px;
  vertical-align: top;
  overflow-wrap: break-word;
}

#printArea tbody tr:nth-child(even) td {
  background: #FBF7F4 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Anchos por columna: sin esto las observaciones se comen la tabla */
#printArea .c-num   { width: 4.5%; text-align: center; }
#printArea .c-nom   { width: 16%; }
#printArea .c-dni   { width: 7%;  font-family: monospace; }
#printArea .c-tel   { width: 7%; }
#printArea .c-mail  { width: 11.5%; font-size: 7.6px; }
#printArea .c-dir   { width: 13.5%; }
#printArea .c-pob   { width: 7.5%; }
#printArea .c-tmp   { width: 5.5%; text-align: center; }
#printArea .c-mod   { width: 6%;  text-align: center; }
#printArea .c-ren   { width: 4.5%; text-align: center; }
#printArea .c-cuo   { width: 7%;  text-align: center; }
#printArea .c-equ   { width: 10%; }

#printArea .pr-foot {
  margin-top: 12px;
  font-size: 8px;
  color: #6B7280;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #E5E7EB;
  padding-top: 8px;
}

/* Aviso de protección de datos: son datos personales de socios */
#printArea .pr-lopd {
  margin-top: 6px;
  font-size: 7.2px;
  color: #9CA3AF;
  line-height: 1.45;
  text-align: justify;
}
/* ==========================================================================
   CARNET INDIVIDUAL DE SOCIO
   ========================================================================== */
#printArea .pr-carnet {
  width: 150mm;
  border: 2.5px solid #F26522;
  border-radius: 6mm;
  padding: 8mm;
  margin: 6mm auto;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#printArea .pr-carnet-head {
  display: flex;
  align-items: center;
  gap: 6mm;
  border-bottom: 1.5px solid #E5E7EB;
  padding-bottom: 4mm;
}

#printArea .pr-carnet-head img {
  width: 22mm;
  height: 22mm;
  object-fit: contain;
}

#printArea .pr-carnet-head h1 {
  font-family: 'Outfit', Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  margin: 0;
  color: #111111;
}

#printArea .pr-carnet-head h2 {
  font-size: 10px;
  font-weight: 700;
  margin: 2px 0 0;
  color: #F26522;
  text-transform: uppercase;
}

#printArea .pr-carnet-num {
  margin-left: auto;
  font-family: 'Outfit', Arial, sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  background: #F26522;
  border-radius: 4mm;
  padding: 2mm 5mm;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#printArea .pr-carnet-body {
  padding: 5mm 0;
  font-size: 11px;
  line-height: 1.7;
}

#printArea .pr-carnet-name {
  font-family: 'Outfit', Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 2mm;
}

#printArea .pr-carnet-foot {
  display: flex;
  justify-content: space-between;
  border-top: 1.5px solid #E5E7EB;
  padding-top: 3mm;
  font-size: 9px;
  color: #6B7280;
}

/* ==================== CARNET CON EL ARTE REAL ====================
   A tamaño de tarjeta de verdad para poder recortarlo. El ancho es el de una
   ID-1 (85,6 mm); el alto sale de la proporción del arte (1586x992), que no
   es exactamente la de una ID-1: se respeta la del diseño antes que estirarlo
   medio milímetro para cuadrar con la norma. */
#printArea .pr-carnet-real {
  display: flex;
  flex-direction: column;
  gap: 6mm;
  align-items: flex-start;
}

#printArea .pr-cara {
  width: 85.6mm;
  border: 0.3mm dashed #999999;   /* guía de corte */
  border-radius: 3mm;
  overflow: hidden;
  line-height: 0;
}

#printArea .pr-cara svg {
  display: block;
  width: 100%;
  height: auto;
}

#printArea .pr-carnet-pie {
  font-size: 8px;
  color: #444444;
  margin-top: 1mm;
}