:root {
  --primary: #1e3a8a;
  --success: #15803d;
  --danger: #b91c1c;
  --bg: #f1f5f9;
  --card-bg: #ffffff;
  --border: #cbd5e1;
  --text: #0f172a;
}

*, *::before, *::after { 
  box-sizing: border-box; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
}

body { 
  background-color: var(--bg); 
  margin: 0; 
  padding: 20px; 
  color: var(--text); 
  overflow-x: hidden;
}

/* =========================================================
   CAPA 1: INTERFAZ WEB INTERACTIVA (PANTALLA)
   ========================================================= */
.app-container { 
  max-width: 1100px; 
  margin: 0 auto; 
  width: 100%;
}

/* Logo / Escudo en pantallas estándar (computadores y tablets) */
.login-logo {
  width: 98px;
  height: 98px;
  object-fit: contain;
  margin-bottom: 12px;
}

.top-bar {
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  background: var(--card-bg); 
  padding: 16px 20px; 
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06); 
  margin-bottom: 18px; 
  gap: 12px; 
  flex-wrap: wrap;
}

.search-group { 
  display: flex; 
  gap: 10px; 
  flex: 1; 
  min-width: 280px; 
}

.search-group input {
  flex: 1; 
  padding: 10px 14px; 
  border: 1.5px solid var(--border);
  border-radius: 6px; 
  font-size: 15px; 
  outline: none;
}

.search-group input:focus { 
  border-color: var(--primary); 
}

.btn {
  padding: 10px 16px; 
  border: none; 
  border-radius: 6px; 
  font-weight: 600;
  cursor: pointer; 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: 14px;
}

.btn-search { background: var(--primary); color: white; }
.btn-save { background: var(--success); color: white; }
.btn-print { background: var(--danger); color: white; }

.card {
  background: var(--card-bg); 
  padding: 20px; 
  border-radius: 10px;
  margin-bottom: 16px; 
  border: 1px solid var(--border);
  width: 100%;
}

.card-title {
  font-size: 15px; 
  font-weight: 700; 
  color: var(--primary); 
  margin: 0 0 14px 0;
  border-bottom: 2px solid #e2e8f0; 
  padding-bottom: 6px;
}

.grid-form {
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); 
  gap: 14px;
  width: 100%;
}

.field { 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
  min-width: 0; /* Previene desborde en celdas de CSS Grid */
  width: 100%;
}

.field label { 
  font-size: 11px; 
  font-weight: 700; 
  color: #475569; 
  text-transform: uppercase; 
}

.field input, 
.field select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 9px 10px; 
  border: 1px solid var(--border); 
  border-radius: 5px; 
  font-size: 14px;
  background: white; 
  color: var(--text);
  text-overflow: ellipsis;
}

/* Control estricto para campos de fecha en navegadores móviles */
input[type="date"] {
  min-height: 38px;
  -webkit-appearance: none;
  appearance: none;
}

.field select:focus, 
.field input:focus {
  outline: none; 
  border-color: var(--primary); 
  box-shadow: 0 0 0 2px rgba(30,58,138,0.1);
}

.field input.input-required-error,
.field select.input-required-error {
  border: 1.5px solid #dc2626 !important;
  background-color: #fef2f2 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15) !important;
}

.retired-banner {
  display: flex; 
  align-items: center; 
  gap: 10px; 
  background: #fef2f2;
  border: 1px solid #fecaca; 
  padding: 12px 18px; 
  border-radius: 8px; 
  margin-bottom: 16px;
}

.retired-banner input { 
  width: 18px; 
  height: 18px; 
  cursor: pointer; 
}

.retired-banner label { 
  font-weight: 600; 
  color: #991b1b; 
  cursor: pointer; 
}

.auth-banner {
  background: #eff6ff; 
  border: 1px solid #bfdbfe; 
  padding: 16px; 
  border-radius: 8px; 
  margin-top: 10px;
  display: flex; 
  flex-direction: column; 
  gap: 12px;
}

.auth-item { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
}

.auth-item input { 
  width: 18px; 
  height: 18px; 
  cursor: pointer; 
}

.auth-item label { 
  font-size: 13.5px; 
  font-weight: 600; 
  color: #1e3a8a; 
  cursor: pointer; 
}

.bottom-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
  margin-bottom: 30px;
}

/* =========================================================
   AJUSTES RESPONSIVOS PARA MÓVILES Y PANTALLAS PEQUEÑAS
   ========================================================= */
@media screen and (max-width: 680px) {
  body { 
    padding: 12px 10px; 
    overflow-x: hidden; 
  }

  /* Reducción del escudo para celulares */
  .login-logo {
    width: 68px;
    height: 68px;
    margin-bottom: 8px;
  }

  .app-container {
    width: 100%;
    max-width: 100%;
  }

  .card { 
    padding: 14px 12px; 
    margin-bottom: 12px;
  }

  .card-title {
    font-size: 14px;
    word-break: break-word;
  }

  .grid-form { 
    grid-template-columns: 1fr; 
    gap: 12px; 
    width: 100%;
  }

  .grid-form .field[style*="grid-column: span 2"] { 
    grid-column: span 1 !important; 
  }

  .top-bar { 
    flex-direction: column; 
    align-items: stretch; 
    padding: 14px; 
    gap: 10px;
  }

  .top-bar button { 
    width: 100%; 
    justify-content: center; 
  }

  .bottom-actions { 
    flex-direction: column; 
    gap: 10px; 
  }

  .bottom-actions .btn { 
    width: 100%; 
    justify-content: center; 
    padding: 12px; 
    font-size: 15px; 
  }
}

/* =========================================================
   CAPA 2: HOJA OFICIAL ESTANDARIZADA (PDF / EXACTAMENTE 1 HOJA)
   ========================================================= */
#print-sheet {
  display: none;
  background: white; 
  color: black; 
  font-family: Arial, Helvetica, sans-serif;
}

@media print {
  html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
    overflow: hidden !important; /* Previene creación de página fantasma */
  }

  .app-container, #admin-auth-modal, #auth-modal, .no-print { 
    display: none !important; 
  }
  
  #print-sheet { 
    display: block !important; 
    width: 100% !important; 
    margin: 0 !important; 
    box-sizing: border-box;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  @page {
    size: letter portrait;
    margin: 15mm 15mm; /* Margen optimizado para no empujar firmas */
  }

  .hdr-wrapper {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    margin-bottom: 2px; 
    gap: 8px;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .hdr-logo {
    width: 52px; 
    height: 52px; 
    object-fit: contain; 
    flex-shrink: 0;
  }

  .hdr-text { 
    flex: 1; 
    text-align: center; 
  }

  .hdr-text h1 {
    font-size: 8.5pt; 
    margin: 0; 
    font-weight: 900; 
    text-transform: uppercase; 
    color: #000; 
    line-height: 1.15;
  }

  .hdr-text h2 {
    font-size: 7.8pt; 
    margin: 1px 0; 
    font-weight: 800; 
    text-transform: uppercase;
  }

  .hdr-text p {
    font-size: 6.2pt; 
    margin: 0.5px 0; 
    line-height: 1.1; 
    color: #111;
  }

  .main-title {
    font-size: 8.5pt; 
    font-weight: 900; 
    text-transform: uppercase;
    background: #f1f5f9 !important; 
    border: 1px solid #000; 
    text-align: center;
    padding: 2px 0; 
    margin-top: 2px;
    margin-bottom: 3px;
    -webkit-print-color-adjust: exact; 
    print-color-adjust: exact;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .fmt-table {
    width: 100%; 
    border-collapse: collapse; 
    margin-bottom: 2.5px; 
    table-layout: fixed;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .fmt-table td, .fmt-table th {
    border: 1px solid #000; 
    padding: 1.8px 3px; 
    font-size: 7pt; 
    vertical-align: top; 
    line-height: 1.1;
  }

  .fmt-sec {
    background: #f1f5f9 !important; 
    font-weight: 900; 
    text-transform: uppercase;
    font-size: 7pt; 
    padding: 1.8px 3px; 
    border: 1px solid #000; 
    text-align: left;
    -webkit-print-color-adjust: exact; 
    print-color-adjust: exact;
  }

  .tag {
    display: block; 
    font-size: 5.6pt; 
    font-weight: 800; 
    text-transform: uppercase; 
    color: #222; 
    margin-bottom: 0.5px;
  }

  .val {
    display: block; 
    font-size: 7pt; 
    font-weight: 700; 
    color: #000;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    min-height: 9.5px;
  }

  .legal-box {
    border: 1px solid #000; 
    padding: 2.5px 5px; 
    margin: 2.5px 0; 
    font-size: 5.8pt; 
    line-height: 1.12; 
    text-align: justify;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .legal-box p { 
    margin: 1px 0; 
  }
  
  .legal-checks-box {
    margin-top: 2px; 
    border-top: 0.5px solid #000; 
    padding-top: 2px; 
    display: flex; 
    flex-direction: column; 
    gap: 1.5px;
  }

  .check-line {
    display: flex; 
    align-items: center; 
    gap: 5px; 
    font-size: 6.2pt; 
    font-weight: 700;
  }

  .chk-box-print {
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    width: 9.5px; 
    height: 9.5px; 
    border: 1px solid #000; 
    font-size: 6.8pt; 
    font-weight: 900; 
    line-height: 1;
  }

  .firmas-table {
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 3px; 
    table-layout: fixed;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .firmas-table td {
    border: none; 
    text-align: center; 
    vertical-align: bottom; 
    padding: 0 12px;
  }

  /* Marco contenedor relativo para manejo de capas */
  .firma-box {
    position: relative;
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  /* Capa de fondo: Imagen de la firma con mayor tamaño y superpuesta */
  .img-firma-empotrada {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1px;             /* Ajusta la altura de la firma sobre el nombre */
    height: 70px;             /* Firma notablemente más grande */
    max-width: 160px; 
    object-fit: contain; 
    display: block; 
    margin: 0 auto;
    z-index: 1;               /* Enviada al fondo */
    pointer-events: none;
    opacity: 0.95;
  }

  /* Capa superior: Línea divisoria y nombre del firmante */
  .linea-firma {
    position: relative;
    z-index: 2;               /* Traído al frente */
    border-top: 1px solid #000; 
    padding-top: 1.5px; 
    font-size: 6.7pt; 
    font-weight: 800; 
    text-transform: uppercase;
  }

  .sub-firma { 
    position: relative;
    z-index: 2;               /* Traído al frente */
    font-size: 6.2pt; 
    margin-top: 1px; 
  }
}