/* ============================================================
   ARGUS — styles_test.css
   Modernizacion visual: items 1-4
   Carga DESPUES de bootstrap.min.css, styles.css, w3-theme-blue.css,
   w3.css y alertify/css/themes/bootstrap.min.css.
   Selectores prefijados con `body` para ganar specificity sobre BS3.
   ============================================================ */

/* -----------------------------------------------------
   1. TIPOGRAFIA — system font stack
   - Reemplaza Gotham por system stack (San Francisco / Segoe UI /
     Roboto segun OS). 0 KB descarga, render mas crisp.
   - Gotham queda al final como fallback final.
   - Sobreescribe las reglas del CSS viejo que setean gotham_*
     en elementos especificos.
   - Iconos (font-awesome, glyphicon) NO se tocan.
   ----------------------------------------------------- */
:root {
    --argus-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
                  "Segoe UI", Roboto, "Helvetica Neue", Arial,
                  "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji",
                  sans-serif;
}
body,
body input, body select, body textarea, body button, body optgroup,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body div, body a, body li, body td, body th, body label,
body .navbar-default, body .navbar-default .navbar-nav > li > a,
body .menuFooter, body .menuFooter2,
body .ttlForm, body .ttlForm span,
body .infoSedes, body .infoSedes h4, body .infoSedes h4 span,
body .infoSedes2, body .infoSedes2 h4, body .infoSedes2 h4 span,
body .btn, body .btn-primary,
body .btn-primary.turnos, body .btn-primary.turnos2, body .btn-primary.turnos3,
body .panel-heading, body .panel-body, body .panel-title,
body .form-control, body .input-group-addon,
body .mensaje, body .mensaje span,
body footer, body footer * {
    font-family: var(--argus-font) !important;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body h1, body h2, body h3, body h4 {
    letter-spacing: -0.015em;
    line-height: 1.25;
    font-weight: 600;
}
body h1 { font-weight: 700; }
body strong, body b { font-weight: 600; }

/* Glyphicons (BS3) siguen necesitando su fuente */
body .glyphicon { font-family: 'Glyphicons Halflings' !important; }

/* Items "Portal Argus" / "Portal Laboratorio" del menu — destacados con
   fondo azul Argus claro para diferenciarlos de las sedes/laboratorios. */
body .dropdown-menu > li.portalLink > a {
    background-color: #D9F0FA;
    color: #005390;
    transition: background-color .2s ease;
}
body .dropdown-menu > li.portalLink > a:hover,
body .dropdown-menu > li.portalLink > a:focus {
    background-color: #009FE3;
    color: #FFFFFF;
}

/* Boton flotante WhatsApp: ajuste para SVG centrado */
body .floatWa {
    display: flex;
    align-items: center;
    justify-content: center;
}
body .floatWa .my-floatWa {
    margin: 0;
    display: block;
}

/* -----------------------------------------------------
   2. BOTONES E INPUTS MODERNOS
   - .btn (BS3) con padding mas generoso, radius 8px, transicion.
   - Sombra suave en hover.
   - Focus ring accesible (focus-visible) azul Argus.
   - Inputs form-control mantienen su pill style (identidad),
     pero con focus ring + transicion.
   ----------------------------------------------------- */
body .btn {
    border-radius: 8px;
    padding: 10px 18px;
    transition: box-shadow .2s ease, transform .15s ease,
                background-color .2s ease, border-color .2s ease;
}
body .btn-lg {
    padding: 14px 28px;
    border-radius: 10px;
}
body .btn-sm {
    padding: 6px 12px;
    border-radius: 6px;
}
body .btn:hover {
    box-shadow: 0 4px 14px rgba(0, 83, 144, 0.18);
    transform: translateY(-1px);
}
body .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 83, 144, 0.18);
}
/* Excepcion: el boton "turnos" tiene look propio (bg con flecha PNG +
   font-family + float + padding-right custom). NO lo modernizamos,
   se respeta el diseno original del sitio. */
body .btn-primary.turnos,
body .btn-primary.turnos2,
body .btn-primary.turnos3 {
    border-radius: 4px;
    padding: 6px 25px 6px 16px;
    transform: none;
    box-shadow: none;
}
body .btn-primary.turnos:hover,
body .btn-primary.turnos2:hover,
body .btn-primary.turnos3:hover {
    transform: none;
    box-shadow: none;
}
body .btn:focus-visible,
body .form-control:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
    outline: 3px solid rgba(0, 159, 227, 0.45);
    outline-offset: 2px;
}
/* Bootstrap 3 deja un outline raro: lo neutralizamos solo cuando NO es teclado */
body .btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}
/* Inputs / selects / textareas: anulamos el pill 50px (look viejo).
   Radius 8px (10px en textarea). Mas aire, transiciones, focus ring. */
body .form-control,
body input.form-control,
body select.form-control,
body textarea.form-control {
    border-radius: 8px !important;
    border: 1px solid #D5D8DD !important;
    background-color: #FFFFFF !important;
    transition: box-shadow .2s ease, border-color .2s ease,
                background-color .2s ease;
    box-shadow: none;
}
body textarea.form-control {
    border-radius: 10px !important;
}
body select.form-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23005390' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
    padding-right: 36px !important;
    background-color: #FFFFFF !important;
}
body .form-control:focus {
    border-color: #009FE3 !important;
    box-shadow: 0 0 0 4px rgba(0, 159, 227, 0.15);
    background-color: #FFFFFF !important;
}
body .form-control::placeholder { color: #9AA0A6; opacity: 1; }

/* input-group-addon que tambien era pill (25px) */
body .input-group-addon {
    border-radius: 8px !important;
    border: 1px solid #D5D8DD;
}
/* Cuando va pegado a un input, alineamos las esquinas BS3-style */
body .input-group .form-control:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
body .input-group .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body .input-group-addon:not(:first-child):not(:last-child),
body .input-group-addon:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
body .input-group-addon:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* -----------------------------------------------------
   3. HOVER / TRANSITIONS EN CARDS
   - .btnHome: anula el feo opacity:0.5 del CSS viejo.
                Reemplaza con elevacion + sombra.
   - .fotoSedes, .infoSedes, .panel-heading: shadow al hover.
   - Imagenes del carousel: zoom suave al hover.
   ----------------------------------------------------- */
body .btnHome,
body .btnDudas,
body .btnLab,
body .btnPrestaciones {
    transition: transform .25s ease, box-shadow .25s ease,
                background-color .25s ease;
    will-change: transform;
}
body .btnHome:hover {
    opacity: 1 !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 83, 144, 0.22);
}
body .btnDudas:hover,
body .btnLab:hover,
body .btnPrestaciones:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 83, 144, 0.2);
}

/* Boton Laboratorio (home): teal intermedio entre el cyan de btnDudas
   y el azul oscuro de btnPrestaciones. Mismo sizing que btnDudas. */
body .btnLab {
    border-radius: 5px;
    background-color: #0288A8;
    text-align: center;
    color: #FFF;
    font-size: 17px;
    line-height: 20px;
    padding: 16px 18px;
    margin-top: 18px;
}

/* Cuando hay 3 botones en la home, achicamos padding/font para que entren
   en la altura del carousel sin que el sync los estire demasiado. */
@media (min-width: 768px) {
    body .homeIntro > .col-sm-3 > a > .btnDudas,
    body .homeIntro > .col-sm-3 > a > .btnPrestaciones {
        padding: 16px 18px;
        font-size: 17px;
        line-height: 20px;
    }
    body .homeIntro > .col-sm-3 .icoHome {
        margin-bottom: 6px;
    }
    body .homeIntro > .col-sm-3 .icoHome img,
    body .homeIntro > .col-sm-3 .icoHome svg {
        max-height: 48px;
        max-width: 100%;
        width: auto;
        height: 48px;
    }
}

/* MOBILE: en pantallas chicas los botones quedan muy anchos verticalmente.
   Ponemos icono y texto en una linea horizontal, mas compacto. */
@media (max-width: 767px) {
    body .col-sm-3 > a > .btnDudas,
    body .col-sm-3 > a > .btnLab,
    body .col-sm-3 > a > .btnPrestaciones {
        display: flex;
        align-items: center;
        gap: 14px;
        text-align: left;
        padding: 14px 18px;
        font-size: 16px;
        line-height: 20px;
    }
    body .col-sm-3 > a > .btnDudas .icoHome,
    body .col-sm-3 > a > .btnLab .icoHome,
    body .col-sm-3 > a > .btnPrestaciones .icoHome {
        flex-shrink: 0;
        margin: 0;
    }
    body .col-sm-3 > a > .btnDudas .icoHome img,
    body .col-sm-3 > a > .btnLab .icoHome svg,
    body .col-sm-3 > a > .btnPrestaciones .icoHome img {
        max-height: 42px;
        width: auto;
        height: 42px;
        display: block;
    }
}

/* -----------------------------------------------------
   Cards de sedes / laboratorios (TEST)
   Wrapper .sedeCard envuelve foto+info como UNA card unificada.
   Foto arriba, info abajo (layout vertical para que sea "cuadradita"
   incluso cuando el texto es corto).
   ----------------------------------------------------- */
body .sedeLink {
    display: block;
    color: inherit;
    text-decoration: none;
}
body .sedeLink:hover,
body .sedeLink:focus {
    text-decoration: none;
    color: inherit;
}
body .sedeCard {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease,
                border-color .25s ease;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
body .sedeLink:hover .sedeCard {
    transform: translateY(-3px);
    border-color: #009FE3;
    box-shadow: 0 10px 26px rgba(0, 83, 144, 0.15);
}
body .sedeCardFoto {
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background-color: #F4F6F8;
    position: relative;
}
/* Badge "NUEVO" sobre la foto, esquina sup-izq */
body .sedeCardFoto .sedeBadgeNuevo {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #009FE3;
    color: #FFFFFF;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 4px;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    line-height: 1;
}
body .sedeCardFoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
body .sedeLink:hover .sedeCardFoto img {
    transform: scale(1.03);
}
body .sedeCardInfo {
    padding: 14px 18px 16px;
    flex: 1;
}
body .sedeCardInfo h4 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: #005390;
    line-height: 1.25;
}
/* Titulo card sede: ARGUS y nombre de sede del mismo tamano */
body .sedeCardInfo h4 .argusName {
    font-size: 18px;
    font-weight: 700;
    color: #009FE3;
    letter-spacing: 0;
    text-transform: none;
    margin-right: 4px;
    vertical-align: baseline;
}
body .sedeCardInfo h4 .sedeName {
    font-size: 18px;
    font-weight: 700;
    color: #005390;
    vertical-align: baseline;
}
body .sedeCardInfo .txtSedes {
    color: #444;
    font-size: 14px;
    line-height: 1.45;
}
body .sedeCardInfo .telSedes { color: #009FE3; }

/* Variante hospital / laboratorio: sin foto, icon a la izquierda centrado. */
body .sedeCardHosp,
body .sedeCardLab {
    flex-direction: row;
    align-items: center;
}
body .sedeCardIcono {
    flex: 0 0 auto;
    padding: 0 0 0 24px;
    display: flex;
    align-items: center;
}
/* Los pins .gpsSedes/.gpsLabs vienen con position:absolute en el
   CSS viejo; sobreescribimos para que fluyan y se centren. */
body .sedeCardIcono .gpsSedes,
body .sedeCardIcono .gpsLabs {
    position: static !important;
    display: block;
    flex-shrink: 0;
}
body .sedeCardHosp .sedeCardInfo,
body .sedeCardLab .sedeCardInfo {
    padding: 16px 20px;
}
body .sedeCardHosp .sedeCardInfo h4,
body .sedeCardLab .sedeCardInfo h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

body .panel-heading {
    transition: background-color .2s ease, box-shadow .2s ease;
}
body .panel-heading:hover {
    box-shadow: 0 2px 8px rgba(0, 83, 144, 0.15);
}

/* -----------------------------------------------------
   SWIPER.JS - look Argus
   ----------------------------------------------------- */
body .argusSwiper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
body .argusSwiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* Paginacion estilo "pill" delgado */
body .argusSwiper .swiper-pagination-bullet {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background-color: #FFFFFF;
    opacity: 0.55;
    transition: opacity .25s ease, background-color .25s ease, width .25s ease;
    margin: 0 4px !important;
}
body .argusSwiper .swiper-pagination-bullet-active {
    background-color: #009FE3;
    opacity: 1;
    width: 40px;
}

/* Flechas: SVG por defecto Swiper, ajustamos color/tamano */
body .argusSwiper .swiper-button-next,
body .argusSwiper .swiper-button-prev {
    color: #FFFFFF;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: rgba(0, 83, 144, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background-color .25s ease, transform .25s ease;
    top: 50%;
    margin-top: -23px;
}
body .argusSwiper .swiper-button-next:hover,
body .argusSwiper .swiper-button-prev:hover {
    background-color: #009FE3;
    transform: scale(1.08);
}
body .argusSwiper .swiper-button-next::after,
body .argusSwiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: 700;
}
body .argusSwiper .swiper-button-prev { left: 14px; }
body .argusSwiper .swiper-button-next { right: 14px; }

/* Mobile: flechas mas chicas */
@media (max-width: 768px) {
    body .argusSwiper .swiper-button-next,
    body .argusSwiper .swiper-button-prev {
        width: 36px;
        height: 36px;
        margin-top: -18px;
    }
    body .argusSwiper .swiper-button-next::after,
    body .argusSwiper .swiper-button-prev::after {
        font-size: 14px;
    }
}

/* -----------------------------------------------------
   4. NAVBAR: sombra + blur al scrollear
   - JS agrega .scrolled cuando window.scrollY > 50.
   - Estado normal: solido (como hoy).
   - Estado scrolled: semitransparente + backdrop-blur + sombra.
   ----------------------------------------------------- */
body .navbar-default {
    transition: background-color .25s ease, box-shadow .25s ease,
                padding-top .25s ease, padding-bottom .25s ease,
                backdrop-filter .25s ease;
}
body .navbar-default.scrolled {
    background-color: rgba(0, 83, 144, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
    padding-top: 10px;
}

/* -----------------------------------------------------
   BONUS RAPIDOS
   - scroll-behavior smooth en links de ancla.
   - Respeta prefers-reduced-motion.
   - Boton "volver arriba" flotante (aparece con JS).
   ----------------------------------------------------- */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body *, body *::before, body *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

#backToTop {
    position: fixed;
    bottom: 110px;
    right: 40px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #005390;
    color: #FFF;
    border: 0;
    font-size: 22px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease,
                background-color .25s ease;
    box-shadow: 0 4px 14px rgba(0, 83, 144, 0.3);
    z-index: 100;
}
#backToTop.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
#backToTop:hover {
    background-color: #009FE3;
    box-shadow: 0 6px 20px rgba(0, 159, 227, 0.4);
}

/* -----------------------------------------------------
   Notas finales:
   - Esto NO toca colores ni layout. Solo:
     transiciones, sombras, radios, padding, focus rings,
     y un par de comportamientos JS (scrolled, backToTop).
   - Para revertir: borrar el <link> de styles_test.css en
     header_test.php y el bloque JS al final del body.
   ----------------------------------------------------- */

/* -----------------------------------------------------
   Banner .ttlSedes: caja azul Argus con esquina superior
   derecha cortada en diagonal (clip-path). Reemplaza la
   patita PNG por una forma CSS limpia.
   ----------------------------------------------------- */
body .modSedes .ttlSedesBg {
    display: none !important;
}
body .modSedes .ttlSedes {
    background-color: #009FE3;
    color: #FFFFFF !important;
    float: left !important;
    margin: -90px 0 28px 15px !important;
    padding: 14px 50px 14px 20px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
    border-left: none;
    position: relative;
    display: inline-block;
    /* Esquina inferior derecha cortada en diagonal */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    box-shadow: 0 4px 14px rgba(0, 83, 144, 0.18);
}
/* Banner de "Laboratorios": misma forma, margin-top distinto */
body .modSedes .container.hospitales .ttlSedes {
    margin-top: 0 !important;
}

/* -----------------------------------------------------
   Home: carousel con altura natural + botones laterales
   estirados para coincidir (JS setea min-height al col-sm-3).
   ----------------------------------------------------- */
@media (min-width: 768px) {
    body .homeIntro .argusSwiper .swiper-slide a {
        display: block;
        width: 100%;
    }
    body .homeIntro .argusSwiper .swiper-slide img {
        width: 100%;
        height: auto;
        display: block;
    }
    /* Cuando JS aplica .home-sync el col-sm-3 toma altura del swiper */
    body .homeIntro > .col-sm-3.home-sync {
        display: flex;
        flex-direction: column;
    }
    body .homeIntro > .col-sm-3.home-sync > a {
        flex: 1;
        display: flex;
        margin-top: 0 !important;
        text-decoration: none;
    }
    body .homeIntro > .col-sm-3.home-sync > a + a {
        margin-top: 18px !important;
    }
    body .homeIntro > .col-sm-3.home-sync > a > .btnHome {
        flex: 1;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 0 !important;
        width: 100%;
    }
}

/* -----------------------------------------------------
   Iconos custom del sidebar de contacto (SVG inline)
   ----------------------------------------------------- */
body .iconoWa {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%238ADCFF'%3E%3Cpath d='M16.004 0C7.165 0 0 7.164 0 16c0 2.823.737 5.585 2.137 8.013L0 32l8.187-2.148A15.92 15.92 0 0 0 16 31.987C24.836 31.987 32 24.823 32 15.987 32 7.164 24.836 0 16.004 0zm0 29.32a13.27 13.27 0 0 1-6.788-1.86l-.487-.288-4.866 1.275 1.297-4.745-.317-.49a13.244 13.244 0 0 1-2.038-7.062c0-7.336 5.972-13.302 13.305-13.302 7.336 0 13.304 5.972 13.304 13.302 0 7.336-5.972 13.302-13.31 13.302zm7.295-9.957c-.4-.2-2.367-1.167-2.733-1.3-.367-.133-.633-.2-.9.2-.267.4-1.034 1.3-1.267 1.567-.234.267-.467.3-.867.1-.4-.2-1.689-.622-3.218-1.987-1.19-1.062-1.992-2.373-2.225-2.773-.234-.4-.025-.617.175-.817.18-.18.4-.467.6-.7.2-.234.267-.4.4-.667.134-.267.067-.5-.033-.7-.1-.2-.9-2.167-1.234-2.967-.325-.78-.655-.674-.9-.687a16.4 16.4 0 0 0-.767-.014c-.267 0-.7.1-1.067.5s-1.4 1.367-1.4 3.333 1.434 3.867 1.633 4.133c.2.267 2.834 4.333 6.867 6.067.96.413 1.71.66 2.293.847.964.307 1.84.263 2.534.16.773-.115 2.367-.967 2.7-1.9.333-.933.333-1.733.234-1.9-.1-.167-.367-.267-.767-.467z'/%3E%3C/svg%3E");
}
body .iconoTrabajo {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238ADCFF'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}
body .iconoWa,
body .iconoTrabajo {
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 42px 42px;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

/* -----------------------------------------------------
   Centrado vertical: icono + texto en cada .telefonoBox
   ----------------------------------------------------- */
body .telefonoBox {
    margin-bottom: 18px;
}
body .telefonoBox a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
body .telefonoBox a:hover { text-decoration: none; }

/* Anulamos el float:left + height:85 + margin-right:10 viejos */
body .telefonoBox .iconoSobre,
body .telefonoBox .iconoTel,
body .telefonoBox .iconoGlobo,
body .telefonoBox .iconoWa,
body .telefonoBox .iconoTrabajo {
    float: none;
    margin-right: 0;
    height: 50px;
    background-position: left center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
/* Los PNG originales (telefono.png 50x85, sobre.png 56x40, globo.png 54x56)
   se escalan para entrar en el container 50x50 manteniendo aspect-ratio. */
body .telefonoBox .iconoSobre,
body .telefonoBox .iconoTel,
body .telefonoBox .iconoGlobo {
    background-size: contain;
}
body .telefonoBox .datosSobre,
body .telefonoBox .datosTel {
    float: none;
    margin-top: 0;
}

/* -----------------------------------------------------
   Feedback de archivos subidos (preview-list)
   Reutilizable en cualquier form con input file.
   Estilos copiados/adaptados de ioma.php.
   ----------------------------------------------------- */
body .preview-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body .preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F5F7FA;
    border: 1px solid #D5D8DD;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    max-width: 420px;
}
body .preview-icon-btn {
    background: none;
    border: 1px solid #C8CBD2;
    border-radius: 4px;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    text-align: center;
    padding: 0;
    transition: background-color .15s ease, border-color .15s ease;
}
body .preview-icon-btn:hover {
    background: #E8F4FB;
    border-color: #009FE3;
}
body .preview-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #005390;
    text-decoration: none;
}
body .preview-name:hover {
    text-decoration: underline;
    color: #009FE3;
}
body .preview-delete {
    background: none;
    border: none;
    color: #C0392B;
    font-size: 1.1em;
    cursor: pointer;
    padding: 2px 7px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: 4px;
    transition: background-color .15s ease;
}
body .preview-delete:hover {
    background: #FDECEA;
}

/* -----------------------------------------------------
   Overlay "Enviando..." — full screen blocker mientras el
   form esta enviando (turnos, ioma, contacto).
   ----------------------------------------------------- */
body .sendingOverlay {
    position: fixed;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 99999;
    color: #005390;
    padding: 24px;
    text-align: center;
}
body .sendingOverlay.active { display: flex; }
body .sendingOverlay__spinner {
    width: 64px;
    height: 64px;
    border: 6px solid #D9F0FA;
    border-top-color: #009FE3;
    border-radius: 50%;
    animation: argusSpin 0.8s linear infinite;
}
body .sendingOverlay__text {
    margin-top: 24px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}
body .sendingOverlay__sub {
    margin-top: 10px;
    font-size: 15px;
    color: #555;
    max-width: 360px;
    line-height: 1.45;
}
@keyframes argusSpin {
    to { transform: rotate(360deg); }
}

/* Botones modernos para upload / camara */
body .btn-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background-color: #F5F7FA;
    border: 1px solid #D5D8DD;
    color: #005390;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .15s ease, color .2s ease;
    text-decoration: none;
    margin-right: 8px;
    margin-bottom: 8px;
    line-height: 1.2;
}
body .btn-upload:hover {
    background-color: #E8F4FB;
    border-color: #009FE3;
    color: #005390;
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.15);
    transform: translateY(-1px);
    text-decoration: none;
}
body .btn-upload:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 159, 227, 0.15);
}
body .btn-upload svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* -----------------------------------------------------
   Menu MOBILE (collapse navbar BS3):
   - Iconos de redes sociales en una fila horizontal.
   - Medicos y Contacto alineados (ambos en su propia fila pero
     visualmente consistentes).
   ----------------------------------------------------- */
@media (max-width: 767px) {
    /* Iconos sociales: inline-block en lugar del default block stack */
    body .navbar-default .navbar-collapse .nav > li.redesItem {
        display: inline-block;
        float: none;
    }
    body .navbar-default .navbar-collapse .nav > li.redesItem > a {
        padding: 10px 12px;
        display: inline-block;
    }
    body .navbar-default .navbar-collapse .nav > li.redesItem > a > img {
        max-height: 24px;
        display: inline-block;
    }
    /* Los <ul> navbar-right son hermanos verticales en mobile (BS3 default).
       Alineamos su padding-left para que los textos queden a la misma X. */
    body .navbar-default .navbar-collapse .navbar-nav.navbar-right {
        margin: 0;
        padding: 0;
    }
    body .navbar-default .navbar-collapse .navbar-nav.navbar-right > li > a {
        padding-left: 15px;
    }
    /* El ul de "Más" (masSecciones) lo ocultamos en mobile, ya esta todo expandido */
    body .navbar-default .navbar-collapse .masSecciones {
        display: none;
    }
}