/**
 * P&D Certificación - Estilos del Verificador Público
 * 
 * v7.6.6 - Paleta simplificada: blanco + grises + azul P&D
 * 
 * Variables disponibles:
 * --pyd-primary, --pyd-primary-hover, --pyd-secondary
 * --pyd-text, --pyd-text-light, --pyd-headings
 * --pyd-border, --pyd-background, --pyd-background-alt
 * --pyd-success, --pyd-warning, --pyd-error
 */

/* ==========================================================================
   VARIABLES CSS - Paleta v7.6.6
   ========================================================================== */

.pyd-verificador,
.pyd-centro-descargas,
.pyd-myaccount-section {
    /* Colores base - Modo claro */
    --pyd-primary: #0070C0;           /* Azul P&D corporativo */
    --pyd-primary-hover: #005a9e;     /* Azul P&D oscuro */
    --pyd-primary-light: rgba(0, 112, 192, 0.1);
    --pyd-secondary: #005a9e;
    
    /* Textos */
    --pyd-text: #374151;              /* Gris oscuro legible */
    --pyd-text-light: #6B7280;        /* Gris medio */
    --pyd-headings: #1F2937;          /* Casi negro para títulos */
    
    /* Fondos y bordes */
    --pyd-background: #FFFFFF;        /* Blanco puro */
    --pyd-background-alt: #F9FAFB;    /* Gris muy claro */
    --pyd-border: #D1D5DB;            /* Gris suave para bordes */
    
    /* Estados */
    --pyd-success: #059669;           /* Verde esmeralda */
    --pyd-success-light: rgba(5, 150, 105, 0.1);
    --pyd-warning: #D97706;           /* Ámbar */
    --pyd-warning-light: rgba(217, 119, 6, 0.1);
    --pyd-error: #DC2626;             /* Rojo */
    --pyd-error-light: rgba(220, 38, 38, 0.1);
    
    /* Disabled state */
    --pyd-disabled: #9CA3AF;          /* Gris para disabled */
    --pyd-disabled-bg: #E5E7EB;       /* Fondo disabled */
    
    /* Utilidades */
    --pyd-radius: 8px;
    --pyd-radius-lg: 12px;
    --pyd-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pyd-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    --pyd-transition: 0.2s ease;
}

/* Dark mode support (preparado para futuro) */
@media (prefers-color-scheme: dark) {
    .pyd-verificador,
    .pyd-centro-descargas {
        /* Se activará cuando implementemos tema oscuro global */
        /* --pyd-background: #1e293b; */
        /* --pyd-background-alt: #0f172a; */
        /* --pyd-text: #cbd5e1; */
        /* --pyd-text-light: #94a3b8; */
        /* --pyd-headings: #f1f5f9; */
        /* --pyd-border: #334155; */
    }
}

/* ==========================================================================
   VERIFICADOR PRINCIPAL
   ========================================================================== */

.pyd-verificador {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    /* Forzar modo claro - sobrescribir tema Blocksy */
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    border-radius: var(--pyd-radius-lg);
    box-shadow: var(--pyd-shadow);
    color: #374151 !important;
}

/* Header */
.pyd-verificador-header {
    text-align: center;
    margin-bottom: 2rem;
}

.pyd-verificador-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    padding: 1rem;
    background: rgba(0, 112, 192, 0.1) !important;
    border-radius: 50%;
    color: #0070C0 !important;
}

.pyd-verificador-icon svg {
    width: 100%;
    height: 100%;
}

.pyd-verificador-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937 !important;
    margin: 0 0 0.5rem;
}

.pyd-verificador-subtitle {
    font-size: 0.95rem;
    color: #6B7280 !important;
    margin: 0;
}

/* ==========================================================================
   FORMULARIO
   ========================================================================== */

.pyd-verificador-form {
    margin-bottom: 1.5rem;
}

.pyd-input-group {
    margin-bottom: 1.5rem;
}

/* Nota informativa sobre el campo de entrada */
.pyd-nota-serie {
    font-size: 13px;
    color: #6B7280 !important;
    background: #F9FAFB !important;
    border-left: 3px solid #0070C0;
    padding: 10px 14px;
    margin: 0 0 15px 0;
    border-radius: 0 var(--pyd-radius) var(--pyd-radius) 0;
    line-height: 1.5;
}

.pyd-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1F2937 !important;
    margin-bottom: 0.5rem;
}

.pyd-input-wrapper {
    position: relative;
}

.pyd-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    letter-spacing: 0.05em;
    color: #374151 !important;
    background: #FFFFFF !important;
    border: 2px solid #D1D5DB !important;
    border-radius: var(--pyd-radius);
    transition: border-color var(--pyd-transition), box-shadow var(--pyd-transition);
    box-sizing: border-box;
}

.pyd-input:focus {
    outline: none;
    border-color: #0070C0 !important;
    box-shadow: 0 0 0 3px rgba(0, 112, 192, 0.1);
}

.pyd-input::placeholder {
    color: #6B7280 !important;
    opacity: 0.6;
}

.pyd-input-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    opacity: 0.5;
}

.pyd-input-hint {
    font-size: 0.8rem;
    color: var(--pyd-text-light);
    margin: 0.5rem 0 0;
}

/* Lista de series (modo múltiple) */
.pyd-series-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pyd-serie-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pyd-serie-row .pyd-input {
    flex: 1;
}

.pyd-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--pyd-border);
    border-radius: var(--pyd-radius);
    color: var(--pyd-text-light);
    cursor: pointer;
    transition: all var(--pyd-transition);
}

.pyd-btn-icon:hover {
    background: var(--pyd-error-light);
    border-color: var(--pyd-error);
    color: var(--pyd-error);
}

.pyd-btn-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    color: #0070C0 !important;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--pyd-transition);
}

.pyd-btn-link:hover {
    color: #005a9e !important;
    text-decoration: underline;
}

.pyd-btn-link span {
    font-size: 1.25rem;
    font-weight: 300;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.pyd-verificador-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pyd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--pyd-radius);
    cursor: pointer;
    transition: all var(--pyd-transition);
}

.pyd-btn:disabled {
    background: var(--pyd-disabled-bg) !important;
    color: var(--pyd-disabled) !important;
    border-color: var(--pyd-disabled-bg) !important;
    cursor: not-allowed;
    opacity: 1; /* Usamos colores específicos en lugar de opacity */
}

.pyd-btn:disabled:hover {
    background: var(--pyd-disabled-bg) !important;
    transform: none;
}

.pyd-btn-primary {
    background: var(--pyd-primary);
    color: #ffffff;
    border-color: var(--pyd-primary);
}

.pyd-btn-primary:hover:not(:disabled) {
    background: var(--pyd-primary-hover);
    border-color: var(--pyd-primary-hover);
}

.pyd-btn-secondary {
    background: var(--pyd-background-alt);
    color: var(--pyd-text);
    border-color: var(--pyd-border);
}

.pyd-btn-secondary:hover:not(:disabled) {
    background: var(--pyd-border);
}

.pyd-btn-success {
    background: var(--pyd-success);
    color: #ffffff;
    border-color: var(--pyd-success);
}

.pyd-btn-success:hover:not(:disabled) {
    background: #059669;
    border-color: #059669;
}

.pyd-btn-outline {
    background: transparent;
    color: var(--pyd-primary);
    border-color: var(--pyd-primary);
}

.pyd-btn-outline:hover:not(:disabled) {
    background: var(--pyd-primary);
    color: #ffffff;
}

.pyd-btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Spinner */
.pyd-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pyd-spin 0.75s linear infinite;
}

@keyframes pyd-spin {
    to { transform: rotate(360deg); }
}

.pyd-btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ==========================================================================
   TURNSTILE
   ========================================================================== */

.pyd-turnstile-container {
    margin: 1.5rem 0;
    display: flex;
    justify-content: center;
}

.pyd-turnstile-container .cf-turnstile {
    margin: 0 auto;
}

/* v8.2.6: Animación shake para Turnstile */
@keyframes pyd-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.pyd-turnstile-container.pyd-shake {
    animation: pyd-shake 0.5s ease-in-out;
}

/* Mensaje de error debajo del widget */
.pyd-turnstile-error {
    text-align: center;
    color: #DC2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* ==========================================================================
   RESULTADOS
   ========================================================================== */

.pyd-verificador-resultados {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--pyd-border);
}

.pyd-resultados-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1F2937 !important;
    margin: 0 0 1rem;
    text-align: center;
}

/* Resultado individual */
.pyd-resultado-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: #F9FAFB !important;
    border-radius: var(--pyd-radius);
    border-left: 4px solid #D1D5DB;
}

.pyd-resultado-item.pyd-resultado-ok {
    border-left-color: #059669;
    background: rgba(5, 150, 105, 0.1) !important;
}

.pyd-resultado-item.pyd-resultado-error {
    border-left-color: #DC2626;
    background: rgba(220, 38, 38, 0.1) !important;
}

.pyd-resultado-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pyd-resultado-content {
    flex: 1;
    min-width: 0;
}

.pyd-resultado-serie {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 1.125rem;
    font-weight: 600;
    color: #1F2937 !important;
    margin: 0 0 0.25rem;
}

.pyd-resultado-mensaje {
    font-size: 0.875rem;
    color: #374151 !important;
    margin: 0 0 0.5rem;
}

.pyd-resultado-detalles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 0.8rem;
    color: #6B7280 !important;
}

.pyd-resultado-detalles span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Badge de blindaje */
.pyd-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    background: var(--pyd-primary);
    color: #ffffff;
}

/* Badge NIJ básico - sin estilos especiales, se define en sección de tarjetas */
.pyd-badge-nij {
    /* Estilos definidos más abajo para tarjetas de certificado */
}

/* ==========================================================================
   SECCIÓN SOLICITAR
   ========================================================================== */

.pyd-solicitar-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--pyd-background-alt);
    border-radius: var(--pyd-radius);
    border: 1px solid var(--pyd-border);
}

.pyd-solicitar-header h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pyd-headings);
    margin: 0 0 0.25rem;
}

/* v7.6.20: Estilos de acordeón personalizado eliminados
   Ahora usa <details>/<summary> nativo con clase .pyd-accordion */

.pyd-cliente-detectado {
    font-size: 0.85rem;
    color: var(--pyd-text);
    margin: 1rem 0;
    text-align: center;
    padding: 1rem 1.25rem;
    border-radius: var(--pyd-radius);
    background: #f5f5f5;
    border: 1px solid #ddd;
}

.pyd-cliente-detectado strong {
    color: var(--pyd-primary);
}

/* Nota de envío - estilo IDÉNTICO a nota 72h v8.1.4 */
.pyd-nota-envio {
    font-size: 13px;
    color: var(--pyd-text);
    margin: 15px 0;
    padding: 10px;
    background: #e6f3ff;
    border-left: 4px solid var(--pyd-primary);
    border-radius: 4px;
}

/* Radio buttons */
.pyd-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pyd-radio {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--pyd-background);
    border: 2px solid var(--pyd-border);
    border-radius: var(--pyd-radius);
    cursor: pointer;
    transition: all var(--pyd-transition);
}

.pyd-radio:hover {
    border-color: var(--pyd-primary);
}

.pyd-radio input {
    display: none;
}

.pyd-radio-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--pyd-border);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: all var(--pyd-transition);
}

.pyd-radio input:checked + .pyd-radio-box {
    border-color: var(--pyd-primary);
}

.pyd-radio input:checked + .pyd-radio-box::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: var(--pyd-primary);
    border-radius: 50%;
}

.pyd-radio-label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pyd-radio-label strong {
    font-size: 0.9rem;
    color: var(--pyd-headings);
}

.pyd-radio-label small {
    font-size: 0.8rem;
    color: var(--pyd-text-light);
}

/* Checkbox Group - Para selección múltiple de certificados */
.pyd-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.pyd-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--pyd-background);
    border: 2px solid var(--pyd-border);
    border-radius: var(--pyd-radius);
    cursor: pointer;
    transition: all var(--pyd-transition);
}

.pyd-checkbox:hover {
    border-color: var(--pyd-primary);
}

.pyd-checkbox input {
    display: none;
}

.pyd-checkbox-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--pyd-border);
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: all var(--pyd-transition);
}

.pyd-checkbox input:checked + .pyd-checkbox-box {
    border-color: var(--pyd-primary);
    background: var(--pyd-primary);
}

.pyd-checkbox input:checked + .pyd-checkbox-box::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.pyd-checkbox-label {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pyd-checkbox-label strong {
    font-size: 0.9rem;
    color: var(--pyd-headings);
}

.pyd-checkbox-label small {
    font-size: 0.8rem;
    color: var(--pyd-text-light);
}

/* Textarea */
.pyd-textarea-group {
    margin-bottom: 1rem;
}

.pyd-textarea-group label {
    display: block;
    font-size: 0.875rem;
    color: var(--pyd-text);
    margin-bottom: 0.5rem;
}

.pyd-textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 0.9rem;
    color: var(--pyd-text);
    background: var(--pyd-background);
    border: 1px solid var(--pyd-border);
    border-radius: var(--pyd-radius);
    resize: vertical;
    box-sizing: border-box;
}

.pyd-textarea:focus {
    outline: none;
    border-color: var(--pyd-primary);
}

/* ==========================================================================
   ALERTAS
   ========================================================================== */

.pyd-alert {
    padding: 1rem 1.25rem;
    border-radius: var(--pyd-radius);
    margin: 1rem 0;
}

.pyd-alert p {
    margin: 0 0 0.75rem;
}

.pyd-alert p:last-child {
    margin-bottom: 0;
}

.pyd-alert-info {
    background: var(--pyd-primary-light);
    border: 1px solid var(--pyd-primary);
    color: var(--pyd-text);
}

.pyd-alert-success {
    background: var(--pyd-success-light);
    border: 1px solid var(--pyd-success);
}

.pyd-alert-warning {
    background: var(--pyd-warning-light);
    border: 1px solid var(--pyd-warning);
}

.pyd-alert-error {
    background: var(--pyd-error-light);
    border: 1px solid var(--pyd-error);
}

/* ==========================================================================
   ACORDEÓN (INFO)
   ========================================================================== */

.pyd-verificador-info {
    margin-top: 2rem;
}

.pyd-accordion {
    border: 1px solid #D1D5DB !important;
    border-radius: var(--pyd-radius);
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.pyd-accordion summary {
    padding: 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1F2937 !important;
    background: #F9FAFB !important;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pyd-accordion summary::-webkit-details-marker {
    display: none;
}

.pyd-accordion summary::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: #6B7280 !important;
}

.pyd-accordion[open] summary::after {
    content: '−';
}

.pyd-accordion-content {
    padding: 1rem;
    font-size: 0.875rem;
    color: #374151 !important;
    background: #FFFFFF !important;
}

.pyd-accordion-content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.pyd-accordion-content li {
    margin-bottom: 0.25rem;
}

.pyd-accordion-content code {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.85em;
    padding: 0.125rem 0.375rem;
    background: #F9FAFB !important;
    border-radius: 3px;
    color: #0070C0 !important;
}

.pyd-table-mini {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.pyd-table-mini td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--pyd-border);
}

.pyd-table-mini tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   CENTRO DE DESCARGAS
   ========================================================================== */

.pyd-centro-descargas {
    padding: 1rem 0;
}

.pyd-centro-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pyd-headings);
    margin: 0 0 1.5rem;
}

.pyd-certificados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.pyd-cert-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: var(--pyd-background);
    border: 1px solid var(--pyd-border);
    border-radius: var(--pyd-radius);
    transition: all var(--pyd-transition);
}

.pyd-cert-card:hover {
    border-color: var(--pyd-primary);
    box-shadow: var(--pyd-shadow-lg);
}

.pyd-cert-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
    color: var(--pyd-primary);
}

.pyd-cert-icon svg {
    width: 100%;
    height: 100%;
}

.pyd-cert-content {
    flex: 1;
}

.pyd-cert-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pyd-headings);
    margin: 0 0 0.5rem;
}

.pyd-cert-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.pyd-cert-meta span {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: var(--pyd-background-alt);
    color: var(--pyd-text-light);
}

.pyd-cert-nivel {
    background: var(--pyd-primary-light) !important;
    color: var(--pyd-primary) !important;
    font-weight: 600;
}

.pyd-cert-norma {
    font-size: 0.8rem;
    color: var(--pyd-text-light);
    margin: 0;
}

.pyd-cert-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pyd-border);
}

.pyd-cert-login-required {
    font-size: 0.8rem;
    color: var(--pyd-text-light);
}

.pyd-cert-login-required a {
    color: var(--pyd-primary);
}

/* ==========================================================================
   MY ACCOUNT (WooCommerce)
   ========================================================================== */

.pyd-myaccount-section {
    padding: 1rem 0;
}

.pyd-section-header {
    margin-bottom: 1.5rem;
}

.pyd-section-header h3 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--pyd-text-light);
    margin: 0;
}

.pyd-cliente-nombre {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pyd-headings);
    margin: 0.25rem 0 0;
}

.pyd-count {
    font-size: 0.9rem;
    color: var(--pyd-text-light);
    margin-bottom: 1rem;
}

.pyd-status {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
}

.pyd-status-vigente {
    background: var(--pyd-success-light);
    color: var(--pyd-success);
}

.pyd-status-expirada {
    background: var(--pyd-error-light);
    color: var(--pyd-error);
}

.pyd-actions {
    margin-top: 1.5rem;
}

/* Series list en My Account */
.pyd-series-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pyd-series-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--pyd-background-alt);
    border: 1px solid var(--pyd-border);
    border-radius: var(--pyd-radius);
}

.pyd-series-list code {
    font-family: 'SF Mono', monospace;
    font-size: 0.9rem;
}

.pyd-remove-serie {
    width: 20px;
    height: 20px;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--pyd-text-light);
    cursor: pointer;
    border-radius: 50%;
    transition: all var(--pyd-transition);
}

.pyd-remove-serie:hover {
    background: var(--pyd-error-light);
    color: var(--pyd-error);
}

.pyd-empty-message {
    padding: 1rem;
    text-align: center;
    color: var(--pyd-text-light);
    font-style: italic;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .pyd-verificador {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    .pyd-verificador-title {
        font-size: 1.25rem;
    }
    
    .pyd-verificador-actions {
        flex-direction: column;
    }
    
    .pyd-btn {
        width: 100%;
    }
    
    .pyd-certificados-grid {
        grid-template-columns: 1fr;
    }
    
    .pyd-radio {
        padding: 0.75rem;
    }
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

@keyframes pyd-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pyd-resultado-item {
    animation: pyd-fade-in 0.3s ease;
}

/* Shake animation para errores */
@keyframes pyd-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

.pyd-input.pyd-input-error {
    border-color: var(--pyd-error);
    animation: pyd-shake 0.4s ease;
}

/* ==========================================================================
   TABLA DE PRODUCTOS EN CERTIFICADO
   ========================================================================== */

.pyd-resultado-certificado {
    padding-bottom: 0;
}

.pyd-certificado-productos {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pyd-border);
}

.pyd-certificado-productos h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pyd-headings);
}

.pyd-productos-tabla {
    overflow-x: auto;
    margin: 0 -1rem;
    padding: 0 1rem;
}

.pyd-productos-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.pyd-productos-tabla th,
.pyd-productos-tabla td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--pyd-border);
}

.pyd-productos-tabla th {
    background: var(--pyd-background-alt);
    font-weight: 600;
    color: var(--pyd-text-light);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pyd-productos-tabla td code {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.85rem;
    background: var(--pyd-background-alt);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    color: var(--pyd-primary);
}

.pyd-productos-tabla tbody tr:hover {
    background: var(--pyd-background-alt);
}

.pyd-productos-tabla .pyd-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
}

/* Responsive para tabla de productos */
@media (max-width: 480px) {
    .pyd-productos-tabla th,
    .pyd-productos-tabla td {
        padding: 0.4rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .pyd-productos-tabla td code {
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   VISTA DE CERTIFICADO VERIFICADO (v7.5.0)
   ========================================================================== */

.pyd-verificador-certificado {
    background: var(--pyd-background);
    border: 1px solid var(--pyd-border);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

/* Header del certificado */
.pyd-cert-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--pyd-border);
}

.pyd-cert-estado {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.pyd-estado-activo {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.pyd-estado-revocado {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.pyd-estado-icono {
    font-size: 1.2rem;
}

.pyd-cert-numero {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pyd-text);
    margin: 0.5rem 0;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.pyd-cert-tipo {
    color: var(--pyd-text-light);
    font-size: 0.9rem;
    margin: 0;
}

/* Grid de información */
.pyd-cert-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pyd-info-item {
    background: var(--pyd-background-alt);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid var(--pyd-primary);
}

.pyd-info-item.pyd-info-revocado {
    border-left-color: #dc2626;
    background: #fef2f2;
}

.pyd-info-label {
    display: block;
    font-size: 0.75rem;
    color: var(--pyd-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.pyd-info-value {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pyd-text);
}

/* Sección de productos */
.pyd-cert-productos h4 {
    margin: 1.5rem 0 1rem 0;
    font-size: 1rem;
    color: var(--pyd-text);
}

.pyd-cert-tabla-wrapper {
    overflow-x: auto;
    margin-bottom: 1.5rem;
}

.pyd-cert-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pyd-cert-tabla th,
.pyd-cert-tabla td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--pyd-border);
}

.pyd-cert-tabla th {
    background: var(--pyd-background-alt);
    font-weight: 600;
    color: var(--pyd-text-light);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.pyd-cert-tabla td code {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    background: var(--pyd-background-alt);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--pyd-primary);
}

/* Visor de PDF */
.pyd-cert-pdf h4 {
    margin: 1.5rem 0 1rem 0;
    font-size: 1rem;
    color: var(--pyd-text);
}

.pyd-pdf-viewer-container {
    background: #f5f5f5;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.pyd-pdf-iframe {
    width: 100%;
    height: 500px;
    border: none;
}

.pyd-pdf-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Overlay de revocado */
.pyd-cert-revocado-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(220, 38, 38, 0.05);
    pointer-events: none;
    z-index: 10;
}

.pyd-revocado-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    background: rgba(220, 38, 38, 0.9);
    color: white;
    padding: 1rem 3rem;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 8px;
    text-align: center;
    white-space: nowrap;
}

/* Acciones del certificado */
.pyd-cert-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pyd-border);
    text-align: center;
}

/* Estado de carga */
.pyd-verificador-form.pyd-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 640px) {
    .pyd-verificador-certificado {
        padding: 1rem;
    }
    
    .pyd-cert-numero {
        font-size: 1.2rem;
    }
    
    .pyd-cert-info-grid {
        grid-template-columns: 1fr;
    }
    
    .pyd-pdf-iframe {
        height: 350px;
    }
    
    .pyd-revocado-banner {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    
    .pyd-pdf-actions {
        flex-direction: column;
    }
    
    .pyd-pdf-actions .pyd-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   v7.6.8 - NUEVA UX: Input + Lupita + Notas Desplegables
   ========================================================================== */

/* Label con botones circulares de ayuda */
.pyd-label-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.pyd-label-text {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
}

/* Error inline junto al label */
.pyd-inline-error {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-left: auto !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

.pyd-inline-error.pyd-error-warning {
    color: #D97706 !important;
    background: rgba(217, 119, 6, 0.1) !important;
}

.pyd-inline-error.pyd-error-danger {
    color: #DC2626 !important;
    background: rgba(220, 38, 38, 0.1) !important;
}

/* Botones circulares de ayuda */
.pyd-help-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: 1px solid #D1D5DB !important;
    background: #FFFFFF !important;
    color: #6B7280 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.pyd-help-btn:hover {
    border-color: #0070C0 !important;
    color: #0070C0 !important;
    background: rgba(0, 112, 192, 0.05) !important;
}

.pyd-help-btn.active {
    border-color: #0070C0 !important;
    color: #FFFFFF !important;
    background: #0070C0 !important;
}

/* Notas desplegables */
.pyd-help-note {
    display: none;
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
    background: #F3F4F6 !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
    color: #4B5563 !important;
    line-height: 1.5 !important;
}

.pyd-help-note.visible {
    display: block !important;
}

.pyd-help-note strong {
    color: #374151 !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.pyd-help-note ul {
    margin: 0 !important;
    padding-left: 18px !important;
}

.pyd-help-note li {
    margin-bottom: 4px !important;
}

.pyd-help-note a {
    color: #0070C0 !important;
    text-decoration: underline !important;
}

/* Input wrapper con lupita integrada */
.pyd-input-search-wrapper {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-bottom: 12px !important;
}

.pyd-input-search-wrapper .pyd-serie-input {
    flex: 1 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
    min-height: 48px !important;
}

.pyd-btn-search {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    min-height: 48px !important;
    background: #0070C0 !important;
    color: #FFFFFF !important;
    border: 1px solid #0070C0 !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    cursor: pointer !important;
    font-size: 1.2rem !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
}

.pyd-btn-search:hover {
    background: #005a9e !important;
    border-color: #005a9e !important;
}

.pyd-btn-search:disabled {
    background: #9CA3AF !important;
    border-color: #9CA3AF !important;
    cursor: not-allowed !important;
}

/* Botón limpiar centrado */
.pyd-limpiar-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-top: 16px !important;
}

.pyd-btn-limpiar-centered {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    background: #FFFFFF !important;
    color: #6B7280 !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pyd-btn-limpiar-centered:hover {
    color: #374151 !important;
    border-color: #9CA3AF !important;
    background: #F9FAFB !important;
}

/* Área de resultados con fondo gris visible */
.pyd-resultados-wrapper {
    margin-top: 20px !important;
}

.pyd-resultados {
    background: #E5E7EB !important;
    border-radius: 8px !important;
    padding: 16px !important;
    min-height: 60px !important;
}

.pyd-resultados:empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pyd-resultados:empty::before {
    content: "Los resultados aparecerán aquí" !important;
    color: #9CA3AF !important;
    font-size: 0.9rem !important;
    font-style: italic !important;
}

/* Resultado individual */
.pyd-resultado-item {
    background: #FFFFFF !important;
    border: 1px solid #D1D5DB !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

.pyd-resultado-item:last-child {
    margin-bottom: 0 !important;
}

/* Resultado exitoso - v8.0.5: Fondo verde claro simétrico */
.pyd-resultado-item.pyd-encontrado {
    border-left: 4px solid #059669 !important;
    background: #F0FDF4 !important; /* Verde muy claro, simétrico a #FEF2F2 */
}

.pyd-resultado-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

.pyd-resultado-icon {
    font-size: 1.5rem !important;
}

.pyd-resultado-titulo {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #1F2937 !important;
}

.pyd-resultado-titulo .pyd-serie {
    color: #0070C0 !important;
}

.pyd-resultado-subtitulo {
    font-size: 0.85rem !important;
    color: #059669 !important;
    font-weight: 500 !important;
}

.pyd-resultado-detalles {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    font-size: 0.9rem !important;
}

.pyd-resultado-detalle {
    display: flex !important;
    flex-direction: column !important;
}

.pyd-resultado-detalle-label {
    color: #6B7280 !important;
    font-size: 0.8rem !important;
}

.pyd-resultado-detalle-valor {
    color: #374151 !important;
    font-weight: 500 !important;
}

/* Resultado NO encontrado */
.pyd-resultado-item.pyd-no-encontrado {
    border-left: 4px solid #DC2626 !important;
    background: #FEF2F2 !important;
}

.pyd-resultado-item.pyd-no-encontrado .pyd-resultado-titulo {
    color: #DC2626 !important;
}

.pyd-resultado-mensaje-error {
    color: #7F1D1D !important;
    font-size: 0.9rem !important;
    margin-top: 8px !important;
}

.pyd-resultado-contacto {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #FECACA !important;
    font-size: 0.85rem !important;
    color: #374151 !important;
}

.pyd-resultado-contacto a {
    color: #0070C0 !important;
    text-decoration: none !important;
}

.pyd-resultado-contacto a:hover {
    text-decoration: underline !important;
}

/* Rate limit error */
.pyd-resultado-item.pyd-rate-limited {
    border-left: 4px solid #D97706 !important;
    background: #FFFBEB !important;
}

.pyd-resultado-item.pyd-rate-limited .pyd-resultado-titulo {
    color: #D97706 !important;
}

/* Validación error */
.pyd-resultado-item.pyd-validation-error {
    border-left: 4px solid #D97706 !important;
    background: #FFFBEB !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.pyd-resultado-item.pyd-validation-error .pyd-resultado-titulo {
    color: #D97706 !important;
}

.pyd-resultado-item.pyd-validation-error .pyd-resultado-header {
    justify-content: center !important;
}

.pyd-resultado-item.pyd-validation-error .pyd-resultado-mensaje-error {
    text-align: center !important;
}

/* Botón eliminar resultado individual */
.pyd-resultado-item {
    position: relative !important;
}

.pyd-btn-eliminar-item {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    opacity: 0.5 !important;
    transition: opacity 0.2s ease !important;
    padding: 4px !important;
    line-height: 1 !important;
}

.pyd-btn-eliminar-item:hover {
    opacity: 1 !important;
}

/* Acordeón NIJ */
.pyd-nij-accordion {
    margin-top: 12px !important;
}

.pyd-nij-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #0070C0 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

.pyd-nij-toggle:hover {
    text-decoration: underline !important;
}

.pyd-nij-content {
    display: none;
    margin-top: 10px !important;
    padding: 12px !important;
    background: #F9FAFB !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    color: #4B5563 !important;
}

.pyd-nij-content.visible {
    display: block !important;
}

/* Turnstile oculto por defecto */
.pyd-turnstile-wrapper {
    display: none !important;
}

.pyd-turnstile-wrapper.visible {
    display: block !important;
    margin-top: 12px !important;
}

/* Responsive v7.6.8 */
@media (max-width: 480px) {
    .pyd-resultado-detalles {
        grid-template-columns: 1fr !important;
    }
    
    .pyd-label-row {
        flex-wrap: wrap !important;
    }
    
    .pyd-btn-search {
        width: 48px !important;
    }
}

/* =========================================================================
   v7.6.23: AUTOCOMPLETE HINT - Sugerencia visual de autocompletado
   ========================================================================= */

/* Wrapper necesita position relative para hint absoluto */
.pyd-input-search-wrapper {
    position: relative !important;
}

/* Hint de autocompletado - superpuesto al input */
.pyd-autocomplete-hint {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 60px !important;
    height: 48px !important;
    padding: 14px 16px !important;
    font-family: 'Courier New', Consolas, monospace !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
    display: flex !important;
    align-items: center !important;
    z-index: 1 !important;
}

/* Parte ya escrita (invisible, para espaciado) */
.pyd-hint-actual {
    color: transparent !important;
    user-select: none !important;
}

/* Parte sugerida (texto fantasma en gris) */
.pyd-hint-sugerencia {
    color: #9CA3AF !important;
    user-select: none !important;
}

/* Emoji indicador */
.pyd-hint-icon {
    margin-left: 8px !important;
    font-size: 1.1rem !important;
    animation: pyd-sparkle 1.5s ease-in-out infinite !important;
    cursor: help !important;
    pointer-events: auto !important;
}

/* Animación sutil del emoji */
@keyframes pyd-sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Input debe ser transparente en fondo para ver el hint */
.pyd-serie-input {
    background: transparent !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Fondo blanco en el wrapper */
.pyd-input-search-wrapper {
    background: #FFFFFF !important;
}

/* Tooltip del emoji (usando title nativo, pero podemos mejorarlo) */
.pyd-hint-icon[title] {
    cursor: help !important;
}


/* =========================================================================
   v8.0.8: TARJETAS COMPACTAS DE 3 RENGLONES - MÁXIMA ESPECIFICIDAD
   Diseño centrado, minimalista, con información de garantía
   Selectores ultra-específicos para ganar sobre estilos legacy
   ========================================================================= */

/* Tarjeta base v7 - ANULAR flex/grid heredados */
#pyd_resultados_content_v768 .pyd-resultado-item.pyd-tarjeta-v7 {
    display: block !important;
    text-align: center !important;
    padding: 16px 20px !important;
}

/* Renglón 1: Verificación - MÁXIMA ESPECIFICIDAD */
#pyd_resultados_content_v768 .pyd-resultado-item.pyd-tarjeta-v7 .pyd-renglon-1 {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-check {
    color: #059669 !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-serie {
    color: #0070C0 !important;
    font-weight: 600 !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-autentico {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Renglón 2: Datos del producto - MÁXIMA ESPECIFICIDAD */
#pyd_resultados_content_v768 .pyd-resultado-item.pyd-tarjeta-v7 .pyd-renglon-2 {
    display: block !important;
    color: #4B5563 !important;
    margin-bottom: 6px !important;
    font-size: 14px !important;
    text-align: center !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-separador {
    color: #9CA3AF !important;
    margin: 0 8px !important;
}

/* Renglón 3: Garantía - MÁXIMA ESPECIFICIDAD */
#pyd_resultados_content_v768 .pyd-resultado-item.pyd-tarjeta-v7 .pyd-renglon-3 {
    display: block !important;
    font-size: 14px !important;
    text-align: center !important;
}

/* Estados de garantía - MÁXIMA ESPECIFICIDAD */
#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-renglon-3.pyd-garantia-vigente {
    color: #059669 !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-renglon-3.pyd-garantia-expirada {
    color: #DC2626 !important;
}

/* =========================================================================
   v8.0.8: TARJETA DE ERROR (No encontrado) - MÁXIMA ESPECIFICIDAD
   ========================================================================= */

/* Tarjeta error - fondo rojo claro */
#pyd_resultados_content_v768 .pyd-resultado-item.pyd-no-encontrado.pyd-tarjeta-v7 {
    display: block !important;
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    border-left: 4px solid #DC2626 !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-x-icon {
    color: #DC2626 !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-serie-error {
    color: #0070C0 !important;
    font-weight: 600 !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-no-encontrado-text {
    color: #DC2626 !important;
    font-weight: 600 !important;
}

#pyd_resultados_content_v768 .pyd-tarjeta-v7 .pyd-error-msg {
    color: #6B7280 !important;
}

.pyd-error-contacto {
    font-size: 13px !important;
    color: #6B7280 !important;
}

/* Correo en azul corporativo */
.pyd-error-contacto a {
    color: #0070C0 !important;
    text-decoration: none !important;
}

.pyd-error-contacto a:hover {
    text-decoration: underline !important;
}

/* =========================================================================
   v8.1.5: TARJETA DE CERTIFICADO - AZUL CON ACORDEÓN
   ========================================================================= */

/* Tarjeta certificado base */
#pyd_resultados_content_v768 .pyd-resultado-certificado {
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    overflow: hidden !important;
}

/* Certificado VÁLIDO - fondo azul claro */
#pyd_resultados_content_v768 .pyd-resultado-certificado.pyd-cert-valido {
    background: linear-gradient(135deg, #EBF5FF 0%, #DBEAFE 100%) !important;
    border: 1px solid #93C5FD !important;
    border-left: 4px solid #0070C0 !important;
}

/* Certificado REVOCADO - fondo rojo claro */
#pyd_resultados_content_v768 .pyd-resultado-certificado.pyd-cert-revocado {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important;
    border: 1px solid #FECACA !important;
    border-left: 4px solid #DC2626 !important;
}

/* Botones de acción (acordeón + eliminar) */
.pyd-cert-card-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    gap: 4px !important;
    z-index: 10 !important;
}

/* Botón eliminar (X) - separado del chevron */
.pyd-cert-card-actions .pyd-btn-eliminar-item {
    margin-left: 15px !important;
}

.pyd-btn-acordeon {
    width: 28px !important;
    height: 28px !important;
    border: none !important;
    background: rgba(0, 112, 192, 0.15) !important;
    color: #0070C0 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 0 !important; /* Ocultar texto original */
    transition: all 0.2s ease !important;
    position: relative !important;
}

/* Flecha como pseudo-elemento */
.pyd-btn-acordeon::before {
    content: '▼' !important;
    font-size: 12px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.3s ease !important;
}

.pyd-btn-acordeon:hover {
    background: rgba(0, 112, 192, 0.25) !important;
}

/* Cuando está colapsado: rotar solo la flecha -90° (apunta a la derecha) */
.pyd-btn-acordeon.collapsed::before {
    transform: translate(-50%, -50%) rotate(-90deg) !important;
}

/* Espacio reducido para h5 Productos Certificados */
.pyd-cert-body h5 {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

/* Revocado: botón acordeón en rojo */
.pyd-cert-revocado .pyd-btn-acordeon {
    background: rgba(220, 38, 38, 0.15) !important;
}

.pyd-cert-revocado .pyd-btn-acordeon::before {
    color: #DC2626 !important;
}

.pyd-cert-revocado .pyd-btn-acordeon:hover {
    background: rgba(220, 38, 38, 0.25) !important;
}

/* Header de la tarjeta (siempre visible) */
.pyd-cert-card-header {
    display: flex !important;
    align-items: center !important;
    padding: 15px 80px 15px 15px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.pyd-cert-card-header:hover {
    background: rgba(0, 112, 192, 0.05) !important;
}

.pyd-cert-revocado .pyd-cert-card-header:hover {
    background: rgba(220, 38, 38, 0.05) !important;
}

.pyd-cert-card-icon {
    font-size: 28px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.pyd-cert-card-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.pyd-cert-card-titulo {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 4px !important;
}

.pyd-cert-numero {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0070C0 !important;
}

.pyd-cert-revocado .pyd-cert-numero {
    color: #DC2626 !important;
}

/* Badges de estado */
.pyd-cert-card-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

.pyd-badge-valido {
    background: #10B981 !important;
    color: #FFFFFF !important;
}

.pyd-badge-revocado {
    background: #DC2626 !important;
    color: #FFFFFF !important;
}

/* Subtítulo con info resumida */
.pyd-cert-card-subtitulo {
    font-size: 13px !important;
    color: #4B5563 !important;
}

.pyd-cert-card-subtitulo .pyd-separador {
    margin: 0 8px !important;
    color: #9CA3AF !important;
}

/* Body colapsable */
.pyd-cert-card-body {
    padding: 0 15px 15px 15px !important;
    border-top: 1px solid rgba(0, 112, 192, 0.15) !important;
}

.pyd-cert-revocado .pyd-cert-card-body {
    border-top-color: rgba(220, 38, 38, 0.15) !important;
}

/* Grid de info */
.pyd-cert-info-mini {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 12px !important;
    padding: 15px 0 !important;
}

.pyd-cert-info-item {
    background: rgba(255, 255, 255, 0.6) !important;
    padding: 10px !important;
    border-radius: 6px !important;
}

.pyd-cert-info-label {
    font-size: 11px !important;
    color: #6B7280 !important;
    margin-bottom: 4px !important;
}

.pyd-cert-info-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1F2937 !important;
}

.pyd-cert-info-item.pyd-info-revocado {
    background: rgba(220, 38, 38, 0.1) !important;
}

.pyd-cert-info-item.pyd-info-revocado .pyd-cert-info-value {
    color: #DC2626 !important;
}

/* Tabla de productos mini */
.pyd-cert-productos-mini {
    margin: 10px 0 !important;
}

.pyd-cert-productos-mini h5 {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 0 10px 0 !important;
}

.pyd-cert-tabla-mini {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13px !important;
    background: rgba(255, 255, 255, 0.7) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.pyd-cert-tabla-mini th,
.pyd-cert-tabla-mini td {
    padding: 8px 12px !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(0, 112, 192, 0.1) !important;
}

.pyd-cert-tabla-mini th {
    background: #0070C0 !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
}

.pyd-cert-tabla-mini td code {
    background: #E5E7EB !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-family: monospace !important;
    font-size: 12px !important;
}

.pyd-cert-tabla-mini tr:last-child td {
    border-bottom: none !important;
}

/* Badge NIJ en tabla - texto plano sin burbuja */
.pyd-badge-nij {
    display: inline-block !important;
    color: #333333 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* Serial clickeable en tabla de productos */
.pyd-serial-clickable {
    cursor: pointer !important;
    color: #0070C0 !important;
    text-decoration: underline !important;
    text-decoration-style: dotted !important;
    transition: all 0.2s ease !important;
}

.pyd-serial-clickable:hover {
    color: #005a9e !important;
    text-decoration-style: solid !important;
    background: rgba(0, 112, 192, 0.1) !important;
}

/* Visor PDF embebido */
.pyd-cert-pdf-viewer {
    margin: 15px 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 112, 192, 0.2) !important;
}

.pyd-cert-pdf-viewer iframe {
    width: 100% !important;
    height: 400px !important;
    border: none !important;
    display: block !important;
}

/* Botones de PDF centrados */
.pyd-cert-pdf-actions {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.pyd-cert-pdf-actions .pyd-btn {
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.pyd-cert-pdf-actions .pyd-btn-primary {
    background: #0070C0 !important;
    color: #FFFFFF !important;
    border: none !important;
}

.pyd-cert-pdf-actions .pyd-btn-primary:hover {
    background: #005A9E !important;
}

.pyd-cert-pdf-actions .pyd-btn-secondary {
    background: #FFFFFF !important;
    color: #0070C0 !important;
    border: 1px solid #0070C0 !important;
}

.pyd-cert-pdf-actions .pyd-btn-secondary:hover {
    background: #EBF5FF !important;
}

/* Alerta de revocado */
.pyd-alert-revocado {
    background: rgba(220, 38, 38, 0.1) !important;
    border: 1px solid #FECACA !important;
    border-radius: 6px !important;
    padding: 15px !important;
    margin: 15px 0 !important;
    text-align: center !important;
    color: #DC2626 !important;
}

.pyd-alert-revocado strong {
    display: block !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
}

/* Responsive */
@media (max-width: 600px) {
    .pyd-cert-card-header {
        padding: 12px 70px 12px 12px !important;
    }
    
    .pyd-cert-card-icon {
        font-size: 24px !important;
    }
    
    .pyd-cert-numero {
        font-size: 14px !important;
    }
    
    .pyd-cert-info-mini {
        grid-template-columns: 1fr !important;
    }
    
    .pyd-cert-pdf-viewer iframe {
        height: 300px !important;
    }
    
    .pyd-cert-pdf-actions {
        flex-direction: column !important;
    }
    
    .pyd-cert-pdf-actions .pyd-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================================================
   v0.0.10: SELECTOR DE CLIENTE (Duplicados entre clientes)
   ========================================================================== */

.pyd-selector-cliente {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
    border-left: 4px solid #F59E0B;
    padding: 1.25rem;
}

.pyd-selector-cliente .pyd-resultado-header {
    margin-bottom: 0.75rem;
}

.pyd-selector-cliente .pyd-resultado-icon {
    font-size: 1.5rem;
}

.pyd-selector-cliente .pyd-resultado-titulo {
    font-weight: 600;
    color: #92400E;
    font-size: 1rem;
}

.pyd-selector-mensaje {
    color: #78350F;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
}

.pyd-selector-opciones {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pyd-cliente-opcion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pyd-cliente-opcion:hover {
    border-color: #F59E0B;
    background: #FFFBEB;
}

.pyd-cliente-radio {
    width: 18px;
    height: 18px;
    accent-color: #F59E0B;
    cursor: pointer;
}

.pyd-cliente-nombre {
    font-weight: 500;
    color: #374151;
    font-size: 0.95rem;
}

.pyd-cliente-opcion:has(.pyd-cliente-radio:checked) {
    border-color: #F59E0B;
    background: #FEF3C7;
}

.pyd-cliente-opcion:has(.pyd-cliente-radio:disabled) {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Responsive */
@media (max-width: 480px) {
    .pyd-selector-cliente {
        padding: 1rem;
    }

    .pyd-cliente-opcion {
        padding: 0.6rem 0.75rem;
    }

    .pyd-cliente-nombre {
        font-size: 0.85rem;
    }
}