/* ===========================================
   RESPONSIVE - MULTIPLES PANTALLAS
   =========================================== */

/* Sello CEAN - Centrado en el recuadro de los 4 datos - Responsive Multi-pantalla GRANDE */
.result.success > div[style*="background"] > div {
    position: relative !important;
    padding: 10px !important;
}
.result.success > div[style*="background"] > div::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 150px !important;
    height: 150px !important;
    background-image: url('sello-cean.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    animation: metalShine 3s ease-in-out infinite !important;
}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
    .result.success > div[style*="background"] > div::after {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .result.success > div[style*="background"] > div::after {
        width: 140px !important;
        height: 140px !important;
    }
}

/* Desktops (769px+) */
@media (min-width: 769px) {
    .result.success > div[style*="background"] > div::after {
        width: 180px !important;
        height: 180px !important;
    }
}

/* Animación de brillo metálico */
@keyframes metalShine {
    0%, 100% {
        filter: brightness(1) drop-shadow(0 0 5px rgba(255,215,0,0.3));
        opacity: 0.4;
    }
    50% {
        filter: brightness(1.3) drop-shadow(0 0 20px rgba(255,215,0,0.8)) drop-shadow(0 0 30px rgba(255,215,0,0.6));
        opacity: 0.6;
    }
}

/* Móviles pequeños (hasta 480px) */
@media (max-width: 480px) {
    body {
        padding: 3px;
    }
    .container {
        padding: 10px 8px;
        border-radius: 10px;
    }
    .logo {
        width: 70px !important;
        height: 70px !important;
        margin-bottom: 8px !important;
    }
    .login-header .logo {
        width: 90px;
        height: 90px;
    }
    h1 {
        font-size: 17px;
        margin-bottom: 4px !important;
    }
    .subtitle {
        font-size: 10px;
        margin-bottom: 10px !important;
    }
    .tabs {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px !important;
    }
    .tab {
        padding: 6px 8px;
        font-size: 12px;
    }
    .search-box {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px !important;
    }
    .search-box input,
    .search-box button {
        width: 100%;
        padding: 8px !important;
        font-size: 13px !important;
    }
    .filter-group {
        flex-direction: column;
        gap: 4px;
        margin-bottom: 8px !important;
    }
    .form-group {
        margin-bottom: 8px !important;
    }
    .form-group input,
    .form-group select {
        font-size: 13px;
        padding: 8px !important;
    }
    .login-box {
        padding: 20px 12px;
        width: 96%;
    }
    .login-header {
        padding: 20px 12px;
    }
    .login-header h2 {
        font-size: 20px;
    }
    .verified-badge {
        font-size: 30px;
    }
    .qr-actions,
    .qr-modal-actions {
        flex-direction: column;
        gap: 6px;
    }
    .qr-actions button,
    .qr-modal-actions button {
        width: 100%;
        padding: 8px !important;
    }
    .result {
        padding: 8px 6px !important;
        margin-top: 8px !important;
    }
    .scan-hint {
        padding: 8px !important;
        font-size: 10px !important;
        margin-top: 10px !important;
    }
    .form-group label {
        font-size: 12px !important;
        margin-bottom: 3px !important;
    }

    /* Resultado de verificación - márgenes ultra estrechos */
    .result.success {
        padding: 10px 8px !important;
    }
    .result.success h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
        font-weight: 700 !important;
    }
    .result.success > p {
        font-size: 10px !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
        font-weight: 500 !important;
    }
    .result.success > div[style*="background"] {
        padding: 8px 6px !important;
        margin-top: 6px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.25) !important;
    }
    .result.success > div[style*="background"] > p {
        font-size: 9px !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
        font-weight: 600 !important;
    }
    .result.success > div[style*="background"] > h2 {
        font-size: 18px !important;
        margin-bottom: 6px !important;
        text-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
        font-weight: 800 !important;
        color: #fff !important;
    }
    .result.success > div[style*="background"] > div {
        padding: 6px 4px !important;
        background: rgba(255,255,255,0.15) !important;
        border-radius: 6px !important;
    }
    .info-row {
        padding: 3px 0 !important;
        margin: 2px 0 !important;
        gap: 2px !important;
        border-color: rgba(255,255,255,0.2) !important;
    }
    .info-label {
        font-size: 9px !important;
        min-width: 70px !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
        font-weight: 600 !important;
    }
    .info-value {
        font-size: 10px !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
        font-weight: 500 !important;
    }
    .result.success .icon {
        width: 10px !important;
        height: 10px !important;
        margin-right: 2px !important;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
    }
    .result.success > p:last-of-type {
        font-size: 9px !important;
        margin-top: 6px !important;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
        font-weight: 500 !important;
    }
}

/* Tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        max-width: 90%;
        padding: 30px;
    }
    .logo {
        width: 110px !important;
        height: 110px !important;
    }
    .login-header .logo {
        width: 110px;
        height: 110px;
    }
    .tabs {
        gap: 8px;
    }
    .tab {
        padding: 10px;
        font-size: 13px;
    }
    h1 {
        font-size: 20px;
    }
}

/* Tablets grandes (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 85%;
    }
    .login-card {
        max-width: 450px;
    }
}

/* Desktops grandes (más de 1400px) */
@media (min-width: 1401px) {
    .container {
        max-width: 800px;
    }
    .login-card {
        max-width: 450px;
    }
}

/* Modo horizontal (móviles en landscape) */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        align-items: flex-start;
        padding: 10px;
    }
    .container {
        padding: 20px;
        margin-top: 10px;
    }
    .login-box {
        padding: 20px;
    }
    .login-header {
        padding: 20px;
    }
    .login-header .logo {
        width: 60px;
        height: 60px;
        margin-bottom: 10px;
    }
    .login-body {
        padding: 20px;
    }
}