/**
 * print.css — Estilos exclusivos para @media print
 * Oculta TODA la UI de la aplicación y muestra ÚNICAMENTE
 * el contenido dentro de #printable-zone.
 *
 * Cargado vía <link media="print"> en index.html — no afecta
 * la pantalla en absoluto.
 */

/* ============================================================
   RESET: Ocultar absolutamente todo del DOM
   ============================================================ */
@media print {
  /* Ocultar la app entera */
  body,
  body > * {
    visibility: hidden !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ocultar scrollbars, overlays, portales de React */
  *::-webkit-scrollbar { display: none !important; }
  .modal-overlay { display: none !important; }

  /* ============================================================
     MOSTRAR SOLO LA ZONA DE IMPRESIÓN
     ============================================================ */
  #printable-zone,
  #printable-zone * {
    visibility: visible !important;
  }

  #printable-zone {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
  }

  /* ============================================================
     CONFIGURACIÓN DE PÁGINA
     ============================================================ */
  @page {
    size: Letter portrait;
    margin: 14mm 18mm 16mm 18mm;
  }

  @page :first {
    margin-top: 14mm;
  }

  /* ============================================================
     TIPOGRAFÍA DEL DOCUMENTO
     ============================================================ */
  #printable-zone {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
    font-size: 10pt;
    line-height: 1.5;
    color: #0f172a;
    background: white;
  }

  /* ============================================================
     CONTROL DE SALTOS DE PÁGINA
     ============================================================ */
  .print-page-break { page-break-before: always; }
  .print-no-break    { page-break-inside: avoid; }
  .print-keep-with   { page-break-after: avoid; }

  /* ============================================================
     OCULTAR ELEMENTOS EXCLUSIVOS DE PANTALLA DENTRO DEL PREVIEW
     ============================================================ */
  #printable-zone .no-print,
  #printable-zone [data-no-print] {
    display: none !important;
    visibility: hidden !important;
  }

  /* ============================================================
     ESTILOS DE SECCIONES DEL DOCUMENTO
     ============================================================ */

  /* Línea de acento superior */
  #printable-zone .pt-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, #0f172a 0%, #64748b 50%, #0f172a 100%);
    margin-bottom: 18pt;
  }

  /* Encabezado membretado */
  #printable-zone .pt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2pt double #0f172a;
    padding-bottom: 12pt;
    margin-bottom: 16pt;
  }

  #printable-zone .pt-studio-name {
    font-size: 14pt;
    font-weight: 900;
    letter-spacing: 1pt;
    text-transform: uppercase;
    color: #0f172a;
  }

  #printable-zone .pt-studio-subtitle {
    font-size: 7.5pt;
    color: #475569;
    font-weight: 600;
    margin-top: 2pt;
    text-transform: uppercase;
  }

  #printable-zone .pt-studio-meta {
    font-size: 7pt;
    color: #64748b;
    margin-top: 3pt;
  }

  #printable-zone .pt-folio-box {
    border: 2pt solid #0f172a;
    padding: 5pt 12pt;
    background: #f8fafc;
    text-align: right;
  }

  #printable-zone .pt-folio-label {
    font-size: 6.5pt;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
  }

  #printable-zone .pt-folio-value {
    font-size: 12pt;
    font-weight: 900;
    color: #0f172a;
  }

  /* Título del documento */
  #printable-zone .pt-doc-title {
    text-align: center;
    margin: 14pt 0 20pt 0;
  }

  #printable-zone .pt-doc-title h1 {
    font-size: 10.5pt;
    font-weight: 900;
    letter-spacing: 1.5pt;
    text-transform: uppercase;
    color: #0f172a;
    margin: 0 0 3pt 0;
  }

  #printable-zone .pt-doc-title span {
    font-size: 7pt;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5pt;
    font-weight: 600;
  }

  /* Encabezados de sección */
  #printable-zone .pt-section-title {
    font-size: 7.5pt;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1pt;
    border-bottom: 1pt solid #cbd5e1;
    padding-bottom: 4pt;
    margin: 0 0 10pt 0;
    color: #0f172a;
  }

  /* Cuadros de partes */
  #printable-zone .pt-party-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10pt;
    margin-bottom: 14pt;
  }

  #printable-zone .pt-party-box {
    border: 1pt solid #cbd5e1;
    padding: 9pt 11pt;
    background: #f8fafc;
  }

  #printable-zone .pt-party-role {
    font-size: 6.5pt;
    font-weight: 800;
    text-transform: uppercase;
    color: #334155;
    display: block;
    margin-bottom: 3pt;
  }

  #printable-zone .pt-party-name {
    font-size: 9pt;
    font-weight: 800;
    color: #0f172a;
    display: block;
  }

  #printable-zone .pt-party-meta {
    font-size: 7.5pt;
    color: #475569;
    margin-top: 3pt;
    line-height: 1.4;
  }

  /* Tabla de cobertura / pagos */
  #printable-zone .pt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8pt;
    margin-bottom: 12pt;
  }

  #printable-zone .pt-table th {
    background: #f1f5f9;
    border: 0.75pt solid #cbd5e1;
    padding: 5pt 8pt;
    text-align: left;
    font-size: 7pt;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3pt;
    color: #0f172a;
  }

  #printable-zone .pt-table td {
    border: 0.75pt solid #cbd5e1;
    padding: 6pt 8pt;
    color: #1e293b;
    vertical-align: top;
  }

  #printable-zone .pt-table tr:nth-child(even) td {
    background: #f8fafc;
  }

  /* Cuadro resumen financiero */
  #printable-zone .pt-balance-box {
    border: 2pt solid #0f172a;
    padding: 10pt 14pt;
    background: #f8fafc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16pt;
    gap: 12pt;
    flex-wrap: wrap;
  }

  #printable-zone .pt-balance-item label {
    font-size: 6.5pt;
    color: #64748b;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin-bottom: 2pt;
  }

  #printable-zone .pt-balance-item strong {
    font-size: 12pt;
    font-weight: 900;
    color: #0f172a;
    display: block;
  }

  #printable-zone .pt-balance-item.is-paid strong { color: #16a34a; }
  #printable-zone .pt-balance-item.is-due  strong { color: #d97706; }

  #printable-zone .pt-status-badge {
    display: inline-block;
    font-size: 6.5pt;
    font-weight: 900;
    padding: 2pt 7pt;
    border-radius: 2pt;
    text-transform: uppercase;
    margin-top: 3pt;
  }

  #printable-zone .pt-status-badge.liquidado {
    background: #dcfce7;
    color: #15803d;
    border: 0.75pt solid #86efac;
  }

  #printable-zone .pt-status-badge.pendiente {
    background: #fef3c7;
    color: #b45309;
    border: 0.75pt solid #fde68a;
  }

  /* Cláusulas legales */
  #printable-zone .pt-clauses {
    font-size: 7.5pt;
    color: #334155;
    line-height: 1.55;
    text-align: justify;
  }

  #printable-zone .pt-clauses p {
    margin: 0 0 6pt 0;
  }

  /* Sección de firmas */
  #printable-zone .pt-signatures {
    border-top: 2pt solid #0f172a;
    padding-top: 14pt;
    margin-top: 20pt;
  }

  #printable-zone .pt-signatures-title {
    text-align: center;
    font-size: 7pt;
    font-weight: 700;
    text-transform: uppercase;
    color: #475569;
    letter-spacing: 0.5pt;
    margin-bottom: 14pt;
  }

  #printable-zone .pt-signatures-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40pt;
  }

  #printable-zone .pt-signature-block {
    text-align: center;
  }

  #printable-zone .pt-signature-line {
    height: 65pt;
    border-bottom: 1pt solid #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5pt;
  }

  #printable-zone .pt-signature-line img {
    max-height: 60pt;
    max-width: 100%;
    filter: contrast(200%);
  }

  #printable-zone .pt-signature-name {
    font-size: 8pt;
    font-weight: 800;
    text-transform: uppercase;
    color: #0f172a;
    display: block;
  }

  #printable-zone .pt-signature-role {
    font-size: 7pt;
    color: #64748b;
  }

  /* Pie del documento */
  #printable-zone .pt-footer {
    text-align: center;
    margin-top: 20pt;
    padding-top: 8pt;
    border-top: 0.75pt dashed #cbd5e1;
    font-size: 6.5pt;
    color: #94a3b8;
  }

  /* ============================================================
     PLANTILLA: RECIBO RÁPIDO
     ============================================================ */
  #printable-zone .pt-recibo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2pt solid #0f172a;
    padding-bottom: 10pt;
    margin-bottom: 12pt;
  }

  #printable-zone .pt-recibo-folio {
    font-size: 16pt;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: 0.5pt;
  }

  /* ============================================================
     PLANTILLA: SEGUNDA PÁGINA - CLÁUSULAS AL REVERSO
     ============================================================ */
  #printable-zone .pt-reverso {
    page-break-before: always;
    padding-top: 10pt;
  }

  #printable-zone .pt-reverso .pt-reverso-title {
    text-align: center;
    font-size: 9pt;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1pt;
    color: #0f172a;
    border-bottom: 1pt solid #0f172a;
    padding-bottom: 8pt;
    margin-bottom: 14pt;
  }

  #printable-zone .pt-reverso-clause {
    margin-bottom: 10pt;
    font-size: 8pt;
    color: #334155;
    line-height: 1.6;
    text-align: justify;
  }

  #printable-zone .pt-reverso-clause strong {
    font-weight: 800;
    text-transform: uppercase;
    color: #0f172a;
    display: block;
    margin-bottom: 2pt;
    font-size: 7.5pt;
    letter-spacing: 0.3pt;
  }
}