/* Pestañas tipo carpeta + carnet vertical CALEP. Complementa crm.css. */
.spectab-panel{display:none}
.spectab-panel.on{display:block}
.spectab-panel>h4.mh:first-child{border-top:none;margin-top:6px;padding-top:0}
#spec-overlay .modal{background:transparent;border:none;box-shadow:none;padding:0;overflow:visible;max-height:none;width:660px}
#spec-overlay .spectabs{display:flex;flex-wrap:nowrap;gap:2px;padding:0 14px;margin:0;border:none;position:relative;z-index:2;align-items:flex-end;justify-content:flex-start}
#spec-overlay .spectabs button{flex:0 0 118px;width:118px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:10px 10px 0 0;padding:0 6px;font-size:12.5px;font-weight:600;line-height:1.2;cursor:pointer;text-align:center;white-space:normal;margin-bottom:-1px;box-shadow:0 -2px 7px rgba(0,0,0,.10)}
#spec-overlay .spectabs button:hover{color:var(--txt)}
#spec-overlay .spectabs button.on{background:var(--panel);color:var(--txt);border-bottom-color:var(--panel)}
#spec-overlay .spec-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 26px;box-shadow:0 30px 80px rgba(0,0,0,.55);max-height:calc(92vh - 58px);overflow-y:auto}
#spec-overlay .spec-x{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:2px 6px;z-index:4}
#spec-overlay .spec-x:hover{color:var(--txt)}
@media(max-width:700px){#spec-overlay .modal{width:100%!important}#spec-overlay .spectabs{gap:2px;padding:0 6px;justify-content:stretch}#spec-overlay .spectabs button{flex:1 1 0;width:auto;min-width:0;height:50px;font-size:10.5px;padding:4px 3px;border-radius:8px 8px 0 0}#spec-overlay .spec-card{padding:18px}#spec-overlay .kv{grid-template-columns:1fr 1fr}}

/* ===== Carnet vertical CALEP ===== */
.vcarnet{position:relative;width:330px;max-width:100%;border-radius:20px;overflow:hidden;background:linear-gradient(160deg,#111a2c 0%,#0c1424 45%,#0a1120 100%);box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid #22314c;color:#eef2f8;margin:0 auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.vcarnet .vc-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vcarnet .vc-in{position:relative;z-index:2;padding:22px 22px 16px;display:flex;flex-direction:column;align-items:center;text-align:center}
.vcarnet .vc-logo{height:44px;margin:2px 0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.vcarnet .vc-emp{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#caa964;font-weight:700;margin:6px 0 14px}
.vcarnet .vc-ring{width:128px;height:128px;border-radius:50%;padding:4px;background:linear-gradient(145deg,#d8be82,#b9893a);box-shadow:0 6px 18px rgba(0,0,0,.5)}
.vcarnet .vc-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#33415c;display:block}
.vcarnet .vc-name{font-size:19px;font-weight:800;margin:15px 0 2px;letter-spacing:.3px;line-height:1.15}
.vcarnet .vc-cargo{font-size:11.5px;letter-spacing:1.4px;text-transform:uppercase;color:#caa964;font-weight:700}
.vcarnet .vc-ced{font-size:13.5px;color:#dfe6f0;margin-top:6px;font-weight:600}
.vcarnet .vc-pills{display:flex;gap:8px;margin:15px 0 2px;width:100%;justify-content:center}
.vcarnet .vc-pill{flex:1;max-width:96px;background:rgba(255,255,255,.04);border:1px solid #2c3a55;border-radius:10px;padding:7px 4px}
.vcarnet .vc-pill i{display:block;font-style:normal;font-size:9px;letter-spacing:1px;color:#8b97a8;text-transform:uppercase;margin-bottom:2px}
.vcarnet .vc-pill b{font-size:12.5px;color:#f2f5fa}
.vcarnet .vc-pill.rh b{color:#f6c760}
.vcarnet .vc-pill-falta b{color:#fca5a5}
.vcarnet .vc-falta{color:#fca5a5}
.vcarnet .vc-qr{display:flex;align-items:center;gap:12px;margin-top:15px;width:100%;background:rgba(255,255,255,.03);border:1px solid #24314a;border-radius:12px;padding:10px}
.vcarnet .vc-qr-box{width:84px;height:84px;border-radius:8px;background:#fff;flex:0 0 84px;display:flex;align-items:center;justify-content:center;color:#0a0d15;font-size:9px;overflow:hidden}
.vcarnet .vc-qr-box svg{width:100%;height:100%;display:block}
.vcarnet .vc-qr>span{font-size:10px;color:#9aa6b6;text-align:left;line-height:1.35}
.vcarnet .vc-qr a{color:#caa964}
.vcarnet .vc-foot{font-size:9px;color:#6b7789;margin-top:14px;line-height:1.4;border-top:1px solid #1c2740;padding-top:10px}
/* ===== Carné en TAMAÑO TARJETA, de pie            [17/10/2026] =====
   53,98 × 85,6 mm: la medida ISO 7810 ID-1 (la de una tarjeta de crédito)
   puesta vertical. Es la versión que se convierte en PDF y en papel.

   POR QUÉ 330 × 523,3 px
     330 px es el ancho de diseño del carné de siempre. 523,3 = 330 × 85,6
     ÷ 53,98: la proporción EXACTA de la tarjeta. Al pasarlo a milímetros
     no se estira ni se deforma nada.

   SIN ESQUINAS NI BORDE
     La hoja del PDF mide lo mismo que la tarjeta, así que el fondo llega
     hasta el filo. Las esquinas redondeadas las da el recorte o el
     porta-carné; dibujarlas aquí dejaría triángulos blancos en el PDF.

   EL SOBRANTE SE REPARTE
     El contenido se distribuye en la altura fija (space-between). Si algún
     dato es larguísimo, crm-main.js reduce el conjunto lo justo para que
     quepa: nunca se recorta un nombre. */
.vcarnet.vc-id1{width:330px;height:523.3px;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none}
.vc-id1 .vc-in{height:100%;box-sizing:border-box;padding:14px 20px 11px;justify-content:space-between;gap:6px}
.vc-id1 .vc-logo{height:36px;margin:0}
.vc-id1 .vc-emp{margin:0;font-size:9.5px;letter-spacing:1px}
.vc-id1 .vc-ring{width:118px;height:118px}
.vc-id1 .vc-name{font-size:18px;margin:0}
.vc-id1 .vc-cargo{font-size:11px;letter-spacing:1px}
.vc-id1 .vc-ced{margin:0;font-size:13px}
.vc-id1 .vc-pills{margin:0}
.vc-id1 .vc-qr{margin:0;padding:8px}
.vc-id1 .vc-qr-box{width:92px;height:92px;flex:0 0 92px}
.vc-id1 .vc-foot{margin:0;padding-top:6px;font-size:8.5px}
@media print{
  #carnet-hoja{height:auto!important}
  .vcarnet{width:64mm!important;box-shadow:none!important;margin:0 auto!important}
}