/* Espacio profesional como herramienta personal: movimiento suave, ficha compacta, una acción clara por cita,
   calendario táctil, buscador rápido y formularios como hoja inferior en celular. Usa solo la paleta y los componentes
   existentes. Los formularios se dibujan en #modalRoot, fuera de #professionalApp: sus reglas usan los colores directos. */

@keyframes pFlowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pSheetIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

#professionalApp .ux-enter { animation: pFlowIn .28s cubic-bezier(.2, .7, .2, 1) both; }
#professionalApp .p-btn { transition: background .15s, transform .12s, box-shadow .15s; }
#professionalApp .p-btn:active { transform: scale(.98); }
#professionalApp .p-btn.primary:hover { box-shadow: 0 6px 18px #173c4422; }
.p-modal { animation: pSheetIn .22s cubic-bezier(.2, .7, .2, 1) both; }

/* Cita en atención: acento dorado, sin cambiar la paleta */
#professionalApp .ux-appt.is-2 { border-left-color: var(--gold); }

/* Ficha: una sola franja con contexto y vuelta */
.ux-patient-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ux-patient-top .p-kicker { margin: 0; }
/* Nota de recepción: contexto de lectura junto a la cita */
#professionalApp .ux-reception { margin: 0; padding: 12px 14px; border-radius: 10px; background: #f8fbfa; border-left: 3px solid #b9d6cc; font-size: 14px; }
.ux-reception strong { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }

/* Buscador en la barra superior */
#professionalApp .ux-find-btn { justify-content: flex-start; min-width: 230px; color: var(--muted); font-weight: 600 !important; }
.ux-find-btn kbd { margin-left: auto; font: inherit; font-size: 11px; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }

/* Buscador rápido */
.p-modal.ux-find { width: min(580px, 100%); }
.p-modal.ux-find .p-card-head { margin-bottom: 12px; }
.p-modal.ux-find .p-error { display: none; }
.ux-find #uxFind { min-height: 50px; font-size: 16px; border-radius: 12px; }
.ux-find-list { margin-top: 6px; max-height: 54dvh; overflow-y: auto; overscroll-behavior: contain; }
.ux-find-group { margin: 16px 0 4px; }
.ux-find-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; border: 0; background: none; padding: 10px; border-radius: 10px; min-height: 54px; color: #173c44; font: inherit; cursor: pointer; transition: background .12s; }
.ux-find-item:hover, .ux-find-item:focus-visible { background: #edf4f2; }
.ux-find-item:focus-visible { outline: 3px solid #c89962; outline-offset: -3px; }
.ux-find-item span { min-width: 0; }
.ux-find-item strong { display: block; font-size: 15px; }
.ux-find-item small { display: block; font-size: 13px; color: #657e83; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ux-find-item .p-tag { flex: none; }

/* Calendario: franja de días con toque directo, pensada para el pulgar */
.ux-cal { padding: 16px 18px; }
.ux-cal-bar { display: flex; align-items: center; gap: 10px; }
.ux-cal-title { flex: 1; min-width: 0; text-align: center; }
.ux-cal-title strong { display: block; font-size: 16px; }
.ux-cal-title span { font-size: 12px; color: var(--muted); }
#professionalApp .ux-icon { min-width: 44px; min-height: 44px; padding: 0; font-size: 22px !important; line-height: 1; }
.ux-strip { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
.ux-strip::-webkit-scrollbar { display: none; }
.ux-day { flex: 1 0 66px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 4px; min-height: 80px; color: #173c44; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .12s; }
.ux-day:hover { border-color: #b9cbc8; }
.ux-day:active { transform: scale(.97); }
.ux-day span { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; color: var(--muted); }
.ux-day b { font-size: 20px; line-height: 1.1; }
.ux-day small { font-size: 10px !important; font-weight: 700; color: var(--muted); }
.ux-day.active { background: #173c44; border-color: #173c44; color: #fff; }
.ux-day.active span, .ux-day.active small { color: #fff; opacity: .8; }
.ux-cal-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.ux-cal-tools .ux-cal-date { flex: 1 1 160px; min-width: 0; }
.ux-cal-tools .ux-cal-date .p-input { width: 100%; min-height: 44px; }
.ux-cal-tools .p-btn { min-height: 44px; }
.ux-wide-only { display: flex; gap: 8px; }
/* La semana completa en una sola fila: siete días */
#professionalApp .p-week { grid-template-columns: repeat(7, minmax(140px, 1fr)); }

@media (max-width: 1150px) {
  .ux-find-btn kbd { display: none; }
  #professionalApp .ux-find-btn { min-width: 150px; }
  /* Barra superior en tablet: la fecha ya está en el encabezado de la página; el título queda en una línea */
  #professionalApp .p-top .p-desktop-only { display: none; }
  #professionalApp .p-top-title { min-width: 0; }
  #professionalApp .p-top-title strong, #professionalApp .p-top-title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #professionalApp .p-head { flex-wrap: wrap; }
  #professionalApp .p-head .p-actions { flex-wrap: nowrap; }
}

@media (max-width: 700px) {
  /* Buscador: solo ícono en la barra y panel anclado arriba, para que el teclado no lo tape */
  .ux-find-btn span { display: none; }
  #professionalApp .ux-find-btn { min-width: 42px; justify-content: center; }
  .p-modal-back.ux-find-back { place-items: start stretch; padding: 0; }
  .p-modal-back.ux-find-back .p-modal { border-radius: 0 0 20px 20px; padding: 14px 16px 18px; max-height: 88dvh; }
  .ux-find-list { max-height: calc(88dvh - 150px); }

  /* Formularios como hoja inferior, más fáciles de usar con el pulgar */
  .p-modal-back:not(.ux-find-back) { place-items: end stretch; padding: 0; }
  .p-modal-back:not(.ux-find-back) .p-modal { width: 100%; max-height: 90dvh; border-radius: 20px 20px 0 0; padding: 12px 20px calc(22px + env(safe-area-inset-bottom)); }
  .p-modal-back:not(.ux-find-back) .p-modal::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 5px; background: #dfe8e7; margin: 0 auto 14px; }
  .p-modal .p-actions .p-btn { flex: 1; min-height: 48px; }

  /* Las notificaciones aparecen por encima de la barra inferior */
  body.professional-mode .toast { left: 12px; right: 12px; bottom: 86px; text-align: center; }

  .ux-patient-top { margin-bottom: 14px; }
  .ux-wide-only { display: none; }
  .ux-cal { padding: 14px 12px; }
  .ux-day { flex-basis: 58px; min-height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  #professionalApp .ux-enter, .p-modal { animation: none; }
  #professionalApp .p-btn, .ux-day, .ux-find-item { transition: none; }
}

/* Aviso de próxima cita: tarjeta que aparece sola, como un aviso del teléfono. Vive fuera de #professionalApp */
@keyframes pPushIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
#uxPush { position: fixed; top: 92px; right: 18px; width: min(390px, calc(100% - 28px)); z-index: 70; color: #173c44; }
body:not(.professional-mode) #uxPush { display: none; }
.ux-push { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #dfe8e7; border-radius: 16px; padding: 14px; box-shadow: 0 18px 40px #132b3240; animation: pPushIn .28s cubic-bezier(.2, .7, .2, 1) both; }
.ux-push-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #112f36; color: #d4ae80; display: grid; place-items: center; }
.ux-push-icon svg { width: 24px; height: 24px; }
.ux-push-body { flex: 1; min-width: 0; }
.ux-push-body small { display: block; font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; color: #926b40; }
.ux-push-body strong { display: block; font-size: 16px; line-height: 1.3; margin-top: 2px; }
.ux-push-body span { display: block; font-size: 13px; color: #657e83; margin-top: 2px; }
.ux-push-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ux-push-actions .p-btn { min-height: 40px; padding: 8px 14px; }
.ux-push-x { flex: none; width: 32px; height: 32px; border: 0; background: none; color: #657e83; font-size: 22px; line-height: 1; border-radius: 8px; cursor: pointer; }
.ux-push-x:hover { background: #edf4f2; }
.ux-device { border-bottom: 0; flex-wrap: wrap; }

@media (max-width: 700px) {
  #uxPush { top: 8px; right: 8px; left: 8px; width: auto; }
  .ux-push-actions .p-btn { flex: 1; }
  .ux-device .p-actions { width: 100%; }
  .ux-device .p-actions .p-btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .ux-push { animation: none; } }

/* Ficha del paciente: alertas siempre visibles y resumen por secciones */
.ux-alerts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ux-alerts .p-tag { font-size: 13px !important; padding: 5px 10px; }
.ux-index { display: none; }
.ux-summary .p-card { scroll-margin-top: 96px; }
.ux-facts { margin: 0; }
.ux-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ux-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ux-facts dt { font-size: 13px; color: var(--muted); }
.ux-facts dd { margin: 0; font-size: 15px; font-weight: 600; }
.ux-facts dd.alert { color: #a34854; }
#professionalApp .ux-sub { margin: 22px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); }
.ux-more { margin-top: 12px; }
.ux-note-add { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 6px; }
.ux-note-add textarea { flex: 1; min-width: 0; font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid #cbdcda; border-radius: 10px; color: #274d52; background: #fff; resize: vertical; }
.ux-note-item { padding: 13px 0; border-bottom: 1px solid var(--line); }
.ux-note-item:last-of-type { border-bottom: 0; }
#professionalApp .ux-note-item p { margin: 0 0 4px; font-size: 15px; }
.ux-note-item small { color: var(--muted); }
.ux-doc { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.ux-doc small { color: var(--muted); font-weight: 400; white-space: nowrap; }

@media (max-width: 700px) {
  /* Índice del resumen: salta a cada sección sin recorrer toda la ficha */
  .ux-index { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px 4px; scrollbar-width: none; }
  .ux-index::-webkit-scrollbar { display: none; }
  #professionalApp .ux-index .p-btn { flex: none; min-height: 38px; padding: 6px 12px; border-color: var(--line); background: #fff; }
  .ux-facts > div { grid-template-columns: 116px minmax(0, 1fr); }
  .ux-note-add { flex-direction: column; align-items: stretch; }
}

/* Valoración: motivo de consulta, diagnóstico y plan propuesto junto a la evolución */
.ux-assess { display: grid; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
#professionalApp .ux-reason { margin: 0; padding: 12px 14px; border-radius: 10px; background: #f8fbfa; font-size: 15px; }
.ux-reason strong { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.ux-assess label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.ux-assess input { font: inherit; font-weight: 400; padding: 11px 12px; border: 1px solid #cbdcda; border-radius: 8px; color: #274d52; background: #fff; min-width: 0; width: 100%; }

/* Mi día: las cifras son contexto, no protagonistas. Una línea discreta sobre el paciente que requiere atención */
#professionalApp .p-stats { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: -6px 0 18px; }
#professionalApp .p-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--muted); text-align: left; cursor: pointer; }
#professionalApp .p-stat strong { display: inline; margin: 0; font-size: 13px; font-weight: 800; color: var(--ink); }
#professionalApp .p-stat span { font-size: 13px; }
#professionalApp .p-stat:hover span { text-decoration: underline; }

/* Aviso de llegada: compacto y pasajero */
.ux-push.is-arrival { align-items: center; padding: 12px 14px; }
.ux-push.is-arrival .ux-push-icon { width: 34px; height: 34px; border-radius: 10px; }
.ux-push.is-arrival .ux-push-icon svg { width: 20px; height: 20px; }
.ux-push.is-arrival .ux-push-body strong { margin-top: 0; font-size: 15px; }
.ux-push.is-arrival .ux-push-actions { margin-top: 10px; }

/* Consulta de hoy: un encabezado compacto, el motivo y el contexto a la izquierda, la evolución como superficie de trabajo */
#professionalApp .ux-patient-top { justify-content: flex-start; margin: -10px 0 4px; }
.ux-patient-top .p-btn { min-height: 34px; padding: 4px 10px 4px 2px; }
.ux-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 14px 18px; margin-bottom: 12px; }
.ux-head-row { display: flex; align-items: center; gap: 14px; }
.ux-head h2 { font-size: 21px; letter-spacing: -.5px; margin: 0 0 2px; }
#professionalApp .ux-head p { margin: 0; font-size: 14px; line-height: 1.4; }
#professionalApp .ux-head .ux-alerts { margin-top: 0; justify-content: flex-end; }
#professionalApp .p-clinical-tabs { margin-bottom: 10px; padding-bottom: 2px; }
.ux-consult { display: grid; gap: 22px; }
.ux-consult-main { display: grid; gap: 22px; align-content: start; }
#professionalApp .ux-label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
#professionalApp .ux-motive { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.38; letter-spacing: -.3px; }
.ux-bullets { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.6; }
.ux-bullets li::marker { color: var(--gold); }
.ux-consult-main .ux-reception { margin-top: 12px; }
.ux-today-evo { border: 1px solid #cfe0db; border-radius: 16px; background: #fff; padding: 16px 18px; box-shadow: 0 6px 24px #153e4410; }
.ux-today-evo.is-idle, .ux-today-evo.is-done { background: #f8fbfa; box-shadow: none; }
#professionalApp .ux-evo-title { display: block; margin: 0 0 8px; font-size: 17px; font-weight: 800; letter-spacing: -.3px; }
.ux-today-evo textarea { display: block; width: 100%; min-height: 124px; resize: vertical; font: inherit; font-size: 15px; line-height: 1.55; color: #274d52; background: #fff; border: 1px solid #cbdcda; border-radius: 12px; padding: 12px 14px; }
.ux-today-evo textarea:focus { outline: none; border-color: #8fb9b0; box-shadow: 0 0 0 3px #468f8122; }
.ux-plan { margin-top: 6px; }
.ux-plan summary { cursor: pointer; padding: 6px 0; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ux-plan-body { display: grid; gap: 14px; padding: 8px 0 2px; }
#professionalApp .ux-plan-body h4 { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.ux-plan-body ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; }
.ux-plan-body li::marker { color: var(--gold); }
.ux-evo-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ux-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.ux-dot { width: 7px; height: 7px; border-radius: 50%; background: #2f7d70; transition: background .2s; }
.ux-hint.is-saving .ux-dot { background: var(--gold); }
.ux-evo-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ux-today-evo .p-error:empty { display: none; }
#professionalApp .ux-saved { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.ux-today-evo p { margin: 0 0 10px; }

@media (min-width: 1000px) {
  .ux-consult { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
}
@media (max-width: 700px) {
  #professionalApp .ux-patient-top { margin: -8px 0 2px; }
  .ux-head { padding: 14px; gap: 10px; }
  .ux-head h2 { font-size: 19px; }
  #professionalApp .ux-head .ux-alerts { justify-content: flex-start; }
  .ux-consult, .ux-consult-main { gap: 16px; }
  #professionalApp .ux-motive { font-size: 17px; }
  .ux-today-evo { padding: 14px; }
  .ux-today-evo textarea { min-height: 120px; }
}

/* Las pestañas de la consulta se deslizan sin mostrar la barra de desplazamiento */
#professionalApp .p-clinical-tabs { scrollbar-width: none; }
#professionalApp .p-clinical-tabs::-webkit-scrollbar { display: none; }