/**
 * CentroDolor — Diccionario de Dolor
 * Archivo: assets/lexicon-ui.css
 * Versión: 1.1.1 — mobile-first revisado
 */

/* ── Variables ──────────────────────────────────────────────────────────── */
:root {
  --cdpl-primary   : #1a5276;
  --cdpl-accent    : #2980b9;
  --cdpl-light     : #d6eaf8;
  --cdpl-text      : #2c3e50;
  --cdpl-muted     : #7f8c8d;
  --cdpl-border    : #bdc3c7;
  --cdpl-bg        : #ffffff;
  --cdpl-bg-alt    : #f4f6f7;
  --cdpl-radius    : 6px;
  --cdpl-shadow    : 0 2px 8px rgba(0,0,0,.12);
  --cdpl-font      : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Contenedor raíz ────────────────────────────────────────────────────── */
.cdpl-root {
  font-family  : var(--cdpl-font);
  color        : var(--cdpl-text);
  line-height  : 1.55;
  box-sizing   : border-box;
  width        : 100%;
  max-width    : 100%;
  overflow-x   : hidden;   /* evita scroll horizontal en móvil */
}
.cdpl-root *,
.cdpl-root *::before,
.cdpl-root *::after {
  box-sizing : inherit;
  min-width  : 0;          /* permite que flex/grid achiquen hijos */
}

/* Wrapper interno del glosario */
.cdpl-glosario-wrap {
  width      : 100%;
  max-width  : 100%;
  overflow-x : hidden;
}

/* ── Título del glosario ────────────────────────────────────────────────── */
.cdpl-glosario-title {
  font-size     : 1.4rem;
  margin-bottom : .75rem;
  color         : var(--cdpl-primary);
  word-break    : break-word;
}

/* ── Barra de búsqueda ──────────────────────────────────────────────────── */
.cdpl-search-wrap {
  display        : flex;
  flex-wrap      : wrap;        /* se apila solo, sin media query forzado */
  align-items    : stretch;
  gap            : .5rem;
  margin-bottom  : 1rem;
  width          : 100%;
}
.cdpl-search-input {
  flex           : 1 1 160px;  /* crece, pero tiene mínimo razonable */
  min-width      : 0;
  padding        : .6rem .9rem;
  border         : 1px solid var(--cdpl-border);
  border-radius  : var(--cdpl-radius);
  font-size      : 1rem;       /* 16 px evita zoom en iOS */
  outline        : none;
  transition     : border-color .2s;
  width          : 100%;
}
.cdpl-search-input:focus {
  border-color: var(--cdpl-accent);
}
.cdpl-filter-select {
  flex           : 1 1 120px;  /* crece junto al input si hay espacio */
  min-width      : 0;
  padding        : .6rem .6rem;
  border         : 1px solid var(--cdpl-border);
  border-radius  : var(--cdpl-radius);
  font-size      : .9rem;
  background     : var(--cdpl-bg);
  cursor         : pointer;
  max-width      : 100%;
}

/* ── Contador de resultados ─────────────────────────────────────────────── */
.cdpl-count {
  font-size    : .82rem;
  color        : var(--cdpl-muted);
  margin-bottom: .6rem;
}

/* ── Lista del glosario ─────────────────────────────────────────────────── */
.cdpl-glosario-list {
  display      : grid;
  /* min(260px, 100%) evita que la columna supere el ancho del contenedor */
  grid-template-columns : repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap          : .85rem;
  list-style   : none;
  margin       : 0;
  padding      : 0;
  width        : 100%;
}

/* ── Tarjeta de término ─────────────────────────────────────────────────── */
.cdpl-card {
  background    : var(--cdpl-bg);
  border        : 1px solid var(--cdpl-border);
  border-radius : var(--cdpl-radius);
  padding       : .9rem 1rem;
  cursor        : pointer;
  transition    : box-shadow .2s, border-color .2s;
  width         : 100%;
  overflow      : hidden;      /* contiene hijos desbordantes */
  word-break    : break-word;
  overflow-wrap : break-word;
}
.cdpl-card:hover,
.cdpl-card:focus {
  box-shadow   : var(--cdpl-shadow);
  border-color : var(--cdpl-accent);
  outline      : none;
}

.cdpl-card-header {
  display        : flex;
  align-items    : flex-start;
  gap            : .5rem;
  margin-bottom  : .4rem;
  flex-wrap      : wrap;       /* badge cae abajo si no hay espacio */
}
.cdpl-card-term {
  font-size     : .97rem;
  font-weight   : 600;
  color         : var(--cdpl-primary);
  margin        : 0;
  flex          : 1 1 auto;
  word-break    : break-word;
  overflow-wrap : break-word;
}
.cdpl-card-type {
  font-size     : .68rem;
  font-weight   : 500;
  padding       : .15rem .4rem;
  border-radius : 20px;
  white-space   : nowrap;
  flex-shrink   : 0;
  align-self    : flex-start;
}

/* colores por tipo */
.cdpl-type-medical_term          { background:#d5f5e3; color:#1d8348; }
.cdpl-type-patient_word          { background:#fdebd0; color:#935116; }
.cdpl-type-regionalism           { background:#e8daef; color:#6c3483; }
.cdpl-type-symptom               { background:#d6eaf8; color:#154360; }
.cdpl-type-pain_quality          { background:#d1f2eb; color:#0e6655; }
.cdpl-type-clinical_concept      { background:#ebdef0; color:#512e5f; }
.cdpl-type-misspelling           { background:#fdfefe; color:#717d7e; border:1px solid #bdc3c7; }
.cdpl-type-emotional_impact      { background:#fdedec; color:#922b21; }
.cdpl-type-functional_impact     { background:#fef9e7; color:#7d6608; }
.cdpl-type-sleep_fatigue         { background:#eaf4fb; color:#1a5276; }
.cdpl-type-trigger               { background:#fef5e7; color:#784212; }
.cdpl-type-non_rae_or_colloquial { background:#f9f0ff; color:#4a235a; }
.cdpl-type-seo_keyword           { background:#e8f8f5; color:#0e6655; }

.cdpl-card-def {
  font-size            : .86rem;
  margin               : 0;
  color                : var(--cdpl-text);
  display              : -webkit-box;
  -webkit-line-clamp   : 3;
  -webkit-box-orient   : vertical;
  overflow             : hidden;
}
.cdpl-card-domain {
  display       : inline-block;
  font-size     : .72rem;
  margin-top    : .45rem;
  color         : var(--cdpl-muted);
  background    : var(--cdpl-bg-alt);
  padding       : .1rem .4rem;
  border-radius : var(--cdpl-radius);
  max-width     : 100%;
  word-break    : break-word;
}

/* ── Modal / panel de detalle ───────────────────────────────────────────── */
.cdpl-modal-overlay {
  position        : fixed;
  inset           : 0;
  background      : rgba(0,0,0,.5);
  z-index         : 99999;
  display         : flex;
  align-items     : flex-end;   /* desliza desde abajo en móvil */
  justify-content : center;
  padding         : 0;
  animation       : cdpl-fade-in .15s ease;
  overflow        : hidden;
}
.cdpl-modal {
  background    : var(--cdpl-bg);
  border-radius : var(--cdpl-radius) var(--cdpl-radius) 0 0;
  box-shadow    : 0 -4px 24px rgba(0,0,0,.22);
  width         : 100%;
  max-width     : 100%;
  max-height    : 92vh;
  overflow-y    : auto;
  overflow-x    : hidden;
  padding       : 1.2rem 1rem 2rem;   /* padding-bottom extra para notch */
  position      : relative;
  animation     : cdpl-slide-up .22s ease;
  word-break    : break-word;
  overflow-wrap : break-word;
}
/* Pastilla decorativa (bottom-sheet handle) */
.cdpl-modal::before {
  content       : '';
  display       : block;
  width         : 40px;
  height        : 4px;
  background    : var(--cdpl-border);
  border-radius : 2px;
  margin        : 0 auto .9rem;
}
.cdpl-modal-close {
  position    : absolute;
  top         : 1rem;
  right       : 1rem;
  background  : var(--cdpl-bg-alt);
  border      : none;
  font-size   : 1.1rem;
  width       : 2rem;
  height      : 2rem;
  border-radius : 50%;
  cursor      : pointer;
  color       : var(--cdpl-muted);
  line-height : 2rem;
  text-align  : center;
  display     : flex;
  align-items : center;
  justify-content: center;
  touch-action: manipulation;
}
.cdpl-modal-close:hover { color: var(--cdpl-text); background: var(--cdpl-light); }

.cdpl-modal-title {
  font-size     : 1.2rem;
  font-weight   : 700;
  color         : var(--cdpl-primary);
  margin        : 0 2.5rem .9rem 0;
  word-break    : break-word;
  overflow-wrap : break-word;
}

/* Secciones de la ficha */
.cdpl-section {
  margin-bottom : .9rem;
}
.cdpl-section-label {
  font-size      : .72rem;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : .05em;
  color          : var(--cdpl-muted);
  margin-bottom  : .25rem;
}
.cdpl-section-content {
  font-size : .92rem;
}

/* Sinónimos y términos relacionados */
.cdpl-tags {
  display    : flex;
  flex-wrap  : wrap;
  gap        : .3rem;
  padding    : 0;
  margin     : 0;
  list-style : none;
}
.cdpl-tag {
  font-size     : .78rem;
  padding       : .15rem .5rem;
  border-radius : 20px;
  background    : var(--cdpl-light);
  color         : var(--cdpl-primary);
  word-break    : break-word;
  max-width     : 100%;
}
.cdpl-tag--regional {
  background: #fef9e7;
  color     : #7d6608;
}
.cdpl-tag--missp {
  background: var(--cdpl-bg-alt);
  color     : var(--cdpl-muted);
}

/* Ejemplos de paciente */
.cdpl-examples {
  list-style   : disc;
  padding-left : 1.2rem;
  margin       : 0;
}
.cdpl-examples li {
  font-size    : .87rem;
  margin-bottom: .2rem;
  font-style   : italic;
  word-break   : break-word;
}

/* Nota clínica */
.cdpl-clinical-note {
  background    : var(--cdpl-light);
  border-left   : 3px solid var(--cdpl-primary);
  padding       : .5rem .8rem;
  border-radius : 0 var(--cdpl-radius) var(--cdpl-radius) 0;
  font-size     : .85rem;
  word-break    : break-word;
}

/* ── Tooltip inline ─────────────────────────────────────────────────────── */
.cdpl-tooltip-trigger {
  border-bottom : 1px dashed var(--cdpl-accent);
  cursor        : pointer;
  position      : relative;
}
.cdpl-tooltip-box {
  display       : none;
  position      : absolute;
  bottom        : calc(100% + 6px);
  left          : 50%;
  transform     : translateX(-50%);
  background    : var(--cdpl-primary);
  color         : #fff;
  font-size     : .8rem;
  padding       : .5rem .75rem;
  border-radius : var(--cdpl-radius);
  width         : min(220px, 90vw);   /* nunca supera el viewport */
  z-index       : 9999;
  line-height   : 1.4;
  box-shadow    : var(--cdpl-shadow);
  pointer-events: none;
  word-break    : break-word;
}
.cdpl-tooltip-trigger:hover .cdpl-tooltip-box,
.cdpl-tooltip-trigger:focus .cdpl-tooltip-box {
  display: block;
}

/* ── Definición inline ────────────────────────────────────────────────────*/
.cdpl-def-card {
  display       : inline-flex;
  flex-wrap     : wrap;
  align-items   : center;
  gap           : .4rem;
  background    : var(--cdpl-light);
  border        : 1px solid var(--cdpl-border);
  border-radius : var(--cdpl-radius);
  padding       : .3rem .7rem;
  font-size     : .9rem;
  max-width     : 100%;
  word-break    : break-word;
}
.cdpl-def-card__term { font-weight: 600; color: var(--cdpl-primary); }
.cdpl-def-card__def  { color: var(--cdpl-text); }

/* ── Sin resultados ─────────────────────────────────────────────────────── */
.cdpl-no-results {
  text-align  : center;
  padding     : 2.5rem 1rem;
  color       : var(--cdpl-muted);
  font-size   : .95rem;
}
.cdpl-no-results__icon {
  font-size    : 2.5rem;
  display      : block;
  margin-bottom: .5rem;
}

/* ── Animaciones ────────────────────────────────────────────────────────── */
@keyframes cdpl-fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes cdpl-slide-up { from { transform:translateY(32px); opacity:0; } to { transform:none; opacity:1; } }

/* ── Tablet: modal centrado como tarjeta flotante ───────────────────────── */
@media (min-width: 640px) {
  .cdpl-modal-overlay {
    align-items : center;
    padding     : 1.5rem;
  }
  .cdpl-modal {
    border-radius : var(--cdpl-radius);
    max-width     : 640px;
    padding       : 1.6rem;
  }
  .cdpl-modal::before { display: none; }   /* sin handle en escritorio */
  .cdpl-modal-title   { font-size: 1.35rem; }
}

/* ── Desktop: grid multi-columna ─────────────────────────────────────────── */
@media (min-width: 960px) {
  .cdpl-glosario-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
  .cdpl-search-wrap {
    flex-wrap : nowrap;   /* en desktop queda en una sola fila */
  }
  .cdpl-filter-select {
    flex: 0 0 auto;
    width: auto;
  }
}