/* site.css - PsycoSmart basic styles */
body {
    font-family: Helvetica, Arial, sans-serif;
    background: linear-gradient(90deg, #f4fff7, #ffffff);
    color: #0b6b43;
    margin: 0;
    padding: 0;
}

.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-content-internal {
    display: grid;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    max-width: 70vw;
    margin: 0 auto;
}

.footer-inner {
    text-align: center;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border: 1px solid rgba(12,120,78,0.08);
    text-align: center;
}

.logo-circle {
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    margin: 15px auto 15px;
    background: #00a86b;
    color: #fff;
    font-size: 28px;
}

.logo-section .logo-circle {
    margin: 0px;
    text-align: center;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

.logo-section svg {
    width: 24px !important;
    height: 24px !important;
    top: 3px !important;
}

.login-card h2 {
    margin: 6px 0;
}

.login-card .subtitle {
    margin: 0 0 18px;
    font-size: 14px;
    color: rgba(6,90,58,0.85);
}

.form-group {
    text-align: left;
    margin-bottom: 12px;
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #a4f4cf;
    box-sizing: border-box;
    background: #f0fdf4;
    color: #004d33;
    font-size: 14px;
}

.input-icon {
    position: relative;
}

.input-icon-svg {
    position: absolute;
    left: 12px;
    top: 30px;
    width: 16px;
    height: 16px;
    stroke: #10b981;
    fill: none;
    pointer-events: none;
}

.textarea-height {
    height: 90px;
}

.inputFile {
    margin-top: 20px;
}

.form-control.with-icon {
    padding-left: 40px;
}


.btn-primary {
    display: inline-block;
    background: #008a58;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    width: 100%;
    font-weight: 600;
}

.no-account {
    margin-top: 12px;
    font-size: 16px;
    color: #009966;
}


/* MENSAJES ERROR LOGIN */
.alert-box {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Icono */
.alert-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

    .alert-icon svg {
        width: 100%;
        height: 100%;
        fill: none;
        stroke-width: 2;
    }

/* Contenido */
.alert-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
}

.alert-message {
    font-size: 14px;
    line-height: 1.45;
}

/* ===== VARIANTES ===== */

/* INFO */
.alert-info {
    background-color: #eff6ff;
    border: 1px solid #8ec5ff;
    border-radius: 8px;
    font-size: 14px;
    text-align: left;
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
}

    .alert-info .alert-icon {
        padding-right: 10px;
    }

        .alert-info .alert-icon svg {
            stroke: #1e3a8a;
        }

    .alert-info .alert-title {
        color: #1c398e;
        font-size: 14px;
    }

    .alert-info .alert-message {
        color: #1c398e;
        font-size: 14px;
    }

/* INFO (verde) */
.alert-info-green {
    background-color: #ecfdf5;
    border: 1px solid #5ee9b5;
    border-radius: 8px;
    font-size: 14px;
    text-align: left;
    display: flex;
    padding: 10px;
    margin-bottom: 10px;
}

    .alert-info-green .alert-icon {
        padding-right: 10px;
    }

        .alert-info-green .alert-icon svg {
            stroke: #1e3a8a;
        }

    .alert-info-green .alert-title {
        color: #1c398e;
        font-size: 14px;
    }

    .alert-info-green .alert-message {
        color: #1c398e;
        font-size: 14px;
    }

/* ERROR */
.alert-error-main {
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
    text-align: left;
}

/* MENSAJE ROJO SUPERIOR */
.alert-error-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #dc2626;
    font-size: 14px;
    margin-bottom: 12px;
}

    .alert-error-header svg {
        width: 18px;
        height: 18px;
        stroke: #dc2626;
        fill: none;
        stroke-width: 2;
    }

/* CAJA ROJA CLARA INTERNA */
.alert-error-box {
    background-color: #fde8e8;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px;
    color: #991b1b;
    font-size: 14px;
    margin-left: 20px;
}

    .alert-error-box p {
        margin: 6px 0 0;
    }



/* LOGO + TÍTULO */
.auth-logo-container {
    text-align: center;
    margin-top: 40px;
}

.auth-logo {
    width: 60px;
    margin-bottom: 10px;
}

.auth-app-title {
    font-size: 22px;
    font-weight: 600;
    color: #009e67;
}

.auth-app-subtitle {
    font-size: 14px;
    color: #5d5d5d;
}

/* CARD */
.auth-card {
    max-width: 420px;
    margin: 30px auto;
    padding: 35px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0px 4px 18px rgba(0,0,0,0.12);
    border: 1px solid #e9e9e9;
}

/* TÍTULOS */
.auth-title {
    text-align: center;
    font-size: 24px;
    color: #0c9d63;
    font-weight: 600;
}

.auth-subtitle {
    text-align: center;
    margin-bottom: 25px;
    color: #4e4e4e;
}

/* INPUTS */
.auth-input-group {
    position: relative;
    margin-bottom: 18px;
}

.auth-input {
    width: 100%;
    height: 45px;
    border: 1px solid #bde8d2;
    border-radius: 8px;
    padding-left: 40px;
}

.auth-input-icon {
    position: absolute;
    top: 13px;
    left: 12px;
    color: #00a56e;
}

.auth-hint {
    font-size: 12px;
    color: #555;
    text-align: left;
    margin: 0px;
    width: fit-content;
    display: block;
    margin-bottom: 20px;
}

/* INFO BOX */
.auth-info-box {
    margin-top: 18px;
    background: #ecfff5;
    border-left: 4px solid #18b56a;
    padding: 12px 15px;
    border-radius: 8px;
}

.auth-info-icon {
    color: #18b56a;
    margin-right: 5px;
}

/* BOTÓN */
.auth-btn {
    width: 100%;
    background: #00b06b;
    color: white;
    border: none;
    margin-top: 15px;
    padding: 12px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

    .auth-btn:hover {
        background: #009059;
    }

/* FOOTER */
.auth-footer {
    text-align: center;
    margin-top: 15px;
}

    .auth-footer a {
        color: #009c63;
        font-weight: 600;
        text-decoration: none;
    }

/* Estilo del enlace “Regístrate” igual al de la imagen */
.register-link {
    color: #009966;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
}

    .register-link:hover {
        text-decoration: none;
        color: #007A55;
    }

.login-header {
    text-align: center;
}

p.subtitle {
    margin: 0px;
    font-size: 16px;
}

h2.title-login {
    margin: 0px 0px 8px;
    font-size: 16px;
    font-weight: 500;
    color: #004f3b;
}

.logo-circle svg {
    width: 32px;
    height: 32px;
    position: relative;
    top: 5px;
}

h3.title-card {
    text-align: left;
    margin: 0px 0px 5px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

p.help {
    margin: 5px 0px 15px;
    text-align: left;
    color: #10b981;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
}

label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.btn-primary:hover {
    background-color: #007A55;
}

.form-control:focus-visible {
    border-color: #87DCBF !important;
}

.form-control:focus,
.form-control:focus-visible {
    border-color: #87DCBF;
    box-shadow: 0 0 4px rgba(40, 199, 111, 0.5);
    outline: none;
}

.alert-box {
    background: #ffe5e5;
    border: 1px solid #ffb4b4;
    padding: 15px;
    border-radius: 8px;
    color: #c30000;
    margin-bottom: 20px;
    font-size: 14px;
    position: relative;
}

    /* Ícono rojo */
    .alert-box::before {
        content: "⚠";
        color: #c30000;
        font-size: 18px;
        margin-right: 8px;
    }

/* DASHBOARD */
.dashboard-container {
    width: 100%;
    background: #F7FFFB;
    min-height: 100vh;
}

/* HEADER */
.dashboard-header {
    background: #ffffff;
    border-bottom: 2px solid #C0F1D6;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img {
    width: 50px;
}

.logo-text h2 {
    font-size: 16px;
    margin: 0;
    color: #004f3b;
    font-weight: 500;
}

.logo-text span {
    color: #009966;
    font-size: 14px;
    line-height: 1.42857;
}

.user-section {
    display: flex;
    align-items: center;
    gap: 25px;
}

.user-info strong {
    display: block;
    font-size: 16px;
    color: #004f3b;
    font-weight: 500;
}

.user-info span {
    color: #009966;
    font-size: 14px;
    line-height: 1.42857;
}

/* BOTÓN SALIR */
.logout-btn {
    background: transparent;
    border: 1px solid #009E62;
    padding: 6px 14px;
    border-radius: 8px;
    color: #064e3b;
    font-weight: 500;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    line-height: 24px;
}

    .logout-btn:hover {
        background: #ecfdf5;
        cursor: pointer;
    }

    .logout-btn svg {
        width: 20px;
        padding-right: 5px;
    }

/* CONTENIDO */
.dashboard-content {
    padding: 40px;
    max-width: 1200px;
    margin: auto;
}

.wraper-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: auto;
}

.title {
    font-size: 28px;
    color: #222;
}

.subtitle {
    color: #007a55;
    margin-bottom: 35px;
}

/* CARDS */
.card {
    background: white;
    border: 1px solid #05966933;
    padding: 24px;
    border-radius: 15px;
    display: block;
    text-decoration: none;
    transition: .2s;
}

    .card:hover {
        transform: translateY(-3px);
    }

h3 {
    color: #009966;
    font-size: 14px;
    margin: 0px;
    line-height: 1.42857;
    margin-top: 0px;
    font-weight: 500;
}

.stats-card {
    width: 300px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    margin-top: 40px;
}

.stats-number {
    font-size: 20px;
    margin: 10px 0px 0px;
    color: #004f3b;
}

.icon-user {
    background: #d0fae5;
    padding: 14px;
    display: block;
    border-radius: 70px;
}

.stats-icon svg {
    width: 20px;
    color: #009966;
}

/* ACCIONES */
.section-title {
    font-size: 16px;
    margin-bottom: 20px;
    color: #004f3b;
    font-weight: 500;
}

.cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.action-card .icon-box {
    width: 45px;
    height: 45px;
    background: #00C476;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.icon-box svg {
    width: 24px;
}

.action-card h3 {
    color: #004f3b;
    font-size: 16px;
}

.action-card p {
    color: #009966;
    font-size: 14px;
}

a.card.action-card {
    max-width: 285px;
}

    a.card.action-card:hover {
        box-shadow: 4px 4px 13px rgba(0, 0, 0, 0.20);
    }

/* RESPONSIVE */
@media(max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        gap: 10px;
    }

    .stats-card {
        width: 100%;
    }
}

/* NUEVO PACIENTE */
.volver a {
    color: #009E62;
    font-size: 14px;
}

.paciente-container {
    margin: auto;
    background: #ffffffcc;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #baf0d4;
    backdrop-filter: blur(6px);
    width: 65vw;
}

.title {
    font-size: 20px;
    color: #004f3b;
    margin-bottom: 5px;
    line-height: 1.5;
    font-weight: 500;
}

.tabs {
    display: flex;
    gap: 8px;
    margin: 20px 0;
}

.tab {
    padding: 8px 15px;
    border: 1px solid #c0f1d6;
    border-radius: 10px;
    background: white;
}

    .tab.active {
        background: #00b871;
        color: white;
    }

    .tab.disabled {
        opacity: .4;
        pointer-events: none;
    }

.form-section {
    border: 1px solid #c0f1d6;
    border-radius: 15px;
    padding: 18px;
    margin-bottom: 25px;
}

.input {
    width: -webkit-fill-available;
    padding: 10px;
    border: 1px solid #c0f1d6;
    border-radius: 10px;
    background: #f7fff7;
    display: block;
}

span.section-icon svg {
    width: 18px;
    position: relative;
    top: 3px;
}

.tab-content h3 {
    font-size: 16px;
    color: #064e3b;
}

.grid-2, .grid-3 {
    display: grid;
    gap: 12px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.imc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.imc-image {
    width: 120px;
    height: 200px;
    margin: auto;
    transition: transform 0.5s ease;
}

    .imc-image.default {
        display: none;
    }

    .imc-image.verde {
        color: #40C79A;
    }

    .imc-image.amarillo {
        color: orange;
    }

    .imc-image.rojo {
        color: red;
    }

/* Animación del zoom */
@keyframes zoomEffect {
    0% {
        transform: scale(1.2);
        opacity: 0.7;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Aplica la animación cuando se agregue la clase .zoom */
.imc-image.zoom {
    animation: zoomEffect 0.5s ease;
}

.btn-guardar {
    width: 100%;
    padding: 12px;
    background: #00a866;
    color: white;
    border-radius: 12px;
    border: none;
    font-size: 16px;
}

/* Caja de resultados (lado izquierdo) */
.resultado-imc {
    background: #e9fff3;
    border: 1px solid #b6f3d2;
    padding: 18px;
    border-radius: 12px;
    margin-top: 10px;
}

.hidden {
    display: none;
}

.resultado-imc h4 {
    margin: 0;
    font-size: 16px;
    color: #008960;
}

.imc-num {
    font-size: 28px;
    font-weight: bold;
    margin: 5px 0;
}

.badge {
    display: inline-block;
    padding: 5px 12px;
    background: #ccf7da;
    color: #056c42;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.recomendacion {
    background: #fff8e8;
    border: 1px solid #ffe4ac;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    font-size: 14px;
    color: #845800;
}

.nota-importante {
    background: #f1f6fb;
    border: 1px solid #c9d6e6;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 10px;
    color: #445163;
}

.right {
    text-align: center;
    vertical-align: middle;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.mb {
    margin-bottom: 20px;
}

.volver a {
    margin: 25px 0px;
    display: block;
    text-decoration: none;
    color: #009966;
    font-size: 14px;
    line-height: 1.42857;
    font-weight: 500;
}

span.icon svg {
    top: 4px;
    position: relative;
}

/* TABS */
.tabs {
    display: flex;
    margin-bottom: 20px 0px;
    background: #f1f1f1;
    border-radius: 8px;
    padding: 8px;
}

.tab-button {
    padding: 8px 24px;
    border: none;
    background: #f1f1f1;
    cursor: pointer;
    margin-right: 4px;
    font-weight: 500;
    color: #555;
    border-radius: 5px 5px 0 0;
    font-size: 14px;
}

    .tab-button.active {
        background: #fff;
        border: 2px solid #ddd;
        border-bottom: 0;
        color: #000;
        box-shadow: 4px 4px 13px rgba(0, 0, 0, 0.20);
    }

    .tab-button.blocked {
        opacity: 0.4;
        cursor: not-allowed;
    }

.tab-content.active {
    display: block;
}

p.section-desc {
    color: #10b981;
    margin: 5px 0px 20px;
}

span.section-icon svg {
    top: 5px;
    position: relative;
}

.hidden {
    display: none;
}

.form-container {
    padding: 10px;
}

.hidden {
    display: none !important;
}

.tab-content {
    display: block;
}

/* TAB 2 */
/* TARJETAS DEL TAB 2 */
.perfil-box {
    padding: 18px;
    border-radius: 14px;
    margin-bottom: 25px;
    border: 1px solid #C0F1D6;
}

.green-box {
    background: #ECFFF5;
    border: 2px solid #18b56a;
}

    .green-box svg {
        color: #18b56a;
    }

    .green-box p.section-desc {
        color: #18b56a;
    }

.red-box {
    background: #FFFBFB;
    border: 2px solid #FFC9C9;
}

    .red-box svg {
        color: #e7000b;
    }

    .red-box p.section-desc {
        color: #c10007;
    }

.blue-box {
    background: #F1F7FF;
    border-left: 4px solid #4A90FF;
}

.violet-box {
    background: #eef2ff;
    border: 2px solid #bedbff;
}

    .violet-box svg {
        color: #9810fa;
    }

    .violet-box p.section-desc {
        color: #8200db;
    }

.form-section .form-section.violet-box {
    margin-bottom: 0px;
}

/* SUBTÍTULO */
.perfil-box .sub {
    margin-top: -8px;
    margin-bottom: 15px;
    font-size: 14px;
    color: #5b5b5b;
}

/* CAJA TIR AZUL */
.tir-info {
    background: #fff;
    border: 1px solid #bcd7ff;
    padding: 12px;
    border-radius: 10px;
    margin: 15px 0px;
}

p.text-formula {
    margin: 0px;
    color: #1c398e;
    font-size: 12px;
    line-height: 1.33333;
    font-weight: 500;
}

p.text-tir {
    font-size: 14px;
    color: #193cb8;
    line-height: 1.42857;
    margin: 5px 0px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

p.text-xs {
    color: #1447e6;
    font-size: 12px;
    line-height: 1.33333;
    margin: 0px;
}

.btn-calcular {
    background: #4A90FF;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    margin-top: 20px;
    height: 36px;
    font-size: 16px;
}

    .btn-calcular:hover {
        background: #3b76d7;
    }

/* RESULTADO TIR */
.resultado-tir {
    margin-top: 14px;
    padding: 12px;
    background: #e7fff1;
    border: 1px solid #b0f2c9;
    border-radius: 10px;
}

/* --- BLOQUE TIR --- */
.tir-box {
    padding: 20px;
}

.tir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.tir-disabled {
    background: #f5f5f5;
    color: #777;
    font-weight: bold;
    text-align: center;
}

/* Categoría final */
.tir-category {
    margin-top: 12px;
    padding: 10px;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #bcd7ff;
    background: #e7f0ff;
}

/* Bloque resultados TIR */
.tir-resultados {
    margin-top: 24px;
    padding: 16px;
    border-radius: 12px;
    background: #f5f9ff;
    border: 1px solid #dbe7ff;
}

/* Header */
.tir-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tir-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid;
}

/* Cálculo */
.tir-calc {
    background: #eef4ff;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}

/* Barra */
.tir-bar-bg {
    width: 100%;
    height: 28px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.tir-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #facc15, #f59e0b);
    color: #000;
    font-weight: 600;
    text-align: center;
    line-height: 28px;
    transition: width 0.8s ease;
}

/* Escala */
.tir-scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 8px;
}

    .tir-scale .poor {
        color: #dc2626;
    }

    .tir-scale .moderate {
        color: #f59e0b;
    }

    .tir-scale .excellent {
        color: #16a34a;
    }

    .tir-scale .optimal {
        color: #15803d;
    }

/* Interpretación */
.tir-interpretacion {
    margin-top: 16px;
    padding: 14px;
    background: #fff7e6;
    border: 1px solid #facc15;
    border-radius: 10px;
}

    .tir-interpretacion ul {
        margin: 8px 0 0 18px;
    }

/* Info */
.tir-about {
    margin-top: 12px;
    background: #eef4ff;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
}

/* TAB 4 */
.panss-item {
    border: 1px solid #dff5ea;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    background: #fff;
}

.panss-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .panss-header .badge {
        background: #e8f7f0;
        color: #059669;
        padding: 4px 10px;
        border-radius: 20px;
        font-weight: 600;
    }

.panss-slider {
    width: -webkit-fill-available !important;
    margin-top: 12px;
}

.scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #64748b;
}

.estado {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
/* ========================= */
/* RESUMEN SUPERIOR */
/* ========================= */
.panss-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.panss-summary-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 20px 0;
}

.summary-card {
    background: #ffffff;
    border: 1px solid #a4f4cf;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}

    .summary-card .value {
        font-size: 28px;
        font-weight: 700;
        display: block;
    }

    .summary-card.red .value {
        color: #ef4444;
    }

    .summary-card.blue .value {
        color: #3b82f6;
    }

    .summary-card.purple .value {
        color: #a855f7;
    }

    .summary-card.green .value {
        color: #22c55e;
    }

.accordion-item {
    margin-bottom: 20px;
}

.accordion-red {
    border: 2px solid #ffc9c9;
    border-radius: 12px;
}

    .accordion-red svg {
        color: #e7000b;
    }

.accordion-blue {
    border: 2px solid #bedbff;
    border-radius: 12px;
}

    .accordion-blue svg {
        color: #155dfc;
    }

.accordion-violet {
    border: 2px solid #e9d4ff;
    border-radius: 12px;
}

    .accordion-violet svg {
        color: #9810fa;
    }

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 12px 16px;
}

    .accordion-header h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }

.panss-header strong {
    font-size: 14px;
}

.form-section h4 {
    margin: 0px;
    font-size: 16px;
}

.stat-box.highlight {
    margin: 5px 27px;
}

/* Flecha */
.accordion-icon {
    display: flex;
    align-items: center;
}

/* Animación */
.chevron {
    transition: transform 0.3s ease;
}

/* Cuando está cerrado */
.accordion-header.collapsed .chevron {
    transform: rotate(-90deg);
}


/* ========================= */
/* INTERPRETACIÓN */
/* ========================= */
.interpretacion-box {
    background: #ecfdf5;
    border-radius: 16px;
    padding: 18px;
    margin: 20px 0;
}

    .interpretacion-box ul {
        padding-left: 18px;
    }

    .interpretacion-box li {
        margin-bottom: 8px;
        font-size: 14px;
    }

/* ========================= */
/* VISUALIZACIÓN */
/* ========================= */
.visualizacion-box {
    background: #f8fafc;
    border-radius: 16px;
    padding: 18px;
    margin-top: 20px;
}

.trend-box {
    background: #dcfce7;
    border-radius: 12px;
    padding: 14px;
    margin: 14px 0;
    color: #166534;
}

.chart-placeholder {
    height: 220px;
    border-radius: 14px;
    background: repeating-linear-gradient( 45deg, #f1f5f9, #f1f5f9 10px, #e5e7eb 10px, #e5e7eb 20px );
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

/* =========================
   VARIABLES
========================= */
:root {
    --panss-green: #059669;
    --panss-green-dark: #047857;
    --panss-green-strong: #065f46;
    --thumb-size: 16px;
}

/* =========================
   CONTENEDOR GENERAL
========================= */
.panss-container {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

/* =========================
   ETIQUETAS SUPERIORES
========================= */
.panss-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--panss-green);
    margin-bottom: 6px;
}

.scale-left,
.scale-right {
    white-space: nowrap;
}

/* =========================
   SLIDER
========================= */
.panss-slider {
    width: 100%;
    margin: 12px 0 0 0;
    background: transparent;
    accent-color: transparent; /* desactiva el color nativo del navegador */
}

    /* TRACK */
    .panss-slider::-webkit-slider-runnable-track {
        height: 8px;
        border-radius: 999px;
        background: linear-gradient( to right, #1d4ed8 0%, #1d4ed8 calc((var(--value, 1) - 1) / 6 * 100%), #e5e7eb calc((var(--value, 1) - 1) / 6 * 100%) );
    }

    .panss-slider::-moz-range-track {
        height: 8px;
        border-radius: 999px;
        background: #e5e7eb;
    }

    /* THUMB BASE (visible siempre) */
    .panss-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: var(--thumb-size);
        height: var(--thumb-size);
        border-radius: 50%;
        cursor: pointer;
        background-color: #16a34a; /* color base inicial */
        border: none;
        margin-top: calc((8px - var(--thumb-size)) / 2);
    }

    .panss-slider::-moz-range-thumb {
        width: var(--thumb-size);
        height: var(--thumb-size);
        border-radius: 50%;
        cursor: pointer;
        background-color: #16a34a;
        border: none;
    }

/* =========================
   ESCALA INFERIOR
========================= */
.panss-scale {
    margin-top: 6px;
}

/* NÚMEROS 1–7 */
.scale-numbers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--panss-green-dark);
    padding-left: calc(var(--thumb-size) / 2);
    padding-right: calc(var(--thumb-size) / 2);
}

    /* Separadores entre números */
    .scale-numbers span {
        position: relative;
        user-select: none;
    }

        .scale-numbers span:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 25%;
            width: 1px;
            height: 50%;
            background-color: #e5e7eb;
        }

        /* Número activo */
        .scale-numbers span.active {
            color: var(--panss-green-strong);
            font-weight: 700;
            transform: scale(1.1);
        }

/* =========================
   COLORES POR NIVEL
========================= */
/* Chrome / Edge */
.panss-slider.level-low {
    accent-color: #16a34a !important;
}

.panss-slider.level-mid {
    accent-color: #f59e0b !important;
}

.panss-slider.level-high {
    accent-color: #dc2626 !important;
}

.charts-container {
    margin-top: 16px;
}

.chart-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.chart-tab {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    cursor: pointer;
    font-size: 14px;
}

    .chart-tab.active {
        background: #10b981;
        color: white;
        font-weight: 600;
    }

.chart-box {
    background: #f8fffc;
    border-radius: 10px;
    padding: 12px;
}

.hidden {
    display: none;
}

/* TAB 5 */
.med-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.med-btn {
    border: 1px solid #34d399;
    background: #ecfdf5;
    color: #065f46;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
}

    .med-btn.active {
        background: #10b981;
        color: #fff;
    }

    .med-btn.tipo {
        border-color: #93c5fd;
        background: #eff6ff;
        color: #1e3a8a;
    }

.add-med {
    display: flex;
    gap: 10px;
}

.med-selected-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    background: #ecfdf5;
    padding: 12px;
    border-radius: 12px;
}

.med-chip {
    background: #10b981;
    color: white;
    padding: 6px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .med-chip span {
        cursor: pointer;
        font-weight: bold;
    }

.med-btn.tipo.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* TAB 6 */
.subtabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.subtab {
    flex: 1;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: #e6f7f2;
    cursor: pointer;
    font-weight: 600;
}

    .subtab.active {
        background: #16a085;
        color: #fff;
    }

.food-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.food-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eafaf6;
    padding: 10px 14px;
    border-radius: 10px;
}

.food-name {
    font-weight: 600;
}

.food-select {
    border-radius: 20px;
    padding: 4px 10px;
}

/* TAB 6 - Alergias / Intolerancias */

.alergias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.alergia-btn {
    border: 1px solid #16a085;
    background: #e6f7f2;
    color: #065f46;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
}

    .alergia-btn.active {
        background: #16a085;
        color: #fff;
    }

.alergias-selected {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add-alergia {
    display: flex;
    gap: 10px;
}

button.btn-add-alergia,
button#addCustomMed {
    display: inline-block;
    background: #008a58;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

/* Agregar al archivo CSS */
s
.next-appointments {
    background-color: #f0f9f0;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.next-appointments h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.next-appointments ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

    .next-appointments ul li {
        display: flex;
        background-color: #F5FDF8;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #a4f4cf;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

.appointment-header {
    font-size: 16px;
    color: #004f3b;
    line-height: inherit;
}

    .appointment-header p {
        margin: 0px 0px 10px;
    }

.appointment-body {
    margin-top: 10px;
    font-size: 1rem;
    color: #666;
}

.appointment-footer {
    margin-top: 10px;
    text-align: center;
}

    .appointment-footer a {
        text-decoration: none;
        color: #fff;
        font-weight: bold;
        background: #008a58;
        padding: 10px 20px;
        border-radius: 8px;
        margin-top: 20px;
        display: block;
    }

        .appointment-footer a:hover {
            background: #007A55;
        }

span.icon-fecha {
    width: 15px;
    display: inline-flex;
    top: 2px;
    position: relative;
}

span.icon-hora {
    width: 15px;
    display: inline-flex;
    margin-left: 10px;
    top: 2px;
    position: relative;
}

p.motivo {
    color: #6a7282;
    font-size: 12px;
    line-height: 1.33;
    margin: 0px;
}

.appointment-card-content p.diagnostico {
    color: #155dfc;
    font-size: 12px;
    line-height: 1.33;
    margin: 5px 0px 0px;
}

h1.listado {
    margin: 0px;
}

.next-appointments {
    border: 1px solid #05966933;
    margin-top: 20px;
    padding: 20px;
    border-radius: 14px;
}

.appointment-card-icon {
    margin-right: 20px;
    padding: 12px;
    background: #d0fae5;
    height: fit-content;
    border-radius: 5px;
}

.btn-rec {
    display: block;
    margin: 20px 0px;
}

.paciente-item {
    background-color: #e9f9f0;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .paciente-item:hover,
    .appointment-card:hover {
        background-color: #d0fae5;
    }

.paciente-info {
    display: flex;
    flex-direction: column;
}

.paciente-nombre {
    font-size: 1.2em;
    font-weight: bold;
    color: #2d9c72;
}

.fecha-visita {
    font-size: 0.9em;
    color: #6fbfa8;
}

.estado-paciente {
    background-color: #2d9c72;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.3s;
}

    .estado-paciente:hover {
        background-color: #22975b;
    }

.estado-en-tratamiento {
    background-color: #39bfa5;
}

.estado-seguimiento {
    background-color: #69e3b7;
}

.estado-evaluacion-inicial {
    background-color: #9be1ca;
}

.ver-todos-link {
    display: inline-block;
    font-size: 1em;
    color: #2d9c72;
    text-decoration: none;
    margin-top: 20px;
    border-bottom: 2px solid #2d9c72;
}

    .ver-todos-link:hover {
        color: #39bfa5;
        border-bottom: 2px solid #39bfa5;
    }

.validation-summary-errors.alert-error {
    text-align: left;
}

    .validation-summary-errors.alert-error ul {
        list-style-type: none;
        font-size: 14px;
        padding: 0px;
        color: chocolate;
    }

a.psw-link {
    margin-top: 4px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #009966;
    display: block;
    text-decoration: none;
}

@media (max-width: 980px) {
    p.subtitle {
        padding: 0px 10px;
    }
    .dashboard-header {
        padding: 5px;
    }
    .user-section {
        gap: 10px;
    }
    .logo-section .logo-circle {
        height: 35px;
    }
    .logo-section svg {
        top: 0px !important;
    }
    .dashboard-content {
        padding: 10px;
    }
    .stats-card {
        width: -webkit-fill-available;
    }
    .tabs,
    .tab-button {
        display: block !important;
        width: -webkit-fill-available;
    }
    .grid-3, .grid-2 {
        grid-template-columns: inherit;
    }
    .main-content-internal {
        width: -webkit-fill-available;
        padding: 0px 15px;
        max-width: -webkit-fill-available;
        display: block;
    }
    .volver {
        padding: 0px 20px;
    }
    .paciente-container {
        padding: 10px;
        margin: 0px 10px;
        width: 100%;
        display: contents;
    }
    .btn-primary {
        padding: 10px;
    }
    .form-section {
        width: -webkit-fill-available;
    }
    .pacientes-grid {
        display: block;
        width: max-content;
    }
    .panss-summary, .resumen-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .inputFile {
        width: 90%;
    }
    .pacientes-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        width: max-content !important;
    }
    .site-wrapper {
        width: fit-content;
    }
    .paciente-header {
        padding: 20px 0px;
    }
    .paciente-back {
        position: relative !important;
        right: 0px !important;
    }
    .card {
        width: -webkit-fill-available !important;
    }
}