/*
 * MI DEPILIFE - LOOK 2026
 *
 * Capa SOLO estetica sobre las pantallas de Mi DepiLife (login, registro, inicio, sesiones,
 * perfil, notificaciones, cotizaciones, referidos, agenda y los mensajes de extras), en la linea
 * de secciones_2026.css: Inter, verde #759947 con el punto final en los titulos, cards grises
 * claras bien redondeadas, botones pastilla y modals aggiornados.
 *
 * COMO SE PRENDE: VERSION_MIDEPILIFE_LOOK en config/config.php (?mdlook=1/0 por URL para QA).
 * views/header_v2026.php pone la clase md26 en el <body> y carga esta hoja en el <head> SOLO
 * cuando el look esta activo. Apagado no se emite nada y el look viejo queda identico.
 *
 * COMO PISA LO VIEJO: ninguna vista cambia su HTML. public/css/midepilife.css y los <style>
 * inline de cada vista se siguen cargando (despues del footer, o sea DESPUES de esta hoja):
 * por eso todo cuelga de body.md26 -gana por especificidad aunque cargue antes- y el !important
 * se usa solo donde lo viejo ya lo usa. Para volver atras: apagar la constante, nada mas.
 *
 * El ?id= sale de filemtime en el header: no hace falta tocar nada al editar esta hoja.
 */

body.md26 {
    --md26-verde: #759947;
    --md26-verde-claro: #A3C47A;
    --md26-verde-oscuro: #171C08;
    --md26-gris-bg: #F5F5F3;
    --md26-gris-2: #ECECE7;
    --md26-blanco: #FFF3EE;
    --md26-texto-2: #4E5446;
    --md26-texto-3: #7C8274;
    --md26-rojo: #A5442A;
    --md26-border: rgba(23, 28, 8, .12);
    --md26-ease: cubic-bezier(.2, .6, .2, 1);
    /* Esquema tipografico de Soprano Titanium V2: titulos Inter, cuerpo DM Sans
       (la fuente la carga el gate del header junto con esta hoja) */
    --md26-font-display: 'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --md26-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: #fff;
    font-family: var(--md26-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* En UY el bundle viejo deja elementos estacionados fuera de pantalla sumando scroll
       horizontal en mobile (preexistente, hasta en su home); aca se recorta para todas las
       pantallas de Mi DepiLife. clip y no hidden: hidden convierte al body en scroller. */
    overflow-x: clip;
}
@supports not (overflow-x: clip) {
    body.md26 { overflow-x: hidden }
}

/* El logo de MiDepiLife, SIEMPRE con la misma medida (pedido 09/10): alto fijo 70px y el
   ancho sale solo de la proporcion del PNG (ya corregido, era un export estirado 13%).
   width auto pisa el w-100 del inicio y height pisa el height=67 del HTML. */
body.md26 img[src*="logo_midepilife"] {
    height: 70px !important;
    max-width: 245px !important;
}

/* ---------- Tipografia ---------- */
body.md26 .inner-seccion { color: var(--md26-verde-oscuro) }
/* Titulos y nombres de card en Inter (display); el resto hereda DM Sans del body */
body.md26 .inner-seccion h1,
body.md26 .inner-seccion h2,
body.md26 .inner-seccion h3,
body.md26 .inner-seccion h4,
body.md26 .inner-seccion h5,
body.md26 .inner-seccion .card-title,
body.md26 .modal h5 { font-family: var(--md26-font-display) }
body.md26 .inner-seccion h1 {
    font-size: clamp(22px, 2.4vw, 26px);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--md26-verde-oscuro);
}
/* Los titulos centrados del login/registro/recuperar vienen pegados al logo de MiDepiLife
   que tienen arriba: un respiro */
body.md26 .inner-seccion h1.text-center { margin-top: 26px }

/* Saludo del inicio ("¡Hola, Nombre!" + frase): el bloque lo dibuja inicio.php solo con el
   look activo. Va despues de las reglas generales de h1 para ganarles el tamanio. */
body.md26 .inner-seccion h1.md26-saludo {
    margin-top: 26px;
    font-size: clamp(26px, 3.2vw, 34px);
    letter-spacing: -.025em;
    line-height: 1.1;
    text-align: left;
    /* Las cards de abajo llevan un wrapper pl-1 (4px): el saludo se corre lo mismo
       para quedar al ras del borde de la primera card */
    padding-left: 4px;
}
body.md26 .md26-saludo-sub { text-align: left; padding-left: 4px }
body.md26 .md26-saludo .md26-punto { color: var(--md26-verde) }
body.md26 .md26-saludo-sub {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 16px;
    color: var(--md26-texto-2);
    /* Acompania al titulo en Inter (pedido 08/10), no va en DM Sans como el resto del cuerpo */
    font-family: var(--md26-font-display);
}
/* Bloques de banner del inicio (Peru tiene el de Referidos activo; los otros paises lo tienen
   comentado): las fotos de las cards sobresalen 30px por arriba (.foto-centro margin-top -30px,
   el diseno de foto flotante de las hojas de los 4 paises) y quedaban pegadas al banner. El
   bloque que contiene un banner gana aire abajo; mb-3 de Bootstrap es !important, de ahi el
   !important. Sin :has() en el navegador queda el mb-3 de siempre. */
body.md26 .inner-seccion .dos-columnas:has(img.rounded-2) { margin-bottom: 52px !important }

/* Las cards del inicio traen mt-5 (48px !important de Bootstrap): se achica para que el
   bloque arranque mas cerca del saludo. El aire ENTRE filas lo pone el margen de abajo:
   48px + 12px = 60px, el respiro que tenia la grilla original (mt-5 + mb-3). */
body.md26 .inner-seccion .card.novedades.card-centro {
    margin-top: 12px !important;
    margin-bottom: 48px !important;
}
body.md26 .inner-seccion h1 b { font-weight: 600 }
/* El punto final verde de los titulos 2026, sin tocar el HTML */
body.md26 .inner-seccion h1 b::after { content: "."; color: var(--md26-verde) }
/* El icono FontAwesome del titulo pasa al motivo del sitio 2026: circulo verde con el icono blanco
   (como los circulos de About us y los beneficios de la home) */
body.md26 .inner-seccion h1 .fas,
body.md26 .inner-seccion h1 .far {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--md26-verde);
    color: #fff !important;
    font-size: 14px;
    vertical-align: middle;
    margin-top: -4px;
}
body.md26 .inner-seccion hr { border: 0; border-top: 1px solid var(--md26-border) }

/* Titulos viejos en Oswald + MAYUSCULAS (recuperar password, registro y los modals del flujo):
   pasan a la tipografia 2026. El texto de los h1 ya esta en sentence case en el HTML: alcanza
   con apagar text-uppercase (Bootstrap lo fuerza con !important) y la font condensada.
   OJO: algunos titulos de modals (p.font-oswald) estan TIPEADOS en mayusculas en la vista;
   a esos solo se les cambia la letra, el case se corrige en el HTML si se decide. */
body.md26 .inner-seccion .font-oswald,
body.md26 .modal .font-oswald {
    font-family: var(--md26-font-display) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: -.02em;
}

/* "< Volver al menu principal" y las lineas de legales, en gris tranquilo */
body.md26 .inner-seccion a .fs-08em { color: var(--md26-texto-3); transition: color .3s }
body.md26 .inner-seccion a:hover .fs-08em { color: var(--md26-verde-oscuro) }
body.md26 .inner-seccion .fs-07em { color: var(--md26-texto-3) }

/* ---------- El verde fluo viejo (#3bcf00 y los gradientes) pasa al verde 2026 ---------- */
body.md26 .inner-seccion .green-depilife-2,
body.md26 .dos-columnas .green-depilife-2,
body.md26 .modal .green-depilife-2 { color: var(--md26-verde) !important }
body.md26 .inner-seccion .bg-green-depilife-2,
body.md26 .modal .bg-green-depilife-2 { background-color: var(--md26-verde) !important }
body.md26 .midepilife-gradient,
body.md26 .md-bg-green-gradient,
body.md26 .inner-seccion .bg-green-gradient,
body.md26 .btnsolicitar,
body.md26 .turno .btnmodificar {
    background: var(--md26-verde) !important;
    color: #fff !important;
}
body.md26 .turno .btncancelar {
    background: #fff !important;
    color: var(--md26-rojo) !important;
    border: 1.5px solid rgba(165, 68, 42, .35) !important;
}
body.md26 .turno .btncancelar:hover { background: rgba(165, 68, 42, .06) !important }

body.md26 .alert-success {
    background: var(--md26-verde);
    color: #fff;
    border: 0;
    border-radius: 16px;
    padding: 14px 18px;
}

/* ---------- Cards ----------
   Blancas con borde finito, como las de "Nuestros tratamientos" y "Novedades" de la home 2026. */
body.md26 .inner-seccion .card.novedades {
    border: 1px solid rgba(23, 28, 8, .1);
    border-radius: 24px;
    background: #fff;
    /* Sombra suave en reposo (pedido 08/10); el hover la profundiza */
    -webkit-box-shadow: 0 8px 18px -12px rgba(23, 28, 8, .22);
    box-shadow: 0 8px 18px -12px rgba(23, 28, 8, .22);
    transition: transform .35s var(--md26-ease), box-shadow .35s var(--md26-ease), border-color .35s;
}
/* En sesiones la card fuerza .bg-grey-midepilife: tambien pasa a blanca */
body.md26 .card.novedades.bg-grey-midepilife { background-color: #fff !important }
body.md26 .inner-seccion a .card.novedades:hover,
body.md26 .inner-seccion .abrir_sesion_detalle .card.novedades:hover {
    transform: translateY(-4px);
    border-color: rgba(23, 28, 8, .18);
    box-shadow: 0 20px 36px -24px rgba(23, 28, 8, .35);
}
/* La foto de la card redondeada por adentro (la card tiene padding, no alcanza con overflow) */
body.md26 .inner-seccion .card.novedades .foto-centro {
    overflow: hidden;
    border-radius: 16px;
}
body.md26 .inner-seccion .card.novedades .card-title { color: var(--md26-verde-oscuro) }
body.md26 .inner-seccion .card.novedades .card-body p { color: var(--md26-texto-2); font-size: 14px; line-height: 1.45 }

/* Cards de Sesiones: tratamiento y zona en "Primera mayuscula" (la familia viene en
   minusculas con un text-uppercase encima; la zona viene en MAYUSCULAS de la base) */
body.md26 .abrir_sesion_detalle .descripcion { text-transform: none !important }
body.md26 .abrir_sesion_detalle .descripcion::first-letter { text-transform: uppercase }
body.md26 .abrir_sesion_detalle .card-title { text-transform: lowercase }
body.md26 .abrir_sesion_detalle .card-title::first-letter { text-transform: uppercase }

body.md26 .bg-grey-midepilife,
body.md26 .bg-grey-agenda { background-color: var(--md26-gris-bg) !important }

/* Banners e imagenes sueltas: sin el borde gris, mas redondeo y sombra suave */
body.md26 .inner-seccion img.rounded-2 {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 36px -26px rgba(23, 28, 8, .45);
}
body.md26 .inner-seccion .imagen-practicas-individuales { border-radius: 14px !important }

/* ---------- Botones: pastilla 2026 ---------- */
body.md26 .inner-seccion .btn,
body.md26 .dos-columnas .btn,
body.md26 .modal .btn {
    border-radius: 999px !important;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1.2;
    padding: 16px 28px;
    box-shadow: none;
    transition: transform .3s var(--md26-ease), box-shadow .3s var(--md26-ease), background-color .3s, color .3s, border-color .3s;
}
body.md26 .inner-seccion .btn:hover,
body.md26 .dos-columnas .btn:hover,
body.md26 .modal .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -18px rgba(23, 28, 8, .5);
}
body.md26 .inner-seccion .btn:focus-visible,
body.md26 .dos-columnas .btn:focus-visible,
body.md26 .modal .btn:focus-visible { outline: 2px solid var(--md26-verde); outline-offset: 3px }
body.md26 .inner-seccion .btn:focus:not(:focus-visible),
body.md26 .dos-columnas .btn:focus:not(:focus-visible),
body.md26 .modal .btn:focus:not(:focus-visible) { outline: none }

/* Botones que son <input type="submit"> (registro: datos personales y contrasenia, reset de
   contrasenia): el bundle de AR tiene .inner-seccion .form-horizontal input:not(...) con
   padding .375rem !important, pensada para los campos, y los dejaba petisos. input.btn es mas
   especifico que esa regla. */
body.md26 .inner-seccion input.btn,
body.md26 .modal input.btn { padding: 16px 28px !important; height: auto }

/* btn-dark: de negro cuadrado a verde oscuro 2026 (hover verde, como el resto del sitio) */
body.md26 .inner-seccion .btn-dark,
body.md26 .dos-columnas .btn-dark,
body.md26 .modal .btn-dark {
    background-color: var(--md26-verde-oscuro) !important;
    border-color: var(--md26-verde-oscuro) !important;
    color: var(--md26-blanco) !important;
}
body.md26 .inner-seccion .btn-dark:hover,
body.md26 .dos-columnas .btn-dark:hover,
body.md26 .modal .btn-dark:hover {
    background-color: var(--md26-verde) !important;
    border-color: var(--md26-verde) !important;
}

/* ---------- Formularios ----------
   Misma receta que el formulario de Contacto 2026 (.ct26-form), apenas mas alto.
   Los forms van directo sobre el fondo blanco de la pagina, sin card gris atras
   (se probo la card tipo Contacto el 08/10 y Sebastian la bajo: fondo blanco). */
body.md26 .inner-seccion .form-control,
body.md26 .dos-columnas .form-control {
    height: 52px;
    /* padding y radio con !important: el style_cami.css de PY fuerza .form-control con
       padding 1.2em y radio .75em !important (en AR/UY no cambia nada) */
    padding: 0 18px !important;
    font-size: 15px;
    font-family: inherit;
    color: var(--md26-verde-oscuro);
    background: #fff;
    /* Gris claro explicito (y con !important): a Sebastian el borde se le veia muy oscuro (08/10);
       #DDDED9 le resulto demasiado claro, quedo un punto mas arriba */
    border: 1px solid #D0D2CB !important;
    border-radius: 12px !important;
    transition: border-color .3s, box-shadow .3s;
}
body.md26 .inner-seccion textarea.form-control,
body.md26 .dos-columnas textarea.form-control { height: auto; min-height: 124px; padding: 13px 18px !important }
body.md26 .inner-seccion .form-control:hover,
body.md26 .dos-columnas .form-control:hover { border-color: #B9BCB1 !important }
body.md26 .inner-seccion .form-control:focus,
body.md26 .dos-columnas .form-control:focus {
    border-color: var(--md26-verde) !important;
    box-shadow: 0 0 0 4px rgba(117, 153, 71, .18);
    outline: 0;
}
body.md26 .inner-seccion .form-control::placeholder,
body.md26 .dos-columnas .form-control::placeholder { color: rgba(23, 28, 8, .36); opacity: 1 }
/* bundle.min.css fuerza en TODOS los select un borde gris oscuro #aaa con !important (la misma
   trampa que en Contacto 2026): se empareja con el borde de los demas campos. */
body.md26 .inner-seccion select,
body.md26 .inner-seccion select.form-control { border: 1px solid rgba(23, 28, 8, .12) !important }
body.md26 .inner-seccion select:hover,
body.md26 .inner-seccion select.form-control:hover { border-color: rgba(23, 28, 8, .24) !important }
body.md26 .inner-seccion select:focus,
body.md26 .inner-seccion select.form-control:focus { border-color: var(--md26-verde) !important }
/* Ojito de mostrar/ocultar contrasenia en el login: el wrap y el boton los crea
   midepilife_2026.js (la vista no se toca). El top fijo es la mitad de los 52px del input,
   asi el margen de abajo del campo no desalinea el boton. */
body.md26 .md26-pass { position: relative }
body.md26 .md26-pass .form-control { padding-right: 52px !important }
body.md26 .md26-ojo {
    position: absolute;
    right: 8px;
    top: 26px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--md26-texto-3);
    cursor: pointer;
    transition: background-color .3s, color .3s;
}
body.md26 .md26-ojo:hover { background: var(--md26-gris-bg); color: var(--md26-verde-oscuro) }
body.md26 .md26-ojo:focus { outline: none }
body.md26 .md26-ojo:focus-visible { outline: 2px solid var(--md26-verde); outline-offset: 2px }
body.md26 .md26-ojo svg { width: 20px; height: 20px }

/* Selector de codigo de area del celular (plugin ddslick, en Perfil y registro): venia
   cuadrado, gris y mas bajo que los inputs 2026. Se emparda: misma altura, borde y radio.
   El plugin inyecta estilos por JS y algo de inline, por eso los !important. */
body.md26 .inner-seccion .dd-select {
    height: 52px;
    border: 1px solid #D0D2CB !important;
    border-radius: 12px !important;
    background: #fff !important;
    /* el .dd-selected de adentro trae fondo propio cuadrado: se recorta y se transparenta,
       si no asoma gris por las esquinas (las opciones viven en .dd-container, no se recortan) */
    overflow: hidden;
}
body.md26 .inner-seccion .dd-selected { background: transparent !important; border-radius: 12px }
body.md26 .inner-seccion .dd-container { background: transparent !important }
/* La columna que envuelve al selector en Perfil pinta un fondo gris cuadrado atras
   (.bg-flatdarkgrey): afuera, que se vea solo el selector redondeado */
body.md26 .inner-seccion .bg-flatdarkgrey { background: transparent !important }
body.md26 .inner-seccion .dd-selected {
    display: flex !important;
    align-items: center;
    height: 100%;
    padding: 0 34px 0 14px !important;
}
body.md26 .inner-seccion .dd-selected-image {
    max-width: 24px !important;
    margin-right: 10px !important;
}
body.md26 .inner-seccion .dd-selected-text {
    line-height: normal !important;
    font-size: 14px !important;
    font-weight: 500;
    color: var(--md26-verde-oscuro);
    margin: 0;
    cursor: pointer;
}
body.md26 .inner-seccion .dd-pointer { right: 14px }
body.md26 .inner-seccion .dd-pointer-down { border-top-color: var(--md26-texto-3) !important }
/* Abierto, ddslick AGREGA dd-pointer-up sin sacar dd-pointer-down: si no se apaga el borde
   de arriba quedan los dos triangulos a la vez (reloj de arena) y desalineado */
body.md26 .inner-seccion .dd-pointer.dd-pointer-up {
    border-top-color: transparent !important;
    border-bottom-color: var(--md26-texto-3) !important;
    margin-top: -8px;
}
/* Mas angosto: que mande el contenido (bandera + codigo + flecha) y el input tome el resto */
body.md26 .inner-seccion .dd-container { width: 150px !important; max-width: 150px !important }
body.md26 #frm-celular .col-5 { flex: 0 0 auto; width: auto; max-width: none }
body.md26 #frm-celular .col-7 { flex: 1 1 0; max-width: none; padding-left: 10px !important }
/* El desplegable de opciones, como un menu 2026 */
body.md26 .inner-seccion .dd-options {
    border: 1px solid #D0D2CB !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 36px -20px rgba(23, 28, 8, .35);
    margin-top: 6px;
    overflow: hidden;
    /* el css viejo lo deja en z-index 1 y las cards de abajo lo tapaban (Perfil, 08/10) */
    z-index: 60 !important;
}
body.md26 .inner-seccion .dd-container { position: relative; z-index: 60 }
body.md26 .inner-seccion .dd-option { padding: 10px 14px !important; font-size: 13px !important }

/* Labels de los campos: chicos, firmes y con un respiro antes del input (mb-0 bloquea el margen
   con !important de Bootstrap, por eso el aire va como padding) */
body.md26 .inner-seccion form p,
body.md26 .dos-columnas form p { font-size: 14px; font-weight: 600; color: var(--md26-verde-oscuro); padding-bottom: 6px }

/* ---------- Modals ---------- */
body.md26 .modal { background: rgba(23, 28, 8, .55) !important }
@supports ((backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px))) {
    body.md26 .modal { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px) }
}
body.md26 .modal .modal-content {
    border: 0;
    border-radius: 24px !important;
    box-shadow: 0 30px 60px -30px rgba(23, 28, 8, .55);
}
/* La X de cerrar (fa-times suelto) pasa a boton circular gris, como en la agenda V2 */
body.md26 .modal .closemodal,
body.md26 .modal .closemodalInterior,
body.md26 .modal .md26-cerrar-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: 50%;
    background: var(--md26-gris-2);
    color: var(--md26-texto-2);
    font-size: 15px;
    transition: background-color .3s, color .3s;
}
body.md26 .modal .closemodal:hover,
body.md26 .modal .closemodalInterior:hover,
body.md26 .modal .md26-cerrar-email:hover { background: #DFDFD8; color: var(--md26-verde-oscuro) }

/* Las cards-boton del sidebar (Como prepararse / Preguntas frecuentes): mas bajas que el
   default de .card-body + mt-2, pero con presencia (18px de padding tras probar 14px),
   y el radio apenas menos redondo que las cards grandes. */
body.md26 .border-left .card.novedades { border-radius: 18px }
body.md26 .border-left .card.novedades .card-body { padding: 18px }
body.md26 .border-left .card.novedades .card-title.mt-2 { margin-top: 0 !important; margin-bottom: 0 }

/* El boton de solicitar turno, apenas mas alto (mismo texto): le gana al p-4 de Bootstrap
   y al padding:13px de .btn-v2-primario de la vista */
body.md26 .inner-seccion .btn-v2-solicitar-turno { padding: 18px !important }

/* ---------- Agenda V2: afinado 2026 ----------
   La pantalla ya venia semi-2026 (botones verdes pill); aca solo se alinean los detalles
   con el resto: el acordeon de turnos toma el lenguaje de las cards del inicio, el divisor
   entre columnas se vuelve tenue y el aviso de cancelaciones deja de estar todo en negrita. */
body.md26 .inner-seccion.border-left { border-left-color: var(--md26-border) !important }
body.md26 .accordion-turnos-v2 {
    border-color: rgba(23, 28, 8, .1);
    border-radius: 20px;
    box-shadow: 0 8px 18px -12px rgba(23, 28, 8, .22);
}
body.md26 .accordion-turnos-v2-header { font-family: var(--md26-font-display) }
body.md26 .accordion-turnos-v2-header .chevron-v2 { color: var(--md26-texto-3) }
body.md26 .turno-card-v2 { border-top-color: rgba(23, 28, 8, .08) }
body.md26 .inner-seccion .card-title .fa-chevron-down { color: var(--md26-texto-3) }
/* Las preguntas del FAQ del sidebar son botones .btn-link: tipografia normal y sin el
   levitar/sombra de los botones de accion */
body.md26 .inner-seccion .btn.btn-link {
    font-size: 14px;
    font-weight: 600 !important;
    letter-spacing: 0;
    text-align: left;
}
body.md26 .inner-seccion .btn.btn-link:hover { transform: none; box-shadow: none }
/* El acordeon interno del FAQ: con el radio pill del .btn se asomaban las esquinas grises
   del .card-header de Bootstrap. Todo transparente, sin bordes de card, y un separador
   finito entre preguntas (como el acordeon de las secciones 2026). */
body.md26 .inner-seccion .btn.btn-link { border-radius: 10px !important; background: transparent !important }
body.md26 .inner-seccion .faq-card,
body.md26 .inner-seccion .faq-card .card-header {
    background: transparent !important;
    border: 0;
    border-radius: 0;
}
body.md26 .inner-seccion .faq-card { border-bottom: 1px solid rgba(23, 28, 8, .08) }
body.md26 .inner-seccion .faq-card:last-child { border-bottom: 0 }
/* Pregunta abierta en verde, cerradas en oscuro (el mismo gesto del acordeon 2026) */
body.md26 .inner-seccion .faq-card .btn-link.green-depilife-2 { color: var(--md26-verde) !important }
body.md26 .inner-seccion .faq-card .btn-link.collapsed.green-depilife-2 { color: var(--md26-verde-oscuro) !important }
/* Compacto: el py-4 (24px !important) de pregunta y respuesta las separaba demasiado,
   y la pregunta quedaba grande */
body.md26 .inner-seccion .faq-card .btn.btn-link {
    font-size: 14px !important;
    line-height: 1.45 !important;
    padding: 12px 0 !important;
}
body.md26 .inner-seccion .faq-card .card-body { padding: 0 0 14px !important }
body.md26 .inner-seccion .faq-card .card-body p { color: var(--md26-texto-2); font-size: 14px; line-height: 1.55; margin-bottom: 0 }
/* Aviso "Recorda que las cancelaciones...": nota tranquila en gris, solo el icono en verde */
body.md26 .inner-seccion p.d-block.fs-08em.text-center { color: var(--md26-texto-2) }
body.md26 .inner-seccion p.d-block.fs-08em.text-center b { font-weight: 500 }

/* ---------- Referidos ---------- */
/* El titular de compartir, arriba de todo: tratamiento de titulo 2026, negro con el pasaje
   clave y el punto final en verde (el markup lo dibuja la vista solo con el look activo) */
body.md26 .md26-ref-lead {
    max-width: 720px;
    margin: 4px auto 26px;
    font-family: var(--md26-font-display);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--md26-verde-oscuro);
    text-align: center;
    text-wrap: balance;
}
body.md26 .md26-ref-lead .md26-verde { color: var(--md26-verde) }
body.md26 .md26-ref-lead::after { content: "."; color: var(--md26-verde) }

/* Columna derecha: panel de acciones (titulo + COMPARTIR POR E-MAIL + "o" + WhatsApp,
   el de WhatsApp lo muda midepilife_2026.js). Centrado vertical contra la card del credito. */
body.md26 #md26-col-compartir {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* correccion optica: el bloque centrado exacto se percibia caido, con aire arriba
       del titulo; este padding lo sube unos pixeles del centro geometrico */
    padding-bottom: 46px;
}
/* La fila de las dos columnas, con centrado vertical de verdad (la card define la altura) */
body.md26 .row:has(> #md26-col-compartir) { align-items: center }
@media (min-width: 768px) {
    body.md26 #md26-col-compartir { padding-left: 44px; padding-right: 20px }
}
body.md26 #md26-col-compartir .md26-ref-lead {
    font-size: clamp(20px, 2vw, 24px);
    margin: 0 0 22px;
}
body.md26 #md26-col-compartir .md26-btn-wa { margin: 0 }
/* Separador "o" con lineas a los costados */
body.md26 .md26-o {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0;
    color: var(--md26-texto-3);
    font-size: 13px;
}
body.md26 .md26-o::before,
body.md26 .md26-o::after { content: ""; flex: 1; border-top: 1px solid var(--md26-border) }
/* Modal de envio por e-mail */
body.md26 .modal.md26-abierto { display: block; overflow-y: auto }
body.md26 .md26-modal-titulo {
    font-family: var(--md26-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--md26-verde-oscuro);
    margin: 0 0 4px;
    text-align: center;
}
body.md26 .md26-modal-titulo .md26-verde { color: var(--md26-verde) }
/* Adentro del modal sobra el "¡Invita todos los que quieras!" (el titulo del modal ya lo dice) */
body.md26 #md26-modal-email .center p.text-center { display: none }
/* Cada amigo agregado trae un <hr>: en el modal sobra, el espacio entre campos ya separa */
body.md26 #md26-modal-email .amigos hr { display: none }

/* Titulo centrado de la seccion foto + frase, al estilo del cierre de Soprano */
body.md26 .md26-ref-titulo-seccion {
    margin: 6px 0 54px;
    font-family: var(--md26-font-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--md26-verde-oscuro);
    text-align: center;
    text-wrap: balance;
}
body.md26 .md26-ref-titulo-seccion .md26-verde { color: var(--md26-verde) }
body.md26 .md26-ref-titulo-seccion::after { content: "."; color: var(--md26-verde) }
/* Resaltador verde (mark.md26-marca): un trazo de resaltador detras del pasaje, que se pinta
   al entrar en pantalla (el mismo recurso de las secciones 2026). Bootstrap le pone a <mark>
   padding y fondo amarillo: aca se pisa. Sin JS queda pintado desde el principio. */
body.md26 mark.md26-marca {
    padding: 0 .06em;
    margin: 0 -.06em;
    border-radius: 3px;
    color: inherit;
    background: linear-gradient(rgba(163, 196, 122, .3), rgba(163, 196, 122, .3)) 0 90% / 100% .42em no-repeat;
}
body.md26 mark.md26-marca.md26-anim { background-size: 0 .42em; transition: background-size 1.1s var(--md26-ease) .35s }
body.md26 mark.md26-marca.md26-anim.is-in { background-size: 100% .42em }

/* Bloque foto + frase, abajo del credito/compartir: todo unificado en una card gris
   clara 2026 (la foto queda embebida adentro) */
body.md26 .md26-fila-centrada {
    align-items: center;
    margin-left: 0;
    margin-right: 0;
    padding: clamp(22px, 3vw, 40px);
    border-radius: 28px;
    background: var(--md26-gris-bg);
}
body.md26 .md26-foto-abajo {
    width: 100%;
    border-radius: 24px;
    box-shadow: 0 18px 36px -26px rgba(23, 28, 8, .45);
}
body.md26 .md26-ref-frase {
    font-family: var(--md26-font-display);
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--md26-verde-oscuro);
    text-wrap: balance;
    margin: 18px 0;
}
body.md26 .md26-ref-frase .md26-verde { color: var(--md26-verde) }
body.md26 .md26-ref-frase::after { content: "."; color: var(--md26-verde) }
/* Animacion palabra por palabra de la frase (las mascaras .md26-pal las crea el JS; el aire
   extra de la mascara evita cortar tildes y lo devuelve el margen negativo) */
body.md26 .md26-pal {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .16em .03em .12em;
    margin: -.16em -.03em -.12em;
}
body.md26 .md26-pal > span { display: inline-block }
body.md26 .md26-anim-palabras .md26-pal > span {
    transform: translate3d(0, 115%, 0);
    transition: transform .75s var(--md26-ease);
    transition-delay: calc(var(--md26-pal-i, 0) * 45ms);
}
body.md26 .md26-anim-palabras.is-in .md26-pal > span { transform: none }
@media (min-width: 768px) {
    body.md26 .md26-frase-col { padding-left: 20px; padding-right: 44px }
}

/* La card del credito: borde y sombra 2026 en vez del borde + sombra dura de Bootstrap */
body.md26 .inner-seccion .box-shadow-normal {
    padding: 28px 24px !important;
    border: 1px solid rgba(23, 28, 8, .1) !important;
    border-radius: 24px !important;
    box-shadow: 0 8px 18px -12px rgba(23, 28, 8, .22) !important;
}
/* La foto acompania el redondeo de las cards y se recorta a la altura de la card del
   credito: sin aire muerto abajo */
body.md26 .inner-seccion img.zoom-img { border-radius: 24px }
body.md26 .inner-seccion .col-sm.desktop-only img.zoom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Los titulos de la seccion de compartir, con cuerpo de titulo; la bajada en gris */
body.md26 .dos-columnas p.h6.lh1-5 {
    font-family: var(--md26-font-display);
    font-size: 19px;
    letter-spacing: -.015em;
    color: var(--md26-verde-oscuro);
}
body.md26 .dos-columnas p.h6.lh1-5 b { font-weight: 600 }
body.md26 .dos-columnas p.h6.lh1-5 + p.text-center { color: var(--md26-texto-3) }
/* "Escribiles tu mensaje" como label de campo (el :has cae con gracia si el navegador es viejo) */
body.md26 .dos-columnas p:has(+ textarea) {
    font-size: 14px;
    font-weight: 600;
    color: var(--md26-verde-oscuro);
    padding-bottom: 4px;
}
/* "+ Agregar" es la accion secundaria: outline oscuro pill, hover verde (criterio de botones
   del sitio). El fluo inline #3acf01 quedo condicionado al look viejo en la vista. */
body.md26 #agregar-amigo {
    padding: 11px 24px !important;
    border: 1px solid var(--md26-verde) !important;
    border-radius: 999px !important;
    background: var(--md26-verde) !important;
    color: #fff !important;
    font-weight: 650;
    letter-spacing: .01em;
    transition: background-color .3s, border-color .3s;
}
body.md26 #agregar-amigo:hover {
    background: #66853d !important;
    border-color: #66853d !important;
}
/* Los <p> de error de cada e-mail arrancan vacios pero ocupan su margen y separan todo:
   ocultos hasta que algo les escribe adentro (global md26: el form vive en el modal) */
body.md26 p.error:empty { display: none }
body.md26 .modal p.error { color: var(--md26-rojo); font-size: 13px }
/* ENVIAR E-MAIL arriba y ENVIAR POR WHATSAPP abajo (el wrapper lo dibuja la vista solo con
   el look activo). El de WhatsApp en el verde del sitio -no el verde chillon de WhatsApp-,
   el icono alcanza para que se reconozca. */
body.md26 .md26-enviar-fila { display: flex; flex-direction: column }
body.md26 .md26-btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 8px;
    padding: 16px 28px;
    border-radius: 999px;
    background: var(--md26-verde);
    color: #fff !important;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: .01em;
    text-decoration: none !important;
    transition: transform .3s var(--md26-ease), box-shadow .3s var(--md26-ease), background-color .3s;
}
body.md26 .md26-btn-wa:hover {
    background: #66853d;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px -18px rgba(23, 28, 8, .4);
}
body.md26 .md26-btn-wa .fab { font-size: 17px }

/* La linea de Bases y Condiciones, despegada del bloque de preguntas */
body.md26 p.fs-08em.grey { margin-top: 56px }
/* El link de Bases y Condiciones, del azul default al verde del sitio */
body.md26 p.grey a {
    color: var(--md26-verde);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- Preguntas frecuentes de Referidos (.md26-faq) ----------
   Titulo centrado + preguntas en DOS COLUMNAS a lo ancho, como cards del FAQ 2026:
   blancas con borde, el mas en circulito; abierta = fondo gris tintado y pregunta verde.
   El toggle vive en midepilife_2026.js; la altura se anima con grid-template-rows. */
/* Aire entre la card de la foto y el bloque de preguntas */
body.md26 .container:has(.md26-faq) { margin-top: 70px !important }
body.md26 .md26-faq-titulo {
    margin: 10px 0 14px;
    font-family: var(--md26-font-display);
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.025em;
    color: var(--md26-verde-oscuro);
    text-align: left;
    text-wrap: balance;
}
body.md26 .md26-faq-titulo .md26-verde { color: var(--md26-verde) }
body.md26 .md26-faq-titulo::after { content: "."; color: var(--md26-verde) }
body.md26 .md26-faq { display: grid }
body.md26 .md26-faq-item { border-bottom: 1px solid var(--md26-border) }
body.md26 .md26-faq-boton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 20px 4px;
    border: 0;
    background: none;
    font-family: var(--md26-font-display);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--md26-verde-oscuro);
    text-align: left;
    cursor: pointer;
    transition: color .3s;
}
body.md26 .md26-faq-item.abierto .md26-faq-boton { color: var(--md26-verde) }
body.md26 .md26-faq-boton:focus { outline: none }
body.md26 .md26-faq-boton:focus-visible { outline: 2px solid var(--md26-verde); outline-offset: 2px }
body.md26 .md26-faq-icono {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
    transition: transform .45s var(--md26-ease);
}
body.md26 .md26-faq-icono::before,
body.md26 .md26-faq-icono::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--md26-verde-oscuro);
    transform: translate(-50%, -50%);
    transition: background-color .35s, transform .45s var(--md26-ease);
}
body.md26 .md26-faq-icono::after { transform: translate(-50%, -50%) rotate(90deg) }
body.md26 .md26-faq-icono::before,
body.md26 .md26-faq-icono::after { width: 14px }
body.md26 .md26-faq-item.abierto .md26-faq-icono { transform: rotate(180deg) }
body.md26 .md26-faq-item.abierto .md26-faq-icono::before,
body.md26 .md26-faq-item.abierto .md26-faq-icono::after { background: var(--md26-verde) }
body.md26 .md26-faq-item.abierto .md26-faq-icono::after { transform: translate(-50%, -50%) rotate(0deg) }
body.md26 .md26-faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .45s var(--md26-ease), visibility 0s linear .45s;
}
body.md26 .md26-faq-item.abierto .md26-faq-panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .45s var(--md26-ease), visibility 0s;
}
body.md26 .md26-faq-cuerpo { min-height: 0; overflow: hidden }
body.md26 .md26-faq-cuerpo p {
    padding: 0 40px 20px 4px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--md26-texto-2);
}

/* ---------- Notificaciones: los checks de FontAwesome pasan a switch deslizable ----------
   El JS de la vista sigue toggleando fa-check-square <-> fa-square sobre los mismos <i>;
   aca solo se los dibuja como riel + perilla (el glifo se oculta). ON = .fa-check-square. */
body.md26 .inner-seccion :is(.turno-email, .turno-sms, .agenda-reserva, .agenda-cancelacion, .agenda-modificacion) {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
    border-radius: 999px;
    background: #CDCFC7;
    vertical-align: middle;
    transition: background-color .3s;
}
body.md26 .inner-seccion :is(.turno-email, .turno-sms, .agenda-reserva, .agenda-cancelacion, .agenda-modificacion)::before { display: none }
body.md26 .inner-seccion :is(.turno-email, .turno-sms, .agenda-reserva, .agenda-cancelacion, .agenda-modificacion)::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(23, 28, 8, .25);
    transition: transform .3s var(--md26-ease);
}
body.md26 .inner-seccion :is(.turno-email, .turno-sms, .agenda-reserva, .agenda-cancelacion, .agenda-modificacion).fa-check-square { background: var(--md26-verde) }
body.md26 .inner-seccion :is(.turno-email, .turno-sms, .agenda-reserva, .agenda-cancelacion, .agenda-modificacion).fa-check-square::after { transform: translateX(20px) }

/* ---------- Bienvenida al programa de referidos (pantalla unica tras el alta) ---------- */
body.md26 .md26-bienvenida-lead {
    max-width: 620px;
    margin: -30px auto 44px;
    text-align: center;
    font-size: 17px;
    line-height: 1.6;
    color: var(--md26-texto-2);
}
body.md26 .md26-bienvenida-lead b { font-weight: 650; color: var(--md26-verde-oscuro) }
body.md26 .md26-pasos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 44px;
}
@media (max-width: 760px) {
    body.md26 .md26-pasos { grid-template-columns: 1fr }
}
body.md26 .md26-paso {
    position: relative;
    padding: 32px 24px 26px;
    border: 1px solid rgba(23, 28, 8, .1);
    border-radius: 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 8px 18px -12px rgba(23, 28, 8, .22);
}
body.md26 .md26-paso-num {
    position: absolute;
    left: 20px;
    top: 16px;
    font-family: var(--md26-font-display);
    font-size: 13px;
    font-weight: 600;
    color: #C9CBC3;
}
body.md26 .md26-paso-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--md26-verde);
    color: #fff;
    font-size: 20px;
    margin-bottom: 16px;
}
body.md26 .md26-paso-titulo {
    font-family: var(--md26-font-display);
    font-size: 19px;
    font-weight: 650;
    color: var(--md26-verde-oscuro);
    margin-bottom: 8px;
}
body.md26 .md26-paso-texto { font-size: 14px; line-height: 1.55; color: var(--md26-texto-2); margin: 0 }
body.md26 .md26-bienvenida-cta { text-align: center; margin: 4px 0 16px }
body.md26 .md26-bienvenida-cta .btn { padding-left: 46px; padding-right: 46px }
body.md26 .md26-bienvenida-nota { margin-top: 14px; font-size: 13px; color: var(--md26-texto-3) }

/* ---------- Modal de historial de sesiones (Sesiones) ---------- */
/* La zona viene en MAYUSCULAS de la base: sentence case por CSS, mas bold y con el punto verde */
body.md26 .modal .modal-pra-zona {
    font-family: var(--md26-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--md26-verde-oscuro);
    text-transform: lowercase;
}
body.md26 .modal .modal-pra-zona::first-letter { text-transform: uppercase }
body.md26 .modal .modal-pra-zona::after { content: "."; color: var(--md26-verde) }
body.md26 .modal .modal-pra-saldo { font-size: 14px; color: var(--md26-texto-2) }
body.md26 .modal hr { border: 0; border-top: 1px solid var(--md26-border) }
/* Filas del historial: TODAS blancas con borde; el tipo de movimiento lo cuentan el icono
   y el color del titulo, no un bloque entero pintado (la fila verde maciza pesaba demasiado) */
body.md26 #practica_detalle_sesiones .card.novedades { border-radius: 16px }
body.md26 #practica_detalle_sesiones .card.novedades.bg-green-gradient {
    background: #fff !important;
    color: inherit !important;
}
body.md26 #practica_detalle_sesiones .bg-green-gradient .card-body p { color: var(--md26-texto-2) }
body.md26 #practica_detalle_sesiones .bg-green-gradient .h6.text-white,
body.md26 #practica_detalle_sesiones .bg-green-gradient .h6.text-white b,
body.md26 #practica_detalle_sesiones .bg-green-gradient .h6 .fas.text-white { color: var(--md26-verde) !important }
/* El icono de cada fila, en un circulito tintado */
body.md26 #practica_detalle_sesiones .card .h6 .fas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(117, 153, 71, .12);
    font-size: 12px;
    vertical-align: middle;
    margin-top: -2px;
}
body.md26 #practica_detalle_sesiones .h6.text-danger .fas { background: rgba(165, 68, 42, .1) }
/* El rojo Bootstrap del turno cancelado pasa al rojo de la paleta */
body.md26 #practica_detalle_sesiones .text-danger { color: var(--md26-rojo) !important }
/* Area de historial: bien mas alta que los 200px del style inline (al inline se le saco el
   !important en la vista, 08/10) y acotada al viewport para que el modal siempre entre */
body.md26 #practica_detalle_sesiones {
    max-height: min(48vh, 520px) !important;
    scrollbar-width: thin;
    scrollbar-color: #D0D2CB transparent;
}
body.md26 #practica_detalle_sesiones::-webkit-scrollbar { width: 6px }
body.md26 #practica_detalle_sesiones::-webkit-scrollbar-thumb { background: #D0D2CB; border-radius: 999px }
body.md26 #practica_detalle_sesiones::-webkit-scrollbar-track { background: transparent }

/* ---------- Datepicker y radio de la agenda: muere el gradiente fluo ---------- */
body.md26 .ui-datepicker .ui-datepicker-header { background: var(--md26-verde) !important }
body.md26 .ui-state-active,
body.md26 .ui-widget-content .ui-state-active,
body.md26 .ui-widget-header .ui-state-active {
    background: var(--md26-verde) !important;
    border-color: var(--md26-verde) !important;
}
body.md26 .ui-widget-header .ui-state-hover,
body.md26 .ui-state-focus,
body.md26 .ui-widget-content .ui-state-focus,
body.md26 .ui-widget-header .ui-state-focus {
    background: var(--md26-verde) !important;
    border-color: var(--md26-verde) !important;
}
body.md26 input#lareserva:checked::before { background: var(--md26-verde) }

/* ---------- Animacion de entrada (solo CSS, al cargar) ----------
   Los bloques de contenido suben apenas y aparecen escalonados, como el reveal de las
   secciones 2026 pero sin JS: corre al pintar la pagina. Se cuentan solo los .container
   hermanos (el ~ saltea el header, los modals y lo que meta GTM en el body), asi el
   escalonado no depende de que haya adelante. El fill mode "both" deja invisible a cada
   bloque hasta que le toca su turno. Los bloques de la agenda V2 viven dentro de
   #v2ContentWrapper (no son hijos directos del body): quedan afuera a proposito, esa
   pantalla ya tiene su propio loader de pagina completa. */
@keyframes md26Entra {
    from { opacity: 0; transform: translate3d(0, 18px, 0) }
    to { opacity: 1; transform: none }
}
/* backwards y NO both: una animacion de transform/opacity con fill both deja al bloque como
   stacking context PARA SIEMPRE, y el desplegable de paises de Perfil quedaba pintado debajo
   del bloque siguiente (09/10). Con backwards cubre el delay inicial igual, y al terminar libera. */
body.md26 > .container { animation: md26Entra .65s var(--md26-ease) backwards }
body.md26 > .container ~ .container { animation-delay: .12s }
body.md26 > .container ~ .container ~ .container { animation-delay: .24s }
body.md26 > .container ~ .container ~ .container ~ .container { animation-delay: .36s }

/* ---------- Ajustes finos ---------- */
@media (max-width: 760px) {
    body.md26 .inner-seccion h1 { font-size: 21px }
    body.md26 .inner-seccion h1 .fas,
    body.md26 .inner-seccion h1 .far { width: 34px; height: 34px; font-size: 13px }
}

@media (prefers-reduced-motion: reduce) {
    body.md26 .inner-seccion .card.novedades,
    body.md26 .inner-seccion .btn,
    body.md26 .modal .btn { transition: none }
    body.md26 .inner-seccion a .card.novedades:hover,
    body.md26 .inner-seccion .abrir_sesion_detalle .card.novedades:hover,
    body.md26 .inner-seccion .btn:hover,
    body.md26 .modal .btn:hover { transform: none; box-shadow: none }
}