/**
 * Centro Dolor — Seguimiento · Estilos del portal del médico (v1.1.0)
 * Frontend autónomo: incluye estilos base de controles (botón, tabla)
 * y un ajuste responsive cuidado para móvil.
 */

.cdseg-portal { max-width: 1000px; margin: 0 auto; color: #1d2327; font-size: 15px; line-height: 1.5; }
.cdseg-portal *, .cdseg-portal *::before, .cdseg-portal *::after { box-sizing: border-box; }

/* ── Botones ── */
.cdseg-btn {
  display: inline-block; background: #f0f0f5; border: 1px solid #c3c4c7; color: #1d2327;
  border-radius: 6px; padding: 8px 15px; font-size: 14px; line-height: 1.4; cursor: pointer;
  text-decoration: none; vertical-align: middle; transition: background .15s, border-color .15s;
}
.cdseg-btn:hover { background: #e6e6f2; border-color: #a7a9c0; color: #1d2327; }
.cdseg-btn-primary { background: #100680; border-color: #100680; color: #fff; }
.cdseg-btn-primary:hover { background: #0b0560; border-color: #0b0560; color: #fff; }
.cdseg-btn-ghost { background: transparent; border-color: #c8c8d8; color: #555; }
.cdseg-btn-ghost:hover { background: #f2f2f8; }
.cdseg-btn-small { padding: 4px 10px; font-size: 12.5px; border-radius: 5px; }
.cdseg-btn-hero { padding: 11px 22px; font-size: 15px; font-weight: 600; }
.cdseg-btn-block { display: block; width: 100%; }
.cdseg-btn[disabled] { opacity: .55; cursor: default; }
.cdseg-wa-btn { color: #1da851 !important; border-color: #1da851 !important; }

/* ── Login (solo usuario y clave) ── */
.cdseg-login {
  max-width: 360px; margin: 24px auto; background: #fff; border: 1px solid #e2e2ee;
  border-radius: 12px; padding: 26px 24px; box-shadow: 0 8px 28px rgba(16,6,128,.08);
}
.cdseg-login-form { display: flex; flex-direction: column; gap: 12px; }
.cdseg-login-err { color: #c0392b; font-size: 13px; margin: 0; }

/* ── Campos ── */
.cdseg-input {
  padding: 9px 12px; border: 1px solid #c3c4c7; border-radius: 6px; font-size: 14px;
  width: 100%; font-family: inherit; background: #fff; color: #1d2327;
}
.cdseg-input:focus { border-color: #100680; outline: 2px solid rgba(16,6,128,.12); }
.cdseg-grow { flex: 1 1 auto; }
.cdseg-label { font-size: 12.5px; color: #555; font-weight: 600; margin-bottom: 3px; display: block; }
.cdseg-field-row { margin: 8px 0; }
.cdseg-form-actions { margin-top: 16px; gap: 8px; }
.cdseg-h2 { font-size: 16px; color: #100680; margin: 16px 0 10px; }
.cdseg-hint { color: #777; font-size: 13px; margin: 8px 0; }

/* ── Cabecera tras login ── */
.cdseg-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #100680; color: #fff; border-radius: 10px; padding: 12px 18px; margin-bottom: 4px;
}
.cdseg-head-id { display: flex; flex-direction: column; min-width: 0; }
.cdseg-head-name { font-weight: 700; font-size: 15.5px; }
.cdseg-head-spec { font-size: 12.5px; opacity: .85; }
.cdseg-head .cdseg-btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; flex: 0 0 auto; }
.cdseg-head .cdseg-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* ── Aviso clave por defecto ── */
.cdseg-warn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: #fff7e6; border: 1px solid #f5d48a; border-left: 4px solid #dba617;
  border-radius: 8px; padding: 10px 16px; margin: 10px 0; font-size: 13.5px; color: #7a5b00;
}

/* ── Perfil ── */
.cdseg-profile { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.cdseg-photo {
  width: 110px; height: 110px; border-radius: 14px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid #e2e2ee; background: #f4f4fb;
}
.cdseg-profile-info { flex: 1 1 280px; min-width: 0; }
.cdseg-profile-name { margin: 0 0 2px; color: #100680; font-size: 22px; }
.cdseg-profile-spec { margin: 0 0 12px; color: #666; font-size: 14.5px; }
.cdseg-profile-rows { display: flex; flex-direction: column; gap: 4px; }
.cdseg-field { display: flex; gap: 10px; font-size: 13.5px; }
.cdseg-field-l { color: #888; min-width: 150px; }
.cdseg-field-v { color: #1d2327; font-weight: 600; }
.cdseg-profile-bio { margin: 12px 0; color: #444; font-size: 13.5px; border-left: 3px solid #e2e2ee; padding-left: 12px; }
.cdseg-profile-actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ════ Panel de prescripción (clases cdrx-*) ════ */
.cdrx-tabs { display: flex; gap: 6px; margin: 14px 0 0; border-bottom: 2px solid #100680; }
.cdrx-tab {
  background: #f0f0f5; border: 1px solid #ddd; border-bottom: none; cursor: pointer;
  padding: 9px 16px; font-size: 14px; border-radius: 6px 6px 0 0; color: #444; white-space: nowrap;
}
.cdrx-tab-active { background: #100680; color: #fff; border-color: #100680; font-weight: 600; }
.cdrx-panel { background: #fff; border: 1px solid #ddd; border-top: none; padding: 18px 20px 24px; border-radius: 0 0 8px 8px; }

.cdrx-form h2 { font-size: 15px; margin: 18px 0 8px; color: #100680; }
.cdrx-row { display: flex; gap: 10px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.cdrx-grow { flex: 1 1 auto; }
.cdrx-help { color: #777; font-size: 12.5px; margin: 4px 0 10px; }
.cdrx-submit-row { margin-top: 18px; }

.cdrx-search-results { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.cdrx-result-item { text-align: left; background: #f8f8fc; border: 1px solid #e0e0ee; border-radius: 5px; padding: 7px 12px; cursor: pointer; font-size: 13.5px; }
.cdrx-result-item:hover { background: #eef0ff; border-color: #100680; }
.cdrx-domain { float: right; font-size: 11px; background: #e8e9f5; color: #100680; border-radius: 10px; padding: 1px 9px; margin-left: 8px; }

.cdrx-chosen { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.cdrx-chosen-row { display: flex; align-items: center; gap: 10px; background: #f4f6ff; border: 1px solid #d5d9f2; border-left: 4px solid #100680; border-radius: 6px; padding: 8px 12px; }
.cdrx-chosen-name { flex: 1 1 auto; font-size: 13.5px; min-width: 0; }
.cdrx-freq { padding: 5px 8px; border-radius: 5px; border: 1px solid #c3c4c7; font-family: inherit; }
.cdrx-remove { background: none; border: none; color: #c0392b; font-size: 15px; cursor: pointer; padding: 2px 8px; border-radius: 4px; flex: 0 0 auto; }
.cdrx-remove:hover { background: #fdeaea; }
.cdrx-muted { color: #888; font-weight: normal; font-size: 12.5px; }
.cdrx-empty { color: #999; font-style: italic; font-size: 13px; }

.cdrx-banner { background: #eef7ff; border: 1px solid #bcd9f5; border-left: 4px solid #2271b1; border-radius: 6px; padding: 4px 14px; margin: 12px 0; font-size: 13px; word-break: break-word; }
.cdrx-banner-warn { background: #fef8ee; border-color: #f5d8a8; border-left-color: #dba617; }
.cdrx-banner code { word-break: break-all; }
.cdrx-settings { margin-top: 22px; border-top: 1px dashed #ddd; padding-top: 10px; }
.cdrx-settings summary { cursor: pointer; color: #555; font-size: 13px; }

.cdrx-success { background: #f0faf2; border: 1.5px solid #27ae60; border-radius: 8px; padding: 14px 18px; margin-top: 16px; }
.cdrx-success h3 { margin: 0 0 10px; color: #1e8449; }
.cdrx-actions { margin-top: 10px; }

.cdrx-chip { display: inline-block; background: #eef0ff; border: 1px solid #d5d9f2; color: #100680; border-radius: 12px; padding: 1px 10px; font-size: 11.5px; margin: 1px 2px 1px 0; white-space: nowrap; }
.cdrx-chip em { color: #777; font-style: normal; font-size: 10.5px; }
.cdrx-chip-archived { background: #f5e9e9; color: #a33; border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.cdrx-archived td { opacity: 0.6; }
.cdrx-row-actions { white-space: nowrap; }
.cdrx-row-actions .cdseg-btn { margin: 1px 3px 1px 0; }

/* Tabla con contenedor desplazable horizontal (clave para móvil) */
.cdrx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0; }
.cdrx-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e3e3ef; border-radius: 6px; overflow: hidden; font-size: 13.5px; }
.cdrx-table th, .cdrx-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #eee; vertical-align: top; }
.cdrx-table thead th { background: #f6f7ff; color: #100680; font-weight: 600; white-space: nowrap; }
.cdrx-table tbody tr:nth-child(odd) { background: #fafaff; }

/* Evolución */
.cdrx-evo-card { background: #fbfbfe; border: 1px solid #e3e3ef; border-radius: 8px; padding: 12px 16px; margin: 14px 0; }
.cdrx-evo-card h3 { margin: 2px 0 6px; font-size: 14.5px; }
.cdrx-evo-table { margin-top: 8px; }
.cdrx-chart-wrap { background: #fff; border: 1px solid #e8e8f2; border-radius: 6px; padding: 8px; margin: 8px 0; }
.cdrx-chart { width: 100%; height: auto; display: block; }
.cdrx-notes { background: #fffbe9; border-left: 3px solid #dba617; padding: 6px 12px; border-radius: 4px; font-size: 13px; color: #555; }

.cdrx-answers { padding: 6px 4px; }
.cdrx-answer-line { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; padding: 4px 6px; border-bottom: 1px dotted #e5e5ee; }
.cdrx-q { color: #555; }
.cdrx-a { color: #100680; font-weight: 600; white-space: nowrap; }

/* ── Toast (global, fuera del root) ── */
.cdrx-toast {
  position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 16px);
  background: #1e8449; color: #fff; padding: 10px 22px; border-radius: 6px;
  font-size: 14px; opacity: 0; transition: all .3s ease; z-index: 99999; box-shadow: 0 4px 18px rgba(0,0,0,.25);
  max-width: 90vw; text-align: center;
}
.cdrx-toast-err { background: #c0392b; }
.cdrx-toast-show { opacity: 1; transform: translate(-50%, 0); }

/* ════════════════════ RESPONSIVE — MÓVIL ════════════════════ */
@media (max-width: 600px) {
  .cdseg-portal { font-size: 14.5px; }

  /* Evita el zoom automático de iOS al enfocar campos */
  .cdseg-input, .cdrx-freq { font-size: 16px; }

  /* Cabecera: nombre arriba, botón alineado a la izquierda */
  .cdseg-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .cdseg-head .cdseg-btn-ghost { align-self: flex-start; }

  /* Aviso de clave: en columna */
  .cdseg-warn { flex-direction: column; align-items: flex-start; }

  /* Pestañas: una fila con desplazamiento horizontal */
  .cdrx-tabs { gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .cdrx-tab { padding: 8px 12px; font-size: 13px; flex: 0 0 auto; }

  .cdrx-panel { padding: 14px 13px 20px; }
  .cdrx-row { gap: 8px; }

  /* Perfil: foto más pequeña, datos en bloque */
  .cdseg-profile { gap: 14px; }
  .cdseg-photo { width: 88px; height: 88px; }
  .cdseg-profile-name { font-size: 19px; }
  .cdseg-field { flex-direction: column; gap: 0; }
  .cdseg-field-l { min-width: 0; }

  /* Botones de acción de la tabla: que se acomoden en varias líneas */
  .cdrx-row-actions { white-space: normal; }
  .cdrx-table { font-size: 12.5px; min-width: 540px; }

  .cdseg-login { margin: 12px auto; padding: 22px 18px; }
}

/* ══════════════════════════════════════════════════════════════════
   Corrección de contraste — texto blanco sobre fondos azules del portal
   (evita que el tema imponga texto negro).
   ══════════════════════════════════════════════════════════════════ */
.cdseg-head,
.cdseg-head .cdseg-head-name,
.cdseg-head .cdseg-head-spec,
.cdseg-head .cdseg-btn-ghost { color: #fff !important; }
.cdrx-tab-active { color: #fff !important; }
.cdseg-btn-primary { color: #fff !important; }

/* ── Explorador de escalas: categorías / listado completo ── */
.cdrx-browse-controls { gap: 8px; margin-top: 4px; }
.cdrx-browse { margin: 8px 0; }
.cdrx-browse-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: #f4f6ff; border: 1px solid #d5d9f2; border-radius: 7px; padding: 7px 12px; margin-bottom: 8px;
}
.cdrx-browse-title { font-weight: 600; color: #100680; font-size: 13.5px; }
.cdrx-cat-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.cdrx-cat-chip {
  background: #eef0ff; border: 1px solid #d5d9f2; color: #100680; border-radius: 14px;
  padding: 5px 13px; font-size: 13px; cursor: pointer; transition: background .15s, color .15s;
}
.cdrx-cat-chip:hover { background: #100680; color: #fff; }
.cdrx-cat-chip em { font-style: normal; opacity: .6; font-size: 11px; margin-left: 3px; }
.cdrx-browse-back { align-self: flex-start; margin-bottom: 6px; }
.cdrx-browse-list { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.cdrx-browse-group {
  font-weight: 700; color: #555; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .03em; margin: 10px 0 2px; padding-bottom: 2px; border-bottom: 1px solid #eee;
}
.cdrx-result-added { background: #eafaf1 !important; border-color: #27ae60 !important; }
.cdrx-added-tag { color: #1e8449; font-size: 11px; font-weight: 700; float: right; }