/* ═══════════════════════════════════════════════════════════
   DoctorCloud — Directorio médico
   Sistema de tarjetas compartido por el catálogo público
   (/doctores) y el catálogo dentro del sistema
   (/patient/find-doctor, /assistant/find-doctor).

   Portado del diseño de las pantallas `doctores` de la app
   móvil para que web y app se vean como el mismo producto.
   Sólo depende de design-tokens.css, así que hereda modo
   claro/oscuro y el color de marca configurado por el admin.
   ═══════════════════════════════════════════════════════════ */

.dc-dir {
  --dc-soft:        color-mix(in srgb, var(--brand-primary) 9%, var(--color-surface));
  --dc-soft-border: color-mix(in srgb, var(--brand-primary) 24%, transparent);
  --dc-ink:         color-mix(in srgb, var(--brand-primary) 82%, #000);
  --dc-star:        #f59e0b;
  --dc-star-soft:   color-mix(in srgb, #f59e0b 14%, var(--color-surface));
  --dc-radius:      1.25rem;
}

.dark .dc-dir {
  --dc-soft:        color-mix(in srgb, var(--brand-primary) 18%, var(--color-surface-2));
  --dc-ink:         color-mix(in srgb, var(--brand-primary) 65%, #fff);
  --dc-star-soft:   color-mix(in srgb, #f59e0b 18%, var(--color-surface-2));
}

/* ── Grid ─────────────────────────────────────────────────── */
.dc-grid {
  display: grid;
  gap: 1.15rem;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  /* Alto natural: un perfil a medio configurar no debe inflar su tarjeta
     con un hueco vacio para igualar a una completa. */
  align-items: start;
}

@media (max-width: 480px) {
  .dc-grid { grid-template-columns: 1fr; gap: .9rem; }
}

@media (max-width: 460px) {
  .dc-fee { flex-basis: calc(50% - .25rem); min-width: 0; }
}

/* ── Tarjeta ──────────────────────────────────────────────── */
.dc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: 1.1rem 1.1rem 1.1rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--dc-radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1),
              box-shadow .25s cubic-bezier(.4, 0, .2, 1),
              border-color .25s;
}

.dc-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-accent, var(--brand-primary)));
}

.dc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--dc-soft-border);
}

/* Menos peso visual conforme el perfil está menos configurado.
   El orden lo decide el ranking en DoctorProfile::search(); esto
   sólo lo hace legible a simple vista. */
.dc-card[data-completeness="partial"]::before { opacity: .55; }
.dc-card[data-completeness="low"]::before     { opacity: .3; }
.dc-card[data-completeness="low"]             { box-shadow: none; }

/* ── Encabezado ───────────────────────────────────────────── */
.dc-card-top {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.dc-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
}

.dc-avatar {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dc-soft);
  color: var(--brand-primary);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

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

.dc-verified {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary);
  color: #fff;
  font-size: .8rem;
  border: 2px solid var(--color-surface);
}

.dc-card-head { flex: 1; min-width: 0; }

.dc-name-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

.dc-name {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* El nombre navega al perfil. Hereda todo del <p> para que se vea igual que
   antes: la única señal es el color de marca al pasar el cursor. El <button>
   necesita neutralizar el estilo propio del control. */
.dc-name a,
.dc-name-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
}

.dc-name a:hover,
.dc-name a:focus-visible,
.dc-name-link:hover,
.dc-name-link:focus-visible {
  color: var(--brand-primary);
  text-decoration: underline;
}

.dc-specialty {
  margin: .15rem 0 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--brand-primary);
}

.dc-subspecialty {
  margin: .2rem 0 0;
  font-size: .76rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.dc-rating {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--dc-star-soft);
  color: var(--dc-star);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
}

.dc-rating-empty {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
  font-weight: 700;
}

.dc-meta {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .55rem;
  font-size: .76rem;
  color: var(--color-text-muted);
  min-width: 0;
}

.dc-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Separacion entre el segundo dato (duracion) y el primero (ubicacion). */
.dc-meta .icon + span { margin-right: .45rem; }
.dc-meta > span:last-child { margin-right: 0; }

.dc-fee-value { white-space: nowrap; }

/* ── Cuerpo ───────────────────────────────────────────────── */
.dc-bio {
  margin: 0;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.dc-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  max-width: 100%;
  padding: .28rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--dc-soft);
  border: 1px solid var(--dc-soft-border);
  color: var(--dc-ink);
  font-size: .71rem;
  font-weight: 700;
  line-height: 1.2;
}

.dc-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dc-tag-muted {
  background: var(--color-surface-3);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* ── Tarifas ──────────────────────────────────────────────── */
.dc-fees {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.dc-fee {
  flex: 1 1 92px;
  min-width: 92px;
  padding: .5rem .6rem;
  border-radius: .8rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.dc-fee-label {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dc-fee-value {
  margin-top: .15rem;
  font-size: .88rem;
  font-weight: 800;
  color: var(--color-text);
}

.dc-fee-value small {
  font-size: .66rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.dc-fee-empty .dc-fee-value {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: .76rem;
}

/* ── Mapa del consultorio ─────────────────────────────────── */
.dc-map-wrap { margin-top: .9rem; }

.dc-map {
  width: 100%;
  height: 190px;
  border-radius: .8rem;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.dc-map-note {
  display: flex;
  align-items: flex-start;
  gap: .35rem;
  margin: .45rem 0 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── Anticipo ─────────────────────────────────────────────── */
/* Se muestra sólo cuando la plataforma cobra un anticipo parcial: es la
   señal de "no tienes que pagar todo por adelantado" para el paciente que
   llega del directorio sin conocer al médico. */
.dc-deposit {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: .55rem 0 0;
  padding: .45rem .65rem;
  border-radius: .7rem;
  border: 1px dashed var(--brand-primary, #0066CC);
  background: var(--dc-soft, rgba(0, 102, 204, .06));
  color: var(--color-text);
  font-size: .78rem;
  line-height: 1.4;
}

.dc-deposit strong {
  font-weight: 800;
  color: var(--brand-primary, #0066CC);
}

/* ── Pie ──────────────────────────────────────────────────── */
.dc-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .15rem;
}

.dc-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .6rem;
  border-radius: var(--radius-pill);
  background: var(--dc-soft);
  color: var(--brand-primary);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

.dc-chip-muted {
  background: var(--color-surface-3);
  color: var(--color-text-muted);
}

.dc-card-actions {
  display: flex;
  gap: .5rem;
  margin-left: auto;
}

.dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .85rem;
  border-radius: .7rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.dc-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.dc-btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 32%, transparent);
}

.dc-btn-primary:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: #fff;
}

.dc-btn-block { width: 100%; }

/* ── Buscador ─────────────────────────────────────────────── */
.dc-searchbar {
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(200px, 1.4fr) minmax(140px, 1fr) minmax(130px, 1fr) minmax(110px, .8fr) auto;
  align-items: end;
}

@media (max-width: 900px) {
  .dc-searchbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dc-searchbar .dc-field-wide { grid-column: 1 / -1; }
  .dc-searchbar .dc-field-submit { grid-column: 1 / -1; }
}

@media (max-width: 460px) {
  .dc-searchbar { grid-template-columns: minmax(0, 1fr); }
}

/* Casilla de filtro suelta bajo la barra de busqueda. La usan el catalogo
   publico y el interno, por eso vive aqui y no en el <style> de una vista. */
.dir-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: .85rem;
  padding: .4rem .75rem .4rem .55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, background .2s;
}

.dir-toggle:hover { border-color: var(--brand-primary); }

.dir-toggle input { margin: 0; cursor: pointer; }

.dir-toggle:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--dc-soft, rgba(0, 102, 204, .08));
  color: var(--brand-primary);
}

/* Sin esto el ancho por defecto de un <input> (~20 caracteres) fija el
   minimo de su columna y desborda el contenedor en moviles. */
.dc-field { min-width: 0; }

.dc-field label {
  display: block;
  margin-bottom: .3rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dc-input {
  width: 100%;
  min-width: 0;
  padding: .65rem .8rem;
  border-radius: .75rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: .875rem;
  font-family: inherit;
  transition: var(--transition-smooth);
}

.dc-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-20);
  background: var(--color-surface);
}

/* ── Rail de especialidades ───────────────────────────────── */
.dc-rail {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: thin;
}

.dc-rail::-webkit-scrollbar { height: 5px; }
.dc-rail::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.dc-rail-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.dc-rail-chip:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.dc-rail-chip[aria-current="true"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.dc-rail-chip small {
  font-size: .68rem;
  opacity: .7;
  font-weight: 700;
}

/* ── Estado vacío ─────────────────────────────────────────── */
.dc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--dc-radius);
  background: var(--color-surface-2);
}

.dc-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 24px;
  background: var(--dc-soft);
  color: var(--brand-primary);
  font-size: 2rem;
}

.dc-empty h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
}

.dc-empty p {
  margin: 0;
  max-width: 46ch;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ── Paginación ───────────────────────────────────────────── */
.dc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.75rem;
}

.dc-page {
  min-width: 38px;
  padding: .45rem .7rem;
  border-radius: .65rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.dc-page:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.dc-page[aria-current="page"] {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* ── Perfil ───────────────────────────────────────────────── */
.dc-profile-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .95fr);
  align-items: start;
}

@media (max-width: 900px) {
  .dc-profile-grid { grid-template-columns: 1fr; }
}

.dc-panel {
  padding: 1.35rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--dc-radius);
  box-shadow: var(--shadow-sm);
}

.dc-panel + .dc-panel { margin-top: 1.25rem; }

.dc-panel-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .85rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .6rem;
}

.dc-stat {
  padding: .8rem .6rem;
  text-align: center;
  border-radius: 1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}

.dc-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: .35rem;
  border-radius: 12px;
  background: var(--dc-soft);
  color: var(--brand-primary);
  font-size: 1.05rem;
}

.dc-stat-value {
  margin: 0;
  font-size: .9rem;
  font-weight: 800;
  color: var(--color-text);
}

.dc-stat-label {
  margin: .1rem 0 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.dc-review {
  padding: .85rem 0;
  border-top: 1px solid var(--color-border);
}

.dc-review:first-of-type { border-top: none; padding-top: 0; }

.dc-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .3rem;
}

.dc-review-name {
  margin: 0;
  font-size: .82rem;
  font-weight: 800;
  color: var(--color-text);
}

.dc-review-comment {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* Señal de que la opinión viene de una cita realmente atendida en la
   plataforma, no de un comentario espontáneo. */
.dc-review-verified {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .12rem .45rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .1);
  color: #16a34a;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
}

.dc-review-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .3rem;
}

.dc-review-date {
  font-size: .7rem;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.dc-schedule {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.dc-schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .7rem;
  border-radius: .7rem;
  background: var(--color-surface-2);
  font-size: .8rem;
}

.dc-schedule-day {
  font-weight: 700;
  color: var(--color-text);
}

.dc-schedule-hours {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-weight: 600;
}