/* ============================================================
   DIRECTORIO DE ESPECIALISTAS — Frontend Styles
   ============================================================ */

/* ── Variables + Global Reset for plugin scope ── */
.de-directorio,
.de-directorio *,
.de-directorio *::before,
.de-directorio *::after,
.de-modal,
.de-modal *,
.de-modal *::before,
.de-modal *::after {
    box-sizing: border-box;
}

.de-directorio {
    --de-violet:      #7C3AED;
    --de-violet-dark: #6d28d9;
    --de-violet-light:#ede9fe;
    --de-violet-soft: #f5f3ff;
    --de-green:       #16a34a;
    --de-orange:      #ea580c;
    --de-gray-50:     #f9fafb;
    --de-gray-100:    #F3F4F6;
    --de-gray-200:    #e5e7eb;
    --de-gray-400:    #9CA3AF;
    --de-gray-500:    #6b7280;
    --de-gray-600:    #4b5563;
    --de-gray-900:    #111827;
    --de-radius:      1.5rem;
    --de-radius-sm:   0.75rem;
    --de-shadow:      0 1px 3px 0 rgba(0,0,0,.07), 0 1px 2px -1px rgba(0,0,0,.07);
    --de-shadow-lg:   0 10px 40px -8px rgba(0,0,0,.14);
    --de-font:        inherit;
    font-family: var(--de-font);
    color: var(--de-gray-900);
}

/* ── Search Bar ── */
.de-search-wrap {
    margin-bottom: 1.5rem;
}

.de-search-box {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--de-gray-200);
    border-radius: 3rem;
    padding: .375rem;
    gap: 0;
    box-shadow: var(--de-shadow-lg);
    flex-wrap: wrap;
}

.de-search-field {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem 1.25rem;
    border-right: 1px solid var(--de-gray-100);
    min-width: 200px;
}

.de-search-field iconify-icon {
    color: var(--de-gray-400);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.de-search-field input {
    border: none;
    outline: none;
    background: transparent;
    font-size: .9375rem;
    color: var(--de-gray-900);
    width: 100%;
    font-family: inherit;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.de-search-field input::placeholder { color: var(--de-gray-400); }

.de-search-select {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem 1.25rem;
    position: relative;
    min-width: 180px;
}

.de-search-select iconify-icon:first-child {
    color: var(--de-gray-400);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.de-search-select select {
    border: none;
    outline: none;
    background: transparent;
    font-size: .9375rem;
    color: var(--de-gray-900);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    padding-right: 1.5rem;
    width: 100%;
    box-shadow: none;
}

.de-select-arrow {
    position: absolute;
    right: 1.25rem;
    color: var(--de-gray-400);
    pointer-events: none;
    font-size: 1rem;
}

/* ── Filter Bar ── */
.de-filter-bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.de-filter-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--de-gray-900);
    white-space: nowrap;
}

.de-filter-pills {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.de-pill {
    background: var(--de-violet-light);
    color: var(--de-violet);
    border: none;
    border-radius: 2rem;
    padding: .4rem 1rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    cursor: pointer;
    transition: background .18s, color .18s;
    font-family: inherit;
    white-space: nowrap;
    line-height: 1.4;
    text-decoration: none;
}

.de-pill:hover,
.de-pill--active {
    background: var(--de-violet);
    color: #fff;
}

/* ── Section Headers ── */
.de-section { margin-bottom: 3rem; }

.de-section-header {
    border-bottom: 1px solid var(--de-gray-200);
    padding-bottom: .75rem;
    margin-bottom: 1.75rem;
}

.de-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--de-gray-900);
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
}

.de-section-title iconify-icon {
    font-size: 1.5rem;
    color: #fb923c;
}

.de-section-sub {
    font-size: .8125rem;
    color: var(--de-gray-500);
    margin: 0;
}

/* ── Grid ── */
.de-grid {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.de-grid--2col { grid-template-columns: repeat(2, 1fr); }
.de-grid--3col { grid-template-columns: repeat(3, 1fr); }
.de-grid--4col { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .de-grid--4col { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .de-grid--3col,
    .de-grid--4col { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
    .de-grid--2col,
    .de-grid--3col,
    .de-grid--4col { grid-template-columns: 1fr; }
    .de-search-box { border-radius: 1rem; padding: .5rem; }
    .de-search-field { border-right: none; border-bottom: 1px solid var(--de-gray-100); }
}

/* ── Card ── */
.de-card {
    background: #fff;
    border: 1px solid #fce7f3;
    border-radius: 2.5rem;   /* matches reference: rounded-[2.5rem] */
    padding: 2rem;            /* matches reference: p-8 */
    box-shadow: var(--de-shadow);
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: box-shadow .3s ease, transform .3s ease;
    /* Defensive resets against theme interference */
    margin: 0;
    text-align: left;
    float: none;
    clear: none;
    overflow: visible;
}

.de-card:hover {
    box-shadow: 0 20px 50px -12px rgba(0,0,0,.18);
    transform: translateY(-2px);
}

.de-card--recomendada {
    border-color: #fce7f3; /* matches reference: border-pink-50 */
}

/* Badge — matches reference: absolute top-6 right-6, bg-orange-100, text-orange-600 */
.de-card__badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #ffedd5;     /* orange-100 */
    color: #ea580c;           /* orange-600 */
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .25rem .75rem;
    border-radius: 2rem;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .25rem;
}

/* Avatar — matches reference: w-20 h-20, rounded-full, border-2, shadow-sm */
.de-card__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    min-width: 5rem;
    min-height: 5rem;
}

.de-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* Name — matches reference: text-xl font-semibold text-gray-900 tracking-tight mb-2 */
.de-card__name {
    font-size: 1.25rem;      /* text-xl */
    font-weight: 600;
    color: var(--de-gray-900);
    margin: 0 0 .5rem;
    line-height: 1.3;
    letter-spacing: -.025em;  /* tracking-tight */
    padding: 0;
}

/* Category tags row — matches reference: mb-4 flex flex-wrap gap-2 */
.de-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* Tag pill — matches reference: bg-violet-100 text-violet-600 text-[10px] font-semibold uppercase tracking-widest px-3 py-1 rounded-full */
.de-tag {
    background: #ede9fe;      /* violet-100 */
    color: #7c3aed;           /* violet-600 */
    font-size: .625rem;       /* 10px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;    /* tracking-widest */
    padding: .25rem .75rem;   /* py-1 px-3 */
    border-radius: 2rem;
    line-height: 1.5;
    display: inline-block;
    text-decoration: none;
}

/* Gray tag variant — bg-gray-100 text-gray-500 text-[10px] font-medium px-3 py-1.5 rounded-full */
.de-tag--gray {
    background: #F3F4F6;
    color: var(--de-gray-500);
    border: none;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    padding: .375rem .875rem;
    font-size: .8125rem;
}

/* Description — matches reference: text-gray-500 text-sm leading-relaxed mb-6 */
.de-card__desc {
    font-size: .875rem;
    color: var(--de-gray-500);
    line-height: 1.625;       /* leading-relaxed */
    margin: 0 0 1.5rem;
    flex: 1;
    padding: 0;
}

/* Meta section — matches reference: flex flex-col gap-2 mb-2 */
.de-card__meta {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* Meta item — matches reference: flex items-center gap-2 text-xs text-gray-500 font-medium */
.de-card__meta-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;        /* text-xs */
    font-weight: 500;
    color: var(--de-gray-500);
    margin: 0;
    padding: 0;
}

/* Meta icon — matches reference: text-lg text-violet-600 */
.de-card__meta-item iconify-icon {
    font-size: 1.125rem;
    color: var(--de-violet);
    flex-shrink: 0;
}

/* Verified state — matches reference: text-xs text-green-600 font-medium */
.de-card__meta-item--verified {
    color: var(--de-green);
}

.de-card__meta-item--verified iconify-icon {
    color: var(--de-green);
}

/* "Ver perfil" button — matches reference: bg-white text-violet-600 border border-violet-200 w-full py-3 rounded-full font-semibold text-sm hover:bg-violet-600 hover:text-white shadow-sm mt-6 */
.de-card__btn {
    margin-top: 1.5rem;       /* mt-6 */
    width: 100%;
    background: #fff;
    color: var(--de-violet);
    border: 1px solid #ddd6fe; /* border-violet-200 */
    border-radius: 2rem;
    padding: .75rem 1rem;     /* py-3 */
    font-size: .875rem;       /* text-sm */
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
    display: block;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.05); /* shadow-sm */
}

.de-card__btn:hover {
    background: var(--de-violet); /* hover:bg-violet-600 */
    color: #fff;                   /* hover:text-white */
    border-color: var(--de-violet);
    text-decoration: none;
    box-shadow: none;
}

/* ── Shared Buttons ── */
.de-btn-primary {
    background: var(--de-violet);
    color: #fff;
    border: none;
    border-radius: 2rem;
    padding: .875rem 2rem;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    line-height: 1.4;
}

.de-btn-primary:hover { background: var(--de-violet-dark); color: #fff; text-decoration: none; }

.de-btn-outline {
    background: #fff;
    color: var(--de-violet);
    border: 1px solid var(--de-violet-light);
    border-radius: 2rem;
    padding: .875rem 1.5rem;
    font-size: .9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, border-color .2s;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    line-height: 1.4;
}

.de-btn-outline:hover { background: var(--de-violet-soft); border-color: #c4b5fd; color: var(--de-violet); text-decoration: none; }

/* ── Empty State ── */
.de-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--de-gray-500);
}

.de-empty iconify-icon {
    font-size: 3.5rem;
    color: var(--de-gray-200);
    display: block;
    margin: 0 auto 1rem;
}

.de-empty p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* ── Loading ── */
.de-loading {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.de-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--de-violet-light);
    border-top-color: var(--de-violet);
    border-radius: 50%;
    animation: de-spin .7s linear infinite;
}

@keyframes de-spin { to { transform: rotate(360deg); } }

/* ── Modal ── */
/* matches reference: fixed inset-0 z-[100] flex items-end md:items-center justify-center */
.de-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease-out;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .de-modal { align-items: center; }
}

.de-modal.de-modal--open {
    opacity: 1;
    pointer-events: all;
}

/* matches reference: absolute inset-0 bg-gray-900/40 backdrop-blur-sm */
.de-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(17,24,39,.40);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity .2s ease-out;
}

/* matches reference: bg-white w-full h-[100dvh] md:h-auto md:max-h-[90vh] md:max-w-2xl md:rounded-[2.5rem] shadow-2xl */
.de-modal__dialog {
    background: #fff;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border-radius: 0;
    position: relative;
    z-index: 1;
    transform: scale(.95);
    transition: transform .2s ease-out;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); /* shadow-2xl */
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .de-modal__dialog {
        height: auto;
        max-height: 90dvh;
        max-width: 42rem;        /* md:max-w-2xl */
        border-radius: 2.5rem;  /* md:rounded-[2.5rem] */
        transform: scale(.95);
    }
}

.de-modal--open .de-modal__dialog {
    transform: scale(1);
}

/* matches reference: absolute top-4 right-4 md:top-6 md:right-6 w-10 h-10 bg-gray-50 hover:bg-gray-100 text-gray-500 rounded-full */
.de-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--de-gray-50);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: background .15s;
    color: var(--de-gray-500);
    font-size: 1.5rem;
    padding: 0;
}

@media (min-width: 768px) {
    .de-modal__close {
        top: 1.5rem;
        right: 1.5rem;
    }
}

.de-modal__close:hover { background: var(--de-gray-100); }

/* matches reference: flex-1 overflow-y-auto no-scrollbar p-6 pt-16 md:p-10 md:pt-10 */
.de-modal__scroll {
    flex: 1;
    overflow-y: auto;
    padding: 4rem 1.5rem 1.5rem;   /* p-6 pt-16 */
    scrollbar-width: none;
}

@media (min-width: 768px) {
    .de-modal__scroll {
        padding: 2.5rem;           /* md:p-10 */
    }
}

.de-modal__scroll::-webkit-scrollbar { display: none; }

/* Modal Header — matches reference: flex flex-col items-center text-center mb-8 */
.de-modal__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

/* matches reference: w-24 h-24 rounded-full overflow-hidden mb-4 border-2 border-white shadow-sm */
.de-modal__avatar {
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.1);
    margin-bottom: 1.125rem;
    min-width: 7rem;
    min-height: 7rem;
    flex-shrink: 0;
}

.de-modal__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* matches reference: text-2xl font-semibold text-gray-900 tracking-tight mb-2 */
.de-modal__name {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--de-gray-900);
    letter-spacing: -.025em;   /* tracking-tight */
    margin: 0 0 .625rem;
    padding: 0;
}

/* matches reference: flex flex-wrap gap-2 justify-center mb-4 */
.de-modal__cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

/* matches reference: flex flex-col items-center gap-2 */
.de-modal__badges {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
}

/* matches reference: flex items-center gap-1.5 text-xs text-green-600 font-medium */
.de-modal__verified {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--de-green);
}

.de-modal__verified iconify-icon { font-size: 1.125rem; }

/* matches reference: flex items-center gap-1.5 text-xs text-gray-500 font-medium */
.de-modal__location {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--de-gray-500);
}

.de-modal__location iconify-icon { font-size: 1.125rem; color: var(--de-violet); }

/* Modal Sections — matches reference: space-y-8 text-left */
.de-modal__sections { display: flex; flex-direction: column; gap: 1.75rem; text-align: left; }

.de-modal__section {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--de-gray-100);
}

.de-modal__section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* matches reference: text-xs font-semibold uppercase tracking-widest text-gray-400 mb-2 block */
.de-modal__section-title {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #9CA3AF;
    display: block;
    margin-bottom: .625rem;
}

/* matches reference: text-gray-600 text-sm leading-relaxed */
.de-modal__section p {
    font-size: .875rem;
    color: var(--de-gray-600);
    line-height: 1.625;
    margin: 0;
}

.de-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.de-modal__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.de-modal__list li {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: .9rem;
    color: var(--de-gray-600);
}

.de-modal__list li iconify-icon {
    font-size: 1.125rem;
    color: var(--de-gray-400);
    flex-shrink: 0;
    margin-top: .1rem;
}

.de-modal__avail {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    color: var(--de-gray-500);
}

.de-modal__avail iconify-icon { font-size: 1.1rem; color: var(--de-violet); }

.de-modal__social {
    display: flex;
    gap: .625rem;
}

.de-modal__social a {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--de-gray-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--de-gray-400);
    font-size: 1.25rem;
    transition: background .15s, color .15s;
    text-decoration: none;
}

.de-modal__social a:hover {
    background: var(--de-violet-light);
    color: var(--de-violet);
}

/* Modal Footer — matches reference: mt-auto bg-white border-t border-gray-100 p-4 md:p-6 flex flex-col sm:flex-row gap-3 */
.de-modal__footer {
    margin-top: auto;
    background: #fff;
    border-top: 1px solid var(--de-gray-100);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    z-index: 20;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .de-modal__footer {
        flex-direction: row;
        padding: 1.5rem;
    }
}

@media (min-width: 768px) {
    .de-modal__footer {
        padding: 1rem 2.5rem 1.5rem;
    }
}

/* hide footer CTAs only when explicitly empty string */
.de-modal__footer a[href=""] { display: none !important; }

/* ── Primary CTA — Agendar cita ── */
.de-modal__footer .de-btn-primary,
a.de-btn-primary,
button.de-btn-primary {
    flex: 1 !important;
    justify-content: center !important;
    padding: .875rem 1.5rem !important;
    font-size: .875rem !important;
    order: 2 !important;
    background: #7C3AED !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1) !important;
}

.de-modal__footer .de-btn-primary:hover,
a.de-btn-primary:hover,
button.de-btn-primary:hover {
    background: #6d28d9 !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ── Secondary CTA — WhatsApp (outline violeta, sin ícono) ── */
.de-modal__footer .de-btn-outline,
.de-modal__footer .de-btn--wa,
a.de-btn-outline.de-btn--wa,
button.de-btn-outline.de-btn--wa {
    flex: 1 !important;
    justify-content: center !important;
    padding: .875rem 1.5rem !important;
    font-size: .875rem !important;
    order: 1 !important;
    background: #fff !important;
    color: #7C3AED !important;
    border: 1.5px solid #7C3AED !important;
    border-radius: 2rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    box-shadow: none !important;
}

.de-modal__footer .de-btn-outline:hover,
.de-modal__footer .de-btn--wa:hover {
    background: #f5f3ff !important;
    color: #7C3AED !important;
    border-color: #7C3AED !important;
    text-decoration: none !important;
}

/* Ocultar todos los íconos del botón WhatsApp */
.de-btn--wa iconify-icon,
.de-modal__footer .de-btn-outline iconify-icon,
.de-modal__footer .de-btn--wa iconify-icon {
    display: none !important;
}

/* ── Avatar: Initials fallback ── */
.de-card__avatar--initials,
.de-modal__avatar--initials {
    background: var(--de-violet-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.de-avatar-initials {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--de-violet);
    letter-spacing: -.02em;
    line-height: 1;
    font-family: inherit;
    user-select: none;
}

.de-modal__avatar--initials .de-avatar-initials {
    font-size: 1.75rem;
}