/* ============================================================
 * demo-medical.css — BewPro adaptation of Porto demo-medical (Okler).
 *
 * Namespace: html.demo-medical (scoped — no rompe otros demos)
 *
 * Brand colors:
 *   - Hardcoded hex (#008fe2, #2d529f, etc.) reemplazados por
 *     var(--primary), var(--secondary), etc. El SkinService inyecta
 *     los colores reales del tenant en runtime desde brand_defaults.
 *   - Fallbacks de colores Porto medical conservados como default.
 *
 * Defaults brand sugeridos:
 *   primary    #008fe2  (cyan salud)
 *   secondary  #2d529f  (azul corporativo)
 *   tertiary   #3aabdd  (azul cielo)
 *   quaternary #242424  (dark)
 *   dark       #212529
 * ============================================================ */

/* --- Variables del demo (fonts heredadas del sistema) --- */
html.demo-medical {
	--font-family: var(--font-family-primary, "Poppins", Arial, sans-serif);
	--font-headings: var(--font-family-secondary, "Poppins", Arial, sans-serif);
	--font-accent: var(--font-family-tertiary, "Shadows Into Light", cursive);
}

/* --- Base body --- */
html.demo-medical body,
html.demo-medical {
	font-family: var(--font-family) !important;
	line-height: 1.7;
}
html.demo-medical h1, html.demo-medical h2, html.demo-medical h3,
html.demo-medical h4, html.demo-medical h5, html.demo-medical h6 {
	font-family: var(--font-headings) !important;
}

/* --- Logo header height clamp (mismo pattern que demo-restaurant) --- */
html.demo-medical #header .header-logo img {
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
}
html.demo-medical #header.sticky-active .header-logo img,
html.demo-medical #header.header-effect-shrink-sticky .header-logo img {
	max-height: 48px;
}

/* --- Compactar header en breakpoint lg estrecho (992-1199px) ---
   Entre el desktop chico y desktop normal, logo + nav (4 items) + CTA
   apretaban demasiado y el CTA bajaba a otra línea. Reducimos tamaños
   y paddings solo en ese rango para que entren todos en una fila. --}}
*/
@media (min-width: 992px) and (max-width: 1199.98px) {
	html.demo-medical #header .header-logo img { max-height: 52px; }
	html.demo-medical #header .header-nav-main .nav-link {
		font-size: 12.5px;
		padding-left: 0.65rem !important;
		padding-right: 0.65rem !important;
	}
	html.demo-medical #header .btn.custom-button {
		padding: 0.5rem 1rem !important;
		font-size: 0.85rem !important;
	}
	html.demo-medical #header .btn.custom-button.ms-lg-3 {
		margin-left: 0.5rem !important;
	}
	html.demo-medical #header .header-nav-top .nav-item {
		font-size: 12px;
	}
}

/* --- Custom utilities Porto --- */
html.demo-medical .box-shadow-custom {
	box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.33);
}
html.demo-medical .custom-button {
	border-radius: 30px !important;
	padding: 10px 30px;
}
html.demo-medical .custom-border-bottom-1 {
	border-bottom: 1px solid #FFF;
	padding-bottom: 3px;
}

/* --- Hero slider overlay --- */
html.demo-medical .rev_slider .slotholder:after {
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.25);
}

/* --- Carousel dots custom --- */
html.demo-medical .custom-dots-style-1 .owl-dots .owl-dot {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 100%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba(255, 255, 255, 0.7);
}
html.demo-medical .custom-dots-style-1 .owl-dots .owl-dot > span {
	background: transparent !important;
}
html.demo-medical .custom-dots-style-1 .owl-dots .owl-dot.active > span {
	background: #FFF !important;
}
html.demo-medical .custom-dots-style-1 .owl-dots .owl-dot + .owl-dot {
	margin-top: 6px !important;
}

/* --- "Medical schedules" boxes (4 boxes info section) --- */
html.demo-medical .medical-schedules {
	margin: -47px 0 0 0;
}
html.demo-medical .medical-schedules h4 {
	line-height: 23px;
	padding-top: 4px;
}
html.demo-medical .medical-schedules h4,
html.demo-medical .medical-schedules h5,
html.demo-medical .medical-schedules a,
html.demo-medical .medical-schedules i {
	color: var(--light, #FFF) !important;
}
html.demo-medical .medical-schedules h5 {
	position: relative;
	display: inline-block;
}
html.demo-medical .medical-schedules .box-one,
html.demo-medical .medical-schedules .box-two,
html.demo-medical .medical-schedules .box-three,
html.demo-medical .medical-schedules .box-four {
	cursor: pointer;
	min-height: 94px;       /* antes height fijo — labels largos se desbordaban */
	position: relative;
	animation-duration: 0.6s;
}
html.demo-medical .medical-schedules .box-one { z-index: 4; }
html.demo-medical .medical-schedules .box-two { z-index: 3; }
html.demo-medical .medical-schedules .box-three { z-index: 2; }
html.demo-medical .medical-schedules .box-three:hover { z-index: 10; }
html.demo-medical .medical-schedules .box-four { z-index: 1; }

/* Triangle/wedge decoration en box-one (uses --primary).
   top:50% + translateY(-50%) lo centra verticalmente sin importar
   la altura del box (que ahora es min-height en vez de height fijo). */
html.demo-medical .medical-schedules .box-one::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: -40px;
	width: 0;
	height: 0;
	border-top: 47px solid transparent;
	border-bottom: 47px solid transparent;
	border-left: 40px solid var(--primary, #008fe2);
	transform: translateY(-50%);
	z-index: 5;
}
html.demo-medical .medical-schedules .box-two,
html.demo-medical .medical-schedules .box-three {
	padding: 38px 38px 38px 70px;
}
html.demo-medical .medical-schedules .box-two a,
html.demo-medical .medical-schedules .box-three a {
	text-decoration: none;
}
html.demo-medical .medical-schedules .box-two:hover .expanded-info,
html.demo-medical .medical-schedules .box-three:hover .expanded-info {
	opacity: 1;
	z-index: 1;
}
html.demo-medical .medical-schedules .box-two:hover .expanded-info .info,
html.demo-medical .medical-schedules .box-three:hover .expanded-info .info {
	opacity: 1;
	transform: translateY(0%);
}
html.demo-medical .medical-schedules .box-two:hover i,
html.demo-medical .medical-schedules .box-three:hover i {
	transition: all 0.3s ease;
}
html.demo-medical .medical-schedules .box-two .expanded-info,
html.demo-medical .medical-schedules .box-three .expanded-info {
	opacity: 0;
	position: absolute;
	left: 0;
	bottom: 99%;
	width: 100%;
	box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.2);
	z-index: -1;
	transition: all 0.3s ease;
}
html.demo-medical .medical-schedules .box-two .expanded-info .info,
html.demo-medical .medical-schedules .box-three .expanded-info .info {
	opacity: 0;
	transform: translateY(-40%);
}
html.demo-medical .medical-schedules .box-two .expanded-info .info:nth-child(1),
html.demo-medical .medical-schedules .box-three .expanded-info .info:nth-child(1) { transition: all 0.3s ease 0.4s; }
html.demo-medical .medical-schedules .box-two .expanded-info .info:nth-child(2),
html.demo-medical .medical-schedules .box-three .expanded-info .info:nth-child(2) { transition: all 0.3s ease 0.5s; }
html.demo-medical .medical-schedules .box-two .expanded-info .info:nth-child(3),
html.demo-medical .medical-schedules .box-three .expanded-info .info:nth-child(3) { transition: all 0.3s ease 0.6s; }
html.demo-medical .medical-schedules .box-two i,
html.demo-medical .medical-schedules .box-three i {
	position: absolute;
	top: 50%;
	right: -30px;
	font-size: 1.44em;
	transition: all 0.3s ease;
}
html.demo-medical .medical-schedules .box-two:hover i { transform: translateY(-50%) translateX(50%); }
html.demo-medical .medical-schedules .box-two i { transform: translateY(-50%) translateX(0%); }
html.demo-medical .medical-schedules .box-three:hover i { transform: translateY(-50%) rotate(-90deg); }
html.demo-medical .medical-schedules .box-three i { transform: translateY(-50%) rotate(0deg); }
html.demo-medical .medical-schedules .box-four label {
	display: block;
	margin: -3px 0 0;
	opacity: 0.5;
}
html.demo-medical .medical-schedules .box-four strong {
	font-size: 1.35em;       /* antes 1.6em — números con espacios desbordaban */
	line-height: 1.15;
	word-break: break-word;  /* permite wrap si el teléfono es muy largo */
	display: block;
}
html.demo-medical .medical-schedules .box-four .feature-box { padding: 18px 20px; }
html.demo-medical .medical-schedules .box-four .feature-box-icon { margin-top: 5px; }
html.demo-medical .medical-schedules .box-four .feature-box-info { min-width: 0; }
@media (max-width: 1199px) {
	html.demo-medical .medical-schedules .box-four strong { font-size: 1.15em; }
}

@media (max-width: 991px) {
	html.demo-medical .medical-schedules h4 { margin-top: 10px !important; }
	html.demo-medical .medical-schedules .box-one::after { content: none; }
	html.demo-medical .medical-schedules .box-two,
	html.demo-medical .medical-schedules .box-three { padding: 38px 38px 38px 38px; }
}

/* --- Info bullet (label + value) --- */
html.demo-medical .custom-info span:nth-child(1) {
	display: inline-block;
	color: color-mix(in srgb, var(--primary, #008fe2) 60%, white);
	min-width: 68px;
	margin-right: 10px;
}
html.demo-medical .custom-info span:nth-child(1)::after {
	content: ':';
	display: block;
	float: right;
	color: var(--light, #FFF);
}
html.demo-medical .custom-info span:nth-child(2) {
	color: var(--light, #FFF);
}

/* --- Feature box style-2 --- */
html.demo-medical .feature-box.feature-box-style-2 .feature-box-icon { top: 3px; }

/* --- Team/Doctors carousel (cuando se use con módulo team) --- */
html.demo-medical .team .thumb-info:hover .thumb-info-caption {
	background: var(--primary, #008fe2);
}
html.demo-medical .team .thumb-info:hover .thumb-info-caption span,
html.demo-medical .team .thumb-info:hover .thumb-info-caption i {
	color: var(--light, #FFF) !important;
}
html.demo-medical .team .thumb-info .thumb-info-caption {
	position: relative;
	padding: 10px 0;
	display: block;
	background: var(--light, #FFF);
	transition: all 0.3s ease;
}
html.demo-medical .team .thumb-info .thumb-info-caption .custom-thumb-info-title span { display: block; }
html.demo-medical .team .thumb-info .thumb-info-caption .custom-thumb-info-title span:nth-child(1) { color: #8e8e8e; }
html.demo-medical .team .thumb-info .thumb-info-caption .custom-thumb-info-title span:nth-child(2) { color: var(--dark, #28292d); }
html.demo-medical .team .thumb-info .thumb-info-caption .custom-thumb-info-title i {
	position: absolute;
	top: 50%;
	right: 20px;
	font-size: 1.9em !important;
	color: var(--dark, #28292d);
	transform: translateY(-50%);
}
html.demo-medical .team .owl-carousel.nav-bottom .owl-nav {
	position: absolute;
	top: -60px;
	right: 10px;
}
html.demo-medical .team .owl-carousel.nav-bottom .owl-nav button.owl-prev,
html.demo-medical .team .owl-carousel.nav-bottom .owl-nav button.owl-next {
	border: none !important;
	font-size: 2em;
	padding: 0;
	width: auto;
	height: auto;
}
html.demo-medical .team .owl-carousel.nav-bottom .owl-nav button.owl-prev { color: var(--primary, #0092e3); }
html.demo-medical .team .owl-carousel.nav-bottom .owl-nav button.owl-prev::before {
	font-family: simple-line-icons;
	content: "\e07a";
	font-size: 1.8rem;
}
html.demo-medical .team .owl-carousel.nav-bottom .owl-nav button.owl-next { color: var(--secondary, #2d529f); }
html.demo-medical .team .owl-carousel.nav-bottom .owl-nav button.owl-next::before {
	font-family: simple-line-icons;
	content: "\e079";
	font-size: 1.8rem;
}

/* --- Blog cards (resources style) --- */
html.demo-medical .thumb-info-side-image-custom {
	border: 0 none;
	color: var(--default, #777);
	margin: 0 0 35px;
	transition: all 0.3s ease;
}
html.demo-medical .thumb-info-side-image-custom .thumb-info-side-image-wrapper {
	padding: 0;
	margin-right: 30px;
}
html.demo-medical .thumb-info-side-image-custom .thumb-info-caption { text-align: left; }
html.demo-medical .thumb-info-side-image-custom .thumb-info-caption h4 { margin: 30px 0 0; padding: 0; }
html.demo-medical .thumb-info-side-image-custom .thumb-info-caption p {
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 24px;
}
html.demo-medical .thumb-info-side-image-custom:hover {
	box-shadow: 10px 10px 74px -15px rgba(0, 0, 0, 0.33) !important;
}
html.demo-medical .thumb-info-side-image-custom.thumb-info-side-image-custom-highlight .thumb-info-side-image-wrapper {
	margin: 0 0 10px 0;
	padding: 0;
}
html.demo-medical .thumb-info-side-image-custom.thumb-info-side-image-custom-highlight .thumb-info-caption {
	padding: 0 10px;
	display: block;
	clear: both;
}
html.demo-medical .thumb-info-side-image-custom.thumb-info-side-image-custom-highlight .thumb-info-caption h4 { margin: 3px 0 0; padding: 0; }
html.demo-medical .thumb-info-side-image-custom.thumb-info-side-image-custom-highlight .thumb-info-caption p { margin: 0; padding: 0; }

@media (max-width: 767px) {
	html.demo-medical .thumb-info-side-image-custom.thumb-info-side-image-custom-highlight .thumb-info-side-image-wrapper {
		width: 100%;
	}
}

/* --- Content grid (insurance/logos partners) --- */
html.demo-medical .content-grid .content-grid-item {
	min-height: 150px;
	border: 1px solid #e4e4e4;
	border-left: none;
}
html.demo-medical .content-grid .content-grid-item:first-child { border-left: 1px solid #e4e4e4; }
html.demo-medical .content-grid .content-grid-item::before,
html.demo-medical .content-grid .content-grid-item::after { content: none; }
@media (max-width: 991px) {
	html.demo-medical .content-grid .content-grid-item:nth-child(4) { border-left: 1px solid #e4e4e4; }
	html.demo-medical .content-grid .content-grid-item:nth-child(4),
	html.demo-medical .content-grid .content-grid-item:nth-child(5),
	html.demo-medical .content-grid .content-grid-item:nth-child(6) { border-top: 0; }
}
@media (max-width: 767px) {
	html.demo-medical .content-grid .content-grid-item {
		border-top: 0;
		border-left: 1px solid #e4e4e4;
	}
	html.demo-medical .content-grid .content-grid-item:first-child { border-top: 1px solid #e4e4e4; }
}

/* --- Testimonial (white text on colored bg, big quote) --- */
html.demo-medical .testimonial .testimonial-quote {
	display: inline-block;
	position: relative;
	color: var(--light, #FFF);
	font-size: 50px;
	line-height: 1;
	font-family: Georgia, serif;
}
html.demo-medical .testimonial .testimonial-quote::before {
	content: '';
	display: block;
	position: absolute;
	top: 25%;
	left: 50%;
	border: 1px solid #fff;
	border-radius: 100%;
	padding: 25px;
	transform: translateX(-50%) translateY(-50%);
}
html.demo-medical .testimonial blockquote::before,
html.demo-medical .testimonial blockquote::after {
	color: var(--light, #FFF) !important;
	font-size: 40px !important;
}
html.demo-medical .testimonial blockquote p {
	color: var(--light, #FFF) !important;
	font-family: var(--font-family) !important;
	font-size: 15px;
	line-height: 1.6;
}
html.demo-medical .testimonial .testimonial-author p strong {
	position: relative;
	display: inline-block;
	color: var(--light, #FFF) !important;
}
html.demo-medical .testimonial .testimonial-author p strong::before {
	content: '';
	display: block;
	position: absolute;
	width: 35%;
	top: -21px;
	left: 50%;
	border-top: 2px solid color-mix(in srgb, var(--primary, #008fe2) 50%, white);
	transform: translateX(-50%) translateY(-50%);
}

/* --- Footer (scoped a #footer dentro de html.demo-medical, NO global) --- */
html.demo-medical #footer {
	background: var(--quaternary, #34383d);
	border: none;
}
html.demo-medical #footer p,
html.demo-medical #footer a,
html.demo-medical #footer strong {
	color: #95989c;
}
html.demo-medical #footer a strong {
	display: block;
	font-size: 30px;
	line-height: 1;
}
html.demo-medical #footer a label {
	color: var(--light, #FFF) !important;
}
html.demo-medical #footer .custom-info span:nth-child(1) {
	color: #95989c;
}
html.demo-medical #footer .footer-copyright {
	background: var(--quaternary, #34383d);
	border-top: 1px solid #53585e;
}
html.demo-medical #footer .footer-copyright p {
	color: #95989c;
}

/* --- Social icons --- */
html.demo-medical .social-icons li {
	border-radius: 0;
	box-shadow: none;
}
html.demo-medical .social-icons li:hover a { opacity: 0.8; }
html.demo-medical .social-icons li a { border-radius: 0; }

/* --- Page-header (modern, used in about/contact/blog/faqs/services) ---
 * Porto theme.css base: .page-header-modern.page-header-md { padding: 50px 0; }
 * H1 default: 28px font-weight 600. No tocar — Porto ya tiene la
 * proporción correcta. Solo agregamos el bg-color-primary que usa el
 * --primary brand del tenant. --}}
 */
html.demo-medical .page-header.bg-color-primary {
	background-color: var(--primary, #008fe2) !important;
}
html.demo-medical .page-header.page-header-modern .sub-title {
	font-weight: 300;
	opacity: 0.9;
	display: block;
	margin-top: 4px;
}
html.demo-medical .page-header .breadcrumb-light li a { color: rgba(255,255,255,0.85); }
html.demo-medical .page-header .breadcrumb-light li.active { color: #FFF; }

/* ============================================================
 * MODULE OVERRIDES — adaptación a paleta medical
 *
 * Los módulos (blog/services/projects/faqs) usan inline style
 * "background-color: var(--secondary)" con texto en var(--light),
 * asumiendo que --secondary es oscuro. Para demo-medical, donde
 * --secondary = #2d529f (azul corporativo intenso), el texto queda
 * legible PERO el fondo azul puede competir con el page-header
 * primary y romper la jerarquía visual.
 *
 * Solución: convertir secciones con bg=--secondary a blanco/claro
 * y ajustar text colors para contraste apropiado. Mismo patrón que
 * demo-restaurant.
 * ============================================================ */

/* 1. Section bg --secondary → blanco con leve tinte (excepto page-headers) */
html.demo-medical .main section[style*="--secondary"]:not(.page-header) {
	background-color: #f7f8fa !important;
}

/* 2. Card/Panel bg --dark → blanco con sombra */
html.demo-medical .main section div[style*="background-color: var(--dark)"],
html.demo-medical .main section aside [style*="background-color: var(--dark)"] {
	background-color: #fff !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

/* 3. Blog/Service/Project cards → blanco con sombra suave */
html.demo-medical .main section[style*="--secondary"] .blog-card,
html.demo-medical .main section[style*="--secondary"] .service-card,
html.demo-medical .main section[style*="--secondary"] .project-card,
html.demo-medical .main .blog-card,
html.demo-medical .main .service-card {
	background-color: #fff !important;
	border: 1px solid #e8e8e8 !important;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}
html.demo-medical .main section[style*="--secondary"] .blog-card:hover,
html.demo-medical .main section[style*="--secondary"] .service-card:hover,
html.demo-medical .main section[style*="--secondary"] .project-card:hover,
html.demo-medical .main .blog-card:hover {
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

/* 4. Text colors: revertir light → dark cuando el contenedor pasó a claro */
html.demo-medical .main section[style*="--secondary"] [style*="color: var(--light)"],
html.demo-medical .main section[style*="--secondary"] [style*="color:var(--light)"] {
	color: #212529 !important;
}
html.demo-medical .main section[style*="--secondary"] [style*="color: var(--quaternary)"],
html.demo-medical .main section[style*="--secondary"] [style*="color:var(--quaternary)"] {
	color: #6b7280 !important;
}
html.demo-medical .main section[style*="--secondary"] strong[style*="--light"] {
	color: #212529 !important;
}

/* 5. Blog card content específico (índice y post detail) */
html.demo-medical .main .blog-card .card-body {
	background-color: #fff;
	color: #4b5563;
}
html.demo-medical .main .blog-card .card-title,
html.demo-medical .main .blog-card .card-title a {
	color: #212529 !important;
}
html.demo-medical .main .blog-card .card-title a:hover {
	color: var(--primary, #008fe2) !important;
}
html.demo-medical .main .blog-card .post-meta,
html.demo-medical .main .blog-card .post-date {
	color: #6b7280 !important;
}

/* 6. Post detail (single article view) — paleta legible */
html.demo-medical .main .post-content,
html.demo-medical .main article.post .post-content {
	background-color: #fff;
	color: #374151;
}
html.demo-medical .main .post-content p,
html.demo-medical .main .post-content li {
	color: #374151;
}
html.demo-medical .main .post-content h1,
html.demo-medical .main .post-content h2,
html.demo-medical .main .post-content h3,
html.demo-medical .main .post-content h4 {
	color: #1a1a2e;
}
html.demo-medical .main .post-content a {
	color: var(--primary, #008fe2);
}
html.demo-medical .main .post-content strong {
	color: #1a1a2e;
}

/* 7. Blog sidebar (recent posts, categories) */
html.demo-medical .main .blog-sidebar-sticky,
html.demo-medical .main .blog-sidebar {
	background-color: #fff;
	border: 1px solid #e8e8e8;
}
html.demo-medical .main .blog-sidebar h3,
html.demo-medical .main .blog-sidebar h4 {
	color: #1a1a2e !important;
}
html.demo-medical .main .blog-sidebar a {
	color: #4b5563;
}
html.demo-medical .main .blog-sidebar a:hover {
	color: var(--primary, #008fe2);
}

/* 8. FAQ items — fondo claro con texto oscuro */
html.demo-medical .main section[style*="--secondary"] .faq-question,
html.demo-medical .main .faq-question {
	background-color: #fff !important;
	border-bottom: 1px solid #e8e8e8 !important;
}
html.demo-medical .main section[style*="--secondary"] .faq-question h5,
html.demo-medical .main .faq-question h5 {
	color: #212529 !important;
}
html.demo-medical .main section[style*="--secondary"] .faq-content,
html.demo-medical .main .faq-content {
	color: #555 !important;
}
html.demo-medical .main .faq-question:hover {
	background-color: #f7f8fa !important;
}

/* 9. Search-results & categories listings */
html.demo-medical .search-results .faq-question {
	background-color: #f7f8fa !important;
	border-bottom: 1px solid #e8e8e8 !important;
}
html.demo-medical .search-results .faq-question h5 {
	color: #212529 !important;
}
html.demo-medical .search-results .faq-content {
	color: #555 !important;
}
html.demo-medical .no-results {
	background: #fff !important;
	border: 1px solid #e8e8e8 !important;
}
html.demo-medical .category-stats small {
	color: #6b7280 !important;
}

/* 10. Cyan hardcoded borders (herencia digital-agency) → gris neutral */
html.demo-medical .main [style*="rgba(0, 240, 255"] {
	border-color: #e8e8e8 !important;
}
html.demo-medical .main [style*="border: 1px solid rgba(0, 240, 255"] {
	border: 1px solid #e8e8e8 !important;
}