*/
/* ── Backgrounds por slide (sin dependencia de imagen externa) ──
Gradientes oscuros que simulan foto+overlay.
Si se añaden imágenes reales, ponerlas en public/images/hero/
y aplicar como background-image en .hero-slide-bg vía CSS aquí,
NO como style="" inline en el blade. */
/* Slide 1 — Identidad: azul profundo + toque púrpura */
.hero-slide .hero-slide-bg {
background: linear-gradient(
135deg,
#0a0f1a 0%,
#1a1a2e 30%,
#16213e 60%,
#1a1a2e 100%
);
}
/* Slide 2 — Documentos: cálido, tonos leather/madera */
.hero-slide--docs .hero-slide-bg {
background: linear-gradient(
150deg,
#1a0f05 0%,
#2c1810 35%,
#3d2415 65%,
#1a0f05 100%
);
}
/* Slide 3 — Conversión: dorado oscuro, premium */
.hero-slide--convert .hero-slide-bg {
background: linear-gradient(
170deg,
#0d0d0d 0%,
#1a1508 30%,
#2a200a 60%,
#0d0d0d 100%
);
}
/* Slide documentos — cálido, ámbar oscuro */
.hero-slide--docs .hero-slide-overlay {
background: linear-gradient(
160deg,
rgba(13, 13, 13, .70) 0%,
rgba(60, 30, 5, .55) 45%,
rgba(168, 132, 47, .30) 100%
);
}
/* Slide cursos — azul profundo, conocimiento */
.hero-slide--cursos .hero-slide-overlay {
background: linear-gradient(
160deg,
rgba(8, 20, 40, .72) 0%,
rgba(15, 35, 65, .58) 45%,
rgba(30, 60, 100, .3) 100%
);
}
/* Slide SOS — rojo urgente */
.hero-slide--sos .hero-slide-overlay {
background: linear-gradient(
160deg,
rgba(20, 5, 5, .72) 0%,
rgba(100, 10, 10, .55) 50%,
rgba(60, 0, 0, .35) 100%
);
}
/* Slide conversión — profundo, dorado */
.hero-slide--convert .hero-slide-overlay {
background: linear-gradient(
180deg,
rgba(13, 13, 13, .75) 0%,
rgba(40, 25, 5, .60) 50%,
rgba(168, 132, 47, .30) 100%
);
}
/* ── Layout variante: texto alineado a la izquierda ── */
.hero-slide-content--left {
justify-content: flex-start;
padding-left: 0;
}
.hero-slide-content--left .hero-text-wrapper {
margin: 0;
text-align: left;
max-width: 620px;
}
.hero-slide-content--left .hero-subtitle {
margin-left: 0;
margin-right: 0;
}
.hero-slide-content--left .hero-cta { justify-content: flex-start; }
@media (max-width: 767.98px) {
.hero-slide-content--left { justify-content: center; }
.hero-slide-content--left .hero-text-wrapper { text-align: center; margin: 0 auto; }
.hero-slide-content--left .hero-cta { justify-content: center; }
}
/* ── Badge sobre el título del slide ── */
.hero-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255,255,255,.92);
font-size: .72rem;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: .35rem .85rem;
border-radius: var(--radius-full);
margin-bottom: 1.1rem;
}
.hero-badge i { font-size: .75rem; }
/* Variantes de color del badge */
.hero-badge--warn {
background: rgba(212,160,23,.2);
border-color: rgba(212,160,23,.4);
color: #fcd34d;
}
.hero-badge--danger {
background: rgba(220,38,38,.25);
border-color: rgba(220,38,38,.45);
color: #fca5a5;
}
.hero-badge--info {
background: rgba(59,130,246,.2);
border-color: rgba(59,130,246,.35);
color: #93c5fd;
}
/* ── Nota pequeña bajo el CTA (ej: "Sin tarjeta · Sin compromisos") ── */
.hero-sub-note {
display: block;
margin-top: .85rem;
font-size: .74rem;
color: rgba(255,255,255,.55);
letter-spacing: .5px;
}
/* ── CTA con dos botones en el hero ── */
.hero-cta .mm-btn-group {
justify-content: center;
}
.hero-slide-content--left .hero-cta .mm-btn-group {
justify-content: flex-start;
}
@media (max-width: 575.98px) {
.hero-cta .mm-btn-group { flex-direction: column; align-items: center; }
.hero-cta .mm-btn { width: 100%; max-width: 300px; }
}
/* ═══════════════════════════════════════════════════════════════════
[6] TRUST BAR — Barra de prueba social
─────────────────────────────────────────────────────────────────
Uso:
═══════════════════════════════════════════════════════════════════ */
.mm-trust-bar {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
padding: 1.5rem 0;
background: var(--white);
border-bottom: 1px solid var(--border-light);
}
.mm-trust-item {
display: flex;
flex-direction: column;
align-items: center;
gap: .2rem;
padding: .6rem 2.5rem;
}
.mm-trust-value {
font-family: 'Poppins', sans-serif;
font-size: 1.6rem;
font-weight: 800;
line-height: 1;
background: var(--front-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -.02em;
}
.mm-trust-label {
font-size: .72rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.mm-trust-divider {
width: 1px;
height: 36px;
background: var(--border-light);
flex-shrink: 0;
}
@media (max-width: 767.98px) {
.mm-trust-item { padding: .5rem 1.4rem; }
.mm-trust-value { font-size: 1.3rem; }
.mm-trust-divider { height: 28px; }
}
@media (max-width: 479.98px) {
.mm-trust-bar { gap: .25rem; }
.mm-trust-divider { display: none; }
.mm-trust-item { padding: .6rem 1.1rem; width: 50%; border-bottom: 1px solid var(--border-light); }
.mm-trust-item:nth-child(odd) { border-right: 1px solid var(--border-light); }
}
/* ═══════════════════════════════════════════════════════════════════
[7] SECCIONES DEL INDEX
─────────────────────────────────────────────────────────────────
· .mm-section-header — encabezado unificado de sección
· .mm-section-actions — fila de CTAs al pie de sección
· .mm-cta-dark — sección oscura de conversión mid-page
· .mm-services-grid — grid de servicios
═══════════════════════════════════════════════════════════════════ */
/* ── Header de sección ── */
.mm-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 2rem;
}
/* Botón "Ver todos" alineado correctamente */
.mm-section-header > a,
.mm-section-header > .btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
flex-shrink: 0 !important;
align-self: center !important;
white-space: nowrap !important;
}
.mm-section-header__left { flex: 1; min-width: 0; }
.mm-section-header__eyebrow {
font-size: .68rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--primary-purple);
margin-bottom: .4rem;
display: flex;
align-items: center;
gap: .5rem;
}
.mm-section-header__eyebrow::after {
content: '';
flex: 0 0 32px;
height: 2px;
background: var(--front-gradient);
border-radius: 2px;
}
.mm-section-header__title {
font-size: 1.65rem;
font-weight: 800;
color: var(--text-dark);
letter-spacing: -.025em;
line-height: 1.2;
margin: 0 0 .4rem;
}
.mm-section-header__sub {
font-size: .92rem;
color: var(--text-muted);
margin: 0;
line-height: 1.6;
}
@media (max-width: 767.98px) {
.mm-section-header { flex-direction: column; align-items: flex-start; }
.mm-section-header__title { font-size: 1.35rem; }
}
/* ── Acciones al pie de sección ── */
.mm-section-actions {
display: flex;
justify-content: center;
margin-top: 2.25rem;
}
/* ── Guest banner dentro de sección de documentos ── */
.mm-guest-notice {
display: flex;
align-items: center;
gap: 1.1rem;
background: var(--bg-purple-soft);
border: 1px solid var(--border-subtle);
border-left: 4px solid var(--primary-purple);
border-radius: var(--radius-md);
padding: 1rem 1.4rem;
margin-bottom: 1.5rem;
}
.mm-guest-notice__icon {
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: var(--front-gradient);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: .9rem;
flex-shrink: 0;
}
.mm-guest-notice__text { flex: 1; min-width: 0; }
.mm-guest-notice__text strong { display: block; font-size: .875rem; color: var(--text-dark); margin-bottom: .15rem; }
.mm-guest-notice__text span { font-size: .8rem; color: var(--text-body); }
@media (max-width: 575.98px) {
.mm-guest-notice { flex-wrap: wrap; }
.mm-guest-notice .mm-btn { width: 100%; }
}
/* ── Sección CTA oscura (mid-page) ── */
.mm-cta-dark {
background: var(--dark-bg);
position: relative;
overflow: hidden;
padding: 80px 0;
}
/* Decoración de fondo */
.mm-cta-dark::before {
content: '';
position: absolute;
top: -80px;
right: -80px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(201,162,74,.25) 0%, transparent 70%);
pointer-events: none;
}
.mm-cta-dark::after {
content: '';
position: absolute;
bottom: -60px;
left: -60px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(168,132,47,.18) 0%, transparent 70%);
pointer-events: none;
}
.mm-cta-dark__inner {
position: relative;
z-index: 1;
text-align: center;
max-width: 600px;
margin: 0 auto;
padding: 0 20px;
}
.mm-cta-dark__eyebrow {
display: inline-block;
font-size: .68rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--primary-warm);
margin-bottom: 1rem;
}
.mm-cta-dark__title {
font-size: 2rem;
font-weight: 800;
color: #fff;
letter-spacing: -.03em;
line-height: 1.2;
margin-bottom: .85rem;
}
.mm-cta-dark__sub {
font-size: .96rem;
color: rgba(255,255,255,.6);
line-height: 1.7;
margin-bottom: 2rem;
}
.mm-cta-dark__features {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: .5rem 1.5rem;
margin-bottom: 2rem;
}
.mm-cta-dark__feature {
font-size: .78rem;
color: rgba(255,255,255,.55);
display: flex;
align-items: center;
gap: .35rem;
}
.mm-cta-dark__feature i { color: var(--front-ok); font-size: .7rem; }
@media (max-width: 767.98px) {
.mm-cta-dark { padding: 56px 0; }
.mm-cta-dark__title { font-size: 1.55rem; }
}
/* ── Grid de servicios ── */
.mm-services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.25rem;
}
.mm-service-card {
display: flex;
flex-direction: column;
align-items: center;
gap: .75rem;
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
padding: 1.5rem 1rem;
text-align: center;
text-decoration: none;
color: var(--text-dark);
transition: var(--transition-fast);
box-shadow: var(--shadow-card);
}
.mm-service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
border-color: var(--border-subtle);
color: var(--primary-purple);
text-decoration: none;
}
.mm-service-card__img {
width: 100%;
height: 110px;
object-fit: contain;
border-radius: var(--radius-sm);
}
.mm-service-card__name {
font-size: .84rem;
font-weight: 700;
line-height: 1.3;
}
/* ═══════════════════════════════════════════════════════════════════
[8] CURSO CARD — Front público
─────────────────────────────────────────────────────────────────
Estado NO comprado: imagen + meta + precio + CTA
Estado COMPRADO: igual al panel (reutiliza .curso-badge, .curso-progress
pero esos estilos los provee panel.css solo en el panel).
Aquí definimos la versión pública/catálogo.
═══════════════════════════════════════════════════════════════════ */
.mm-course-card {
background: var(--white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition: transform .22s ease, box-shadow .22s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.mm-course-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-card-hover);
}
/* Imagen */
.mm-course-card__img {
position: relative;
overflow: hidden;
height: 180px;
background: var(--bg-purple-soft);
flex-shrink: 0;
}
.mm-course-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
display: block;
}
.mm-course-card:hover .mm-course-card__img img { transform: scale(1.05); }
/* Badges sobre la imagen */
.mm-course-card__badges {
position: absolute;
top: .65rem;
left: .65rem;
right: .65rem;
display: flex;
justify-content: space-between;
align-items: flex-start;
pointer-events: none;
}
.mm-course-badge {
font-size: .65rem;
font-weight: 800;
letter-spacing: .8px;
text-transform: uppercase;
padding: .28rem .65rem;
border-radius: var(--radius-full);
line-height: 1;
}
.mm-course-badge--cat {
background: rgba(18,25,33,.65);
backdrop-filter: blur(6px);
color: #fff;
}
.mm-course-badge--new {
background: var(--front-ok);
color: #fff;
}
.mm-course-badge--dest {
background: var(--front-brand);
color: #0d0d0d;
}
/* Cuerpo */
.mm-course-card__body {
padding: 1rem 1.1rem .75rem;
flex: 1;
display: flex;
flex-direction: column;
gap: .4rem;
}
.mm-course-card__cat {
font-size: .68rem;
font-weight: 800;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--primary-purple);
}
.mm-course-card__title {
font-size: .93rem;
font-weight: 700;
color: var(--text-dark);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.mm-course-card__prof {
font-size: .76rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: .3rem;
margin-top: auto;
}
.mm-course-card__prof i { font-size: .68rem; }
/* Meta row (duración, clases) */
.mm-course-card__meta {
display: flex;
align-items: center;
gap: .85rem;
font-size: .73rem;
color: var(--text-muted);
padding-top: .4rem;
border-top: 1px solid var(--border-light);
margin-top: .35rem;
}
.mm-course-card__meta-item {
display: flex;
align-items: center;
gap: .28rem;
}
.mm-course-card__meta-item i { font-size: .65rem; color: var(--primary-purple); }
/* Footer: precio + CTA */
.mm-course-card__footer {
padding: .75rem 1.1rem .9rem;
border-top: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
gap: .5rem;
background: var(--bg-subtle);
}
.mm-course-card__price {
font-family: 'Poppins', sans-serif;
font-weight: 800;
font-size: 1rem;
color: var(--primary-purple);
line-height: 1;
}
.mm-course-card__price-label {
display: block;
font-size: .65rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .8px;
margin-bottom: .15rem;
}
/* Variante guest: CTA full-width */
.mm-course-card--guest .mm-course-card__footer {
flex-direction: column;
align-items: stretch;
gap: .5rem;
}
.mm-course-card--guest .mm-course-card__price-row {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Blog card (publicaciones) */
.mm-blog-card {
display: flex;
gap: 1rem;
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
transition: var(--transition-fast);
text-decoration: none;
color: var(--text-dark);
}
.mm-blog-card:hover {
box-shadow: var(--shadow-card-hover);
transform: translateY(-2px);
color: var(--text-dark);
text-decoration: none;
border-color: var(--border-subtle);
}
.mm-blog-card__img {
width: 120px;
flex-shrink: 0;
overflow: hidden;
}
.mm-blog-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
display: block;
}
.mm-blog-card:hover .mm-blog-card__img img { transform: scale(1.06); }
.mm-blog-card__body {
padding: .9rem 1rem .9rem 0;
display: flex;
flex-direction: column;
gap: .3rem;
flex: 1;
min-width: 0;
}
.mm-blog-card__meta {
display: flex;
align-items: center;
gap: .6rem;
font-size: .7rem;
color: var(--text-muted);
}
.mm-blog-card__meta span { display: flex; align-items: center; gap: .25rem; }
.mm-blog-card__title {
font-size: .9rem;
font-weight: 700;
line-height: 1.35;
color: var(--text-dark);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.mm-blog-card__preview {
font-size: .78rem;
color: var(--text-muted);
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
@media (max-width: 575.98px) {
.mm-blog-card { flex-direction: column; }
.mm-blog-card__img { width: 100%; height: 140px; }
.mm-blog-card__body { padding: .75rem; }
}
/*
* Variante compacta para el index — layout vertical, imagen arriba.
* Comunica "artículo" en lugar de "producto". Menos peso visual.
* Se usa en la sección de publicaciones del home.
*/
.mm-blog-card--compact {
flex-direction: column;
gap: 0;
}
.mm-blog-card--compact .mm-blog-card__img {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
flex-shrink: 0;
position: relative; /* necesario para que el img absoluto resuelva height correctamente */
}
.mm-blog-card--compact .mm-blog-card__img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.mm-blog-card--compact .mm-blog-card__body {
padding: .8rem .9rem .9rem;
}
/* ═══════════════════════════════════════════════════════════════════
[9] DOC CARD — integración con sistema .mm-btn
El .doc-card (definido en redesign.css) mantiene su estructura;
solo reemplazamos los botones .btn-doc por .mm-btn.
═══════════════════════════════════════════════════════════════════ */
.doc-footer {
display: flex;
gap: .5rem;
padding: .75rem 1rem 1rem;
}
.doc-footer .mm-btn {
flex: 1;
justify-content: center;
font-size: .78rem;
padding: .38rem .6rem;
}
.doc-footer-guest .mm-btn {
width: 100%;
}
/* ═══════════════════════════════════════════════════════════════════
[10] CRS CATALOG — cards del catálogo de cursos
Reemplaza .box_list / .box_grid de Udema con .mm-course-card
dentro del contenedor .crs-list.
═══════════════════════════════════════════════════════════════════ */
.crs-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Card horizontal (lista) */
.crs-list .mm-course-card {
display: flex;
flex-direction: row;
border-radius: 14px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(0,0,0,.07);
box-shadow: 0 2px 12px rgba(0,0,0,.05);
transition: box-shadow .2s, transform .2s;
}
.crs-list .mm-course-card:hover {
box-shadow: 0 6px 24px rgba(0,0,0,.10);
transform: translateY(-2px);
}
.crs-list .mm-course-card__img {
width: 280px;
min-width: 280px;
height: auto;
aspect-ratio: 16/10;
object-fit: cover;
flex-shrink: 0;
}
.crs-list .mm-course-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 1.1rem 1.25rem 1rem;
gap: .35rem;
}
.crs-list .mm-course-card__title {
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
color: var(--text-dark);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.crs-list .mm-course-card__desc {
font-size: .8rem;
color: var(--text-muted);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
}
.crs-list .mm-course-card__meta {
margin-top: auto;
padding-top: .6rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem;
}
.crs-list .mm-course-card__price {
font-size: .95rem;
font-weight: 700;
color: var(--primary-purple);
}
.crs-list .mm-course-card__duration {
font-size: .75rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: .3rem;
}
@media (max-width: 767.98px) {
.crs-list .mm-course-card { flex-direction: column; }
.crs-list .mm-course-card__img { width: 100%; min-width: unset; aspect-ratio: 16/9; }
}
/* ═══════════════════════════════════════════════════════════════════
[11] DOC DETAIL — Página de detalle de documento
═══════════════════════════════════════════════════════════════════ */
/*============================================================================================*/
/* DOCUMENTO DETAIL — Estilos del detalle de documento */
/* Paleta heredada de redesign.css: --primary-purple, --primary-warm, --dark-bg, etc. */
/* Estructura: section(fondo) > card(contenedora) > header + body(visor | sidebar) */
/*============================================================================================*/
/* ═══════════════════════════════════════════════════ */
/* SECTION WRAPPER */
/* ═══════════════════════════════════════════════════ */
.doc-detail-section {
padding: 100px 0 80px;
background: var(--bg-subtle);
min-height: 100vh;
}
/* ═══ Alertas flash ═══ */
.doc-alert {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
border-radius: var(--radius-md);
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
animation: docSlideDown 0.3s ease-out;
}
.doc-alert i { font-size: 18px; flex-shrink: 0; }
.doc-alert-success {
background: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.doc-alert-error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
.doc-alert-balance {
margin-left: auto;
font-weight: 700;
opacity: 0.8;
}
@keyframes docSlideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══ Banner de compra exitosa ═══ */
.doc-purchase-banner {
display: flex;
align-items: center;
gap: 20px;
padding: 20px 28px;
background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
border: 1.5px solid #6ee7b7;
border-radius: var(--radius-md);
margin-bottom: 24px;
animation: docSlideDown 0.35s cubic-bezier(0.4,0,0.2,1);
}
.doc-purchase-banner__icon {
width: 52px;
height: 52px;
min-width: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #059669, #10b981);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 16px rgba(16,185,129,.3);
}
.doc-purchase-banner__icon i { font-size: 22px; color: #fff; }
.doc-purchase-banner__body { flex: 1; min-width: 0; }
.doc-purchase-banner__title {
font-size: 15px;
font-weight: 800;
color: #065f46;
margin: 0 0 2px;
}
.doc-purchase-banner__sub {
font-size: 13px;
color: #047857;
margin: 0;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.doc-purchase-banner__sub span {
display: inline-flex;
align-items: center;
gap: 5px;
opacity: .85;
}
.doc-purchase-banner__sub strong { opacity: 1; }
.doc-purchase-banner__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 22px;
background: linear-gradient(135deg, #059669, #10b981);
color: #fff !important;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(16,185,129,.35);
transition: all .2s ease;
flex-shrink: 0;
}
.doc-purchase-banner__btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(16,185,129,.45);
color: #fff !important;
}
/* ═══════════════════════════════════════════════════ */
/* BREADCRUMB */
/* ═══════════════════════════════════════════════════ */
.doc-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 28px;
font-size: 13px;
color: var(--text-muted);
}
.doc-breadcrumb a {
color: var(--brand);
text-decoration: none;
font-weight: 500;
}
.doc-breadcrumb a:hover { text-decoration: underline; }
.doc-breadcrumb .separator {
color: var(--border-light);
font-size: 10px;
}
/* ═══════════════════════════════════════════════════ */
/* CARD CONTENEDORA PRINCIPAL */
/* ═══════════════════════════════════════════════════ */
.doc-detail-card {
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
/* ═══════════════════════════════════════════════════ */
/* HEADER (dentro de la card) */
/* ═══════════════════════════════════════════════════ */
.doc-detail-header {
padding: 36px 40px 28px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: flex-start;
gap: 24px;
}
/* Ícono por tipo de archivo con fondo de color */
.doc-type-icon {
width: 64px;
height: 64px;
min-width: 64px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
}
.doc-type-icon.pdf { background: #fef2f2; color: #ef4444; }
.doc-type-icon.word { background: #eff6ff; color: #3b82f6; }
.doc-type-icon.excel { background: #f0fdf4; color: #22c55e; }
.doc-type-icon.ppt { background: #fffbeb; color: #f59e0b; }
.doc-type-icon.imagen { background: #FAF5E8; color: var(--primary-purple); }
.doc-type-icon.otro { background: #f9fafb; color: #6b7280; }
.doc-detail-info { flex: 1; }
.doc-detail-info h1 {
font-size: 24px;
font-weight: 800;
color: var(--text-dark);
margin: 0 0 8px;
line-height: 1.3;
letter-spacing: -0.02em;
}
/* Meta info */
.doc-detail-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
color: var(--text-body);
margin-top: 4px;
}
.doc-detail-meta .meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--bg-subtle);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
padding: 4px 11px;
font-weight: 500;
white-space: nowrap;
}
.doc-detail-meta .meta-item i {
font-size: 11px;
color: var(--primary-purple);
}
/* Author chip */
.doc-author-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-subtle);
border: 1.5px solid rgba(201,162,74,.22);
padding: 4px 12px 4px 4px;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 13px;
color: var(--text-dark);
}
.doc-author-chip .avatar-mini {
width: 26px;
height: 26px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ═══════════════════════════════════════════════════ */
/* BODY: DOS COLUMNAS (dentro de la card) */
/* ═══════════════════════════════════════════════════ */
.doc-detail-body {
display: grid;
grid-template-columns: 1fr 340px;
min-height: 500px;
}
/* ═══════════════════════════════════════════════════ */
/* COLUMNA IZQUIERDA: VISOR / PREVIEW */
/* ═══════════════════════════════════════════════════ */
.doc-viewer-area {
padding: 32px 40px;
border-right: 1px solid var(--border-light);
background: #fafafa;
}
.doc-viewer-area h3 {
font-size: 14px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 16px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.doc-viewer-area h3 i {
color: var(--primary-purple);
font-size: 14px;
}
/* Badge "Acceso completo" */
.viewer-badge-owned {
font-size: 11px;
padding: 3px 10px;
border-radius: var(--radius-full);
font-weight: 700;
background: #ecfdf5;
color: #059669;
border: 1px solid #a7f3d0;
text-transform: none;
letter-spacing: 0;
margin-left: auto;
}
/* ═══ Tabs del visor ═══ */
.viewer-tabs {
display: flex;
gap: 0;
margin-bottom: 16px;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--border-light);
background: var(--white);
width: fit-content;
}
.viewer-tab {
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
border: none;
background: transparent;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.viewer-tab:hover {
color: var(--text-dark);
background: var(--bg-subtle);
}
.viewer-tab.active {
background: var(--primary-purple);
color: #fff;
}
.viewer-tab i { font-size: 12px; }
/* ═══ Container del visor ═══ */
.doc-viewer-container {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border-light);
background: #fff;
position: relative;
}
.doc-viewer-container iframe {
width: 100%;
height: 520px;
border: none;
display: block;
}
.doc-viewer-container img.preview-img {
width: 100%;
height: auto;
max-height: 520px;
object-fit: contain;
display: block;
background: #fff;
}
/* ═══ Overlay para no comprados ═══ */
.doc-viewer-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 55%;
background: linear-gradient(
0deg,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.85) 50%,
transparent 100%
);
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 36px;
}
.overlay-content {
text-align: center;
}
.overlay-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--primary-purple);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
box-shadow: 0 4px 20px rgba(201,162,74,0.3);
}
.overlay-icon i {
font-size: 22px;
color: #fff;
}
.overlay-text {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 14px;
}
.overlay-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 26px;
background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
color: #fff !important;
border: none;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(201,162,74,0.3);
}
.overlay-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(201,162,74,0.4);
}
/* ═══ Compatibilidad con overlay-msg del old ═══ */
.doc-viewer-overlay .overlay-msg {
text-align: center;
}
.doc-viewer-overlay .overlay-msg i {
font-size: 28px;
color: var(--primary-purple);
margin-bottom: 8px;
display: block;
}
.doc-viewer-overlay .overlay-msg p {
font-size: 14px;
color: var(--text-muted);
margin: 0;
}
/* ═══ Sin preview ═══ */
.doc-no-preview {
padding: 60px 20px;
text-align: center;
color: var(--text-muted);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 350px;
}
.doc-no-preview > i {
font-size: 48px;
color: var(--border-light);
margin-bottom: 16px;
}
.doc-no-preview h4 {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin: 0 0 8px;
}
.doc-no-preview p {
font-size: 14px;
margin: 0 0 4px;
}
.doc-no-preview-tipo {
font-size: 12px !important;
font-weight: 700;
letter-spacing: 1px;
color: var(--text-muted) !important;
}
.doc-no-preview-btn {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 10px 24px;
background: var(--primary-purple);
color: #fff !important;
border-radius: var(--radius-full);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all 0.25s ease;
}
.doc-no-preview-btn:hover {
background: var(--primary-purple-light);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(201,162,74,0.3);
}
/* ═══ Image viewer ═══ */
.doc-viewer-image .preview-img-zoomable {
cursor: zoom-in;
transition: opacity 0.2s ease;
}
.doc-viewer-image .preview-img-zoomable:hover {
opacity: 0.95;
}
.viewer-zoom-hint {
text-align: center;
padding: 10px;
font-size: 12px;
color: var(--text-muted);
background: #fafafa;
border-top: 1px solid var(--border-light);
}
.viewer-zoom-hint i { margin-right: 4px; }
/* ═══ Lightbox ═══ */
.image-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.92);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
cursor: zoom-out;
}
.image-lightbox.active {
opacity: 1;
visibility: visible;
}
.image-lightbox img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: var(--radius-sm);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox-close {
position: absolute;
top: 20px;
right: 24px;
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease;
z-index: 10;
}
.lightbox-close:hover {
background: rgba(255,255,255,0.25);
}
/* ═══ Office fallback ═══ */
.viewer-office-fallback {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
text-align: center;
}
.viewer-office-fallback > i {
font-size: 48px;
margin-bottom: 16px;
}
.viewer-office-fallback h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
}
.viewer-office-fallback p {
font-size: 13px;
color: var(--text-muted);
margin-bottom: 16px;
}
/* ═══════════════════════════════════════════════════ */
/* COLUMNA DERECHA: SIDEBAR */
/* ═══════════════════════════════════════════════════ */
.doc-sidebar {
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* ─── Precio ─── */
.doc-price-box {
text-align: center;
padding: 24px 20px;
background: linear-gradient(135deg, rgba(201,162,74,0.04) 0%, rgba(168,132,47,0.03) 100%);
border-radius: var(--radius-md);
border: 1px solid rgba(201,162,74,0.1);
}
.doc-price-box .price-label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.doc-price-box .price-value {
font-size: 32px;
font-weight: 800;
color: var(--primary-purple);
letter-spacing: -0.02em;
line-height: 1.2;
}
.doc-price-box .price-free {
color: #16a34a;
font-size: 28px;
font-weight: 800;
letter-spacing: .06em;
}
.doc-price-box .price-currency {
font-size: 16px;
font-weight: 600;
color: var(--text-muted);
}
/* ─── Balance del usuario ─── */
.doc-balance-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--bg-purple-soft);
border-radius: var(--radius-sm);
font-size: 13px;
}
.doc-balance-info .balance-label {
color: var(--text-body);
font-weight: 500;
}
.doc-balance-info .balance-value {
color: var(--primary-purple);
font-weight: 800;
}
/* ─── Botones de acción ─── */
.doc-action-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 24px;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 700;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
}
.doc-action-btn i { font-size: 16px; }
.btn-comprar {
background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-warm) 100%);
color: #fff;
box-shadow: 0 4px 16px rgba(201,162,74,0.3);
}
.btn-comprar:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(201,162,74,0.4);
color: #fff;
}
.btn-descargar {
background: #22c55e;
color: #fff;
box-shadow: 0 4px 16px rgba(34,197,94,0.3);
}
.btn-descargar:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(34,197,94,0.4);
color: #fff;
}
.btn-ver-online {
background: var(--white);
color: var(--primary-purple);
border: 2px solid var(--primary-purple);
}
.btn-ver-online:hover {
background: var(--primary-purple);
color: #fff;
}
.btn-registrar {
background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-warm) 100%);
color: #fff;
box-shadow: 0 4px 16px rgba(201,162,74,0.3);
}
.btn-registrar:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(201,162,74,0.4);
color: #fff;
text-decoration: none;
}
/* Botón login (guest sidebar) */
.btn-login {
background: var(--white);
color: var(--primary-purple);
border: 2px solid var(--primary-purple);
}
.btn-login:hover {
background: var(--primary-purple);
color: #fff;
text-decoration: none;
}
/* ─── Badge comprado ─── */
.doc-bought-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--radius-sm);
color: #16a34a;
font-size: 14px;
font-weight: 600;
}
/* ─── Login hint ─── */
.doc-login-hint {
font-size: 13px;
color: var(--text-muted);
text-align: center;
margin: 0;
}
.doc-login-hint a {
color: var(--primary-purple);
font-weight: 600;
text-decoration: none;
}
.doc-login-hint a:hover { text-decoration: underline; }
/* ─── Descripción (full width debajo del body) ─── */
.doc-detail-description {
padding: 28px 40px 32px;
border-top: 1px solid var(--border-light);
}
.doc-detail-description h3 {
font-size: 15px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 12px;
display: flex;
align-items: center;
gap: 10px;
}
.doc-detail-description h3 i {
font-size: 14px;
color: var(--primary-purple);
}
.doc-detail-description p {
font-size: 14px;
color: var(--text-body);
line-height: 1.8;
margin: 0;
max-width: 800px;
}
/* ─── Descripción sidebar (legacy, por si se usa) ─── */
.doc-description {
padding: 20px 0;
border-top: 1px solid var(--border-light);
}
.doc-description h3 {
font-size: 14px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 10px;
display: flex;
align-items: center;
gap: 8px;
}
.doc-description h3 i {
font-size: 13px;
color: var(--primary-purple);
}
.doc-description p {
font-size: 14px;
color: var(--text-body);
line-height: 1.7;
margin: 0;
}
/* ─── Info list (mejorada) ─── */
.doc-info-list {
background: var(--bg-subtle);
border-radius: var(--radius-md);
padding: 0;
overflow: hidden;
border: 1px solid var(--border-light);
}
.doc-info-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--text-muted);
margin: 0;
padding: 12px 18px;
border-bottom: 1px solid var(--border-light);
background: var(--white);
display: flex;
align-items: center;
gap: 8px;
}
.doc-info-title i {
color: var(--primary-purple);
font-size: 11px;
}
.doc-info-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 11px 18px;
font-size: 13px;
border-bottom: 1px solid var(--border-subtle);
background: var(--white);
transition: background 0.15s ease;
}
.doc-info-item:last-child { border-bottom: none; }
.doc-info-item:hover { background: #fdfbf7; }
.doc-info-item .label {
color: var(--text-muted);
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
flex-shrink: 0;
white-space: nowrap;
}
/* Íconos circulares con color */
.info-icon {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
flex-shrink: 0;
}
.info-icon-author { background: #FAF5E8; color: var(--primary-purple); }
.info-icon-date { background: #eff6ff; color: #3b82f6; }
.info-icon-format { background: #fef2f2; color: #ef4444; }
.info-icon-size { background: #fffbeb; color: #f59e0b; }
.info-icon-purchases { background: #f0fdf4; color: #22c55e; }
.info-icon-views { background: #fdf2f8; color: #ec4899; }
.doc-info-item .value {
color: var(--text-dark);
font-weight: 700;
display: flex;
align-items: center;
text-align: right;
min-width: 0;
word-break: break-word;
}
/* Stats grid (Compras / Vistas) */
.doc-info-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
padding: 14px 18px 16px;
border-bottom: 1px solid var(--border-subtle);
}
.doc-info-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--bg-subtle);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
padding: 12px 8px;
text-align: center;
gap: 4px;
}
.doc-info-stat .stat-val {
font-size: 22px;
font-weight: 800;
color: var(--text-dark);
line-height: 1;
}
.doc-info-stat .stat-lbl {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 3px;
}
.doc-info-stat .stat-lbl i { font-size: 9px; }
/* Badge de formato con color por tipo */
.info-format-badge {
display: inline-block;
padding: 2px 10px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.5px;
}
.info-format-badge.pdf { background: #fef2f2; color: #dc2626; }
.info-format-badge.word { background: #eff6ff; color: #2563eb; }
.info-format-badge.excel { background: #f0fdf4; color: #16a34a; }
.info-format-badge.ppt { background: #fffbeb; color: #d97706; }
.info-format-badge.imagen { background: #FAF5E8; color: var(--primary-purple); }
/* ═══════════════════════════════════════════════════ */
/* CARD IMPROVEMENTS (para listado) */
/* ═══════════════════════════════════════════════════ */
.doc-card .doc-card-thumbnail {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
.doc-badge-owned {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #059669, #10b981);
color: #fff;
padding: 6px 16px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 5px;
box-shadow: 0 3px 12px rgba(5,150,105,0.35);
letter-spacing: 0.3px;
white-space: nowrap;
z-index: 2;
}
.doc-date-tipo {
margin-left: auto;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
display: inline-flex;
align-items: center;
gap: 4px;
}
.doc-date-tipo i { font-size: 12px; }
/* ═══════════════════════════════════════════════════ */
/* RESPONSIVE */
/* ═══════════════════════════════════════════════════ */
@media (max-width: 991px) {
.doc-detail-section {
padding: 80px 0 60px;
}
.doc-detail-body {
grid-template-columns: 1fr;
}
.doc-viewer-area {
border-right: none;
border-bottom: 1px solid var(--border-light);
padding: 24px;
}
.doc-sidebar {
padding: 24px;
}
}
@media (max-width: 767px) {
.doc-detail-header {
padding: 24px 20px 20px;
flex-direction: column;
gap: 16px;
}
.doc-detail-info h1 {
font-size: 20px;
}
.doc-detail-meta {
gap: 12px;
}
.doc-viewer-area {
padding: 20px;
}
.doc-viewer-container iframe {
height: 400px;
}
.doc-sidebar {
padding: 20px;
}
.doc-price-box .price-value {
font-size: 26px;
}
.viewer-tabs {
width: 100%;
}
.viewer-tab {
flex: 1;
justify-content: center;
}
.doc-detail-description {
padding: 24px 20px;
}
}
/* ═══════════════════════════════════════════════════════════════════
[12] CRS DETAIL — Página de detalle de curso
═══════════════════════════════════════════════════════════════════ */
/*============================================================================================*/
/* CURSOS DETAIL — MM Design System */
/* Prefix: crs-detail-*, crs-* */
/* No !important — clases son suficientemente específicas */
/*============================================================================================*/
.crs-detail-section {
padding: 100px 0 80px;
background: var(--bg-subtle);
min-height: 100vh;
}
/* ── Alertas flash ── */
.crs-alert {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
border-radius: var(--radius-md);
margin-bottom: 24px;
font-size: 14px;
font-weight: 600;
animation: crsSlideDown 0.3s ease-out;
}
.crs-alert i { font-size: 18px; flex-shrink: 0; }
.crs-alert-success {
background: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.crs-alert-error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
@keyframes crsSlideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Breadcrumb ── */
.crs-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 28px;
font-size: 13px;
color: var(--text-muted);
flex-wrap: wrap;
}
.crs-breadcrumb a {
color: var(--brand);
text-decoration: none;
font-weight: 500;
}
.crs-breadcrumb a:hover { text-decoration: underline; }
.crs-breadcrumb .separator {
color: var(--border-light);
font-size: 10px;
}
/* ── Card contenedora ── */
.crs-detail-card {
background: var(--white);
border-radius: var(--radius-lg);
border: 1px solid var(--border-light);
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
/* ── Header ── */
.crs-detail-header {
padding: 36px 40px 28px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: flex-start;
gap: 28px;
}
.crs-header-thumb {
width: 140px;
min-width: 140px;
height: 100px;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--bg-subtle);
border: 1px solid var(--border-light);
}
.crs-header-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.crs-detail-info { flex: 1; }
.crs-cat-badge {
display: inline-block;
padding: 3px 12px;
border-radius: var(--radius-full);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
background: rgba(201,162,74,0.08);
color: var(--primary-purple);
margin-bottom: 10px;
}
.crs-detail-info h1 {
font-size: 24px;
font-weight: 800;
color: var(--text-dark);
margin: 0 0 12px;
line-height: 1.3;
letter-spacing: -0.02em;
}
.crs-detail-meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
color: var(--text-muted);
}
.crs-detail-meta .meta-item {
display: flex;
align-items: center;
gap: 5px;
}
.crs-detail-meta .meta-item i { font-size: 12px; }
.crs-prof-chip {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--bg-subtle);
padding: 4px 12px 4px 4px;
border-radius: var(--radius-full);
}
.crs-prof-chip .avatar-mini {
width: 24px;
height: 24px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
/* ── Body: CSS grid ── */
.crs-detail-body {
display: grid;
grid-template-columns: 1fr 360px;
min-height: 500px;
}
/* ── Main area ── */
.crs-main-area {
padding: 36px 40px;
border-right: 1px solid var(--border-light);
}
.crs-section { margin-bottom: 48px; }
.crs-section:last-child { margin-bottom: 0; }
.crs-section-title {
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 8px;
}
.crs-section-title i {
color: var(--primary-purple);
font-size: 13px;
}
.crs-description-content {
font-size: 15px;
line-height: 1.8;
color: var(--text-body);
}
.crs-description-content p { margin-bottom: 16px; }
.crs-description-content p:last-child { margin-bottom: 0; }
.crs-description-content ul,
.crs-description-content ol {
padding-left: 24px;
margin-bottom: 16px;
}
/* Lessons header */
.crs-lessons-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 12px;
}
.crs-lessons-header .crs-section-title { margin: 0; }
.crs-lessons-count {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
/* ── Accordion ── */
.crs-accordion {
display: flex;
flex-direction: column;
gap: 10px;
}
.crs-acc-item {
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.crs-acc-item:hover,
.crs-acc-item.open {
box-shadow: 0 2px 12px rgba(201,162,74,0.08);
border-color: rgba(201,162,74,0.2);
}
.crs-acc-header {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
background: var(--bg-subtle);
border: none;
cursor: pointer;
text-align: left;
transition: background 0.2s ease;
gap: 12px;
}
.crs-acc-header:hover { background: rgba(201,162,74,0.04); }
.crs-acc-item.open .crs-acc-header { background: rgba(201,162,74,0.05); }
.crs-acc-left {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
}
.crs-mod-num {
font-size: 12px;
font-weight: 800;
color: var(--primary-purple);
min-width: 24px;
}
.crs-mod-name {
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
}
.crs-acc-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.crs-mod-count {
font-size: 12px;
color: var(--text-muted);
font-weight: 500;
}
.crs-acc-icon {
font-size: 11px;
color: var(--text-muted);
transition: transform 0.25s ease;
}
.crs-acc-item.open .crs-acc-icon { transform: rotate(180deg); }
.crs-acc-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.crs-acc-item.open .crs-acc-body { max-height: 2000px; }
.crs-class-list {
margin: 0;
padding: 0;
list-style: none;
}
.crs-class-item {
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-light);
transition: background 0.15s ease;
}
.crs-class-item:last-child { border-bottom: none; }
.crs-class-item:hover { background: #fafafa; }
.crs-class-link {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
flex: 1;
text-decoration: none;
color: var(--text-dark);
font-size: 14px;
transition: color 0.15s ease;
}
a.crs-class-link:hover { color: var(--primary-purple); }
.crs-class-link.crs-class-locked {
opacity: 0.55;
cursor: default;
}
.crs-class-icon {
font-size: 13px;
color: var(--primary-purple);
flex-shrink: 0;
}
.crs-class-icon.locked { color: var(--text-muted); }
.crs-class-dur {
font-size: 12px;
color: var(--text-muted);
font-weight: 600;
padding: 14px 24px 14px 0;
white-space: nowrap;
}
/* ── Sidebar ── */
.crs-sidebar {
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 18px;
background: #fafafa;
}
.crs-sidebar-thumb {
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--border-light);
}
.crs-sidebar-thumb img {
width: 100%;
height: auto;
display: block;
max-height: 200px;
object-fit: cover;
}
/* Price box */
.crs-price-box {
text-align: center;
padding: 22px 20px;
background: linear-gradient(135deg, rgba(201,162,74,0.05) 0%, rgba(168,132,47,0.03) 100%);
border-radius: var(--radius-md);
border: 1px solid rgba(201,162,74,0.12);
}
.crs-price-box .price-label {
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.crs-price-box .price-value {
font-size: 30px;
font-weight: 800;
color: var(--primary-purple);
letter-spacing: -0.02em;
line-height: 1.2;
}
.crs-price-box .price-validity {
font-size: 12px;
color: var(--text-muted);
margin-top: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* CTA */
.crs-cta-area {
display: flex;
flex-direction: column;
gap: 10px;
}
.crs-btn-primary {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 20px;
background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-warm) 100%);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 700;
cursor: pointer;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 16px rgba(201,162,74,0.3);
width: 100%;
text-align: center;
}
.crs-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(201,162,74,0.4);
color: #fff;
}
.crs-access-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
}
.crs-access-badge.vigente {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #16a34a;
}
.crs-access-badge.vencida {
background: #fffbeb;
border: 1px solid #fde68a;
color: #92400e;
}
.crs-login-hint {
font-size: 12px;
color: var(--text-muted);
text-align: center;
margin: 0;
}
.crs-login-hint a {
color: var(--primary-purple);
font-weight: 600;
text-decoration: none;
}
.crs-login-hint a:hover { text-decoration: underline; }
/* Sidebar blocks */
.crs-sidebar-block {
background: var(--white);
border: 1px solid var(--border-light);
border-radius: var(--radius-md);
overflow: hidden;
}
.crs-block-title {
font-size: 11px;
font-weight: 700;
color: var(--text-dark);
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 12px 18px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
gap: 8px;
}
.crs-block-title i {
color: var(--primary-purple);
font-size: 12px;
}
/* Instructor */
.crs-prof-info {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
}
.crs-prof-avatar {
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
color: #fff;
font-size: 16px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.crs-prof-name {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 4px;
}
.crs-prof-contact {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: #22c55e;
font-weight: 600;
text-decoration: none;
}
.crs-prof-contact:hover { text-decoration: underline; }
.crs-prof-contact i { font-size: 13px; }
/* Features */
.crs-features-list {
margin: 0;
padding: 0;
list-style: none;
}
.crs-features-list li {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 18px;
font-size: 13px;
color: var(--text-body);
border-bottom: 1px solid var(--border-light);
}
.crs-features-list li:last-child { border-bottom: none; }
.crs-features-list li i {
font-size: 13px;
color: var(--primary-purple);
width: 16px;
text-align: center;
flex-shrink: 0;
}
/* ── Modal de confirmación ── */
.crs-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.5);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.crs-modal-overlay.open {
opacity: 1;
visibility: visible;
}
.crs-modal {
background: var(--white);
border-radius: var(--radius-lg);
width: 100%;
max-width: 420px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
transform: scale(0.95);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.crs-modal-overlay.open .crs-modal { transform: scale(1); }
.crs-modal-header {
padding: 24px 28px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--border-light);
}
.crs-modal-header i {
font-size: 20px;
color: var(--primary-purple);
}
.crs-modal-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin: 0;
}
.crs-modal-body {
padding: 24px 28px;
text-align: center;
}
.crs-modal-course {
font-size: 15px;
font-weight: 600;
color: var(--text-dark);
margin: 0 0 8px;
}
.crs-modal-price {
font-size: 32px;
font-weight: 800;
color: var(--primary-purple);
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.crs-modal-validity {
font-size: 13px;
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
}
.crs-modal-footer {
padding: 16px 28px 24px;
display: flex;
flex-direction: column;
gap: 10px;
}
.crs-modal-confirm {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 15px 24px;
background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm));
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 4px 16px rgba(201,162,74,0.3);
width: 100%;
}
.crs-modal-confirm:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(201,162,74,0.4);
}
.crs-modal-cancel {
padding: 12px 24px;
background: transparent;
border: 1px solid var(--border-light);
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
font-weight: 600;
width: 100%;
}
.crs-modal-cancel:hover {
border-color: var(--text-muted);
color: var(--text-dark);
}
/* ── Responsive ── */
@media (max-width: 991px) {
.crs-detail-section { padding: 80px 0 60px; }
.crs-detail-body { grid-template-columns: 1fr; }
.crs-sidebar {
order: -1;
border-bottom: 1px solid var(--border-light);
background: var(--white);
}
.crs-main-area { border-right: none; }
}
@media (max-width: 767px) {
.crs-detail-section { padding: 70px 0 50px; }
.crs-detail-header {
padding: 24px 20px 20px;
flex-direction: column;
gap: 16px;
}
.crs-header-thumb {
width: 100%;
height: 180px;
}
.crs-detail-info h1 { font-size: 20px; }
.crs-main-area { padding: 24px 20px; }
.crs-sidebar { padding: 20px; }
.crs-lessons-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.crs-acc-header { padding: 14px 18px; }
.crs-mod-name { font-size: 14px; }
.crs-class-link { padding: 12px 18px; }
.crs-class-dur { padding: 12px 18px 12px 0; }
.crs-price-box .price-value { font-size: 26px; }
.crs-sidebar-thumb img { max-height: 160px; }
}
/* ═══════════════════════════════════════════════════════════════════
[13] CRS INDEX — Catálogo de cursos + filtros
═══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
CURSOS CATALOG — /cursos
MM Design System tokens + crs- prefix
══════════════════════════════════════════════════════ */
/* ─── Layout base ─── */
.crs-catalog-wrap {
display: grid;
grid-template-columns: 268px 1fr;
gap: 28px;
align-items: start;
padding: 28px 0 60px;
}
/* ════════════════════════════════════════════════════
SIDEBAR — Desktop
════════════════════════════════════════════════════ */
.crs-sidebar {
position: sticky;
top: 88px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.crs-filters-head {
padding: 16px 18px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, rgba(201,162,74,0.04), rgba(168,132,47,0.02));
}
.crs-filters-head h5 {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--text-dark);
margin: 0;
display: flex;
align-items: center;
gap: 7px;
}
.crs-filters-head h5 i { color: var(--primary-purple); font-size: 12px; }
.crs-clear-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-decoration: none !important;
padding: 4px 10px;
border-radius: 20px;
transition: all 0.18s;
}
.crs-clear-btn:hover { background: rgba(220,38,38,0.07); color: #dc2626; }
/* ─── Secciones de filtro ─── */
.crs-filter-sec {
padding: 14px 18px;
border-bottom: 1px solid rgba(0,0,0,0.045);
}
.crs-filter-sec:last-child { border-bottom: none; }
.crs-filter-lbl {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--text-muted);
margin: 0 0 10px;
}
/* ─── Search ─── */
.crs-search-wrap { position: relative; }
.crs-search-wrap i {
position: absolute; left: 11px; top: 50%;
transform: translateY(-50%);
color: var(--text-muted); font-size: 12px; pointer-events: none;
}
.crs-search-inp {
width: 100%; padding: 9px 12px 9px 32px;
border: 1.5px solid var(--border-light); border-radius: 10px;
font-size: 13px; font-family: inherit; color: var(--text-dark);
background: var(--bg-subtle, #f8f8f8); outline: none; transition: all 0.2s;
}
.crs-search-inp:focus {
border-color: var(--primary-purple); background: #fff;
box-shadow: 0 0 0 3px rgba(201,162,74,0.08);
}
/* ─── Rubro toggle (Legal / Médico) ─── */
.crs-rubro-group { display: flex; gap: 6px; }
.crs-rubro-btn {
flex: 1; display: flex; align-items: center; justify-content: center;
gap: 6px; padding: 8px 10px; border-radius: 9px;
border: 1.5px solid var(--border-light); background: var(--bg-subtle, #f8f8f8);
font-size: 12px; font-weight: 700; color: var(--text-body);
cursor: pointer; transition: all 0.15s; user-select: none;
}
.crs-rubro-btn input { display: none; }
.crs-rubro-btn:hover { border-color: rgba(201,162,74,0.25); background: var(--bg-purple-soft, #FAF5E8); color: var(--primary-purple); }
.crs-rubro-btn.active { border-color: var(--primary-purple); background: var(--bg-purple-soft, #FAF5E8); color: var(--primary-purple); }
.crs-rubro-btn i { font-size: 11px; }
/* ─── Categorías colapsables ─── */
.crs-cat-list { display: flex; flex-direction: column; gap: 3px; }
.crs-cat-item {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; padding: 8px 11px; border-radius: 9px; cursor: pointer;
font-size: 13px; color: var(--text-body); font-weight: 500;
border: 1.5px solid transparent; transition: all 0.15s; user-select: none;
text-decoration: none !important;
}
.crs-cat-item input { display: none; }
.crs-cat-item:hover { background: var(--bg-purple-soft, #FAF5E8); color: var(--primary-purple); }
.crs-cat-item.active {
background: var(--bg-purple-soft, #FAF5E8); border-color: rgba(201,162,74,0.18);
color: var(--primary-purple); font-weight: 700;
}
.crs-cat-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crs-cat-count {
font-size: 10px; font-weight: 800; color: var(--text-muted);
background: var(--bg-subtle, #f8f8f8); padding: 2px 7px;
border-radius: 10px; flex-shrink: 0; line-height: 1.6;
}
.crs-cat-item.active .crs-cat-count { background: rgba(201,162,74,0.12); color: var(--primary-purple); }
/* Collapse categorías */
.crs-cat-more {
max-height: 0; overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
display: flex; flex-direction: column; gap: 3px;
}
.crs-cat-more.open { max-height: 2000px; }
.crs-cat-toggle-btn {
display: flex; align-items: center; gap: 5px;
margin-top: 4px; padding: 5px 11px;
font-size: 11px; font-weight: 700; color: var(--primary-purple);
background: none; border: none; cursor: pointer;
font-family: inherit; transition: all 0.15s;
}
.crs-cat-toggle-btn:hover { text-decoration: underline; }
.crs-cat-toggle-btn i { font-size: 9px; transition: transform 0.25s; }
.crs-cat-toggle-btn.open i { transform: rotate(180deg); }
/* ─── Radio pills (Ordenar) ─── */
.crs-radio-pills { display: flex; flex-direction: column; gap: 3px; }
.crs-radio-pill {
display: flex; align-items: center; gap: 9px; padding: 8px 11px;
border-radius: 9px; cursor: pointer; font-size: 13px;
color: var(--text-body); font-weight: 500; border: 1.5px solid transparent;
transition: all 0.15s; user-select: none;
}
.crs-radio-pill input { display: none; }
.crs-radio-pill:hover { background: var(--bg-purple-soft, #FAF5E8); color: var(--primary-purple); }
.crs-radio-pill.active {
background: var(--bg-purple-soft, #FAF5E8); border-color: rgba(201,162,74,0.18);
color: var(--primary-purple); font-weight: 700;
}
.crs-pill-dot {
width: 15px; height: 15px; border-radius: 50%;
border: 2px solid var(--border-light); flex-shrink: 0; position: relative;
transition: border-color 0.15s;
}
.crs-pill-dot::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%;
background: var(--primary-purple); opacity: 0; transform: scale(0.4);
transition: all 0.15s;
}
.crs-radio-pill.active .crs-pill-dot { border-color: var(--primary-purple); }
.crs-radio-pill.active .crs-pill-dot::after { opacity: 1; transform: scale(1); }
/* ─── Toggle destacado ─── */
.crs-toggle-wrap {
display: flex; align-items: center; gap: 10px; padding: 9px 11px;
border-radius: 10px; border: 1.5px solid var(--border-light); cursor: pointer;
font-size: 13px; color: var(--text-body); font-weight: 500;
transition: all 0.2s; user-select: none;
}
.crs-toggle-wrap input { display: none; }
.crs-toggle-wrap:hover { border-color: rgba(201,162,74,0.25); background: var(--bg-purple-soft, #FAF5E8); }
.crs-toggle-wrap.active { border-color: rgba(201,162,74,0.25); background: var(--bg-purple-soft, #FAF5E8); color: var(--primary-purple); font-weight: 700; }
.crs-toggle-wrap .crs-star { margin-left: auto; font-size: 11px; color: #f59e0b; }
.crs-switch {
width: 34px; height: 18px; border-radius: 9px;
background: var(--border-light); position: relative; flex-shrink: 0; transition: background 0.2s;
}
.crs-switch::after {
content: ''; position: absolute; top: 2px; left: 2px;
width: 14px; height: 14px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.18); transition: transform 0.2s;
}
.crs-toggle-wrap.active .crs-switch { background: var(--primary-purple); }
.crs-toggle-wrap.active .crs-switch::after { transform: translateX(16px); }
/* ─── Precio range ─── */
.crs-precio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.crs-precio-inp {
padding: 8px 10px; border: 1.5px solid var(--border-light); border-radius: 10px;
font-size: 12px; font-family: inherit; color: var(--text-dark);
background: var(--bg-subtle, #f8f8f8); outline: none; width: 100%; transition: all 0.2s;
}
.crs-precio-inp:focus { border-color: var(--primary-purple); background: #fff; box-shadow: 0 0 0 3px rgba(201,162,74,0.08); }
/* ─── Apply button ─── */
.crs-apply-btn {
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; padding: 11px; cursor: pointer; font-family: inherit;
background: linear-gradient(135deg, var(--primary-purple), #A8842F);
color: #fff; border: none; border-radius: 10px;
font-size: 13px; font-weight: 700; transition: all 0.2s; letter-spacing: 0.2px;
}
.crs-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,162,74,0.32); }
/* ════════════════════════════════════════════════════
RESULTS BAR
════════════════════════════════════════════════════ */
.crs-results-bar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px; padding: 13px 18px;
background: #fff; border: 1px solid var(--border-light); border-radius: 12px;
margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.crs-results-count { display: flex; align-items: baseline; gap: 6px; }
.crs-results-num {
font-size: 26px; font-weight: 800; color: var(--text-dark);
letter-spacing: -0.04em; line-height: 1;
}
.crs-results-txt { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.crs-active-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.crs-active-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
background: var(--bg-purple-soft, #FAF5E8); border: 1px solid rgba(201,162,74,0.18);
border-radius: 20px; font-size: 11px; font-weight: 700; color: var(--primary-purple); white-space: nowrap;
}
.crs-active-chip i { font-size: 9px; opacity: 0.65; }
.crs-results-clear {
display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
font-weight: 700; color: var(--text-muted); text-decoration: none !important;
padding: 4px 10px; border-radius: 20px; transition: all 0.18s;
}
.crs-results-clear:hover { background: rgba(220,38,38,0.07); color: #dc2626; }
/* ════════════════════════════════════════════════════
MOBILE FILTER BAR
════════════════════════════════════════════════════ */
.crs-mobile-bar {
display: none; position: sticky; top: 0; z-index: 200;
background: #fff; border-bottom: 1px solid var(--border-light);
padding: 10px 0; margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.crs-mobile-bar-inner { display: flex; gap: 8px; align-items: center; }
.crs-mobile-search-wrap { position: relative; flex: 1; }
.crs-mobile-search-wrap i {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
color: var(--text-muted); font-size: 13px; pointer-events: none;
}
.crs-mobile-search-inp {
width: 100%; padding: 9px 12px 9px 33px;
border: 1.5px solid var(--border-light); border-radius: 10px;
font-size: 13px; font-family: inherit; color: var(--text-dark);
background: var(--bg-subtle, #f8f8f8); outline: none; transition: all 0.2s;
}
.crs-mobile-search-inp:focus { border-color: var(--primary-purple); background: #fff; box-shadow: 0 0 0 3px rgba(201,162,74,0.08); }
.crs-mobile-filter-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px;
background: var(--bg-subtle, #f8f8f8); border: 1.5px solid var(--border-light);
border-radius: 10px; font-size: 13px; font-weight: 700; font-family: inherit;
color: var(--text-dark); cursor: pointer; white-space: nowrap; transition: all 0.18s; flex-shrink: 0;
}
.crs-mobile-filter-btn.has-filters { border-color: rgba(201,162,74,0.35); background: var(--bg-purple-soft, #FAF5E8); color: var(--primary-purple); }
.crs-filter-count {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; background: var(--primary-purple); color: #fff;
border-radius: 50%; font-size: 10px; font-weight: 800;
}
/* ════════════════════════════════════════════════════
DRAWER — Mobile bottom sheet
════════════════════════════════════════════════════ */
.crs-drawer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.48); z-index: 390;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; pointer-events: none; transition: opacity 0.28s;
}
.crs-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.crs-filter-drawer {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 400;
background: #fff; border-radius: 20px 20px 0 0; max-height: 92vh;
overflow-y: auto; transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
padding-bottom: env(safe-area-inset-bottom, 12px);
box-shadow: 0 -8px 40px rgba(0,0,0,0.14); overscroll-behavior: contain;
}
.crs-filter-drawer.open { transform: translateY(0); }
.crs-drawer-handle-area { display: flex; justify-content: center; padding: 12px 0 4px; }
.crs-drawer-handle { width: 36px; height: 4px; border-radius: 2px; background: #e5e7eb; }
.crs-drawer-header {
padding: 4px 20px 14px; border-bottom: 1px solid var(--border-light);
display: flex; align-items: center; justify-content: space-between;
}
.crs-drawer-header h5 {
font-size: 16px; font-weight: 800; color: var(--text-dark); margin: 0;
display: flex; align-items: center; gap: 8px; font-family: inherit;
}
.crs-drawer-header h5 i { color: var(--primary-purple); font-size: 15px; }
.crs-drawer-close {
width: 32px; height: 32px; border-radius: 50%; background: var(--bg-subtle, #f8f8f8);
border: none; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--text-muted); font-size: 13px; transition: all 0.15s;
}
.crs-drawer-close:hover { background: rgba(220,38,38,0.09); color: #dc2626; }
.crs-drawer-body { padding: 14px 20px 0; }
.crs-drawer-body .crs-filter-sec { padding: 0 0 14px; border-bottom: 1px solid rgba(0,0,0,0.045); margin-bottom: 14px; }
.crs-drawer-body .crs-filter-sec:last-child { border-bottom: none; margin-bottom: 0; }
.crs-drawer-footer {
padding: 14px 20px; border-top: 1px solid var(--border-light);
display: flex; gap: 10px; position: sticky; bottom: 0; background: #fff; z-index: 2;
}
.crs-drawer-footer .crs-apply-btn { flex: 1; margin: 0; }
.crs-drawer-clear-btn {
padding: 11px 14px; background: transparent; border: 1.5px solid var(--border-light);
border-radius: 10px; font-size: 13px; font-weight: 700; font-family: inherit;
color: var(--text-muted); cursor: pointer; transition: all 0.18s; white-space: nowrap;
}
.crs-drawer-clear-btn:hover { border-color: #dc2626; color: #dc2626; }
/* ════════════════════════════════════════════════════
CARD DE CURSO — box_list
════════════════════════════════════════════════════ */
.crs-list { display: flex; flex-direction: column; gap: 20px; }
.box_list {
background: var(--white, #fff); border: 1px solid var(--border-subtle, #f0edf5);
border-radius: 16px; box-shadow: var(--shadow-card, 0 1px 3px rgba(201,162,74,0.06));
overflow: hidden; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.box_list:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover, 0 12px 28px rgba(201,162,74,0.12)); border-color: rgba(201,162,74,0.2); }
.box_list .row { display: flex; align-items: stretch; }
.box_list .row.g-0 > * { padding: 0; }
/* Imagen */
.box_list .col-lg-5 { position: relative; }
.box_list figure.block-reveal {
margin: 0; height: 100%; min-height: 240px; overflow: hidden;
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
position: relative; display: flex; align-items: center; justify-content: center;
}
.box_list figure .block-horizzontal { height: 100%; position: absolute; width: 100%; z-index: 10; background: var(--primary-purple); }
.box_list figure a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 20px; position: relative; z-index: 1; }
.box_list figure img { width: 100%; height: auto; max-height: 240px; object-fit: contain; display: block; transition: opacity 0.3s ease; }
.box_list:hover figure img { opacity: 0.92; }
/* Contenido */
.box_list .col-lg-7 { display: flex; flex-direction: column; }
.box_list .col-lg-7 .wrapper { padding: 24px 26px 16px; display: flex; flex-direction: column; flex-grow: 1; }
.box_list .wrapper .price {
display: inline-block; align-self: flex-start;
background: linear-gradient(135deg, var(--primary-purple), var(--primary-warm, #A8842F));
color: #fff; font-size: 14px; font-weight: 700; padding: 6px 16px;
border-radius: 9999px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(201,162,74,0.2);
}
.box_list .wrapper small {
font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1px;
color: var(--primary-purple); display: block; margin-bottom: 7px;
}
.box_list .wrapper h3 {
margin: 0 0 10px; font-size: 20px; font-weight: 700; line-height: 1.35; color: var(--text-dark);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.box_list .wrapper p {
font-size: 14px; line-height: 1.65; color: var(--text-muted); margin-bottom: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Footer card */
.box_list .col-lg-7 > ul {
margin: 0; padding: 16px 26px; border-top: 1px solid var(--border-light);
background: var(--bg-subtle, #f9fafb); display: flex; justify-content: space-between;
align-items: center; gap: 16px; list-style: none; margin-top: auto;
}
.box_list .col-lg-7 > ul li { font-size: 14px; font-weight: 600; color: var(--text-body); display: flex; align-items: center; gap: 8px; }
.box_list .col-lg-7 > ul li:last-child { margin-left: auto; }
.box_list .col-lg-7 > ul li a {
display: inline-block; border: 2px solid var(--primary-purple); background: transparent;
color: var(--primary-purple); padding: 9px 22px; border-radius: 9999px;
font-size: 13px; font-weight: 700; letter-spacing: 0.3px; transition: all 0.25s;
text-decoration: none; white-space: nowrap;
}
.box_list .col-lg-7 > ul li a:hover {
background: var(--primary-purple); color: #fff;
box-shadow: 0 4px 14px rgba(201,162,74,0.35); transform: translateY(-2px);
}
/* ─── Empty state ─── */
.crs-empty { text-align: center; padding: 56px 20px; }
.crs-empty-icon {
width: 72px; height: 72px; border-radius: 20px;
background: var(--bg-subtle, #f8f8f8); display: flex; align-items: center;
justify-content: center; font-size: 28px; color: #d1d5db; margin: 0 auto 18px;
}
.crs-empty h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin: 0 0 7px; }
.crs-empty p { font-size: 13px; margin: 0 0 20px; color: var(--text-muted); }
/* ─── Paginación ─── */
.crs-pagination { text-align: center; padding-top: 28px; }
.crs-pagination .pagination { justify-content: center; gap: 4px; }
.crs-pagination .page-link {
border: 2px solid var(--border-light); color: var(--primary-purple);
border-radius: 8px; font-weight: 600; font-size: 13px; padding: 7px 13px; transition: all 0.2s;
}
.crs-pagination .page-link:hover { background: var(--bg-purple-soft, #FAF5E8); border-color: var(--primary-purple); }
.crs-pagination .page-item.active .page-link { background: var(--primary-purple); border-color: var(--primary-purple); color: #fff; }
/* ════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 991px) {
.crs-catalog-wrap { grid-template-columns: 1fr; padding-top: 0; }
.crs-sidebar { display: none !important; }
.crs-mobile-bar { display: block; }
.box_list .row { flex-direction: column; }
.box_list figure.block-reveal { min-height: 220px; }
.box_list .col-lg-7 > ul li:last-child { width: 100%; margin-left: 0; }
.box_list .col-lg-7 > ul li:last-child a { display: block; width: 100%; text-align: center; }
}
@media (min-width: 992px) {
.crs-mobile-bar { display: none !important; }
.crs-filter-drawer, .crs-drawer-overlay { display: none !important; }
}
@media (max-width: 767px) {
.box_list figure.block-reveal { min-height: 180px; }
.box_list .col-lg-7 .wrapper { padding: 18px 18px 14px; }
.box_list .wrapper h3 { font-size: 17px; }
.box_list .col-lg-7 > ul { flex-wrap: wrap; padding: 14px 18px; }
}
@media (max-width: 575px) {
.crs-results-bar { flex-wrap: nowrap; }
.crs-active-chips { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════
[14] VER CURSO — Reproductor de contenido
═══════════════════════════════════════════════════════════════════ */
/*============================================================================================*/
/* REPRODUCTOR DE CURSOS — MM Consultor Legal */
/* Prefix: vp-* (video player) */
/* Mobile-first. Layout fijo en desktop (Udemy-style). Sidebar blanco. */
/*============================================================================================*/
/* ── Ocultar CTAs flotantes del master en esta vista ── */
body.page-ver-curso .floating-cta,
body.page-ver-curso .floating-cta--pro,
body.page-ver-curso .rubro-toggle-bar { display: none !important; }
/* ── Wrapper principal ── */
.vp-wrap {
display: flex;
flex-direction: column;
background: #1e1038;
padding-bottom: 60px; /* espacio para mobile nav */
}
/* ══ TOP BAR ══════════════════════════════════════════════════════════════════ */
.vp-topbar {
display: flex;
align-items: center;
gap: 12px;
padding: 0 16px;
height: 52px;
background: #2c1a4a;
border-bottom: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.vp-back {
display: inline-flex;
align-items: center;
gap: 7px;
color: rgba(255,255,255,0.6);
text-decoration: none;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
transition: color 0.2s ease;
flex-shrink: 0;
}
.vp-back:hover { color: #fff; }
.vp-back i { font-size: 11px; }
.vp-back-label { display: none; }
.vp-topbar-center {
flex: 1;
overflow: hidden;
}
.vp-course-name {
font-size: 13px;
font-weight: 600;
color: #e5e7eb;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.vp-topbar-right {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.vp-lesson-counter {
font-size: 12px;
color: rgba(255,255,255,0.45);
white-space: nowrap;
}
.vp-lesson-counter strong {
color: rgba(255,255,255,0.8);
font-weight: 700;
}
.vp-topbar-bar-wrap {
width: 72px;
height: 4px;
background: rgba(255,255,255,0.12);
border-radius: 9999px;
overflow: hidden;
}
.vp-topbar-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary-purple), var(--primary-warm));
border-radius: 9999px;
transition: width 0.5s ease;
}
.vp-topbar-pct {
font-size: 12px;
font-weight: 700;
color: #c084fc;
min-width: 28px;
text-align: right;
}
/* ══ LAYOUT ═══════════════════════════════════════════════════════════════════ */
.vp-layout {
display: flex;
flex-direction: column;
}
/* ══ MAIN ══════════════════════════════════════════════════════════════════════ */
.vp-main {
background: #fff;
}
/* ── Player ── */
.vp-player-wrap {
background: #000;
width: 100%;
}
.vp-player-ratio {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
overflow: hidden;
}
.vp-player-ratio video,
.vp-player-ratio iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
.vp-no-video {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: #4b5563;
}
.vp-no-video i {
font-size: 40px;
opacity: 0.4;
}
.vp-no-video p {
font-size: 14px;
margin: 0;
color: #6b7280;
text-align: center;
padding: 0 20px;
}
/* ── Barra de info / acciones ── */
.vp-class-bar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 20px 14px;
border-bottom: 1px solid #f3f4f6;
flex-wrap: wrap;
}
.vp-class-bar-left { flex: 1; min-width: 0; }
.vp-class-title {
font-size: 18px;
font-weight: 700;
color: #111827;
margin: 0 0 6px;
line-height: 1.35;
letter-spacing: -0.01em;
}
.vp-class-meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.vp-meta-item {
font-size: 12px;
color: #9ca3af;
display: flex;
align-items: center;
gap: 5px;
}
.vp-meta-item i { font-size: 11px; }
.vp-in-progress-tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
color: #d97706;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: 9999px;
padding: 2px 10px;
}
.vp-in-progress-tag i { font-size: 9px; }
.vp-class-bar-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.vp-btn-prev,
.vp-btn-next {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
}
.vp-btn-prev:hover,
.vp-btn-next:hover {
background: #f3f4f6;
border-color: #d1d5db;
color: #111827;
}
.vp-btn-prev i, .vp-btn-next i { font-size: 11px; }
.vp-btn-complete {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
background: linear-gradient(135deg, #C9A24A, #A8842F);
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 3px 12px rgba(201,162,74,0.3);
}
.vp-btn-complete:hover {
transform: translateY(-1px);
box-shadow: 0 5px 18px rgba(201,162,74,0.4);
}
.vp-btn-complete i { font-size: 12px; }
.vp-btn-complete.vp-hidden { display: none; }
.vp-btn-complete.vp-visible { display: inline-flex; }
.vp-hidden { display: none; }
/* ── Tabs ── */
.vp-tabs-wrap {
border-top: 1px solid #f3f4f6;
}
.vp-tab-nav {
display: flex;
gap: 0;
padding: 0 20px;
border-bottom: 1px solid #f3f4f6;
background: #fafafa;
}
.vp-tab-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 13px 16px;
font-size: 13px;
font-weight: 600;
color: #6b7280;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
bottom: -1px;
}
.vp-tab-btn i { font-size: 12px; }
.vp-tab-btn:hover { color: #374151; }
.vp-tab-btn.active {
color: #C9A24A;
border-bottom-color: #C9A24A;
}
.vp-tab-content { }
.vp-tab-pane {
display: none;
padding: 20px;
animation: vpFadeIn 0.2s ease-out;
}
.vp-tab-pane.active { display: block; }
@keyframes vpFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.vp-class-desc {
font-size: 14px;
line-height: 1.75;
color: #4b5563;
min-height: 60px;
}
/* Docs list */
.vp-docs { display: flex; flex-direction: column; gap: 8px; }
.vp-doc-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #f9fafb;
border: 1px solid #f3f4f6;
border-radius: 10px;
transition: border-color 0.15s ease;
}
.vp-doc-item:hover { border-color: #e5e7eb; }
.vp-doc-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: rgba(201,162,74,0.08);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.vp-doc-icon i { font-size: 16px; color: #C9A24A; }
.vp-doc-info { flex: 1; min-width: 0; }
.vp-doc-name {
display: block;
font-size: 13px;
font-weight: 600;
color: #111827;
text-transform: capitalize;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vp-doc-ext {
font-size: 11px;
color: #9ca3af;
font-weight: 700;
letter-spacing: 0.5px;
}
.vp-doc-dl {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: #C9A24A;
color: #fff;
text-decoration: none;
transition: background 0.2s ease, transform 0.15s ease;
flex-shrink: 0;
}
.vp-doc-dl:hover {
background: #7c35ad;
transform: translateY(-1px);
color: #fff;
}
.vp-doc-dl i { font-size: 13px; }
.vp-no-docs {
display: flex;
flex-direction: column;
align-items: center;
padding: 32px 20px;
gap: 10px;
color: #d1d5db;
text-align: center;
}
.vp-no-docs i { font-size: 28px; }
.vp-no-docs p { font-size: 13px; color: #9ca3af; margin: 0; }
/* ── Toggle sidebar mobile ── */
.vp-sidebar-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 20px;
background: #f8f5ff;
border: none;
border-top: 1px solid #e9e0f8;
cursor: pointer;
font-size: 13px;
font-weight: 600;
color: #C9A24A;
transition: background 0.2s ease;
text-align: left;
}
.vp-sidebar-toggle:hover { background: #f0e8ff; }
.vp-sidebar-toggle i:first-child { font-size: 14px; }
.vp-toggle-chevron {
margin-left: auto;
font-size: 11px;
transition: transform 0.25s ease;
}
.vp-sidebar-toggle.open .vp-toggle-chevron { transform: rotate(180deg); }
/* ══ SIDEBAR ══════════════════════════════════════════════════════════════════ */
.vp-sidebar {
background: #fff;
display: none; /* hidden on mobile by default */
flex-direction: column;
overflow: hidden;
border-top: 2px solid #f0e8ff;
}
.vp-sidebar.shown { display: flex; }
.vp-sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px 10px;
border-bottom: 1px solid #f3f4f6;
}
.vp-sidebar-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #9ca3af;
}
.vp-sidebar-stats {
font-size: 12px;
font-weight: 700;
color: #C9A24A;
}
.vp-sidebar-progress {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 18px 14px;
border-bottom: 1px solid #f3f4f6;
}
.vp-sidebar-bar-track {
flex: 1;
height: 5px;
background: #f3f4f6;
border-radius: 9999px;
overflow: hidden;
}
.vp-sidebar-bar {
height: 100%;
background: linear-gradient(90deg, #C9A24A, #A8842F);
border-radius: 9999px;
transition: width 0.5s ease;
}
.vp-sidebar-pct {
font-size: 12px;
font-weight: 700;
color: #C9A24A;
min-width: 30px;
text-align: right;
}
/* Accordion */
.vp-acc-list {
flex: 1;
overflow-y: auto;
padding: 10px;
scrollbar-width: thin;
scrollbar-color: rgba(201,162,74,0.2) transparent;
}
.vp-acc-list::-webkit-scrollbar { width: 4px; }
.vp-acc-list::-webkit-scrollbar-thumb {
background: rgba(201,162,74,0.2);
border-radius: 9999px;
}
.vp-acc-item {
border-radius: 10px;
overflow: hidden;
margin-bottom: 6px;
border: 1px solid #f0ecf8;
}
.vp-acc-head {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #faf8ff;
border: none;
cursor: pointer;
text-align: left;
transition: background 0.2s ease;
}
.vp-acc-head:hover { background: #f3eeff; }
.vp-acc-item.open .vp-acc-head { background: #f0eaff; }
.vp-mod-num {
font-size: 10px;
font-weight: 800;
color: #C9A24A;
min-width: 18px;
}
.vp-mod-name {
flex: 1;
font-size: 13px;
font-weight: 600;
color: #1f2937;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vp-mod-count {
font-size: 10px;
color: #9ca3af;
font-weight: 600;
background: #f3f4f6;
padding: 2px 7px;
border-radius: 9999px;
flex-shrink: 0;
}
.vp-acc-chevron {
font-size: 10px;
color: #9ca3af;
transition: transform 0.25s ease;
flex-shrink: 0;
}
.vp-acc-item.open .vp-acc-chevron { transform: rotate(180deg); }
.vp-acc-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
}
.vp-acc-item.open .vp-acc-body { max-height: 2000px; }
/* Clase items */
.vp-clase-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease;
border-left: 3px solid transparent;
border-bottom: 1px solid #f9fafb;
}
.vp-clase-item:last-child { border-bottom: none; }
.vp-clase-item:hover { background: #faf8ff; }
.vp-clase-item.activa {
background: #f3eeff;
border-left-color: #C9A24A;
}
.vp-clase-icon {
flex-shrink: 0;
width: 18px;
text-align: center;
}
.vp-clase-icon .clase-visto { color: #16a34a; font-size: 14px; }
.vp-clase-icon .clase-progreso { color: #d97706; font-size: 13px; }
.vp-clase-icon .clase-pendiente { color: #d1d5db; font-size: 12px; }
.vp-clase-titulo {
flex: 1;
font-size: 13px;
color: #4b5563;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vp-clase-item.activa .vp-clase-titulo { color: #1f2937; font-weight: 600; }
.vp-clase-item:hover .vp-clase-titulo { color: #1f2937; }
.vp-clase-dur {
font-size: 11px;
color: #9ca3af;
white-space: nowrap;
flex-shrink: 0;
}
/* ══ MOBILE NAV STICKY ═════════════════════════════════════════════════════════ */
.vp-mobile-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: #2c1a4a;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
z-index: 200;
}
.vp-mnav-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px;
background: transparent;
border: none;
color: rgba(255,255,255,0.4);
font-size: 10px;
font-weight: 600;
cursor: pointer;
transition: color 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.vp-mnav-btn i { font-size: 16px; margin-bottom: 1px; }
.vp-mnav-btn:hover { color: rgba(255,255,255,0.85); }
.vp-mnav-complete {
flex: 1.4;
background: linear-gradient(135deg, rgba(201,162,74,0.5), rgba(168,132,47,0.5));
color: rgba(255,255,255,0.5);
border-left: 1px solid rgba(255,255,255,0.06);
border-right: 1px solid rgba(255,255,255,0.06);
height: 100%;
pointer-events: none;
transition: all 0.25s ease;
}
.vp-mnav-complete.active {
background: linear-gradient(135deg, #C9A24A, #A8842F);
color: #fff;
pointer-events: auto;
box-shadow: 0 -2px 16px rgba(201,162,74,0.4);
}
/* ══ DESKTOP (≥992px) — Layout fijo tipo curso ════════════════════════════════ */
@media (min-width: 992px) {
.vp-wrap {
height: calc(100vh - 90px); /* 90px = altura del navbar del template */
overflow: hidden;
padding-bottom: 0;
}
.vp-back-label { display: inline; }
.vp-topbar { padding: 0 28px; gap: 20px; }
.vp-topbar-bar-wrap { width: 100px; }
/* Layout fijo de dos columnas con scroll interno */
.vp-layout {
flex: 1;
flex-direction: row;
min-height: 0;
overflow: hidden;
}
.vp-main {
flex: 1;
min-width: 0;
overflow-y: auto;
}
.vp-class-bar { padding: 18px 28px 14px; }
.vp-class-title { font-size: 19px; }
.vp-tab-nav { padding: 0 28px; }
.vp-tab-pane { padding: 22px 28px; }
/* Sidebar siempre visible, scroll interno */
.vp-sidebar-toggle { display: none; }
.vp-sidebar {
display: flex;
width: 300px;
min-width: 300px;
flex-direction: column;
overflow: hidden;
border-top: none;
border-left: 1px solid #f0ecf8;
}
.vp-mobile-nav { display: none; }
/* En desktop, los botones prev/next SÍ se muestran en la class-bar */
.vp-btn-prev, .vp-btn-next { display: inline-flex; }
.vp-btn-complete { display: none; } /* se muestra con .vp-visible */
.vp-btn-complete.vp-visible { display: inline-flex; }
}
@media (min-width: 1280px) {
.vp-sidebar { width: 320px; min-width: 320px; }
.vp-topbar { padding: 0 36px; }
}
/* ══ TABLET (768px – 991px) ═══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {
.vp-class-bar { padding: 16px 24px 12px; }
.vp-class-title { font-size: 17px; }
.vp-tab-nav { padding: 0 24px; }
.vp-tab-pane { padding: 18px 24px; }
/* En tablet: prev/next ocultos, mobile nav los maneja */
.vp-btn-prev, .vp-btn-next { display: none; }
}
/* ══ MOBILE (< 768px) ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.vp-topbar { padding: 0 12px; gap: 8px; height: 46px; }
.vp-topbar-bar-wrap { display: none; }
.vp-topbar-pct { display: none; }
.vp-lesson-counter { display: none; }
.vp-course-name { font-size: 12px; }
/* En mobile: class-bar solo muestra título + meta, sin botones nav */
.vp-btn-prev, .vp-btn-next { display: none; }
.vp-class-bar-actions { gap: 0; }
/* El btn-complete se muestra en la class-bar también en mobile */
.vp-btn-complete { font-size: 12px; padding: 7px 14px; }
.vp-class-bar { padding: 12px 16px 10px; gap: 10px; flex-wrap: wrap; }
.vp-class-title { font-size: 15px; }
.vp-tab-nav { padding: 0 14px; }
.vp-tab-btn { padding: 10px 12px; font-size: 12px; }
.vp-tab-pane { padding: 14px 16px; }
}
/* ═══════════════════════════════════════════════════════════════════
[17] DOC INDEX — Catálogo de documentos
═══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
DOC CATALOG — /documentos
Tokens: mm-system.css + redesign.css
══════════════════════════════════════════════════════ */
/* ─── Layout base ─── */
.doc-catalog-wrap {
display: grid;
grid-template-columns: 268px 1fr;
gap: 28px;
align-items: start;
/* 2026-04-22 — padding vertical igualado con .crs-catalog-wrap (antes lo compensaba margin_60_35 del container). */
padding: 28px 0 60px;
}
/* ════════════════════════════════════════════════════
SIDEBAR — Desktop
════════════════════════════════════════════════════ */
.doc-filters-sidebar {
position: sticky;
top: 88px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.doc-filters-head {
padding: 16px 18px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, rgba(201,162,74,0.04), rgba(168,132,47,0.02));
}
.doc-filters-head h5 {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--text-dark);
margin: 0;
display: flex;
align-items: center;
gap: 7px;
}
.doc-filters-head h5 i { color: var(--primary-purple); font-size: 12px; }
.doc-filters-clear-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-decoration: none !important;
padding: 4px 10px;
border-radius: 20px;
transition: all 0.18s;
}
.doc-filters-clear-btn:hover {
background: rgba(220,38,38,0.07);
color: #dc2626;
}
/* Filter sections */
.doc-filter-sec {
padding: 14px 18px;
border-bottom: 1px solid rgba(0,0,0,0.045);
}
.doc-filter-sec:last-child { border-bottom: none; }
.doc-filter-lbl {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--text-muted);
margin: 0 0 10px;
}
/* ─── Search input ─── */
.doc-search-wrap { position: relative; }
.doc-search-wrap i {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 12px;
pointer-events: none;
}
.doc-search-inp {
width: 100%;
padding: 9px 12px 9px 32px;
border: 1.5px solid var(--border-light);
border-radius: 10px;
font-size: 13px;
font-family: inherit;
color: var(--text-dark);
background: var(--bg-subtle, #f8f8f8);
outline: none;
transition: all 0.2s;
}
.doc-search-inp:focus {
border-color: var(--primary-purple);
background: #fff;
box-shadow: 0 0 0 3px rgba(201,162,74,0.08);
}
/* ─── Radio pill rows (Ordenar) ─── */
.doc-radio-pills { display: flex; flex-direction: column; gap: 3px; }
.doc-radio-pill {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 11px;
border-radius: 9px;
cursor: pointer;
font-size: 13px;
color: var(--text-body);
font-weight: 500;
border: 1.5px solid transparent;
transition: all 0.15s;
user-select: none;
}
.doc-radio-pill input { display: none; }
.doc-radio-pill:hover { background: var(--bg-purple-soft, #FAF5E8); color: var(--primary-purple); }
.doc-radio-pill.active {
background: var(--bg-purple-soft, #FAF5E8);
border-color: rgba(201,162,74,0.18);
color: var(--primary-purple);
font-weight: 700;
}
.doc-pill-dot {
width: 15px; height: 15px;
border-radius: 50%;
border: 2px solid var(--border-light);
flex-shrink: 0;
position: relative;
transition: border-color 0.15s;
}
.doc-pill-dot::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--primary-purple);
opacity: 0;
transform: scale(0.4);
transition: all 0.15s;
}
.doc-radio-pill.active .doc-pill-dot { border-color: var(--primary-purple); }
.doc-radio-pill.active .doc-pill-dot::after { opacity: 1; transform: scale(1); }
/* ─── Toggle switch (Destacado) ─── */
.doc-toggle-wrap {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
border-radius: 10px;
border: 1.5px solid var(--border-light);
cursor: pointer;
font-size: 13px;
color: var(--text-body);
font-weight: 500;
transition: all 0.2s;
user-select: none;
}
.doc-toggle-wrap input { display: none; }
.doc-toggle-wrap:hover { border-color: rgba(201,162,74,0.25); background: var(--bg-purple-soft,#FAF5E8); }
.doc-toggle-wrap.active {
border-color: rgba(201,162,74,0.25);
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple);
font-weight: 700;
}
.doc-toggle-wrap .doc-star { margin-left: auto; font-size: 11px; color: #f59e0b; }
.doc-switch {
width: 34px; height: 18px;
border-radius: 9px;
background: var(--border-light);
position: relative;
flex-shrink: 0;
transition: background 0.2s;
}
.doc-switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.18);
transition: transform 0.2s;
}
.doc-toggle-wrap.active .doc-switch { background: var(--primary-purple); }
.doc-toggle-wrap.active .doc-switch::after { transform: translateX(16px); }
/* ─── Select tipo ─── */
.doc-tipo-sel {
width: 100%;
padding: 9px 32px 9px 12px;
border: 1.5px solid var(--border-light);
border-radius: 10px;
font-size: 13px;
font-family: inherit;
color: var(--text-dark);
background: var(--bg-subtle,#f8f8f8);
-webkit-appearance: none; appearance: none;
outline: none;
cursor: pointer;
transition: all 0.2s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23662d91' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.doc-tipo-sel:focus { border-color: var(--primary-purple); background-color: #fff; box-shadow: 0 0 0 3px rgba(201,162,74,0.08); }
.doc-tipo-sel.has-val { border-color: rgba(201,162,74,0.3); background-color: var(--bg-purple-soft,#FAF5E8); color: var(--primary-purple); font-weight: 600; }
/* ─── Format chips ─── */
.doc-format-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.doc-format-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 9px;
border-radius: 8px;
border: 1.5px solid var(--border-light);
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
color: var(--text-muted);
letter-spacing: 0.2px;
user-select: none;
}
.doc-format-chip input { display: none; }
.doc-format-chip i { font-size: 11px; }
.doc-format-chip:hover { border-color: rgba(201,162,74,0.25); color: var(--primary-purple); background: var(--bg-purple-soft,#FAF5E8); }
.doc-format-chip.active { border-color: var(--primary-purple); color: var(--primary-purple); background: var(--bg-purple-soft,#FAF5E8); box-shadow: 0 2px 8px rgba(201,162,74,0.12); }
/* ─── Precio range ─── */
.doc-precio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.doc-precio-inp {
padding: 8px 10px;
border: 1.5px solid var(--border-light);
border-radius: 10px;
font-size: 12px;
font-family: inherit;
color: var(--text-dark);
background: var(--bg-subtle,#f8f8f8);
outline: none; width: 100%;
transition: all 0.2s;
}
.doc-precio-inp:focus { border-color: var(--primary-purple); background: #fff; box-shadow: 0 0 0 3px rgba(201,162,74,0.08); }
/* ─── Apply button ─── */
.doc-filter-apply-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
width: 100%;
padding: 11px;
background: linear-gradient(135deg, var(--primary-purple), #A8842F);
color: #fff;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 0.2px;
}
.doc-filter-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,162,74,0.32); }
/* ════════════════════════════════════════════════════
RESULTS BAR
════════════════════════════════════════════════════ */
.doc-results-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding: 13px 18px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 12px;
margin-bottom: 18px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.doc-results-count-wrap {
display: flex;
align-items: baseline;
gap: 6px;
}
.doc-results-num {
font-size: 26px;
font-weight: 800;
color: var(--text-dark);
letter-spacing: -0.04em;
line-height: 1;
}
.doc-results-txt {
font-size: 13px;
color: var(--text-muted);
font-weight: 500;
}
.doc-active-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
}
.doc-active-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
background: var(--bg-purple-soft,#FAF5E8);
border: 1px solid rgba(201,162,74,0.18);
border-radius: 20px;
font-size: 11px;
font-weight: 700;
color: var(--primary-purple);
white-space: nowrap;
}
.doc-active-chip i { font-size: 9px; opacity: 0.65; }
/* ════════════════════════════════════════════════════
MOBILE FILTER BAR (sticky, visible < 992px)
════════════════════════════════════════════════════ */
.doc-mobile-bar {
display: none;
position: sticky;
top: 0;
z-index: var(--z-sticky, 200);
background: #fff;
border-bottom: 1px solid var(--border-light);
padding: 10px 0;
margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.doc-mobile-open-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
background: var(--bg-subtle,#f8f8f8);
border: 1.5px solid var(--border-light);
border-radius: 10px;
font-size: 14px;
font-weight: 700;
color: var(--text-dark);
cursor: pointer;
transition: all 0.18s;
font-family: inherit;
}
.doc-mobile-open-btn.has-filters {
border-color: rgba(201,162,74,0.35);
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple);
}
.doc-active-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 19px; height: 19px;
background: var(--primary-purple);
color: #fff;
border-radius: 50%;
font-size: 10px;
font-weight: 800;
}
/* 2026-04-22 — Layout search + botón (igualado con .crs-mobile-bar para matching de dinámica) */
.doc-mobile-bar-inner { display: flex; gap: 8px; align-items: center; }
.doc-mobile-search-wrap { position: relative; flex: 1; }
.doc-mobile-search-wrap i {
position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
color: var(--text-muted); font-size: 13px; pointer-events: none;
}
.doc-mobile-search-inp {
width: 100%; padding: 9px 12px 9px 33px;
border: 1.5px solid var(--border-light); border-radius: 10px;
font-size: 13px; font-family: inherit; color: var(--text-dark);
background: var(--bg-subtle, #f8f8f8); outline: none; transition: all 0.2s;
}
.doc-mobile-search-inp:focus {
border-color: var(--primary-purple); background: #fff;
box-shadow: 0 0 0 3px rgba(201,162,74,0.08);
}
/* Sobrescribe width:100% del botón cuando está dentro del layout inline con search */
.doc-mobile-bar-inner .doc-mobile-open-btn {
width: auto; flex-shrink: 0; padding: 9px 14px;
font-size: 13px; white-space: nowrap;
}
/* ════════════════════════════════════════════════════
DRAWER — Mobile bottom sheet
════════════════════════════════════════════════════ */
.doc-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.48);
z-index: 390;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s;
}
.doc-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.doc-filter-drawer {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 400;
background: #fff;
border-radius: 20px 20px 0 0;
max-height: 90vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
padding-bottom: env(safe-area-inset-bottom, 12px);
box-shadow: 0 -8px 40px rgba(0,0,0,0.14);
overscroll-behavior: contain;
}
.doc-filter-drawer.open { transform: translateY(0); }
.drawer-handle-area { display: flex; justify-content: center; padding: 12px 0 4px; }
.drawer-handle-bar { width: 36px; height: 4px; border-radius: 2px; background: #e5e7eb; }
.drawer-header {
padding: 4px 20px 14px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
}
.drawer-header h5 {
font-size: 16px;
font-weight: 800;
color: var(--text-dark);
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.drawer-header h5 i { color: var(--primary-purple); font-size: 15px; }
.drawer-close-btn {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--bg-subtle,#f8f8f8);
border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--text-muted);
font-size: 13px;
transition: all 0.15s;
}
.drawer-close-btn:hover { background: rgba(220,38,38,0.09); color: #dc2626; }
.drawer-body { padding: 14px 20px 0; }
.drawer-body .doc-filter-sec { padding: 0 0 14px; border-bottom: 1px solid rgba(0,0,0,0.045); margin-bottom: 14px; }
.drawer-body .doc-filter-sec:last-child { border-bottom: none; margin-bottom: 0; }
.drawer-footer {
padding: 14px 20px;
border-top: 1px solid var(--border-light);
display: flex;
gap: 10px;
position: sticky;
bottom: 0;
background: #fff;
z-index: 2;
}
.drawer-footer .doc-filter-apply-btn { flex: 1; margin: 0; }
.drawer-clear-btn {
padding: 11px 14px;
background: transparent;
border: 1.5px solid var(--border-light);
border-radius: 10px;
font-size: 13px;
font-weight: 700;
color: var(--text-muted);
cursor: pointer;
transition: all 0.18s;
font-family: inherit;
white-space: nowrap;
}
.drawer-clear-btn:hover { border-color: #dc2626; color: #dc2626; }
/* ════════════════════════════════════════════════════
DOC CARD — Componente
════════════════════════════════════════════════════ */
.doc-card {
background: #fff;
border-radius: 14px;
border: 1px solid var(--border-light);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all 0.24s ease;
}
.doc-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.10);
transform: translateY(-3px);
border-color: rgba(201,162,74,0.16);
}
/* Área visual — altura fija, contiene preview o ícono */
.doc-icon-area {
position: relative;
height: 150px;
background: var(--bg-subtle,#f8f8f8);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.doc-card-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.doc-card:hover .doc-card-thumbnail { transform: scale(1.04); }
.doc-icon {
width: 60px; height: 60px;
border-radius: 14px;
background: #fff;
box-shadow: 0 4px 16px rgba(0,0,0,0.09);
display: flex; align-items: center; justify-content: center;
transition: transform 0.24s ease;
}
.doc-icon i { font-size: 26px; }
.doc-card:hover .doc-icon { transform: scale(1.06); }
/* Price badge */
.doc-price {
position: absolute;
bottom: 10px; right: 10px;
background: rgba(10,10,10,0.76);
color: #fff;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
letter-spacing: -0.01em;
line-height: 1.6;
}
.doc-price.doc-price-low { background: rgba(220,38,38,0.85); }
.doc-price.doc-price-free { background: rgba(22,163,74,0.88); letter-spacing: .04em; }
/* Adquirido badge */
.doc-badge-owned {
position: absolute;
top: 10px; left: 10px;
background: linear-gradient(135deg, #059669, #10b981);
color: #fff;
padding: 4px 10px;
border-radius: 20px;
font-size: 10px;
font-weight: 800;
display: inline-flex;
align-items: center;
gap: 4px;
box-shadow: 0 3px 10px rgba(5,150,105,0.32);
letter-spacing: 0.2px;
z-index: 2;
}
.doc-badge-owned i { font-size: 9px; }
/* Body */
.doc-body {
padding: 13px 15px 10px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
min-height: 0;
}
.doc-body h4 {
font-size: 13.5px;
font-weight: 700;
color: var(--text-dark);
margin: 0;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.doc-meta {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.doc-author-avatar {
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-purple), #A8842F);
color: #fff;
font-size: 9px;
font-weight: 800;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.doc-meta > span {
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
/* Fecha anclada al fondo del body — cards de distinta altura quedan alineadas */
.doc-date {
font-size: 11px;
color: var(--text-muted);
margin: auto 0 0;
padding-top: 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
border-top: 1px solid rgba(0,0,0,.04);
}
.doc-date-tipo {
display: inline-flex;
align-items: center;
gap: 3px;
background: var(--bg-subtle,#f8f8f8);
padding: 2px 7px;
border-radius: 6px;
font-weight: 700;
font-size: 10px;
letter-spacing: 0.3px;
color: var(--text-body);
flex-shrink: 0;
}
/* Footer */
.doc-footer {
padding: 9px 15px 13px;
display: flex;
gap: 7px;
border-top: 1px solid rgba(0,0,0,0.05);
flex-shrink: 0;
}
.doc-footer-guest { }
/* ── Botones de acción dentro del doc-card (Bootstrap btn-link / btn-primary) ── */
.doc-footer .btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
flex: 1 !important;
padding: 8px 13px !important;
border-radius: 8px !important;
font-size: .75rem !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all .16s !important;
white-space: nowrap !important;
}
.doc-footer .btn-link,
.doc-footer .btn-outline-primary {
background: var(--bg-purple-soft, #faf5e8) !important;
color: var(--primary-purple) !important;
border: 1.5px solid transparent !important;
box-shadow: none !important;
}
.doc-footer .btn-link:hover,
.doc-footer .btn-outline-primary:hover {
background: var(--primary-purple) !important;
color: #fff !important;
border-color: transparent !important;
}
.doc-footer .btn-primary {
background: linear-gradient(135deg, var(--brand, #C9A24A), var(--brand-dark, #A8842F)) !important;
color: #fff !important;
border: none !important;
}
.doc-footer .btn-primary:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px rgba(201,162,74,.32) !important;
color: #fff !important;
}
.btn-doc {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 13px;
border-radius: 8px;
font-size: 12px;
font-weight: 700;
text-decoration: none !important;
transition: all 0.16s;
white-space: nowrap;
flex: 1;
}
.btn-doc-view {
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple) !important;
}
.btn-doc-view:hover {
background: var(--primary-purple);
color: #fff !important;
}
.btn-doc-buy {
background: linear-gradient(135deg, var(--primary-purple), #A8842F);
color: #fff !important;
}
.btn-doc-buy:hover {
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(201,162,74,0.32);
color: #fff !important;
}
.btn-doc-register {
background: var(--bg-subtle,#f8f8f8);
color: var(--text-body) !important;
border: 1.5px solid var(--border-light);
}
.btn-doc-register:hover {
border-color: var(--primary-purple);
color: var(--primary-purple) !important;
background: var(--bg-purple-soft,#FAF5E8);
}
/* ─── Empty state ─── */
.doc-empty {
text-align: center;
padding: 56px 20px;
color: var(--text-muted);
}
.doc-empty-icon {
width: 72px; height: 72px;
border-radius: 20px;
background: var(--bg-subtle,#f8f8f8);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
color: #d1d5db;
margin: 0 auto 18px;
}
.doc-empty h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin: 0 0 7px; }
.doc-empty p { font-size: 13px; margin: 0 0 20px; }
/* ─── Grid row height fix ─── */
.doc-grid .row > [class*="col-"] { display: flex; }
.doc-grid .row > [class*="col-"] .doc-card { width: 100%; }
/* ════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 991px) {
.doc-catalog-wrap {
grid-template-columns: 1fr;
}
.doc-filters-sidebar { display: none !important; }
.doc-mobile-bar { display: block; }
}
@media (min-width: 992px) {
.doc-filter-drawer,
.doc-drawer-overlay,
.doc-mobile-bar { display: none !important; }
}
@media (max-width: 575px) {
.doc-results-bar { padding: 11px 14px; }
.doc-results-num { font-size: 20px; }
.doc-active-chips { display: none; } /* Solo mostrar count en mobile, no chips */
}
/* ═══════════════════════════════════════════════════════════════════
[18] PUBLICACIONES INDEX — Blog
═══════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════
BLOG CATALOG — /publicaciones
Mismo patrón de filtros que /documentos
══════════════════════════════════════════════════════ */
/* ─── Layout ─── */
.blog-catalog-wrap {
display: grid;
grid-template-columns: 268px 1fr;
gap: 28px;
align-items: start;
}
/* ════════════════════════════════════════════════════
SIDEBAR — Desktop
════════════════════════════════════════════════════ */
.blog-filters-sidebar {
position: sticky;
top: 88px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.blog-filters-head {
padding: 16px 18px;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(135deg, rgba(201,162,74,0.04), rgba(168,132,47,0.02));
}
.blog-filters-head h5 {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--text-dark);
margin: 0;
display: flex;
align-items: center;
gap: 7px;
}
.blog-filters-head h5 i { color: var(--primary-purple); font-size: 12px; }
.blog-filters-clear-btn {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
color: var(--text-muted);
text-decoration: none !important;
padding: 4px 10px;
border-radius: 20px;
transition: all 0.18s;
}
.blog-filters-clear-btn:hover { background: rgba(220,38,38,0.07); color: #dc2626; }
/* ─── Secciones ─── */
.blog-filter-sec {
padding: 14px 18px;
border-bottom: 1px solid rgba(0,0,0,0.045);
}
.blog-filter-sec:last-child { border-bottom: none; }
.blog-filter-lbl {
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.9px;
color: var(--text-muted);
margin: 0 0 10px;
}
/* ─── Rubro toggle — pieza destacada al tope ─── */
.blog-rubro-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.blog-rubro-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px 8px;
border-radius: 10px;
border: 1.5px solid var(--border-light);
cursor: pointer;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
transition: all 0.18s;
text-decoration: none !important;
text-align: center;
line-height: 1.2;
}
.blog-rubro-btn i { font-size: 16px; }
.blog-rubro-btn:hover { border-color: rgba(201,162,74,0.3); color: var(--primary-purple); background: var(--bg-purple-soft,#FAF5E8); }
.blog-rubro-btn.active-legal {
border-color: var(--primary-purple);
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple);
box-shadow: 0 2px 10px rgba(201,162,74,0.14);
}
.blog-rubro-btn.active-medico {
border-color: var(--rubro-medical, #0891b2);
background: rgba(8,145,178,0.06);
color: var(--rubro-medical, #0891b2);
box-shadow: 0 2px 10px rgba(8,145,178,0.14);
}
.blog-rubro-btn-note { font-size: 10px; font-weight: 500; opacity: 0.75; }
/* ─── Search ─── */
.blog-search-wrap { position: relative; }
.blog-search-wrap i {
position: absolute; left: 11px; top: 50%;
transform: translateY(-50%);
color: var(--text-muted); font-size: 12px; pointer-events: none;
}
.blog-search-inp {
width: 100%;
padding: 9px 12px 9px 32px;
border: 1.5px solid var(--border-light);
border-radius: 10px;
font-size: 13px; font-family: inherit;
color: var(--text-dark);
background: var(--bg-subtle,#f8f8f8);
outline: none; transition: all 0.2s;
}
.blog-search-inp:focus {
border-color: var(--primary-purple); background: #fff;
box-shadow: 0 0 0 3px rgba(201,162,74,0.08);
}
/* ─── Categorías ─── */
.blog-cat-list { display: flex; flex-direction: column; gap: 2px; }
/* Bloque colapsable */
.blog-cat-more {
max-height: 0;
overflow: hidden;
transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.blog-cat-more.expanded { max-height: 2000px; }
/* Botón "Ver N más / Ver menos" */
.blog-cat-toggle {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 7px 10px;
margin-top: 2px;
font-size: 12px;
font-weight: 700;
color: var(--primary-purple);
background: none;
border: none;
border-radius: 9px;
cursor: pointer;
font-family: inherit;
transition: background 0.15s;
text-align: left;
}
.blog-cat-toggle:hover { background: var(--bg-purple-soft,#FAF5E8); }
.blog-cat-toggle-icon {
margin-left: auto;
font-size: 10px;
transition: transform 0.28s ease;
flex-shrink: 0;
}
.blog-cat-toggle.expanded .blog-cat-toggle-icon { transform: rotate(180deg); }
.blog-cat-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 10px;
border-radius: 9px;
text-decoration: none !important;
font-size: 13px;
font-weight: 500;
color: var(--text-body);
border: 1.5px solid transparent;
transition: all 0.15s;
gap: 8px;
}
.blog-cat-item:hover {
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple);
}
.blog-cat-item.active {
background: var(--bg-purple-soft,#FAF5E8);
border-color: rgba(201,162,74,0.18);
color: var(--primary-purple);
font-weight: 700;
}
.blog-cat-item-left { display: flex; align-items: center; gap: 7px; }
.blog-cat-item-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--border-light);
flex-shrink: 0;
transition: background 0.15s;
}
.blog-cat-item.active .blog-cat-item-dot { background: var(--primary-purple); }
.blog-cat-count {
font-size: 10px; font-weight: 700;
padding: 2px 7px;
border-radius: 20px;
background: var(--bg-subtle,#f8f8f8);
color: var(--text-muted);
flex-shrink: 0;
transition: all 0.15s;
}
.blog-cat-item.active .blog-cat-count {
background: rgba(201,162,74,0.12);
color: var(--primary-purple);
}
.blog-cat-item-all {
font-style: italic;
color: var(--text-muted);
font-size: 12px;
}
/* ─── Sort radio pills ─── */
.blog-radio-pills { display: flex; flex-direction: column; gap: 3px; }
.blog-radio-pill {
display: flex; align-items: center; gap: 9px;
padding: 8px 11px; border-radius: 9px;
cursor: pointer; font-size: 13px;
color: var(--text-body); font-weight: 500;
border: 1.5px solid transparent;
transition: all 0.15s; user-select: none;
}
.blog-radio-pill input { display: none; }
.blog-radio-pill:hover { background: var(--bg-purple-soft,#FAF5E8); color: var(--primary-purple); }
.blog-radio-pill.active {
background: var(--bg-purple-soft,#FAF5E8);
border-color: rgba(201,162,74,0.18);
color: var(--primary-purple); font-weight: 700;
}
.blog-pill-dot {
width: 15px; height: 15px;
border-radius: 50%;
border: 2px solid var(--border-light);
flex-shrink: 0; position: relative;
transition: border-color 0.15s;
}
.blog-pill-dot::after {
content: ''; position: absolute; inset: 3px;
border-radius: 50%; background: var(--primary-purple);
opacity: 0; transform: scale(0.4); transition: all 0.15s;
}
.blog-radio-pill.active .blog-pill-dot { border-color: var(--primary-purple); }
.blog-radio-pill.active .blog-pill-dot::after { opacity: 1; transform: scale(1); }
/* ─── Toggle destacado ─── */
.blog-toggle-wrap {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; border-radius: 10px;
border: 1.5px solid var(--border-light);
cursor: pointer; font-size: 13px;
color: var(--text-body); font-weight: 500;
transition: all 0.2s; user-select: none;
}
.blog-toggle-wrap input { display: none; }
.blog-toggle-wrap:hover { border-color: rgba(201,162,74,0.25); background: var(--bg-purple-soft,#FAF5E8); }
.blog-toggle-wrap.active {
border-color: rgba(201,162,74,0.25);
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple); font-weight: 700;
}
.blog-toggle-wrap .blog-star { margin-left: auto; font-size: 11px; color: #f59e0b; }
.blog-switch {
width: 34px; height: 18px; border-radius: 9px;
background: var(--border-light); position: relative;
flex-shrink: 0; transition: background 0.2s;
}
.blog-switch::after {
content: ''; position: absolute;
top: 2px; left: 2px; width: 14px; height: 14px;
border-radius: 50%; background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.18);
transition: transform 0.2s;
}
.blog-toggle-wrap.active .blog-switch { background: var(--primary-purple); }
.blog-toggle-wrap.active .blog-switch::after { transform: translateX(16px); }
/* ─── Apply ─── */
.blog-filter-apply-btn {
display: flex; align-items: center; justify-content: center; gap: 7px;
width: 100%; padding: 11px;
background: linear-gradient(135deg, var(--primary-purple), #A8842F);
color: #fff; border: none; border-radius: 10px;
font-size: 13px; font-weight: 700; font-family: inherit;
cursor: pointer; transition: all 0.2s; letter-spacing: 0.2px;
}
.blog-filter-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,162,74,0.32); }
/* ════════════════════════════════════════════════════
RESULTS BAR
════════════════════════════════════════════════════ */
.blog-results-bar {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 10px;
padding: 13px 18px;
background: #fff; border: 1px solid var(--border-light);
border-radius: 12px; margin-bottom: 20px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.blog-results-count-wrap { display: flex; align-items: baseline; gap: 6px; }
.blog-results-num {
font-size: 26px; font-weight: 800;
color: var(--text-dark); letter-spacing: -0.04em; line-height: 1;
}
.blog-results-txt { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.blog-active-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.blog-active-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
background: var(--bg-purple-soft,#FAF5E8);
border: 1px solid rgba(201,162,74,0.18);
border-radius: 20px; font-size: 11px; font-weight: 700;
color: var(--primary-purple); white-space: nowrap;
}
.blog-active-chip.chip-medico {
background: rgba(8,145,178,0.06);
border-color: rgba(8,145,178,0.2);
color: var(--rubro-medical, #0891b2);
}
.blog-active-chip i { font-size: 9px; opacity: 0.65; }
/* ════════════════════════════════════════════════════
MOBILE FILTER BAR
════════════════════════════════════════════════════ */
.blog-mobile-bar {
display: none;
position: sticky; top: 0;
z-index: var(--z-sticky, 200);
background: #fff; border-bottom: 1px solid var(--border-light);
padding: 10px 0; margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.blog-mobile-open-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 10px 16px;
background: var(--bg-subtle,#f8f8f8);
border: 1.5px solid var(--border-light);
border-radius: 10px; font-size: 14px; font-weight: 700;
color: var(--text-dark); cursor: pointer; transition: all 0.18s; font-family: inherit;
}
.blog-mobile-open-btn.has-filters {
border-color: rgba(201,162,74,0.35);
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple);
}
.blog-active-count {
display: inline-flex; align-items: center; justify-content: center;
width: 19px; height: 19px;
background: var(--primary-purple); color: #fff;
border-radius: 50%; font-size: 10px; font-weight: 800;
}
/* ════════════════════════════════════════════════════
DRAWER — Mobile bottom sheet
════════════════════════════════════════════════════ */
.blog-drawer-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.48);
z-index: 390;
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; pointer-events: none; transition: opacity 0.28s;
}
.blog-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.blog-filter-drawer {
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 400; background: #fff;
border-radius: 20px 20px 0 0;
max-height: 90vh; overflow-y: auto;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
padding-bottom: env(safe-area-inset-bottom, 12px);
box-shadow: 0 -8px 40px rgba(0,0,0,0.14);
overscroll-behavior: contain;
}
.blog-filter-drawer.open { transform: translateY(0); }
.blog-drawer-handle { display: flex; justify-content: center; padding: 12px 0 4px; }
.blog-drawer-handle-bar { width: 36px; height: 4px; border-radius: 2px; background: #e5e7eb; }
.blog-drawer-header {
padding: 4px 20px 14px;
border-bottom: 1px solid var(--border-light);
display: flex; align-items: center; justify-content: space-between;
}
.blog-drawer-header h5 {
font-size: 16px; font-weight: 800; color: var(--text-dark);
margin: 0; display: flex; align-items: center; gap: 8px;
}
.blog-drawer-header h5 i { color: var(--primary-purple); font-size: 15px; }
.blog-drawer-close {
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg-subtle,#f8f8f8); border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--text-muted); font-size: 13px; transition: all 0.15s;
}
.blog-drawer-close:hover { background: rgba(220,38,38,0.09); color: #dc2626; }
.blog-drawer-body { padding: 14px 20px 0; }
.blog-drawer-body .blog-filter-sec { padding: 0 0 14px; border-bottom: 1px solid rgba(0,0,0,0.045); margin-bottom: 14px; }
.blog-drawer-body .blog-filter-sec:last-child { border-bottom: none; margin-bottom: 0; }
.blog-drawer-footer {
padding: 14px 20px;
border-top: 1px solid var(--border-light);
display: flex; gap: 10px;
position: sticky; bottom: 0; background: #fff; z-index: 2;
}
.blog-drawer-footer .blog-filter-apply-btn { flex: 1; margin: 0; }
.blog-drawer-clear-btn {
padding: 11px 14px;
background: transparent; border: 1.5px solid var(--border-light);
border-radius: 10px; font-size: 13px; font-weight: 700;
color: var(--text-muted); cursor: pointer; transition: all 0.18s;
font-family: inherit; white-space: nowrap;
}
.blog-drawer-clear-btn:hover { border-color: #dc2626; color: #dc2626; }
/* ════════════════════════════════════════════════════
BLOG CARD
════════════════════════════════════════════════════ */
.blog-card {
background: #fff;
border-radius: 14px;
border: 1px solid var(--border-light);
overflow: hidden;
display: flex; flex-direction: column;
height: 100%;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all 0.24s ease;
text-decoration: none !important;
color: inherit !important;
}
.blog-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,0.10);
transform: translateY(-3px);
border-color: rgba(201,162,74,0.16);
text-decoration: none !important;
}
.blog-card-img-wrap {
position: relative;
aspect-ratio: 16 / 9;
height: auto;
overflow: hidden;
flex-shrink: 0;
background: var(--bg-subtle,#f8f8f8);
}
.blog-card-img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.32s ease;
}
.blog-card:hover .blog-card-img { transform: scale(1.04); }
.blog-card-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(201,162,74,0.06), rgba(168,132,47,0.04));
font-size: 36px; color: rgba(201,162,74,0.2);
}
/* Category chip — overlay sobre la imagen */
.blog-card-cat {
position: absolute;
bottom: 10px; left: 10px;
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
background: rgba(10,10,10,0.72);
color: #fff;
border-radius: 20px;
font-size: 10px; font-weight: 700;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
letter-spacing: 0.3px;
max-width: calc(100% - 60px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Destacado badge */
.blog-card-featured {
position: absolute;
top: 10px; right: 10px;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(245,158,11,0.92);
display: flex; align-items: center; justify-content: center;
font-size: 12px; color: #fff;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(245,158,11,0.4);
}
.blog-card-body {
padding: 14px 16px 10px;
flex: 1; display: flex; flex-direction: column; gap: 8px;
min-height: 0;
}
.blog-card-title {
font-size: 14px; font-weight: 700;
color: var(--text-dark); margin: 0;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
transition: color 0.18s;
}
.blog-card:hover .blog-card-title { color: var(--primary-purple); }
.blog-card-preview {
font-size: 12px; color: var(--text-muted);
line-height: 1.55; margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
flex: 1;
}
.blog-card-meta {
display: flex; align-items: center;
justify-content: space-between;
gap: 8px; margin-top: auto; padding-top: 4px;
}
.blog-card-author {
display: flex; align-items: center; gap: 6px;
min-width: 0;
}
.blog-card-avatar {
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, var(--primary-purple), #A8842F);
color: #fff; font-size: 9px; font-weight: 800;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.blog-card-author-name {
font-size: 11px; font-weight: 600; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.blog-card-reading {
display: flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 600; color: var(--text-muted);
flex-shrink: 0; white-space: nowrap;
}
.blog-card-reading i { font-size: 9px; }
.blog-card-footer {
padding: 9px 16px 13px;
border-top: 1px solid rgba(0,0,0,0.05);
display: flex; align-items: center;
justify-content: space-between; gap: 8px; flex-shrink: 0;
}
.blog-card-date {
font-size: 11px; color: var(--text-muted);
display: flex; align-items: center; gap: 4px;
}
.blog-card-date i { font-size: 10px; }
.blog-card-cta {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 12px;
background: var(--bg-purple-soft,#FAF5E8);
color: var(--primary-purple) !important;
border-radius: 8px; font-size: 11px; font-weight: 700;
text-decoration: none !important; transition: all 0.16s;
flex-shrink: 0;
}
.blog-card:hover .blog-card-cta {
background: var(--primary-purple);
color: #fff !important;
}
/* ─── Empty state ─── */
.blog-empty {
text-align: center; padding: 56px 20px; color: var(--text-muted);
}
.blog-empty-icon {
width: 72px; height: 72px; border-radius: 20px;
background: var(--bg-subtle,#f8f8f8);
display: flex; align-items: center; justify-content: center;
font-size: 28px; color: #d1d5db;
margin: 0 auto 18px;
}
.blog-empty h3 { font-size: 17px; font-weight: 700; color: var(--text-dark); margin: 0 0 7px; }
.blog-empty p { font-size: 13px; margin: 0 0 20px; }
/* ─── Grid fix ─── */
.blog-grid .row > [class*="col-"] { display: flex; }
.blog-grid .row > [class*="col-"] .blog-card { width: 100%; }
/* ════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════ */
@media (max-width: 991px) {
.blog-catalog-wrap { grid-template-columns: 1fr; }
.blog-filters-sidebar { display: none !important; }
.blog-mobile-bar { display: block; }
}
@media (min-width: 992px) {
.blog-filter-drawer, .blog-drawer-overlay, .blog-mobile-bar { display: none !important; }
}
@media (max-width: 575px) {
.blog-results-bar { padding: 11px 14px; }
.blog-results-num { font-size: 20px; }
.blog-active-chips { display: none; }
.blog-card-img-wrap { aspect-ratio: 4 / 3; }
}
/* ═══════════════════════════════════════════════════════════════════
[19] PUBLICACIONES DETAIL — Artículo
═══════════════════════════════════════════════════════════════════ */
/* ─── Flash messages ── */
.pub-flash {
display: flex;
align-items: center;
gap: 9px;
padding: 12px 16px;
border-radius: 10px;
font-size: .875rem;
font-weight: 500;
margin-bottom: 20px;
}
.pub-flash--ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.pub-flash--err { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
/* ─── Layout 2 columnas ── */
.pub-layout { gap-y: 32px; }
.pub-main-col > * + * { margin-top: 28px; }
/* ─── Artículo card ── */
.pub-article-card {
background: var(--white, #fff);
border-radius: var(--radius-xl, 20px);
border: 1px solid var(--border-subtle, #f0edf5);
box-shadow: 0 1px 3px rgba(201,162,74,.07), 0 4px 14px rgba(0,0,0,.05);
overflow: hidden;
}
/* Meta bar superior */
.pub-article-meta-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 18px 28px 14px;
border-bottom: 1px solid var(--border-light, #e5e7eb);
}
.pub-cat-chip {
display: inline-flex;
align-items: center;
background: rgba(201,162,74,.1);
color: var(--brand, #C9A24A);
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .8px;
padding: 3px 12px;
border-radius: 20px;
text-decoration: none;
transition: background .2s;
}
.pub-cat-chip:hover { background: rgba(201,162,74,.2); color: var(--brand, #C9A24A); }
.pub-featured-chip {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .72rem;
font-weight: 700;
color: #b45309;
background: #fef9c3;
padding: 3px 10px;
border-radius: 20px;
}
.pub-article-meta-info {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-left: auto;
}
.pub-article-meta-info span {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .78rem;
color: var(--text-muted, #9ca3af);
}
.pub-article-meta-info span i { color: var(--brand, #C9A24A); font-size: .7rem; }
/* Imagen de portada */
.pub-cover-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--bg-subtle, #f9fafb);
}
.pub-cover-img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
/* Cuerpo del artículo — prose para HTML de Quill */
.post-content.pub-prose {
padding: 32px 28px 36px !important;
margin: 0 !important;
}
.pub-prose p {
font-size: 1.02rem;
line-height: 1.85;
color: var(--text-body, #4b5563);
margin-bottom: 1.25em;
}
.pub-prose p:last-child { margin-bottom: 0; }
.pub-prose h2 {
font-size: 1.4rem; font-weight: 700; line-height: 1.25;
color: var(--text-dark, #1f2937); margin: 1.6em 0 .55em; letter-spacing: -.015em;
}
.pub-prose h3 {
font-size: 1.15rem; font-weight: 700; line-height: 1.3;
color: var(--text-dark); margin: 1.4em 0 .5em;
}
.pub-prose ul, .pub-prose ol {
margin: 0 0 1.25em 1.4em;
color: var(--text-body); font-size: 1rem; line-height: 1.8;
}
.pub-prose li { margin-bottom: .35em; }
.pub-prose strong { font-weight: 700; color: var(--text-dark); }
.pub-prose em { font-style: italic; }
.pub-prose blockquote {
margin: 1.4em 0;
padding: 14px 18px;
border-left: 3px solid var(--brand, #C9A24A);
background: rgba(201,162,74,.05);
border-radius: 0 8px 8px 0;
color: var(--text-body);
font-size: .98rem; line-height: 1.75;
}
.pub-prose a { color: var(--brand, #C9A24A); text-decoration: underline; text-underline-offset: 2px; }
.pub-prose img { max-width: 100%; border-radius: 8px; margin: 1em 0; }
/* Footer del artículo */
.pub-article-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 16px 28px;
border-top: 1px solid var(--border-light, #e5e7eb);
background: var(--bg-subtle, #f9fafb);
}
.pub-article-footer__tags {
display: flex;
align-items: center;
gap: 8px;
font-size: .8rem;
color: var(--text-muted);
}
.pub-tag-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .78rem;
font-weight: 600;
color: var(--brand, #C9A24A);
background: rgba(201,162,74,.08);
padding: 4px 12px;
border-radius: 20px;
text-decoration: none;
transition: background .2s;
}
.pub-tag-link:hover { background: rgba(201,162,74,.16); color: var(--brand, #C9A24A); }
.pub-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .82rem;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
transition: color .2s;
}
.pub-back-btn:hover { color: var(--brand, #C9A24A); }
/* ─── Comentarios ── */
.pub-comments-section,
.pub-form-section {
background: var(--white, #fff);
border-radius: var(--radius-xl, 20px);
border: 1px solid var(--border-subtle, #f0edf5);
box-shadow: 0 1px 3px rgba(201,162,74,.07), 0 4px 14px rgba(0,0,0,.05);
padding: 28px;
}
.pub-section-title {
font-size: 1.05rem;
font-weight: 700;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-light, #e5e7eb);
}
.pub-section-title i { color: var(--brand, #C9A24A); }
.pub-section-title__count {
font-size: .8rem;
background: rgba(201,162,74,.1);
color: var(--brand, #C9A24A);
padding: 1px 9px;
border-radius: 20px;
font-weight: 600;
}
.pub-comments-list { display: flex; flex-direction: column; gap: 14px; }
.pub-comment {
display: flex;
align-items: flex-start;
gap: 12px;
}
.pub-comment__avatar {
width: 36px; height: 36px; border-radius: 50%;
background: linear-gradient(135deg, var(--brand, #C9A24A), var(--primary-warm, #A8842F));
color: #fff; font-size: .85rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pub-comment__body {
flex: 1; min-width: 0;
background: var(--bg-subtle, #f9fafb);
border: 1px solid var(--border-light, #e5e7eb);
border-radius: 10px;
padding: 12px 16px;
}
.pub-comment__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 7px;
flex-wrap: wrap;
}
.pub-comment__name { font-size: .85rem; font-weight: 700; color: var(--text-dark); }
.pub-comment__date { font-size: .73rem; color: var(--text-muted); }
.pub-comment__text { font-size: .88rem; line-height: 1.6; color: var(--text-body); margin: 0; }
.pub-comments-empty {
display: flex;
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: .88rem;
font-style: italic;
padding: 8px 0;
}
.pub-comments-empty i { color: var(--brand, #C9A24A); font-size: 1.1rem; }
/* ─── Formulario de comentario ── */
.pub-comment-form { display: flex; flex-direction: column; gap: 14px; }
.pub-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.pub-form-group { display: flex; flex-direction: column; gap: 5px; }
.pub-label { font-size: .78rem; font-weight: 600; color: var(--text-dark); }
.pub-label span { color: var(--brand, #C9A24A); margin-left: 2px; }
.pub-input {
border: 1.5px solid var(--border-light, #e5e7eb);
border-radius: 8px;
padding: 10px 13px;
font-size: .88rem;
color: var(--text-dark);
background: var(--white, #fff);
transition: border-color .2s, box-shadow .2s;
font-family: inherit;
width: 100%;
}
.pub-input:focus {
outline: none;
border-color: var(--brand, #C9A24A);
box-shadow: 0 0 0 3px rgba(201,162,74,.1);
}
.pub-input::placeholder { color: var(--text-muted, #9ca3af); }
.pub-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.pub-submit-btn {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start;
background: linear-gradient(135deg, var(--brand, #C9A24A), var(--primary-warm, #A8842F));
color: #fff;
border: none;
padding: 11px 24px;
border-radius: 9999px;
font-size: .88rem;
font-weight: 700;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 4px 12px rgba(201,162,74,.3);
}
.pub-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(201,162,74,.4); }
.pub-submit-btn:active { transform: translateY(0); }
/* ─── Sidebar ── */
.pub-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.pub-widget {
background: var(--white, #fff);
border-radius: var(--radius-lg, 16px);
border: 1px solid var(--border-subtle, #f0edf5);
box-shadow: 0 1px 3px rgba(201,162,74,.06), 0 4px 12px rgba(0,0,0,.04);
padding: 20px 22px;
}
.pub-widget__title {
font-size: .9rem;
font-weight: 700;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 7px;
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-light, #e5e7eb);
text-transform: uppercase;
letter-spacing: .5px;
}
.pub-widget__title i { color: var(--brand, #C9A24A); font-size: .85rem; }
/* Widget: info del artículo */
.pub-widget--info { border-left: 3px solid var(--brand, #C9A24A); }
.pub-widget__author {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-light, #e5e7eb);
}
.pub-author-avatar {
width: 42px; height: 42px; border-radius: 50%;
background: linear-gradient(135deg, var(--brand, #C9A24A), var(--primary-warm, #A8842F));
color: #fff; font-size: .95rem; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pub-author-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted); margin: 0; }
.pub-author-name { font-size: .9rem; font-weight: 700; color: var(--text-dark); margin: 2px 0 0; }
.pub-widget__stats { display: flex; flex-direction: column; gap: 8px; }
.pub-stat {
display: flex;
align-items: center;
gap: 8px;
font-size: .82rem;
color: var(--text-body);
}
.pub-stat i { color: var(--brand, #C9A24A); font-size: .75rem; width: 14px; text-align: center; }
/* Widget: categorías */
.pub-cat-list { display: flex; flex-direction: column; gap: 2px; }
.pub-cat-row {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 8px;
text-decoration: none;
transition: background .15s;
color: var(--text-body);
}
.pub-cat-row:hover, .pub-cat-row.active {
background: rgba(201,162,74,.08);
color: var(--brand, #C9A24A);
}
.pub-cat-row.active .pub-cat-row__dot { background: var(--brand, #C9A24A); }
.pub-cat-row__dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--border-light, #e5e7eb);
flex-shrink: 0; transition: background .15s;
}
.pub-cat-row:hover .pub-cat-row__dot { background: var(--brand, #C9A24A); }
.pub-cat-row__name { flex: 1; font-size: .85rem; font-weight: 500; }
.pub-cat-row__count {
font-size: .72rem; font-weight: 600;
background: var(--bg-subtle, #f9fafb);
color: var(--text-muted);
padding: 1px 7px; border-radius: 20px;
}
.pub-cat-row.active .pub-cat-row__count {
background: rgba(201,162,74,.12); color: var(--brand, #C9A24A);
}
/* Widget: relacionados */
.pub-related-list { display: flex; flex-direction: column; gap: 14px; }
.pub-related-item {
display: flex;
gap: 11px;
text-decoration: none;
color: var(--text-dark);
transition: opacity .2s;
}
.pub-related-item:hover { opacity: .8; }
.pub-related-item__img {
width: 70px; height: 52px; flex-shrink: 0;
border-radius: 8px; overflow: hidden;
background: var(--bg-subtle);
}
.pub-related-item__img img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.pub-related-item__body { flex: 1; min-width: 0; }
.pub-related-item__title {
font-size: .82rem; font-weight: 600; line-height: 1.35;
color: var(--text-dark); margin: 0 0 4px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-related-item__date {
display: flex; align-items: center; gap: 4px;
font-size: .72rem; color: var(--text-muted);
}
.pub-related-item__date i { color: var(--brand, #C9A24A); font-size: .65rem; }
/* Widget: populares */
.pub-popular-list { display: flex; flex-direction: column; gap: 12px; }
.pub-popular-item {
display: flex;
align-items: flex-start;
gap: 12px;
text-decoration: none;
color: var(--text-dark);
transition: opacity .2s;
}
.pub-popular-item:hover { opacity: .8; }
.pub-popular-item__num {
width: 24px; height: 24px; border-radius: 50%;
background: rgba(201,162,74,.1);
color: var(--brand, #C9A24A);
font-size: .75rem; font-weight: 800;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pub-popular-item__body { flex: 1; min-width: 0; }
.pub-popular-item__title {
font-size: .82rem; font-weight: 600; line-height: 1.35;
color: var(--text-dark); margin: 0 0 3px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pub-popular-item__views {
display: flex; align-items: center; gap: 4px;
font-size: .72rem; color: var(--text-muted);
}
.pub-popular-item__views i { color: var(--brand, #C9A24A); font-size: .65rem; }
/* Widget: CTA */
.pub-widget--cta {
text-align: center;
background: linear-gradient(135deg, rgba(201,162,74,.08), rgba(168,132,47,.06));
border-color: rgba(201,162,74,.2);
}
.pub-widget--cta p {
font-size: .85rem;
color: var(--text-body);
margin: 0 0 14px;
line-height: 1.5;
}
.pub-cta-btn {
display: inline-flex;
align-items: center;
gap: 7px;
background: linear-gradient(135deg, var(--brand, #C9A24A), var(--primary-warm, #A8842F));
color: #fff;
text-decoration: none;
padding: 10px 20px;
border-radius: 9999px;
font-size: .82rem;
font-weight: 700;
transition: transform .2s, box-shadow .2s;
box-shadow: 0 3px 10px rgba(201,162,74,.3);
}
.pub-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 16px rgba(201,162,74,.4);
color: #fff;
}
/* ─── Responsive ── */
@media (max-width: 991px) {
.pub-sidebar { margin-top: 28px; flex-direction: row; flex-wrap: wrap; }
.pub-sidebar .pub-widget { flex: 1 1 calc(50% - 10px); }
.pub-sidebar .pub-widget--cta { flex: 0 0 100%; }
}
@media (max-width: 767px) {
.pub-article-meta-bar { padding: 14px 18px 12px; }
.pub-article-meta-info { display: none; }
.post-content.pub-prose { padding: 22px 18px 28px !important; }
.pub-prose p { font-size: .95rem; }
.pub-article-footer { padding: 14px 18px; }
.pub-comments-section,
.pub-form-section { padding: 20px 16px; }
.pub-form-row { grid-template-columns: 1fr; gap: 0; }
.pub-submit-btn { width: 100%; justify-content: center; }
.pub-sidebar { flex-direction: column; }
.pub-sidebar .pub-widget { flex: 0 0 auto; }
}
/* ═══════════════════════════════════════════════════════════════════
[13b] CRS INDEX HERO — Hero del catálogo de cursos
═══════════════════════════════════════════════════════════════════ */
/* Hero cursos — estilos heredados */
#hero_in.courses {
background: linear-gradient(135deg, #121921 0%, #0D0D0D 60%, #A8842F 100%);
padding: 80px 0 60px; position: relative; overflow: hidden;
}
#hero_in.courses::before {
content: ''; position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
#hero_in.courses .wrapper { position: relative; z-index: 1; }
#hero_in.courses h1 { font-size: 42px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin: 0; line-height: 1.2; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
#hero_in.courses h1 span:empty { display: none; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
#hero_in.courses h1.fadeInUp { animation: fadeInUp 0.8s ease-out; }
@media (max-width: 767px) { #hero_in.courses { padding: 50px 0 40px; } #hero_in.courses h1 { font-size: 28px; } }
/* ═══════════════════════════════════════════════════════════════════
[18] DIRECTORIO CSS — Páginas de listado y perfil profesional
Migrado desde public/front/css/directorio.css
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
DIRECTORIO DE PROFESIONALES
Mobile-first · Poppins · Sistema de variables existente
═══════════════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────────
HERO
───────────────────────────────────────────────────────────── */
.dir-hero {
padding: 90px 0 28px;
text-align: center;
background:
radial-gradient(ellipse at 20% 30%, rgba(201,162,74,.06) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(168,132,47,.04) 0%, transparent 50%),
#f9fafb;
}
.dir-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
padding: 5px 14px;
background: linear-gradient(135deg, #FAF5E8, #e8daf7);
color: #C9A24A;
border-radius: 20px;
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .3px;
}
.dir-hero-eyebrow i { font-size: 10px; }
.dir-hero-title {
font-family: 'Poppins', sans-serif;
font-size: 24px;
font-weight: 800;
color: #1a1d23;
margin: 0 0 10px;
line-height: 1.2;
}
.dir-hero-sub {
font-size: 13px;
color: #8891a0;
margin: 0;
line-height: 1.6;
}
/* ─────────────────────────────────────────────────────────────
FILTROS
───────────────────────────────────────────────────────────── */
.dir-filters-bar {
background: #fff;
border-bottom: 1px solid #e8ecf1;
padding: 14px 0 10px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.dir-filters-bar form {
display: flex;
flex-direction: column;
gap: 10px;
}
/* ── Buscador ── */
.dir-search-wrapper {
position: relative;
width: 100%;
}
.dir-search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #a0a8b6;
font-size: 14px;
pointer-events: none;
}
.dir-search-input {
width: 100%;
padding: 10px 42px 10px 40px;
border: 2px solid #e8ecf1;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: #1a1d23;
background: #f9fafb;
transition: all .25s ease;
}
.dir-search-input:focus {
outline: none;
border-color: #C9A24A;
background: #fff;
box-shadow: 0 0 0 4px rgba(201,162,74,.07);
}
.dir-search-input::placeholder { color: #c0c6ce; }
.dir-search-clear {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #a0a8b6;
font-size: 14px;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color .2s;
}
.dir-search-clear:hover { color: #e55353; }
/* ── Grid de 4 filtros (2x2 en mobile, 4 en desktop) ── */
.dir-filters-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.dir-filter-group {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.dir-filter-label {
font-family: 'Poppins', sans-serif;
font-size: 10px;
font-weight: 700;
color: #8891a0;
text-transform: uppercase;
letter-spacing: .4px;
padding-left: 2px;
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.dir-filter-label i { font-size: 9px; color: #C9A24A; }
/* Select nativo */
.dir-select-native {
width: 100%;
padding: 8px 28px 8px 10px;
border: 2px solid #e8ecf1;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 600;
color: #1a1d23;
background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238891a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 8px center / 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
transition: all .25s ease;
height: 38px;
}
.dir-select-native:focus {
outline: none;
border-color: #C9A24A;
background-color: #fff;
box-shadow: 0 0 0 4px rgba(201,162,74,.07);
}
/* Select2 (especialidades) — misma altura que select nativo */
.dir-filter-group .select2-container--bootstrap-5 .select2-selection--single {
min-height: 38px !important;
height: 38px !important;
padding: 6px 10px !important;
border: 2px solid #e8ecf1 !important;
border-radius: 10px !important;
font-size: 12px !important;
font-weight: 600 !important;
background: #f9fafb !important;
color: #1a1d23 !important;
}
.dir-filter-group .select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
.dir-filter-group .select2-container--bootstrap-5.select2-container--open .select2-selection--single {
border-color: #C9A24A !important;
background: #fff !important;
box-shadow: 0 0 0 4px rgba(201,162,74,.07) !important;
}
.dir-filter-group .select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder {
color: #c0c6ce !important;
font-weight: 500 !important;
}
.dir-filter-group .select2-container--bootstrap-5 .select2-dropdown {
border: 2px solid #e8ecf1 !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.1) !important;
margin-top: 4px !important;
}
.dir-filter-group .select2-container--bootstrap-5 .select2-results__option--highlighted {
background: rgba(201,162,74,.08) !important;
color: #C9A24A !important;
}
.dir-filter-group .select2-container--bootstrap-5 .select2-results__option--selected {
background: #C9A24A !important;
color: #fff !important;
}
/* ── Footer de filtros: pills + contador + limpiar ── */
.dir-filter-footer {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding-top: 2px;
}
/* ── Contador de resultados ── */
.dir-results-badge {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 500;
color: #5a6273;
margin-left: auto;
}
.dir-results-number {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 8px;
background: #C9A24A;
color: #fff;
border-radius: 7px;
font-size: 12px;
font-weight: 800;
line-height: 1;
}
.dir-results-text { line-height: 1.3; }
.dir-clear-filters {
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 700;
color: #e55353;
text-decoration: none;
white-space: nowrap;
transition: all .2s;
}
.dir-clear-filters:hover { color: #c73c3c; text-decoration: underline; }
.dir-clear-filters i { margin-right: 3px; }
/* ─────────────────────────────────────────────────────────────
LISTADO / CARDS
───────────────────────────────────────────────────────────── */
.dir-listing { padding: 24px 0 60px; }
.dir-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 14px;
border: 1px solid #edf0f5;
overflow: hidden;
text-decoration: none;
transition: all .3s cubic-bezier(.4,0,.2,1);
height: 100%;
}
.dir-card:hover {
transform: translateY(-5px);
box-shadow: 0 14px 36px rgba(0,0,0,.12);
border-color: rgba(201,162,74,.3);
text-decoration: none;
}
/* Hover overlay "Ver perfil" */
.dir-card-avatar::after {
content: 'Ver perfil';
font-family: 'Poppins', sans-serif;
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 10px 6px 12px;
background: linear-gradient(to top, rgba(170,130,47,.92) 0%, rgba(201,162,74,.6) 60%, transparent 100%);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-align: center;
text-transform: uppercase;
opacity: 0;
transform: translateY(6px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
.dir-card:hover .dir-card-avatar::after {
opacity: 1;
transform: translateY(0);
}
/* Avatar / foto */
.dir-card-avatar {
position: relative;
width: 100%;
padding-top: 100%; /* cuadrado */
background: #f3f4f7;
overflow: hidden;
}
.dir-card-avatar img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.dir-card:hover .dir-card-avatar img { transform: scale(1.04); }
.dir-card-initials {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
font-size: 32px;
font-weight: 800;
color: #C9A24A;
background: linear-gradient(135deg, #FAF5E8 0%, #F0D898 100%);
}
/* Badge rubro en card */
.dir-card-rubro {
position: absolute;
top: 8px; right: 8px;
width: 28px; height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.dir-rubro-legal { background: #C9A24A; }
.dir-rubro-medical { background: #059669; }
/* Body card */
.dir-card-body { padding: 12px; flex: 1; display: flex; flex-direction: column; }
.dir-card-name {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 700;
color: #1a1d23;
margin: 0 0 4px;
line-height: 1.3;
}
.dir-card-location {
font-size: 11px;
color: #8891a0;
margin: 0 0 8px;
display: flex;
align-items: center;
gap: 4px;
}
.dir-card-location i { font-size: 10px; color: #d97706; }
.dir-muted { opacity: .5; font-style: italic; }
/* Tags */
.dir-card-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: auto;
}
.dir-tag {
padding: 3px 9px;
border-radius: 20px;
font-family: 'Poppins', sans-serif;
font-size: 10px;
font-weight: 600;
color: #C9A24A;
background: #FAF5E8;
border: 1px solid rgba(201,162,74,.1);
line-height: 1.3;
}
.dir-tag-more {
background: #edf0f5;
color: #8891a0;
border-color: transparent;
font-weight: 700;
}
/* ── Empty state ── */
.dir-empty {
text-align: center;
padding: 56px 20px;
}
.dir-empty-icon {
width: 72px; height: 72px;
margin: 0 auto 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f3f4f7;
font-size: 28px;
color: #c0c6ce;
}
.dir-empty h4 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 18px;
color: #1a1d23;
margin: 0 0 6px;
}
.dir-empty p {
font-size: 13px;
color: #8891a0;
margin: 0 0 20px;
}
.dir-btn-reset {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
background: #C9A24A;
color: #fff;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 13px;
text-decoration: none;
transition: all .2s;
}
.dir-btn-reset:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(201,162,74,.3); color: #fff; text-decoration: none; }
/* ── Paginación ── */
.dir-pagination { text-align: center; padding-top: 20px; }
.dir-pagination .pagination { justify-content: center; gap: 3px; }
.dir-pagination .page-link {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600;
color: #C9A24A;
border-radius: 8px;
border: 2px solid #e8ecf1;
padding: 6px 12px;
transition: all .2s;
}
.dir-pagination .page-link:hover { background: #FAF5E8; border-color: #C9A24A; }
.dir-pagination .page-item.active .page-link {
background: #C9A24A;
border-color: #C9A24A;
color: #fff;
}
/* ═══════════════════════════════════════════════════════════════
PERFIL / DETAIL
═══════════════════════════════════════════════════════════════ */
.dir-profile-hero {
padding: 88px 0 16px;
background: #f9fafb;
}
.dir-back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 700;
color: #C9A24A;
text-decoration: none;
transition: all .2s;
}
.dir-back-link:hover { text-decoration: underline; }
.dir-back-link i { font-size: 12px; transition: transform .2s; }
.dir-back-link:hover i { transform: translateX(-3px); }
.dir-profile-wrapper { padding: 24px 0 60px; }
/* ── Sidebar ── */
.dir-profile-sidebar {
background: #fff;
border-radius: 16px;
border: 1px solid #edf0f5;
padding: 28px 22px;
text-align: center;
}
.dir-sidebar-section-title {
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 700;
color: #8891a0;
text-transform: uppercase;
letter-spacing: .5px;
margin: 20px 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid #edf0f5;
text-align: left;
}
/* Avatar */
.dir-profile-avatar-wrapper { margin-bottom: 12px; }
.dir-profile-avatar {
width: 110px; height: 110px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #edf0f5;
}
.dir-profile-initials {
width: 110px; height: 110px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
font-size: 38px;
font-weight: 800;
color: #C9A24A;
background: linear-gradient(135deg, #FAF5E8 0%, #e8daf7 100%);
border: 3px solid #edf0f5;
}
/* Rubro badge en detail */
.dir-profile-rubro-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 8px 0;
padding: 5px 14px;
border-radius: 20px;
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 700;
color: #fff;
letter-spacing: .3px;
}
.dir-profile-rubro-badge i { font-size: 10px; }
.dir-profile-name {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 800;
color: #1a1d23;
margin: 6px 0 12px;
line-height: 1.25;
}
/* Tags en sidebar */
.dir-profile-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin-bottom: 8px;
}
/* Contacto */
.dir-profile-contact { text-align: left; }
.dir-contact-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 500;
color: #3b4150;
text-decoration: none;
border-bottom: 1px solid #f3f4f7;
}
.dir-contact-item:last-child { border-bottom: none; }
a.dir-contact-item:hover { color: #C9A24A; text-decoration: none; }
.dir-contact-item i {
width: 18px;
text-align: center;
color: #a0a8b6;
margin-top: 2px;
flex-shrink: 0;
font-size: 14px;
}
.dir-contact-whatsapp i { color: #25D366; }
.dir-contact-empty span {
color: #c0c6ce;
font-style: italic;
font-weight: 400;
}
.dir-address-detail { color: #8891a0; }
/* Links */
.dir-profile-links { text-align: left; }
.dir-link-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 700;
color: #C9A24A;
background: #FAF5E8;
border: 1.5px solid rgba(201,162,74,.12);
text-decoration: none;
transition: all .2s;
margin-right: 6px;
margin-bottom: 6px;
}
.dir-link-btn:hover { background: #C9A24A; color: #fff; text-decoration: none; }
/* Ejercicio */
.dir-profile-ejercicio { text-align: left; }
.dir-ejercicio-detail {
display: flex;
flex-direction: column;
padding: 8px 0;
border-bottom: 1px solid #f3f4f7;
}
.dir-ejercicio-detail:last-child { border-bottom: none; }
.dir-ejercicio-label {
font-family: 'Poppins', sans-serif;
font-size: 10px;
font-weight: 700;
color: #8891a0;
text-transform: uppercase;
letter-spacing: .4px;
}
.dir-ejercicio-value {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600;
color: #1a1d23;
}
/* Placeholder para datos vacíos */
.dir-placeholder-text {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 400;
color: #c0c6ce;
font-style: italic;
margin: 0;
}
/* ── Secciones de contenido ── */
.dir-section {
background: #fff;
border-radius: 16px;
border: 1px solid #edf0f5;
padding: 22px 20px;
margin-bottom: 16px;
}
.dir-section-title {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 700;
color: #1a1d23;
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
}
.dir-section-title i {
font-size: 13px;
color: #C9A24A;
width: 30px; height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: #FAF5E8;
border-radius: 8px;
flex-shrink: 0;
}
.dir-bio-text {
font-size: 14px;
color: #5a6273;
line-height: 1.7;
margin: 0;
white-space: pre-line;
}
/* Credenciales */
.dir-credentials {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.dir-cred-item {
background: #f9fafb;
border-radius: 10px;
padding: 12px 14px;
border: 1px solid #edf0f5;
}
.dir-cred-label {
display: block;
font-family: 'Poppins', sans-serif;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: #8891a0;
margin-bottom: 2px;
}
.dir-cred-value {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 600;
color: #1a1d23;
}
/* Content grid (documentos, cursos, blogs) */
.dir-content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.dir-content-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
background: #f9fafb;
border-radius: 10px;
border: 1px solid #edf0f5;
transition: all .2s;
}
.dir-content-card:hover {
border-color: rgba(201,162,74,.2);
background: #faf6ff;
}
.dir-content-icon {
width: 42px; height: 42px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.dir-content-thumb {
width: 56px; height: 42px;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
background: #edf0f5;
}
.dir-content-thumb img { width: 100%; height: 100%; object-fit: cover; }
.dir-content-info { flex: 1; min-width: 0; }
.dir-content-info h4 {
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 600;
color: #1a1d23;
margin: 0 0 2px;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dir-content-price {
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 700;
color: #C9A24A;
}
.dir-content-meta {
font-family: 'Poppins', sans-serif;
font-size: 11px;
color: #8891a0;
font-weight: 500;
}
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════ */
/* ── Tablet (768px+) ── */
@media (min-width: 768px) {
.dir-hero { padding: 100px 0 32px; }
.dir-hero-title { font-size: 30px; }
.dir-hero-sub { font-size: 14px; }
/* 4 filtros en una sola fila */
.dir-filters-grid { grid-template-columns: repeat(4, 1fr); }
.dir-filter-footer { flex-wrap: nowrap; }
.dir-card-name { font-size: 14px; }
.dir-credentials { grid-template-columns: 1fr 1fr; }
.dir-content-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Desktop (992px+) ── */
@media (min-width: 992px) {
.dir-hero { padding: 110px 0 36px; }
.dir-hero-title { font-size: 34px; }
.dir-hero-sub { font-size: 15px; }
.dir-select-native { font-size: 13px; padding: 8px 32px 8px 12px; }
.dir-card-body { padding: 14px; }
.dir-card-initials { font-size: 36px; }
/* Sidebar sticky en desktop */
.dir-profile-sidebar {
position: sticky;
top: 80px;
}
.dir-profile-name { font-size: 22px; }
.dir-profile-avatar, .dir-profile-initials { width: 120px; height: 120px; }
.dir-credentials { grid-template-columns: 1fr 1fr 1fr; }
}
/* ── Mobile pequeño (<380px) ── */
@media (max-width: 379px) {
.dir-hero-title { font-size: 20px; }
.dir-filters-grid { grid-template-columns: 1fr; }
.dir-card-name { font-size: 12px; }
.dir-card-body { padding: 10px; }
.dir-card-initials { font-size: 24px; }
.dir-tag { font-size: 9px; padding: 2px 7px; }
.dir-profile-name { font-size: 18px; }
.dir-profile-avatar, .dir-profile-initials { width: 90px; height: 90px; font-size: 32px; }
}
/* ═══════════════════════════════════════════════════════════════
FILTROS — HINTS, PILLS ACTIVOS
═══════════════════════════════════════════════════════════════ */
/* Hint debajo de cada filtro */
.dir-filter-hint {
font-family: 'Poppins', sans-serif;
font-size: 10px;
color: #a0a8b6;
font-weight: 500;
padding-left: 2px;
margin-top: 3px;
}
/* Hint inline en la label (ej: "filtradas por área") */
.dir-filter-hint-inline {
font-size: 9px;
font-weight: 600;
color: #C9A24A;
background: #FAF5E8;
padding: 2px 6px;
border-radius: 6px;
margin-left: 4px;
text-transform: none;
letter-spacing: 0;
}
/* Fila de filtros activos + contador */
.dir-filter-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding-top: 4px;
}
/* Pills de filtros activos */
.dir-active-filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
flex: 1;
}
.dir-active-label {
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 700;
color: #8891a0;
white-space: nowrap;
}
.dir-filter-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
background: #FAF5E8;
color: #C9A24A;
border: 1.5px solid rgba(201,162,74,.15);
border-radius: 20px;
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 700;
}
.dir-filter-pill i { font-size: 9px; }
.dir-pill-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px; height: 14px;
margin-left: 2px;
background: rgba(201,162,74,.15);
color: #C9A24A;
border-radius: 50%;
font-size: 11px;
font-weight: 900;
text-decoration: none;
line-height: 1;
transition: all .15s;
}
.dir-pill-remove:hover {
background: #C9A24A;
color: #fff;
text-decoration: none;
}
/* Tag cuando profesional no tiene especialidades */
.dir-tag-empty {
background: #f3f4f7;
color: #8891a0;
border-color: transparent;
font-style: italic;
}
/* ═══════════════════════════════════════════════════════════════
BADGE VERIFICADO (cards + detail)
═══════════════════════════════════════════════════════════════ */
/* Card: fila nombre + badge */
.dir-card-name-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 6px;
margin: 0 0 4px;
}
.dir-card-name-row .dir-card-name { margin: 0; flex: 1; }
.dir-card-verified {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
background: #C9A24A;
color: #fff;
border-radius: 50%;
font-size: 8px;
margin-top: 1px;
}
/* Detail sidebar badge */
.dir-verified-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 4px auto 10px;
padding: 5px 14px;
background: linear-gradient(135deg, #FAF5E8 0%, #e8daf7 100%);
color: #C9A24A;
border: 1.5px solid rgba(201,162,74,.18);
border-radius: 20px;
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
}
.dir-verified-badge i { font-size: 10px; }
/* ═══════════════════════════════════════════════════════════════
GATING DE CONTACTO (solo ciudadanos logueados)
═══════════════════════════════════════════════════════════════ */
.dir-contact-gate {
text-align: center;
padding: 18px 12px;
background: #f9fafb;
border-radius: 10px;
border: 1.5px dashed #dde2ea;
margin: 4px 0 8px;
}
.dir-contact-gate i {
display: block;
font-size: 22px;
color: #c0c6ce;
margin-bottom: 8px;
}
.dir-contact-gate p {
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #8891a0;
margin: 0 0 12px;
line-height: 1.5;
}
.dir-contact-gate-btn {
display: inline-block;
padding: 8px 20px;
background: #C9A24A;
color: #fff;
border-radius: 8px;
font-family: 'Poppins', sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: all .2s;
}
.dir-contact-gate-btn:hover {
background: #5a2480;
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════════════════
CTA SOS URGENCIAS
═══════════════════════════════════════════════════════════════ */
.dir-sos-cta {
margin-top: 20px;
padding: 16px;
background: linear-gradient(135deg, #fdf4ff 0%, #FAF5E8 100%);
border: 1.5px solid rgba(201,162,74,.15);
border-radius: 12px;
text-align: center;
}
.dir-sos-cta-text {
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #5a6273;
margin: 0 0 12px;
line-height: 1.5;
}
.dir-sos-cta-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 22px;
background: #C9A24A;
color: #fff;
border-radius: 10px;
font-family: 'Poppins', sans-serif;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: all .25s ease;
}
.dir-sos-cta-btn:hover {
background: #5a2480;
color: #fff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(201,162,74,.3);
}
.dir-sos-cta-btn i { font-size: 12px; }
/* ═══════════════════════════════════════════════════════════════
CONTENT CARDS CLICABLES
═══════════════════════════════════════════════════════════════ */
a.dir-content-card-link {
text-decoration: none;
color: inherit;
}
a.dir-content-card-link:hover {
border-color: rgba(201,162,74,.25);
background: #faf6ff;
text-decoration: none;
color: inherit;
}
a.dir-content-card-link:hover h4 { color: #C9A24A; }
.dir-content-arrow {
color: #c0c6ce;
font-size: 11px;
flex-shrink: 0;
transition: transform .2s, color .2s;
}
a.dir-content-card-link:hover .dir-content-arrow {
color: #C9A24A;
transform: translateX(3px);
}
/* ═══════════════════════════════════════════════════════════════
RESULTS BAR — barra de resultados + chips activos
═══════════════════════════════════════════════════════════════ */
.dir-results-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 13px 18px;
background: #fff;
border: 1px solid #edf0f5;
border-radius: 12px;
margin: 16px 0 4px;
box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.dir-results-count {
display: flex;
align-items: baseline;
gap: 6px;
flex-shrink: 0;
}
.dir-results-big-num {
font-family: 'Poppins', sans-serif;
font-size: 26px;
font-weight: 800;
color: #1a1d23;
letter-spacing: -0.04em;
line-height: 1;
}
.dir-results-label {
font-family: 'Poppins', sans-serif;
font-size: 13px;
color: #8891a0;
font-weight: 500;
}
.dir-results-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-items: center;
flex: 1;
min-width: 0;
}
/* ═══════════════════════════════════════════════════════════════
MOBILE BAR — búsqueda + botón drawer (solo <992px)
═══════════════════════════════════════════════════════════════ */
.dir-mobile-bar {
display: none;
position: sticky;
top: 0;
z-index: 200;
background: #fff;
border-bottom: 1px solid #e8ecf1;
padding: 10px 0;
box-shadow: 0 2px 10px rgba(0,0,0,.07);
}
.dir-mobile-bar-inner {
display: flex;
gap: 8px;
align-items: center;
}
.dir-mobile-search-wrap {
position: relative;
flex: 1;
}
.dir-mobile-search-wrap i {
position: absolute;
left: 11px;
top: 50%;
transform: translateY(-50%);
color: #a0a8b6;
font-size: 13px;
pointer-events: none;
}
.dir-mobile-search-inp {
width: 100%;
padding: 9px 12px 9px 33px;
border: 1.5px solid #e8ecf1;
border-radius: 10px;
font-size: 13px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
color: #1a1d23;
background: #f9fafb;
outline: none;
transition: all .2s;
}
.dir-mobile-search-inp:focus {
border-color: #C9A24A;
background: #fff;
box-shadow: 0 0 0 3px rgba(201,162,74,.08);
}
.dir-mobile-search-inp::placeholder { color: #c0c6ce; }
.dir-mobile-filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 14px;
background: #f9fafb;
border: 1.5px solid #e8ecf1;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
color: #1a1d23;
cursor: pointer;
white-space: nowrap;
transition: all .18s;
flex-shrink: 0;
}
.dir-mobile-filter-btn.has-filters {
border-color: rgba(201,162,74,.35);
background: #FAF5E8;
color: #C9A24A;
}
.dir-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px; height: 18px;
background: #C9A24A;
color: #fff;
border-radius: 50%;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
/* ═══════════════════════════════════════════════════════════════
DRAWER — Bottom sheet filtros mobile
═══════════════════════════════════════════════════════════════ */
.dir-drawer-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.48);
z-index: 390;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity .28s;
}
.dir-drawer-overlay.open { opacity: 1; pointer-events: auto; }
.dir-filter-drawer {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 400;
background: #fff;
border-radius: 20px 20px 0 0;
max-height: 92vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform .32s cubic-bezier(.32,.72,0,1);
padding-bottom: env(safe-area-inset-bottom, 12px);
box-shadow: 0 -8px 40px rgba(0,0,0,.14);
overscroll-behavior: contain;
}
.dir-filter-drawer.open { transform: translateY(0); }
.dir-drawer-handle-area { display: flex; justify-content: center; padding: 12px 0 4px; }
.dir-drawer-handle { width: 36px; height: 4px; border-radius: 2px; background: #e5e7eb; }
.dir-drawer-header {
padding: 4px 20px 14px;
border-bottom: 1px solid #edf0f5;
display: flex;
align-items: center;
justify-content: space-between;
}
.dir-drawer-header h5 {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 800;
color: #1a1d23;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.dir-drawer-header h5 i { color: #C9A24A; font-size: 15px; }
.dir-drawer-close {
width: 32px; height: 32px;
border-radius: 50%;
background: #f9fafb;
border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
color: #8891a0;
font-size: 13px;
transition: all .15s;
}
.dir-drawer-close:hover { background: rgba(220,38,38,.09); color: #dc2626; }
.dir-drawer-body { padding: 16px 20px 0; }
.dir-drawer-field { margin-bottom: 16px; }
.dir-drawer-label {
display: flex;
align-items: center;
gap: 5px;
font-family: 'Poppins', sans-serif;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .9px;
color: #8891a0;
margin-bottom: 6px;
}
.dir-drawer-label i { font-size: 9px; color: #C9A24A; }
.dir-drawer-select {
width: 100%;
padding: 11px 32px 11px 12px;
border: 1.5px solid #e8ecf1;
border-radius: 10px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
color: #1a1d23;
background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23662d91' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center / 12px;
-webkit-appearance: none; appearance: none;
cursor: pointer;
outline: none;
transition: all .2s;
}
.dir-drawer-select:focus {
border-color: #C9A24A;
background-color: #fff;
box-shadow: 0 0 0 3px rgba(201,162,74,.08);
}
.dir-drawer-footer {
padding: 14px 20px;
border-top: 1px solid #edf0f5;
display: flex;
gap: 10px;
position: sticky;
bottom: 0;
background: #fff;
z-index: 2;
}
.dir-drawer-apply-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 12px;
background: linear-gradient(135deg, #C9A24A, #A8842F);
color: #fff;
border: none;
border-radius: 10px;
font-size: 14px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
cursor: pointer;
transition: all .2s;
letter-spacing: .2px;
}
.dir-drawer-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(201,162,74,.32); }
.dir-drawer-clear-btn {
padding: 12px 16px;
background: transparent;
border: 1.5px solid #e8ecf1;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
color: #8891a0;
cursor: pointer;
transition: all .18s;
white-space: nowrap;
}
.dir-drawer-clear-btn:hover { border-color: #dc2626; color: #dc2626; }
/* ═══════════════════════════════════════════════════════════════
RESPONSIVE — Mobile vs Desktop
═══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
/* Ocultar barra desktop, mostrar mobile bar */
.dir-filters-bar { display: none !important; }
.dir-mobile-bar { display: block; }
.dir-results-bar { margin: 12px 0 4px; }
}
@media (min-width: 992px) {
/* Ocultar componentes mobile en desktop */
.dir-mobile-bar { display: none !important; }
.dir-filter-drawer,
.dir-drawer-overlay { display: none !important; }
.dir-results-bar { margin: 14px 0 4px; }
.dir-results-big-num { font-size: 28px; }
}
@media (max-width: 575px) {
/* En mobile muy pequeño: ocultar chips, solo mostrar número */
.dir-results-chips { display: none; }
.dir-results-bar { flex-wrap: nowrap; }
/* Ocultar hints en mobile (ahorrar espacio) */
.dir-filter-hint { display: none; }
}
/* ── Registro profesional: estado pendiente ──
Card de estado "pendiente de aprobación" para profesionales.
Migrado desde registro-profesional.blade.php @section('css') inline. */
.reg-alert-close {
width: 28px; height: 28px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; opacity: 1;
background: rgba(0,0,0,.08); border: none;
color: inherit; font-size: .75rem;
transition: background .15s, transform .15s;
}
.reg-alert-close:hover {
background: rgba(0,0,0,.18); transform: scale(1.1);
opacity: 1;
}
.reg-pending-card {
background: var(--card-bg, #fff);
border: 1px solid var(--border, #EDE8DC);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(201,162,74,.12);
margin-bottom: 2rem;
}
.reg-pending-header {
background: linear-gradient(135deg, var(--brand, #C9A24A) 0%, var(--brand-dark, #A8842F) 100%);
padding: 2rem 2rem 1.75rem;
color: #fff;
text-align: center;
}
.reg-pending-badge {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.18); border-radius: 20px;
padding: 4px 14px; font-size: .72rem; font-weight: 700;
letter-spacing: .5px; text-transform: uppercase; margin-bottom: .85rem;
}
.reg-pending-dot {
width: 7px; height: 7px; border-radius: 50%; background: var(--brand-light, #F0D898);
animation: pendingPulse 1.6s ease-in-out infinite;
}
@keyframes pendingPulse {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.7); }
}
.reg-pending-title {
font-size: 1.35rem; font-weight: 800; margin: 0 0 .5rem; color: #fff;
}
.reg-pending-subtitle {
font-size: .88rem; color: rgba(255,255,255,.82); margin: 0;
}
.reg-pending-timeline {
padding: 1.5rem 2rem; display: flex; flex-direction: column; gap: 0;
border-bottom: 1px solid var(--border-l, #F5F0E8);
}
.reg-pending-step {
display: flex; align-items: flex-start; gap: 14px;
padding: .85rem 0; position: relative;
}
.reg-pending-step + .reg-pending-step::before {
content: ''; position: absolute; left: 17px; top: 0;
width: 2px; height: .85rem; background: var(--border, #EDE8DC);
}
.reg-pending-step__icon {
width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; font-size: .8rem;
}
.reg-pending-step--done .reg-pending-step__icon { background: var(--ok-bg, #f0faf4); color: var(--ok, #2E8B57); }
.reg-pending-step--active .reg-pending-step__icon {
background: linear-gradient(135deg, var(--brand, #C9A24A), var(--brand-dark, #A8842F)); color: #fff;
box-shadow: 0 2px 10px rgba(201,162,74,.35);
animation: pendingIconPulse 2s ease-in-out infinite;
}
@keyframes pendingIconPulse {
0%,100% { box-shadow: 0 2px 10px rgba(201,162,74,.35); }
50% { box-shadow: 0 2px 18px rgba(201,162,74,.6); }
}
.reg-pending-step--pending .reg-pending-step__icon { background: var(--brand-xlight, #FAF5E8); color: var(--text-muted, #7A7A7A); }
.reg-pending-step__body { display: flex; flex-direction: column; padding-top: 4px; }
.reg-pending-step__label {
font-size: .84rem; font-weight: 700; color: var(--text, #0D0D0D); line-height: 1.3;
}
.reg-pending-step--pending .reg-pending-step__label { color: var(--text-muted, #7A7A7A); }
.reg-pending-step__hint { font-size: .76rem; color: var(--text-muted, #7A7A7A); margin-top: 2px; }
.reg-pending-features { padding: 1.25rem 2rem; border-bottom: 1px solid var(--border-l, #F5F0E8); }
.reg-pending-features__title {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .6px; color: var(--text-muted, #7A7A7A); margin-bottom: .85rem;
}
.reg-pending-features__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem;
}
.reg-pending-feature {
display: flex; align-items: center; gap: 8px;
font-size: .78rem; color: var(--text-2, #4A4A4A); font-weight: 500;
}
.reg-pending-feature i {
width: 28px; height: 28px; border-radius: 8px;
background: var(--brand-xlight, #FAF5E8); color: var(--brand, #C9A24A);
display: flex; align-items: center; justify-content: center;
font-size: .72rem; flex-shrink: 0;
}
.reg-pending-footer {
padding: 1.25rem 2rem; display: flex; align-items: center;
justify-content: space-between; flex-wrap: wrap; gap: .75rem;
background: var(--brand-xlight, #FAF5E8);
}
.reg-pending-btn-home {
display: inline-flex; align-items: center; gap: 6px;
background: var(--brand, #C9A24A); color: #fff; border-radius: 8px;
padding: 8px 18px; font-size: .82rem; font-weight: 600;
text-decoration: none; transition: background .15s;
}
.reg-pending-btn-home:hover { background: var(--brand-dark, #A8842F); color: #fff; text-decoration: none; }
.reg-pending-note {
font-size: .76rem; color: var(--text-muted, #7A7A7A); margin: 0;
display: flex; align-items: center; gap: 6px;
}
@media (max-width: 575px) {
.reg-pending-features__grid { grid-template-columns: repeat(2,1fr); }
.reg-pending-header, .reg-pending-timeline,
.reg-pending-features, .reg-pending-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
.reg-pending-footer { flex-direction: column; text-align: center; }
}
/* ── Directorio carousel (home) ──
Carousel JS manual de service-cards en la home.
Migrado desde front/index.blade.php