/* ==========================================================================
   PERSONALIZADOR DE NOMBRES - ESTILOS VISUALES AVANZADOS
   Desarrollado por: Abraham Marquez
   ========================================================================== */

/* ESTRUCTURA PRINCIPAL DEL CONTENEDOR (LAYOUT) */
.personalizador-termos-container.pf-nombres-scope {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
     box-sizing: border-box;
}

.pf-nombres-scope .personalizador-header h2 {
     font-size: 24px;
     margin-bottom: 20px;
     text-align: left;
}

.pf-nombres-scope .personalizador-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     margin-bottom: 30px;
}

/* Columnas principales */
.pf-nombres-scope .columna-izquierda {
     flex: 1.4;
     min-width: 320px;
     max-width: 580px;
}

.pf-nombres-scope .columna-derecha {
     flex: 1;
     min-width: 320px;
}

/* Bloques de Control General */
.pf-nombres-scope .control-group {
     margin-bottom: 25px;
}

.pf-nombres-scope .control-group h3 {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 12px;
     color: #1e293b;
}

/* ==========================================================================
   LIENZO INTERACTIVO (PREVIEW DEL TERMO Y GRABADO)
   ========================================================================== */
.pf-nombres-scope .vista-previa-panel {
     background: #f8fafc;
     border-radius: 12px;
     padding: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
     border: 1px solid #e2e8f0;
     min-height: 550px;
}

.termo-preview {
     position: relative;
     display: inline-block;
     width: 100%;
     max-width: 520px; 
     border-radius: 8px;
     overflow: hidden; 
}

.termo-base {
     display: block;
     width: 100%;
     height: auto;
     transform: scale(1.30); 
     transform-origin: center center;
     transition: transform 0.3s ease;
}

/* Capa interactiva de texto flotante */
.pf-layer-texto-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     padding: 25% 15%; 
     box-sizing: border-box;
     pointer-events: none;
     transition: all 0.3s ease;
}

/* Estilo del texto grabado simulando laser (Aplica a ID real y a la clase del modal) */
#pfTextoPreview, 
.pf-texto-clonado-modal,
#modal-span-texto {
     color: #ffffff !important; /* 🔒 Forzado seguro para evitar herencias negras en cualquier zona */
     font-size: 28px; 
     white-space: nowrap;
     font-weight: 700;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
     transition: all 0.2s ease, margin 0.2s ease;
}

/* ==========================================================================
   MATRIZ DE ORIENTACIÓN Y POSICIÓN (Liberada de dependencias rígidas)
   ========================================================================== */

/* --- 1. Configuración Horizontal --- */
.orientation-horizontal {
     flex-direction: row;
}
.position-horizontal-center {
     justify-content: center;
     align-items: center;
     text-align: center;
}
.position-horizontal-bottom {
     justify-content: center;
     align-items: flex-end;
     text-align: center;
     padding-bottom: 80px; 
}
.position-horizontal-top {
     justify-content: center;
     align-items: flex-start;
     text-align: center;
}

/* --- 2. Configuración Vertical (Siempre Centrado Fijo) --- */
.orientation-vertical {
     flex-direction: column;
     justify-content: center;
     align-items: center;
}

/* Maximizamos el tamaño de la letra base SOLO cuando esté en vertical */
.orientation-vertical #pfTextoPreview,
.orientation-vertical .pf-texto-clonado-modal,
#modal-texto-overlay-final.orientation-vertical #modal-span-texto {
     writing-mode: vertical-rl;
     text-orientation: mixed;
     transform: rotate(180deg);
     font-size: 38px; 
     letter-spacing: 1px;
     margin-top: 40px; 
}


/* ==========================================================================
   📈 FORCE ZOOM: CALIBRACIÓN EXCLUSIVA PARA EL PREVIO Y CLON
   ========================================================================== */

/* --- Ajustes en Modo Horizontal --- */
.font-caveat#pfTextoPreview, .font-caveat.pf-texto-clonado-modal        { font-size: 42px !important; }
.font-gothic#pfTextoPreview, .font-gothic.pf-texto-clonado-modal        { font-size: 38px !important; }
.font-monoton#pfTextoPreview, .font-monoton.pf-texto-clonado-modal      { font-size: 25px !important; }
.font-diplomata#pfTextoPreview, .font-diplomata.pf-texto-clonado-modal  { font-size: 17px !important; }
.font-pressstart#pfTextoPreview, .font-pressstart.pf-texto-clonado-modal { font-size: 24px !important; letter-spacing: -1px; }

/* --- Ajustes en Modo Vertical --- */
.orientation-vertical .font-bebas {
     font-size: 46px !important; 
}
.orientation-vertical .font-pacifico {
     font-size: 34px !important; 
}
.orientation-vertical .font-caveat#pfTextoPreview, .orientation-vertical .font-caveat.pf-texto-clonado-modal {
     font-size: 52px !important;
     margin-top: 20px;
}
.orientation-vertical .font-gothic#pfTextoPreview, .orientation-vertical .font-gothic.pf-texto-clonado-modal {
     font-size: 46px !important;
     margin-top: 30px;
}
.orientation-vertical .font-pressstart#pfTextoPreview, .orientation-vertical .font-pressstart.pf-texto-clonado-modal {
     font-size: 32px !important;
     letter-spacing: -2px;
     margin-top: 40px;
}
.orientation-vertical .font-diplomata#pfTextoPreview, .orientation-vertical .font-diplomata.pf-texto-clonado-modal {
     font-size: 34px !important;
     margin-top: 40px;
}
.orientation-vertical .font-monoton#pfTextoPreview, .orientation-vertical .font-monoton.pf-texto-clonado-modal {
     font-size: 42px !important;
     margin-top: 30px;
}

/* ==========================================================================
   CUADRICULA DE COLORES DE WOOCOMMERCE
   ========================================================================== */
.pf-nombres-scope .colores-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
     gap: 12px;
}

.pf-nombres-scope .color-option {
     border: 2px solid #e2e8f0;
     border-radius: 8px;
     padding: 8px;
     text-align: center;
     cursor: pointer;
     transition: all 0.2s ease;
     background: #fff;
}

.pf-nombres-scope .color-option.active {
     border-color: #a88454;
     box-shadow: 0 2px 8px rgba(168, 132, 84, 0.2);
}

.pf-nombres-scope .color-swatch {
     width: 100%;
     aspect-ratio: 1;
     margin-bottom: 6px;
     border-radius: 4px;
     overflow: hidden;
     background: #f1f5f9;
}

.pf-nombres-scope .color-swatch img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.pf-nombres-scope .color-option span {
     display: block;
     font-size: 12px;
     font-weight: 500;
     color: #475569;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}

.pf-nombres-scope .color-option.no-disponible {
     opacity: 0.5;
     position: relative;
     cursor: not-allowed;
}

/* ==========================================================================
   GRID VISUAL DE FUENTES
   ========================================================================== */
.pf-fuentes-visual-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr); 
     gap: 10px;
     margin-top: 10px;
}

.pf-fuentes-visual-grid .fuente-opt {
     background: #f8fafc;
     border: 2px solid #cbd5e1;
     border-radius: 8px;
     padding: 12px 0;
     text-align: center;
     cursor: pointer;
     transition: all 0.25s ease;
     user-select: none;
}

.pf-fuentes-visual-grid .fuente-opt span {
     font-size: 28px;
     color: #334155;
     display: block;
     line-height: 1;
}

.pf-fuentes-visual-grid .fuente-opt.active {
     border-color: #a88454;
     background: #fff;
     box-shadow: 0 4px 12px rgba(168, 132, 84, 0.15);
}

.pf-fuentes-visual-grid .fuente-opt.active span {
     color: #a88454;
     font-weight: bold;
}

.pf-fuentes-visual-grid .font-caveat     { font-size: 24px !important; }
.pf-fuentes-visual-grid .font-gothic     { font-size: 22px !important; }
.pf-fuentes-visual-grid .font-pressstart { font-size: 14px !important; }
.pf-fuentes-visual-grid .font-diplomata  { font-size: 16px !important; }
.pf-fuentes-visual-grid .font-monoton    { font-size: 20px !important; }

/* ==========================================================================
   COMPONENTES DEL FORMULARIO Y RESUMEN
   ========================================================================== */
.pf-input-box-wrapper {
     position: relative;
     width: 100%;
}

.pf-input-box-wrapper input[type="text"] {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #cbd5e1;
     border-radius: 6px;
     font-size: 16px;
     box-sizing: border-box;
}

.pf-char-counter {
     display: block;
     text-align: right;
     font-size: 12px;
     color: #94a3b8;
     margin-top: 5px;
}

.pf-radio-toggle-wrapper {
     display: flex;
     background: #f1f5f9;
     padding: 4px;
     border-radius: 8px;
     border: 1px solid #e2e8f0;
}

.pf-radio-toggle-wrapper input[type="radio"] {
     display: none;
}

.pf-radio-toggle-wrapper label {
     flex: 1;
     text-align: center;
     padding: 10px;
     margin: 0;
     cursor: pointer;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 600;
     color: #64748b;
     transition: all 0.2s ease;
}

.pf-radio-toggle-wrapper input[type="radio"]:checked + label {
     background: #ffffff;
     color: #0f172a;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.pf-nombres-scope select {
     width: 100%;
     padding: 10px;
     border-radius: 6px;
     border: 1px solid #cbd5e1;
     background-color: #fff;
}

.pf-nombres-scope .resumen-pedido {
     background: #f8fafc;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     padding: 20px;
}

.pf-nombres-scope .resumen-details {
     margin-bottom: 15px;
}

.pf-nombres-scope .resumen-item {
     font-size: 14px;
     margin-bottom: 6px;
     color: #475569;
}

.pf-nombres-scope .precio-total {
     border-top: 1px solid #e2e8f0;
     padding-top: 15px;
     margin-bottom: 15px;
}

.pf-nombres-scope .precio-final {
     font-size: 24px;
     font-weight: bold;
     color: #1e293b;
}

.pf-nombres-scope .cantidad-controls {
     display: flex;
     align-items: center;
     gap: 5px;
     margin-bottom: 15px;
}

.pf-nombres-scope .btn-cantidad {
     width: 35px;
     height: 35px;
     background: #e2e8f0;
     border: none;
     cursor: pointer;
     font-weight: bold;
     border-radius: 4px;
}

.pf-nombres-scope .input-cantidad {
     width: 50px;
     height: 35px;
     text-align: center;
     border: 1px solid #cbd5e1;
     border-radius: 4px;
}

.pf-nombres-scope .btn-ver-previo {
     width: 100%;
     padding: 12px;
     background: #0f172a;
     color: #fff;
     border: none;
     border-radius: 6px;
     font-weight: bold;
     cursor: pointer;
     text-transform: uppercase;
     font-size: 13px;
     letter-spacing: 0.5px;
}

/* MAPEO DE FUENTES */
.font-montserrat { font-family: 'Montserrat', sans-serif; font-weight: 800; }
.font-playfair   { font-family: 'Playfair Display', serif; font-weight: 700; font-style: italic; }
.font-pacifico   { font-family: 'Pacifico', cursive; }
.font-bebas      { font-family: 'Bebas Neue', sans-serif; letter-spacing: 1px; }
.font-playwrite  { font-family: 'Playwrite MX Guides', cursive; }
.font-dancing    { font-family: 'Dancing Script', cursive; font-weight: 700; }
.font-caveat     { font-family: 'Caveat', cursive; font-weight: 700; }
.font-notoserif  { font-family: 'Noto Serif JP', serif; font-weight: 700; }
.font-pressstart { font-family: 'Press Start 2P', cursive; }
.font-diplomata  { font-family: 'Diplomata', serif; }
.font-monoton    { font-family: 'Monoton', cursive; }
.font-symbols    { font-family: 'Noto Sans Symbols', sans-serif; font-weight: 700; }
.font-gothic     { font-family: 'UnifrakturMaguntia', cursive; }
.font-righteous  { font-family: 'Righteous', cursive; }
.font-russo      { font-family: 'Russo One', sans-serif; }

/* RESPONSIVO MOBILE */
@media (max-width: 768px) {
     .pf-nombres-scope .personalizador-wrapper {
          flex-direction: column;
     }
     .pf-nombres-scope .columna-izquierda,
     .pf-nombres-scope .columna-derecha {
          max-width: 100%;
     }
     .pf-fuentes-visual-grid {
          grid-template-columns: repeat(4, 1fr);
          gap: 6px;
     }
     .pf-fuentes-visual-grid .fuente-opt span { font-size: 22px; }
     .pf-fuentes-visual-grid .font-caveat     { font-size: 20px !important; }
     .pf-fuentes-visual-grid .font-gothic     { font-size: 18px !important; }
     .pf-fuentes-visual-grid .font-pressstart { font-size: 11px !important; }
     .pf-fuentes-visual-grid .font-diplomata  { font-size: 13px !important; }
     .pf-fuentes-visual-grid .font-monoton    { font-size: 16px !important; }
     
     #pfTextoPreview, .pf-texto-clonado-modal {
          font-size: 18px;
     }
     .pf-nombres-scope .termo-preview {
          max-width: 420px;
     }

     .pf-nombres-scope .font-caveat#pfTextoPreview, .font-caveat.pf-texto-clonado-modal       { font-size: 28px !important; }
     .pf-nombres-scope .font-gothic#pfTextoPreview, .font-gothic.pf-texto-clonado-modal       { font-size: 26px !important; }
     .pf-nombres-scope .font-monoton#pfTextoPreview, .font-monoton.pf-texto-clonado-modal     { font-size: 22px !important; }
     .pf-nombres-scope .font-diplomata#pfTextoPreview, .font-diplomata.pf-texto-clonado-modal { font-size: 18px !important; }
     .pf-nombres-scope .font-pressstart#pfTextoPreview, .font-pressstart.pf-texto-clonado-modal { font-size: 16px !important; }
}

/* ==========================================================================
   🖥️ MODAL ESTILO OVERLAY DE IMAGEN (LIGHTBOX)
   ========================================================================== */
.pf-modal-overlay {
     position: fixed !important;
     top: 0 !important;
     left: 0 !important;
     width: 100vw !important;
     height: 100vh !important;
     background: rgba(15, 23, 42, 0.85) !important; 
     backdrop-filter: blur(4px); 
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     z-index: 999999 !important; 
     opacity: 0;
     pointer-events: none;
     visibility: hidden; 
     transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pf-modal-overlay.open {
     opacity: 1 !important;
     pointer-events: auto !important;
     visibility: visible !important;
}

.pf-modal-wrapper {
     background: #ffffff !important;
     color: #222222 !important;
     border-radius: 16px;
     width: 90% !important;
     max-width: 1050px !important; /* 🚀 Ajustado de 850px a 1050px para dar espacio al nuevo contenedor grande */
     padding: 30px !important;
     position: relative !important;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
     transform: scale(0.9);
     transition: transform 0.3s ease;
     z-index: 1000000 !important;
}

.pf-modal-overlay.open .pf-modal-wrapper {
     transform: scale(1) !important;
}

.pf-modal-close {
     position: absolute !important;
     top: 15px !important;
     right: 20px !important;
     background: none !important;
     border: none !important;
     font-size: 32px !important;
     cursor: pointer !important;
     color: #64748b !important;
     line-height: 1 !important;
     z-index: 1000002 !important;
     transition: color 0.2s;
}

.pf-modal-close:hover {
     color: #ff3333 !important; 
}

.pf-modal-layout {
     display: flex !important;
     flex-direction: row !important;
     gap: 35px !important;
     align-items: stretch !important; /* Estira ambas columnas por igual */
     margin-top: 15px !important;
}

/* 📦 EL CONTENEDOR (TU VENTANA DE RECORTE VERTICAL) */
.pf-modal-image-zone {
     width: 450px !important;       /* El ancho de tu barra */
     height: 560px !important;      /* 🚀 La altura imponente que buscas */
     flex: none !important;          
     background: #f8fafc !important;
     border-radius: 12px !important;
     position: relative !important; 
     overflow: hidden !important;   /* ✂️ Corta todo lo que se salga de los bordes laterales */
     
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
}

/* Aseguramos que el contenedor de la preview ocupe el total de la caja */
.pf-modal-image-zone .termo-preview {
     width: 100% !important;
     height: 100% !important;
}

/* 🎯 CONFIGURACIÓN UNIFICADA DE LA IMAGEN: RECORTE SIN ZOOM ARTIFICIAL */
.pf-modal-image-zone .termo-base,
.pf-modal-image-zone img {
     width: 100% !important;        /* Forzado a ocupar el ancho de la caja */
     height: 555px !important;       /* 🚀 Forzado a ocupar los 700px de alto */
     object-fit: cover !important;  /* 🧭 Centra el termo, estira a lo alto y oculta los costados sobrantes */
     object-position: center !important; 
     transform: none !important;    /* 🔒 Evitamos distorsiones por escalas externas */
     display: block !important;
}

.pf-modal-info-zone {
     flex: 1 !important;
     display: flex !important;
     flex-direction: column !important;
     justify-content: space-between !important;
}

.pf-modal-info-zone h3 {
     margin-top: 0 !important;
     font-size: 20px !important;
     color: #0f172a !important;
     border-bottom: 2px solid #f1f5f9 !important;
     padding-bottom: 10px !important;
}

.pf-ficha-tecnica {
     margin: 20px 0 !important;
}

.pf-ficha-tecnica p {
     font-size: 14px !important;
     margin-bottom: 10px !important;
     color: #334155 !important;
}

.pf-ficha-tecnica strong {
     color: #0f172a !important;
}

.pf-btn-action-success {
     width: 100% !important;
     padding: 14px !important;
     background: #a88454 !important; 
     color: #fff !important;
     border: none !important;
     border-radius: 8px !important;
     font-weight: bold !important;
     font-size: 14px !important;
     text-transform: uppercase !important;
     cursor: pointer !important;
     letter-spacing: 0.5px !important;
     transition: background 0.2s;
}

.pf-btn-action-success:hover {
     background: #8c6d43 !important;
}

@media (max-width: 768px) {
     .pf-modal-layout {
          flex-direction: column !important;
          gap: 20px !important;
     }
     .pf-modal-wrapper {
          width: 95% !important;
          padding: 20px !important;
          height: auto !important;
          max-height: 90vh !important;
          overflow-y: auto !important;
     }
}

/* 🎯 CAPA DEL TEXTO GRABADO DENTRO DEL MODAL */
.pf-modal-image-zone .pf-layer-texto-container {
     position: absolute !important;
     top: 0 !important;
     left: 0 !important;
     width: 100% !important;
     height: 100% !important;
     padding: 41% 18% 25% !important;
     box-sizing: border-box !important;
     pointer-events: none !important;
}