/* ==========================================================
   GIOLABS CLINIC S.A.C.
   PORTAL DE RESULTADOS - DISEÑO PREMIUM COMPLETO
   ==========================================================
   Índice:
   1. Hero de Resultados
   2. Orbes Decorativos
   3. Security Card
   4. Tarjeta de Consulta
   5. Pasos de Consulta
   6. Mensajes de Error
   7. Reporte de Resultados
   8. Resumen del Paciente
   9. Categorías de Análisis
   10. Tabla de Resultados
   11. Clasificaciones y Estados
   12. Disclaimer
   13. Animaciones
   14. Responsive
   ========================================================== */

/* ==========================================================
   1. HERO DE RESULTADOS
   ========================================================== */

.patient-result-page {
    background: #f8fafc;
    flex: 1 0 auto;
}

.results-hero {
    position: relative;
    padding: 60px 0 50px;
    background: linear-gradient(135deg, #0a1a2a 0%, #174c77 45%, #1a5a8a 100%);
    overflow: hidden;
}

.results-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.results-hero-copy .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5eead4;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-weight: 800;
    margin-bottom: 14px;
}

.results-hero-copy .section-kicker i {
    font-size: 14px;
    animation: resultsKickerPulse 2s ease-in-out infinite;
}

@keyframes resultsKickerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.results-hero-copy h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(30px, 3.8vw, 44px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 0 0 14px;
    letter-spacing: -0.03em;
}

.results-hero-copy p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
    max-width: 450px;
}

/* ==========================================================
   2. ORBES DECORATIVOS
   ========================================================== */

.results-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.15;
    pointer-events: none;
    animation: resultsOrbFloat 10s ease-in-out infinite;
}

.results-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #16a6a1, transparent 70%);
    top: -25%;
    right: -8%;
    animation-delay: 0s;
}

.results-orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #4ade80, transparent 70%);
    bottom: -25%;
    left: -8%;
    animation-delay: -5s;
}

.results-orb-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #f59e0b, transparent 70%);
    top: 30%;
    left: 25%;
    animation-delay: -3s;
}

@keyframes resultsOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.12; }
    25% { transform: translate(35px, -35px) scale(1.2); opacity: 0.18; }
    50% { transform: translate(-20px, 25px) scale(0.9); opacity: 0.12; }
    75% { transform: translate(25px, 20px) scale(1.1); opacity: 0.18; }
}

/* ==========================================================
   3. SECURITY CARD
   ========================================================== */

.results-security-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.results-security-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: securityShine 4s infinite;
    pointer-events: none;
}

@keyframes securityShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

.results-security-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
}

.security-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: rgba(94, 234, 212, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.security-icon i {
    font-size: 24px;
    color: #5eead4;
    animation: securityIconPulse 2.5s ease-in-out infinite;
}

@keyframes securityIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.security-info strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3px;
}

.security-info span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

.security-badge {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(94, 234, 212, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5eead4;
    font-size: 14px;
    flex-shrink: 0;
}

/* ==========================================================
   4. TARJETA DE CONSULTA
   ========================================================== */

.results-section {
    padding: 50px 0;
}

.results-query-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: #ffffff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 20px 50px rgba(23, 76, 119, 0.08);
    border: 1px solid rgba(23, 76, 119, 0.04);
    margin-bottom: 25px;
    animation: resultsCardIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes resultsCardIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.results-query-copy h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #103a5c;
    margin: 0 0 8px;
}

.results-query-copy p {
    font-size: 13px;
    color: #6a7b87;
    margin: 0 0 16px;
    line-height: 1.5;
}

/* ==========================================================
   5. PASOS DE CONSULTA
   ========================================================== */

.results-query-steps {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.query-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #526270;
    padding: 6px 0;
}

.query-step-numero {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #174c77, #16a6a1);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Formulario */
.results-query-form {
    display: grid;
    gap: 14px;
}

.results-query-form label {
    display: grid;
    gap: 5px;
}

.results-query-form label span {
    font-size: 12px;
    font-weight: 700;
    color: #536a76;
}

.results-query-form input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #dfe9ef;
    border-radius: 10px;
    font-size: 14px;
    color: #152b3a;
    outline: none;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.results-query-form input:focus {
    border-color: #174c77;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 76, 119, 0.06);
}

.results-query-form input::placeholder {
    color: #a0b0bc;
}

.results-query-form .button {
    min-height: 48px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    margin-top: 4px;
}

.results-query-form .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(23, 76, 119, 0.3);
}

/* ==========================================================
   6. MENSAJES DE ERROR
   ========================================================== */

.results-message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: resultsMsgIn 0.4s ease;
}

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

.results-message.error {
    background: rgba(226, 92, 92, 0.08);
    border: 1px solid rgba(226, 92, 92, 0.2);
    color: #e25c5c;
}

.results-message i {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.results-message strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 3px;
}

.results-message span {
    font-size: 13px;
    line-height: 1.5;
}

/* ==========================================================
   7. REPORTE DE RESULTADOS
   ========================================================== */

.results-report {
    animation: resultsReportIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes resultsReportIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.results-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.results-report-header h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #103a5c;
    margin: 0;
}

.results-pdf-form .button {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.results-pdf-form .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(226, 92, 92, 0.3);
}

/* ==========================================================
   8. RESUMEN DEL PACIENTE
   ========================================================== */

.results-patient-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid rgba(23, 76, 119, 0.04);
    box-shadow: 0 6px 16px rgba(23, 76, 119, 0.04);
    margin-bottom: 20px;
}

.results-patient-summary > div {
    display: grid;
    gap: 3px;
}

.results-patient-summary small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #a0b0bc;
    text-transform: uppercase;
}

.results-patient-summary strong {
    font-size: 13px;
    color: #174c77;
    font-weight: 600;
}

.results-validated {
    color: #22c55e !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.results-validated i {
    font-size: 14px;
    animation: validatedPulse 2s ease-in-out infinite;
}

@keyframes validatedPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ==========================================================
   9. CATEGORÍAS DE ANÁLISIS
   ========================================================== */

.results-category {
    margin-bottom: 20px;
}

.results-category-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #174c77, #1a5a8a);
    border-radius: 10px 10px 0 0;
    color: #ffffff;
}

.results-category-title i {
    font-size: 16px;
    color: #5eead4;
}

.results-category-title h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.05em;
}

/* ==========================================================
   10. TABLA DE RESULTADOS
   ========================================================== */

.results-table-wrap {
    overflow-x: auto;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    border: 1px solid rgba(23, 76, 119, 0.04);
    border-top: none;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}

.results-table thead th {
    background: #f1f5f9;
    padding: 12px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #536a76;
    border-bottom: 2px solid #dfe9ef;
    white-space: nowrap;
}

.results-table tbody td {
    padding: 12px 14px;
    font-size: 13px;
    color: #526270;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.results-table tbody tr {
    transition: background 0.2s ease;
}

.results-table tbody tr:hover {
    background: #f8fafc;
}

.results-table tbody tr.is-critical {
    background: rgba(226, 92, 92, 0.04);
    border-left: 3px solid #e25c5c;
}

.results-table tbody tr.is-critical:hover {
    background: rgba(226, 92, 92, 0.08);
}

.results-table td strong {
    color: #174c77;
    font-weight: 700;
}

/* ==========================================================
   11. CLASIFICACIONES Y ESTADOS
   ========================================================== */

.result-class {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.result-class.result-normal {
    background: rgba(22, 166, 106, 0.1);
    color: #17a66a;
    border: 1px solid rgba(22, 166, 106, 0.2);
}

.result-class.result-alto {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.result-class.result-bajo {
    background: rgba(23, 76, 119, 0.08);
    color: #174c77;
    border: 1px solid rgba(23, 76, 119, 0.15);
}

.result-class.result-critico {
    background: rgba(226, 92, 92, 0.1);
    color: #e25c5c;
    border: 1px solid rgba(226, 92, 92, 0.2);
    animation: criticPulse 1.5s ease-in-out infinite;
}

@keyframes criticPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.result-class.result-neutral {
    background: #f1f5f9;
    color: #6a7b87;
    border: 1px solid #dfe9ef;
}

/* ==========================================================
   12. DISCLAIMER
   ========================================================== */

.results-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px dashed rgba(23, 76, 119, 0.15);
    border-radius: 12px;
    margin-top: 20px;
}

.results-disclaimer i {
    color: #f59e0b;
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.results-disclaimer p {
    font-size: 12px;
    color: #6a7b87;
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================
   13. ANIMACIONES ADICIONALES
   ========================================================== */

.results-query-form .button:active {
    transform: scale(0.96);
}

.results-table tbody tr.is-critical td strong {
    color: #e25c5c;
}

/* ==========================================================
   14. RESPONSIVE
   ========================================================== */

@media (max-width: 860px) {
    .results-hero {
        padding: 40px 0 35px;
    }
    
    .results-hero-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .results-query-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .results-patient-summary {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .results-section {
        padding: 35px 0;
    }
}

@media (max-width: 620px) {
    .results-hero-copy h1 {
        font-size: 24px;
    }
    
    .results-hero-copy p {
        font-size: 13px;
    }
    
    .results-security-card {
        padding: 14px 16px;
    }
    
    .results-query-card {
        padding: 20px 16px;
    }
    
    .results-report-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .results-patient-summary {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .results-table-wrap {
        border-radius: 0;
    }
    
    .result-class {
        font-size: 9px;
        padding: 3px 8px;
    }
}

@media (max-width: 400px) {
    .results-hero-copy h1 {
        font-size: 20px;
    }
    
    .results-query-form .button {
        font-size: 12px;
        padding: 0 14px;
    }
    
    .security-icon {
        width: 40px;
        height: 40px;
    }
    
    .security-icon i {
        font-size: 18px;
    }
}
/* ==========================================================
   FORMULARIO DE CONSULTA - INPUTS PREMIUM
   ========================================================== */

.results-query-form {
    display: grid;
    gap: 18px;
}

/* Grupo de input con icono */
.results-input-wrapper {
    position: relative;
    display: grid;
    gap: 6px;
}

.results-input-wrapper label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #536a76;
    letter-spacing: 0.03em;
}

.results-input-wrapper label i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.results-input-wrapper .label-icon-dni {
    background: rgba(23, 76, 119, 0.08);
    color: #174c77;
}

.results-input-wrapper .label-icon-codigo {
    background: rgba(22, 166, 161, 0.08);
    color: #16a6a1;
}

/* Input principal */
.results-input-wrapper input {
    width: 100%;
    padding: 14px 45px 14px 16px;
    border: 2px solid #dfe9ef;
    border-radius: 12px;
    font-size: 14px;
    color: #152b3a;
    outline: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    background: #f8fafc;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Icono dentro del input */
.results-input-icon {
    position: absolute;
    right: 14px;
    bottom: 14px;
    color: #a0b0bc;
    font-size: 15px;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Hover del input */
.results-input-wrapper input:hover {
    border-color: #b0c4d4;
    background: #ffffff;
}

/* Focus del input */
.results-input-wrapper input:focus {
    border-color: #174c77;
    background: #ffffff;
    box-shadow: 
        0 0 0 4px rgba(23, 76, 119, 0.08),
        0 8px 20px rgba(23, 76, 119, 0.06);
    letter-spacing: 0.5px;
}

/* Focus cambia el color del icono */
.results-input-wrapper input:focus ~ .results-input-icon {
    color: #174c77;
    animation: inputIconBounce 0.5s ease;
}

@keyframes inputIconBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* Placeholder estilizado */
.results-input-wrapper input::placeholder {
    color: #a0b0bc;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 13px;
}

/* Input con error */
.results-input-wrapper input.error {
    border-color: #e25c5c;
    background: rgba(226, 92, 92, 0.03);
    box-shadow: 0 0 0 4px rgba(226, 92, 92, 0.06);
}

/* Input con éxito */
.results-input-wrapper input.success {
    border-color: #22c55e;
    background: rgba(74, 222, 128, 0.03);
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.06);
}

/* Mensaje de ayuda debajo del input */
.results-input-help {
    font-size: 10px;
    color: #a0b0bc;
    margin-top: -10px;
    padding-left: 4px;
}

/* Línea decorativa inferior al hacer focus */
.results-input-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #174c77, #16a6a1);
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(-50%);
}

.results-input-wrapper input:focus ~ .results-input-icon,
.results-input-wrapper:focus-within::after {
    width: 100%;
}

/* Botón de submit mejorado */
.results-query-form .button {
    min-height: 50px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    background: linear-gradient(135deg, #174c77, #1a5a8a);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(23, 76, 119, 0.25);
}

.results-query-form .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(23, 76, 119, 0.35);
}

.results-query-form .button:active {
    transform: translateY(-1px) scale(0.98);
}

.results-query-form .button i {
    font-size: 15px;
    transition: transform 0.3s ease;
}

.results-query-form .button:hover i {
    transform: rotate(15deg) scale(1.2);
}

/* ==========================================================
   RESPONSIVE PARA INPUTS
   ========================================================== */

@media (max-width: 620px) {
    .results-input-wrapper input {
        padding: 12px 40px 12px 14px;
        font-size: 13px;
    }
    
    .results-input-icon {
        right: 12px;
        bottom: 12px;
        font-size: 13px;
    }
    
    .results-query-form .button {
        min-height: 46px;
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .results-input-wrapper input {
        padding: 11px 36px 11px 12px;
        font-size: 12px;
    }
}
/* ==========================================================
   INPUTS PREMIUM DEL FORMULARIO
   ========================================================== */

.results-input-wrapper {
    position: relative;
    display: grid;
    gap: 6px;
}

.results-input-wrapper label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #536a76;
    letter-spacing: 0.03em;
}

.results-input-wrapper label i {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.label-icon-dni {
    background: rgba(23, 76, 119, 0.08);
    color: #174c77;
}

.label-icon-codigo {
    background: rgba(22, 166, 161, 0.08);
    color: #16a6a1;
}

.results-input-wrapper input {
    width: 100%;
    padding: 14px 45px 14px 16px;
    border: 2px solid #dfe9ef;
    border-radius: 12px;
    font-size: 14px;
    color: #152b3a;
    outline: none;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    background: #f8fafc;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.results-input-icon {
    position: absolute;
    right: 14px;
    bottom: 14px;
    color: #a0b0bc;
    font-size: 15px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.results-input-wrapper input:hover {
    border-color: #b0c4d4;
    background: #ffffff;
}

.results-input-wrapper input:focus {
    border-color: #174c77;
    background: #ffffff;
    box-shadow: 
        0 0 0 4px rgba(23, 76, 119, 0.08),
        0 8px 20px rgba(23, 76, 119, 0.06);
}

.results-input-wrapper input:focus ~ .results-input-icon {
    color: #174c77;
    animation: inputIconBounce 0.5s ease;
}

@keyframes inputIconBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.results-input-wrapper input::placeholder {
    color: #a0b0bc;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 13px;
}

.results-input-help {
    font-size: 10px;
    color: #a0b0bc;
    padding-left: 4px;
    margin-top: -8px;
    margin-bottom: 6px;
}

.results-query-form .button {
    min-height: 50px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
    margin-top: 6px;
    background: linear-gradient(135deg, #174c77, #1a5a8a);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(23, 76, 119, 0.25);
}

.results-query-form .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(23, 76, 119, 0.35);
}

.results-query-form .button:active {
    transform: translateY(-1px) scale(0.98);
}

.results-query-form .button i {
    font-size: 15px;
    transition: transform 0.3s ease;
}

.results-query-form .button:hover i {
    transform: rotate(15deg) scale(1.2);
}

/* Responsive */
@media (max-width: 620px) {
    .results-input-wrapper input {
        padding: 12px 40px 12px 14px;
        font-size: 13px;
    }
    
    .results-input-icon {
        right: 12px;
        bottom: 12px;
        font-size: 13px;
    }
    
    .results-query-form .button {
        min-height: 46px;
        font-size: 13px;
    }
}
/* ==========================================================
   FORZAR ESTILOS DE INPUTS - MÁXIMA PRIORIDAD
   ========================================================== */

.patient-result-page .results-query-form input[type="text"],
.patient-result-page .results-query-form input:not([type]),
.patient-result-page .results-input-wrapper input,
.results-query-form input {
    width: 100% !important;
    padding: 14px 45px 14px 16px !important;
    border: 2px solid #dfe9ef !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    color: #152b3a !important;
    outline: none !important;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
    background: #f8fafc !important;
    letter-spacing: 0.5px !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    display: block !important;
    min-height: 48px !important;
    font-family: 'Inter', Arial, sans-serif !important;
}

.patient-result-page .results-query-form input[type="text"]:hover,
.patient-result-page .results-input-wrapper input:hover,
.results-query-form input:hover {
    border-color: #b0c4d4 !important;
    background: #ffffff !important;
}

.patient-result-page .results-query-form input[type="text"]:focus,
.patient-result-page .results-input-wrapper input:focus,
.results-query-form input:focus {
    border-color: #174c77 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(23, 76, 119, 0.08), 0 8px 20px rgba(23, 76, 119, 0.06) !important;
}

.patient-result-page .results-query-form input::placeholder,
.results-query-form input::placeholder {
    color: #a0b0bc !important;
    letter-spacing: 0 !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

/* Labels con iconos */
.patient-result-page .results-input-wrapper label,
.results-input-wrapper label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #536a76 !important;
    margin-bottom: 6px !important;
}

.label-icon-dni {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    background: rgba(23, 76, 119, 0.08) !important;
    color: #174c77 !important;
}

.label-icon-codigo {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    background: rgba(22, 166, 161, 0.08) !important;
    color: #16a6a1 !important;
}

/* Wrapper */
.patient-result-page .results-input-wrapper {
    position: relative !important;
    display: grid !important;
    gap: 4px !important;
    margin-bottom: 10px !important;
}

/* Icono dentro del input */
.patient-result-page .results-input-icon {
    position: absolute !important;
    right: 14px !important;
    bottom: 16px !important;
    color: #a0b0bc !important;
    font-size: 15px !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

/* Texto de ayuda */
.patient-result-page .results-input-help {
    font-size: 10px !important;
    color: #a0b0bc !important;
    margin-top: -4px !important;
    margin-bottom: 8px !important;
    padding-left: 4px !important;
    display: block !important;
}

/* Botón de submit */
.patient-result-page .results-query-form .button {
    min-height: 50px !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    background: linear-gradient(135deg, #174c77, #1a5a8a) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(23, 76, 119, 0.25) !important;
    margin-top: 8px !important;
    text-decoration: none !important;
}

.patient-result-page .results-query-form .button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 32px rgba(23, 76, 119, 0.35) !important;
}