/*:::::::::::--- SECTION: FORMS --- */
body {
    background-color: #f4f6f8;
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    color: #222;
}


.section {
    width: 70%;
    margin: 4% auto;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    padding: 2.5rem 2rem;
}




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




h5 {
    color: rgb(73, 73, 73);
}

.form {
    margin: 0 auto;
    padding: 4% 8% 0 8%;
}

.form-title {
    margin-top: 2%;
}

.align-left {
    text-align: left;
    margin: 4% 0 4% 0;
}


label {
    max-width: 250px;
    margin: 0 5px 0 10px;
    text-align: left;
    font-weight: 500;
    color: #374151;
}


.form-control, input[type="text"], input[type="email"], input[type="number"], input[type="file"], select, textarea {
    width: 100%;
    padding: 10px 12px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    background: #f9fafb;
    font-size: 1rem;
    transition: border 0.2s;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    border: 1.5px solid #1a237e;
    outline: none;
    background: #fff;
}


.width-15 { width: 15%; }
.width-25 { width: 25%; }
.width-33 { width: 33%; }
.width-50 { width: 50%; }
.width-75 { width: 75%; }
.width-100 { width: 100%; }


.space-between {
    justify-content: space-between;
    margin: 3% 0 1% 0;
}


div.block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 3% 0 1% 0;
}


.border-area {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    background: #f8fafc;
}


ul {
    list-style: none;
    padding-left: 0;
}


.centered {
    margin: 0 auto;
}


.new-consultation-button:hover {
    color: #ffffff !important;
}

/* Barra de progreso afiliación */
.progress-bar {
    width: 100%;
    background: #e3e7ef;
    border-radius: 999px;
    height: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
}
.progress-bar-inner {
    background: linear-gradient(90deg, #1a237e 60%, #3949ab 100%);
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s;
}

/* Botones principales */
.bg-primary {
    background: #1a237e !important;
}
.text-primary {
    color: #1a237e !important;
}
.btn-primary, .bg-primary.text-white {
    background: #1a237e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(26,35,126,0.07);
    transition: background 0.2s, box-shadow 0.2s;
}
.btn-primary:hover, .bg-primary.text-white:hover {
    background: #3949ab;
    color: #fff;
    box-shadow: 0 4px 16px rgba(26,35,126,0.13);
}

/* Tablas de planes */
table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
th, td {
    padding: 0.75rem 0.5rem;
    text-align: center;
}
th {
    background: #e3e7ef;
    color: #1a237e;
    font-weight: 600;
    border-bottom: 1px solid #cfd8dc;
}
tr:nth-child(even) {
    background: #f6f8fa;
}
tr:hover {
    background: #e8eaf6;
}

/* Testimonios */
.testimonial {
    background: #f8fafc;
    border-left: 4px solid #1a237e;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(26,35,126,0.04);
}
.testimonial blockquote {
    font-style: italic;
    color: #374151;
    margin-bottom: 0.5rem;
}
.testimonial .author {
    font-size: 0.9rem;
    color: #6b7280;
}

/* Mensajes de éxito y alertas */
.bg-green-100 {
    background: #e6f9ed !important;
    border: 1px solid #b2e2c7 !important;
    color: #256029 !important;
}
.border-green-300 {
    border-color: #b2e2c7 !important;
}

/* Links */
a.text-blue-600 {
    color: #2563eb !important;
    text-decoration: underline;
    transition: color 0.2s;
}
a.text-blue-600:hover {
    color: #1a237e !important;
}

/* Responsive */
@media (max-width: 600px) {
    .container, .section, .max-w-lg {
        width: 98% !important;
        padding: 1rem !important;
    }
    table, th, td {
        font-size: 0.95rem;
    }
    .btn-primary, .bg-primary.text-white {
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }
}


/* Icons */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }





/*:::::::::::::::: Inmunization Table on Consultation control styles:::::::*/

#open-vaccine-popup-btn {position:fixed; top:50%; transform:translateY(-50%); right:0; background:#0077B6; color:#fff; border:none; padding:10px 12px; border-radius:8px 0 0 8px; cursor:pointer; z-index:1100; box-shadow:0 2px 6px rgba(0,0,0,.2);} 
            #open-vaccine-popup-btn svg {width:28px; height:28px; fill:#fff;}
            #vaccine-popup {position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1200; padding:20px;} 
            #vaccine-popup.show {display:flex;} 
            /* Forzar icono PNG blanco mediante filtros (sin editar archivo original) */
            #open-vaccine-popup-btn img {filter: brightness(0) invert(1) contrast(1.05); display:block;}
            .vaccine-popup-content {background:#fff; max-width:1000px; width:92%; max-height:90%; overflow:auto; border-radius:10px; padding:24px; box-shadow:0 4px 18px rgba(0,0,0,.3); animation:popIn .25s ease;} 
            .vaccine-popup-close {position:absolute; top:8px; right:12px; background:transparent; border:none; font-size:2rem; line-height:1; cursor:pointer; color:#444;} 
            .vaccine-table {width:100%; border-collapse:collapse; font-size:.85rem;} 
            .vaccine-table th, .vaccine-table td {border:1px solid #ccc; padding:6px 4px; text-align:center; vertical-align:middle;} 
            .vaccine-table th {background:#5e2f91; color:#fff; position:sticky; top:0; z-index:1;} 
            .vaccine-table tbody tr:nth-child(odd){background:#f7f5fb;} 
            .dose-cell.empty {background:#fafafa;} 
            .dose-cell.booster {background:#eef7ff;} 
            .vaccine-table-wrapper {overflow:auto;} 
            @keyframes popIn {from {transform:scale(.92); opacity:0;} to {transform:scale(1); opacity:1;}}
            @media (max-width:768px){ .vaccine-table th, .vaccine-table td {font-size:.65rem; padding:4px 2px;} #open-vaccine-popup-btn{top:auto; bottom:80px;} }
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

            /*::::::::::::: Floating Pediatric Calculator Button (aligned under vaccine) :::::::::::*/
            #open-calculator-btn {position:fixed; top:calc(50% + 52px); right:0; background:#D7A300; /* dark golden yellow */ border:none; padding:10px 12px; border-radius:8px 0 0 8px; cursor:pointer; z-index:1100; box-shadow:0 2px 6px rgba(0,0,0,.25);} 
            #open-calculator-btn:hover {background:#BF8F00;}
            #open-calculator-btn:active {background:#A97E00;}
            #open-calculator-btn img {width:32px; height:32px; /* remove filter to show original icon colors */}
            @media (max-width:768px){ #open-calculator-btn{top:auto; bottom:140px;} }

            /*::::::::::::: Growth Charts Popup Trigger (below calculator) :::::::::::*/
            #open-growth-popup-btn {position:fixed; top:calc(50% + 112px); right:0; background:#6A1B9A; /* purple */ color:#fff; border:none; padding:10px 12px; border-radius:8px 0 0 8px; cursor:pointer; z-index:1100; box-shadow:0 2px 6px rgba(0,0,0,.25);} 
            #open-growth-popup-btn:hover {background:#5A1784;}
            #open-growth-popup-btn:active {background:#4C146F;}
            #open-growth-popup-btn img {width:32px; height:32px; filter: brightness(0) invert(1) contrast(1.05); display:block;}
            @media (max-width:768px){ #open-growth-popup-btn{top:auto; bottom:96px;} }

            /*::::::::::::: Calculator Popup Styles (match index.html aesthetic) :::::::::::*/
            #calculator-popup.calc-overlay {position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1250; padding:20px;} 
            #calculator-popup.show {display:flex; animation:calcFade .25s ease;} 
            .calc-dialog {background:#ffffff; width:100%; max-width:600px; border-radius:16px; padding:24px 26px 30px; box-shadow:0 8px 28px -4px rgba(0,0,0,.35); position:relative; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; max-height:calc(100vh - 80px); overflow-y:auto; overflow-x:hidden;} 
            .calc-heading {margin:0 0 12px; font-size:1.15rem; color:#0d3b66; display:flex; align-items:center; gap:6px; font-weight:700;} 
            .calc-form {margin:0;} 
            .calc-grid {display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); margin-bottom:12px;} 
            .calc-grid label {font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600; color:#1d3557; display:flex; flex-direction:column; gap:4px;} 
            .calc-grid input {border:2px solid #a8dadc; border-radius:8px; padding:8px 10px; font-size:.85rem; background:#f8f9fa; transition:border-color .25s, box-shadow .25s;} 
            .calc-grid input:focus {outline:none; border-color:#457b9d; box-shadow:0 0 0 3px rgba(69,123,157,.25);} 
            .calc-run-btn {background:linear-gradient(135deg,#457B9D,#1D3557); color:#fff; border:none; padding:10px 16px; border-radius:10px; font-weight:600; width:100%; cursor:pointer; box-shadow:0 4px 14px rgba(29,53,87,.25);} 
            .calc-run-btn:hover {transform:translateY(-2px); box-shadow:0 6px 18px rgba(29,53,87,.35);} 
            .calc-run-btn:active {transform:translateY(0);} 
            .calc-result {margin-top:14px; font-size:.9rem; line-height:1.4; background:#f1f5f9; padding:12px 14px; border-radius:10px; border-left:4px solid #ffd166;} 
            .calc-note {margin-top:10px; font-size:.65rem; color:#607080;} 
            .calc-close-btn {position:absolute; top:6px; right:10px; border:none; background:transparent; font-size:1.75rem; line-height:1; cursor:pointer; color:#555;} 
            .calc-close-btn:hover {color:#000;} 
            @keyframes calcFade {from {opacity:0; transform:scale(.95);} to {opacity:1; transform:scale(1);} }

            /* Compact variant overrides */
            .compact-calc {padding:14px 16px 22px !important; max-width:560px; width:100%; box-shadow:0 6px 18px rgba(0,0,0,.18); border:2px solid #0d3b66; display:flex; flex-direction:column; gap:10px;}
            .compact-calc .title-line {display:flex; align-items:center; gap:6px; font-size:1rem; margin:0; font-weight:700; color:#0d3b66;}
            .compact-calc .title-line .icon {width:18px; height:18px; color:#FFD166;}
            .compact-calc .subtitle {margin:0 0 4px; font-size:.60rem; text-transform:uppercase; letter-spacing:.8px; font-weight:600; color:#1d3557; opacity:.9;}
            .compact-calc .fields-grid {display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px 14px;} /* legacy not used now */
            .compact-calc .fields-flex {display:flex; flex-wrap:wrap; gap:8px 14px;}
            .compact-calc .fields-flex .fg {flex:1 1 calc(33.333% - 14px); max-width:calc(33.333% - 14px); min-width:240px;} 
            .compact-calc .fields-flex .fg input,
            .compact-calc .fields-flex .fg select { width:100%; }
            @media (max-width:900px){ .compact-calc .fields-flex .fg {flex:1 1 calc(50% - 14px); max-width:calc(50% - 14px);} }
            @media (max-width:560px){ .compact-calc .fields-flex .fg {flex:1 1 100%; max-width:100%;} }
            .compact-calc .fg {font-size:0.9em; font-weight:600; letter-spacing:.5px; display:flex; flex-direction:column; gap:1px; color:#1d3557; margin:0;}
            .compact-calc .fg input {padding:8px 8px; border:2px solid #a8dadc; border-radius:7px; background:#f8f9fa; font-size:.8rem; line-height:1.1;}
            .compact-calc .fg input:focus {outline:none; border-color:#457b9d; box-shadow:0 0 0 2px rgba(69,123,157,.25);} 
            .compact-calc .action-btn {margin-top:4px; padding:10px 12px; font-size:.8rem; border-radius:9px;}
            .compact-calc .result-area {margin-top:4px; padding:6px 7px; font-size:.66rem; border-left:3px solid #FFD166;}
            .compact-calc .result-area p {margin:2px 0 !important;}
            .compact-calc .foot-note {font-size:.5rem !important; margin-top:6px !important;}
            /* Darker yellow highlight for result amount (override gradient) */
            .compact-calc .result-highlight {background:none !important; background-clip:initial !important; -webkit-background-clip:initial !important; -webkit-text-fill-color:#B07A00 !important; color:#B07A00 !important; font-weight:700;}
            @media (max-width:540px){
                .compact-calc {max-width:100%; padding:12px 12px 16px !important; border-radius:12px;}
                .compact-calc .fields-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px 10px;} /* keep for fallback */
                    .compact-calc .fg input {padding:8px 8px; font-size:.78rem;}
                .compact-calc .action-btn {padding:9px 10px; font-size:.75rem;}
                .compact-calc .result-area {font-size:.65rem;}
            }

/*::::::::::::: Growth Charts Popup Overlay (reuse vaccine modal look) :::::::::::*/
#growth-popup {position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1225; padding:20px;}
#growth-popup.show {display:flex;}
.growth-popup-content {background:#fff; max-width:1000px; width:92%; max-height:90%; overflow:auto; border-radius:12px; padding:20px 22px; box-shadow:0 8px 24px rgba(0,0,0,.28); position:relative;}
.growth-popup-close {position:absolute; top:8px; right:12px; background:transparent; border:none; font-size:2rem; line-height:1; cursor:pointer; color:#444;}
.growth-tabs {display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 12px;}
.growth-tabs button {padding:6px 10px; border:none; border-bottom:3px solid transparent; background:#FFFFFF; color:#1D3557; border-radius:6px; cursor:pointer;}
.growth-tabs button.active {border-bottom-color:#1D3557;}
.growth-legend {font-size:.8rem; color:#374151; text-align:center; margin-bottom:8px;}

/* ===== Notificaciones (Dashboard) ===== */
.notif-dropdown { min-width: 360px; max-height: 420px; overflow:auto; border-radius: 10px; opacity:0; transform: translateY(6px); pointer-events:none; transition: opacity .18s ease, transform .18s ease; }
.notif-dropdown.show { opacity:1; transform: translateY(0); pointer-events:auto; }
.notif-item { cursor:pointer; }
.notif-item:hover { background: #f8f9fa; }
.notif-item.unread .notif-title { font-weight: 600; }
.notif-item .notif-time { font-size: .8rem; color: #6c757d; }
.notif-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display:none; align-items: center; justify-content: center; z-index: 1050; }
.notif-modal-backdrop.show { display:flex; animation: fadeIn .18s ease; }
.notif-modal { background:#fff; width: min(560px, 92vw); border-radius: 14px; box-shadow: 0 10px 28px rgba(0,0,0,.18); transform: scale(.96); opacity:.0; transition: transform .18s ease, opacity .18s ease; position:relative; z-index:1; }
.notif-modal.show { transform: scale(1); opacity: 1; }
@keyframes fadeIn { from{ opacity:0 } to { opacity:1 } }

/* Toasts (dashboard notifications) */
#toast-root { position: fixed; right: 16px; bottom: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; }
.toast-wrap { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.toast-wrap.show { opacity: 1; transform: translateY(0); }
.toast-item { padding: 10px 14px; border-radius: 8px; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.18); font-size: .9rem; }
.toast-item.info { background: #1a237e; }
.toast-item.success { background: #2e7d32; }
.toast-item.warning { background: #ef6c00; }
.toast-item.error { background: #c62828; }