/*
 * Línea «ficha densa» (diseño Ámbar) — hoja COMPARTIDA (tablero #399, 2026-09-29).
 * Estándar: Contexto/ESTANDARES_UI_UX.md §8. Nació en la ficha del paciente con CRM (tablero #330).
 *
 * Uso: envolver la pantalla en <div class="sm-dense"> y usar las clases pd-* (tarjeta, cabecera de identidad, fichas,
 * rejilla de resumen, filas etiqueta|valor, bloque plegable, línea de tiempo, cifras, secciones, zona para adjuntar).
 * La ficha del paciente sigue usando .pd-crm: :is(.pd-crm, .sm-dense) no cambia la especificidad, así que se ve igual.
 * Se carga en _Layout para todo el portal: sin .pd-crm ni .sm-dense no aplica a nada.
 * El color nunca es el único portador del dato: cada ficha lleva texto e ícono (Regla #12). Contrastes AA medidos.
 */
.pd-crm,
.sm-dense {
    --pd-surface: #ffffff;
    --pd-border: #e4e8ef;
    --pd-text: #1f2937;
    /* Tablero #499 (R15): #6b7280 daba 4,41:1 sobre el gris #f1f5f9 de los modales densos (bajo AA). #5b6472: 5,46:1 sobre ese
       gris y 5,98:1 sobre blanco; sigue leyéndose atenuado. */
    --pd-muted: #5b6472;
    --pd-accent: #0f766e;
    --pd-radius: 12px;
    --pd-gap: 1rem;
    color: var(--pd-text);
}

/* ─── Volver ─── */
:is(.pd-crm, .sm-dense) .pd-back {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: .25rem 0 .75rem;
    color: var(--pd-muted);
    font-weight: 500;
    text-decoration: none;
}
:is(.pd-crm, .sm-dense) .pd-back:hover,
:is(.pd-crm, .sm-dense) .pd-back:focus-visible { color: var(--pd-accent); }
:is(.pd-crm, .sm-dense) .pd-back .fas { margin-right: 0; }

/* ─── Tarjeta base ─── */
:is(.pd-crm, .sm-dense) .pd-card {
    background: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    margin-bottom: var(--pd-gap);
}

/* ─── Cabecera ─── */
:is(.pd-crm, .sm-dense) .pd-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pd-gap);
    padding: 1.25rem 1.5rem;
}
:is(.pd-crm, .sm-dense) .pd-header__main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
    flex: 1 1 420px;
}
:is(.pd-crm, .sm-dense) .pd-avatar {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #d1fae5;
    color: #065f46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .02em;
    overflow: hidden;
}
:is(.pd-crm, .sm-dense) .pd-avatar img { width: 100%; height: 100%; object-fit: cover; }
:is(.pd-crm, .sm-dense) .pd-avatar .fas { margin-right: 0; }
:is(.pd-crm, .sm-dense) .pd-header__body { min-width: 0; }
:is(.pd-crm, .sm-dense) .pd-name {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .35rem;
    color: var(--pd-text);
    overflow-wrap: anywhere;
}

:is(.pd-crm, .sm-dense) .pd-identity {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 0;
    margin: 0 0 .75rem;
    padding: 0;
    color: var(--pd-muted);
    font-size: .925rem;
}
:is(.pd-crm, .sm-dense) .pd-identity li {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .75rem;
    border-left: 1px solid var(--pd-border);
}
:is(.pd-crm, .sm-dense) .pd-identity li:first-child { padding-left: 0; border-left: 0; }
:is(.pd-crm, .sm-dense) .pd-identity__label { font-size: .8rem; }
:is(.pd-crm, .sm-dense) .pd-identity__value { color: var(--pd-text); font-weight: 600; }
:is(.pd-crm, .sm-dense) .pd-identity .far,
:is(.pd-crm, .sm-dense) .pd-identity .fas { margin-right: 0; }

:is(.pd-crm, .sm-dense) .pd-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
:is(.pd-crm, .sm-dense) .pd-btn { display: inline-flex; align-items: center; gap: .4rem; }
:is(.pd-crm, .sm-dense) .pd-btn .fas { margin-right: 0; }
/* «Editar»: el btn-outline-secondary de Metronic pinta texto y borde en #E1E3EA (1,3:1 sobre blanco)
   y el botón parece deshabilitado. Gris oscuro sobre blanco (10:1) y borde visible. */
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline,
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline i {
    color: #374151;
}
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline {
    background-color: #ffffff;
    border: 1px solid #9ca3af;
}
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline:hover,
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline:focus-visible {
    color: #111827;
    background-color: #f3f4f6;
    border-color: #4b5563;
}
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline:hover i,
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline:focus-visible i { color: #111827; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--outline:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

/* ─── Fichas ─── */
:is(.pd-crm, .sm-dense) .pd-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
}
:is(.pd-crm, .sm-dense) .pd-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    max-width: 100%;
}
:is(.pd-crm, .sm-dense) .pd-chip .fas,
:is(.pd-crm, .sm-dense) .pd-chip .far { margin-right: 0; }
:is(.pd-crm, .sm-dense) .pd-chip--sm { padding: .15rem .55rem; font-size: .75rem; }
:is(.pd-crm, .sm-dense) .pd-chip--neutral { background: #f1f5f9; color: #334155; border-color: #e2e8f0; }
:is(.pd-crm, .sm-dense) .pd-chip--success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
:is(.pd-crm, .sm-dense) .pd-chip--info    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
:is(.pd-crm, .sm-dense) .pd-chip--warning { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
:is(.pd-crm, .sm-dense) .pd-chip--danger  { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
:is(.pd-crm, .sm-dense) .pd-chip--primary { background: #e0e7ff; color: #3730a3; border-color: #c7d2fe; }
:is(.pd-crm, .sm-dense) .pd-chip--purple  { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }

:is(.pd-crm, .sm-dense) .pd-count {
    display: inline-block;
    min-width: 1.4rem;
    margin-left: .35rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
}

/* ─── Pestañas ─── */
:is(.pd-crm, .sm-dense) .pd-tabs-card { padding: 0 1rem 1rem; }
:is(.pd-crm, .sm-dense) .pd-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 2px solid #f1f3f4;
}
:is(.pd-crm, .sm-dense) .pd-tabs { border-bottom: 0; flex: 1 1 auto; min-width: 0; }
:is(.pd-crm, .sm-dense) .pd-tabs .nav-link { white-space: nowrap; }
:is(.pd-crm, .sm-dense) .pd-tabs .nav-link.active { color: var(--pd-accent); border-bottom-color: var(--pd-accent); }
:is(.pd-crm, .sm-dense) .pd-tab-content { padding-top: 1rem; }

/* ─── Resumen ─── */
:is(.pd-crm, .sm-dense) .pd-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--pd-gap);
    margin-bottom: var(--pd-gap);
}
:is(.pd-crm, .sm-dense) .pd-panel {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: 1rem 1.1rem;
    min-width: 0;
}
:is(.pd-crm, .sm-dense) .pd-panel__title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}
:is(.pd-crm, .sm-dense) .pd-panel__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f0fdfa;
    color: var(--pd-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
:is(.pd-crm, .sm-dense) .pd-panel__icon .fas,
:is(.pd-crm, .sm-dense) .pd-panel__icon .far { margin-right: 0; }

:is(.pd-crm, .sm-dense) .pd-rows { margin: 0; }
:is(.pd-crm, .sm-dense) .pd-row {
    display: grid;
    grid-template-columns: minmax(120px, 40%) 1fr;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px solid #f1f5f9;
}
:is(.pd-crm, .sm-dense) .pd-row:last-child { border-bottom: 0; }
:is(.pd-crm, .sm-dense) .pd-row dt { font-weight: 600; font-size: .875rem; }
:is(.pd-crm, .sm-dense) .pd-row dt .fas,
:is(.pd-crm, .sm-dense) .pd-row dt .far { width: 1.1rem; color: var(--pd-muted); }
:is(.pd-crm, .sm-dense) .pd-row dd { margin: 0; font-size: .9rem; overflow-wrap: anywhere; }
:is(.pd-crm, .sm-dense) .pd-row dd small { display: block; color: var(--pd-muted); margin-top: .15rem; }
:is(.pd-crm, .sm-dense) .pd-pre { white-space: pre-line; }

:is(.pd-crm, .sm-dense) .pd-pending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0;
    padding: .5rem .75rem;
    border-radius: 8px;
    background: #fff7ed;
    color: #9a3412;
    font-size: .85rem;
}
:is(.pd-crm, .sm-dense) .pd-pending .fas { margin-right: 0; }

:is(.pd-crm, .sm-dense) .pd-muted { color: var(--pd-muted); font-size: .85rem; }
:is(.pd-crm, .sm-dense) .pd-empty { color: var(--pd-muted); margin: .25rem 0; }
:is(.pd-crm, .sm-dense) .pd-loading { color: var(--pd-muted); margin: .25rem 0; font-style: italic; }
:is(.pd-crm, .sm-dense) .pd-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
:is(.pd-crm, .sm-dense) .pd-link-btn { padding-left: 0; padding-right: 0; font-weight: 600; }
:is(.pd-crm, .sm-dense) .pd-link-btn .fas { margin-right: 0; margin-left: .25rem; }
:is(.pd-crm, .sm-dense) .pd-icon-only .fas,
:is(.pd-crm, .sm-dense) .pd-icon-only .far { margin-right: 0; }

/* Línea de tiempo */
:is(.pd-crm, .sm-dense) .pd-timeline { list-style: none; margin: 0; padding: 0; }
:is(.pd-crm, .sm-dense) .pd-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: .75rem;
    padding: 0 0 1rem 1.1rem;
    border-left: 2px solid #d1fae5;
}
:is(.pd-crm, .sm-dense) .pd-timeline__item::before {
    content: "";
    position: absolute;
    left: -7px;
    top: .2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #16a34a;
}
:is(.pd-crm, .sm-dense) .pd-timeline__item:last-child { padding-bottom: .25rem; }
:is(.pd-crm, .sm-dense) .pd-timeline__date { font-weight: 600; font-size: .85rem; }
:is(.pd-crm, .sm-dense) .pd-timeline__body p { margin: .3rem 0 0; font-size: .875rem; }

/* Documentos */
:is(.pd-crm, .sm-dense) .pd-docs__list { list-style: none; margin: 0 0 .5rem; padding: 0; }
:is(.pd-crm, .sm-dense) .pd-doc {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .5rem;
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    margin-bottom: .5rem;
}
:is(.pd-crm, .sm-dense) .pd-doc__icon { font-size: 1.5rem; color: var(--pd-muted); margin-right: 0; flex: 0 0 auto; }
:is(.pd-crm, .sm-dense) .pd-doc__icon--pdf { color: #dc2626; }
:is(.pd-crm, .sm-dense) .pd-doc__icon--img { color: #2563eb; }
:is(.pd-crm, .sm-dense) .pd-doc__body { min-width: 0; flex: 1 1 auto; }
:is(.pd-crm, .sm-dense) .pd-doc__name { font-weight: 600; overflow-wrap: anywhere; }
:is(.pd-crm, .sm-dense) .pd-doc__actions { display: flex; gap: .35rem; flex: 0 0 auto; }
:is(.pd-crm, .sm-dense) .pd-docs__links { margin-bottom: .5rem; }

/* Zona para adjuntar: el <input type=file> queda oculto a la vista pero ENFOCABLE con teclado */
:is(.pd-crm, .sm-dense) .pd-drop { margin-top: .5rem; }
:is(.pd-crm, .sm-dense) .pd-drop__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
:is(.pd-crm, .sm-dense) .pd-drop__zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: 1.1rem;
    border: 2px dashed #93c5fd;
    border-radius: var(--pd-radius);
    background: #f8fbff;
    color: #1e40af;
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
:is(.pd-crm, .sm-dense) .pd-drop__zone .fas { font-size: 1.6rem; margin-right: 0; }
:is(.pd-crm, .sm-dense) .pd-drop__title { font-weight: 700; }
:is(.pd-crm, .sm-dense) .pd-drop__hint { color: var(--pd-muted); font-size: .85rem; }
:is(.pd-crm, .sm-dense) .pd-drop__zone:hover,
:is(.pd-crm, .sm-dense) .pd-drop__zone.is-dragover { background: #eff6ff; border-color: #2563eb; }
:is(.pd-crm, .sm-dense) .pd-drop__input:focus-visible + .pd-drop__zone {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}
:is(.pd-crm, .sm-dense) .pd-drop__confirm { margin-top: .5rem; }

/* Facturación */
:is(.pd-crm, .sm-dense) .pd-billing__totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
:is(.pd-crm, .sm-dense) .pd-stat {
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
}
:is(.pd-crm, .sm-dense) .pd-stat__label { color: var(--pd-muted); font-size: .8rem; }
:is(.pd-crm, .sm-dense) .pd-stat__value { font-size: 1.2rem; font-weight: 700; }
:is(.pd-crm, .sm-dense) .pd-stat--danger .pd-stat__value { color: #b91c1c; }

/* ─── «Datos del paciente» (plegable) ─── */
:is(.pd-crm, .sm-dense) .pd-data {
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius);
    padding: .25rem 1rem;
    margin-bottom: var(--pd-gap);
}
:is(.pd-crm, .sm-dense) .pd-data > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    padding: .6rem 0;
}
:is(.pd-crm, .sm-dense) .pd-data > summary .fas { margin-right: .35rem; color: var(--pd-accent); }
:is(.pd-crm, .sm-dense) .pd-data > summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 6px; }
:is(.pd-crm, .sm-dense) .pd-data__hint { font-weight: 400; }
:is(.pd-crm, .sm-dense) .pd-data__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .75rem 1.25rem;
    padding: .25rem 0 1rem;
}
:is(.pd-crm, .sm-dense) .pd-data__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pd-muted);
    margin: 0 0 .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #f1f5f9;
}
:is(.pd-crm, .sm-dense) .pd-data__title .fas { margin-right: .35rem; }
:is(.pd-crm, .sm-dense) .pd-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem .75rem;
    margin: 0;
}
:is(.pd-crm, .sm-dense) .pd-field dt { font-size: .72rem; font-weight: 600; color: var(--pd-muted); }
:is(.pd-crm, .sm-dense) .pd-field dd { margin: 0; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
:is(.pd-crm, .sm-dense) .pd-field dd.pd-field--empty { color: #9ca3af; font-weight: 400; }

/* ─── Clínico (secciones una debajo de otra) ─── */
:is(.pd-crm, .sm-dense) .pd-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}
:is(.pd-crm, .sm-dense) .pd-subnav a {
    padding: .3rem .75rem;
    border: 1px solid var(--pd-border);
    border-radius: 999px;
    color: var(--pd-text);
    font-size: .85rem;
    text-decoration: none;
}
:is(.pd-crm, .sm-dense) .pd-subnav a:hover,
:is(.pd-crm, .sm-dense) .pd-subnav a:focus-visible { border-color: var(--pd-accent); color: var(--pd-accent); }
:is(.pd-crm, .sm-dense) .pd-section { margin-bottom: 1.25rem; scroll-margin-top: 90px; }
:is(.pd-crm, .sm-dense) .pd-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
:is(.pd-crm, .sm-dense) .pd-section__title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .5rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid #f1f5f9;
}
:is(.pd-crm, .sm-dense) .pd-section__head .pd-section__title { margin-bottom: 0; border-bottom: 0; }
:is(.pd-crm, .sm-dense) .pd-section__title .fas,
:is(.pd-crm, .sm-dense) .pd-section__title .far { color: var(--pd-accent); margin-right: .35rem; }

/* ─── Pie ─── */
:is(.pd-crm, .sm-dense) .pd-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    color: var(--pd-muted);
    font-size: .875rem;
    padding: 0 .25rem 1rem;
}
:is(.pd-crm, .sm-dense) .pd-footer .fas { margin-right: 0; }


/* ─── Fecha como hoja de calendario (detalle de la cita, 29-sep): ocupa el lugar del avatar en la cabecera ───
   Mes en blanco sobre el acento (5,5:1), día grande, día de la semana gris. */
:is(.pd-crm, .sm-dense) .pd-date {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 14px;
    border: 1px solid var(--pd-border);
    background: var(--pd-surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
:is(.pd-crm, .sm-dense) .pd-date__month {
    align-self: stretch;
    text-align: center;
    background: var(--pd-accent);
    color: #ffffff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .2rem 0;
}
:is(.pd-crm, .sm-dense) .pd-date__day { font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--pd-text); margin-top: .15rem; }
:is(.pd-crm, .sm-dense) .pd-date__weekday { font-size: .75rem; color: var(--pd-muted); text-transform: capitalize; }
:is(.pd-crm, .sm-dense) .pd-pending .btn { margin-left: auto; }

/* ─── Tableta y teléfono ─── */
@media (max-width: 991.98px) {
    :is(.pd-crm, .sm-dense) .pd-header { padding: 1rem; }
    :is(.pd-crm, .sm-dense) .pd-header__actions { width: 100%; }
}
@media (max-width: 767.98px) {
    :is(.pd-crm, .sm-dense) .pd-header__main { gap: .9rem; flex-basis: 100%; }
    :is(.pd-crm, .sm-dense) .pd-avatar { width: 64px; height: 64px; font-size: 1.4rem; }
    :is(.pd-crm, .sm-dense) .pd-date { width: 64px; height: 64px; }
    :is(.pd-crm, .sm-dense) .pd-date__day { font-size: 1.4rem; }
    :is(.pd-crm, .sm-dense) .pd-name { font-size: 1.3rem; }
    :is(.pd-crm, .sm-dense) .pd-identity li { padding: 0 .5rem; }
    :is(.pd-crm, .sm-dense) .pd-tabs-bar { flex-wrap: wrap; }
    :is(.pd-crm, .sm-dense) .pd-tabs-card { padding: 0 .5rem .75rem; }
    :is(.pd-crm, .sm-dense) .pd-row { grid-template-columns: 1fr; gap: .15rem; }
    :is(.pd-crm, .sm-dense) .pd-timeline__item { grid-template-columns: 1fr; gap: .15rem; }
    :is(.pd-crm, .sm-dense) .pd-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
    :is(.pd-crm, .sm-dense) .pd-header__main { flex-direction: column; align-items: flex-start; }
    :is(.pd-crm, .sm-dense) .pd-fields { grid-template-columns: 1fr; }
}

@media print {
    :is(.pd-crm, .sm-dense) .pd-header__actions,
    :is(.pd-crm, .sm-dense) .pd-tabs-bar,
    :is(.pd-crm, .sm-dense) .pd-drop { display: none !important; }
}

/* ─── Historia libre con plantilla (tablero #458): formulario de plantilla (fh-form), editor y línea de tiempo ───
   Los componentes fh-* son de la Historia Libre; la rejilla y las etiquetas siguen los tokens de arriba. */
:is(.pd-crm, .sm-dense) .fh-section { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
:is(.pd-crm, .sm-dense) .fh-section__title {
    float: none;
    width: 100%;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pd-muted);
    margin: 0 0 .5rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #f1f5f9;
}
:is(.pd-crm, .sm-dense) .fh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .6rem .9rem;
}
:is(.pd-crm, .sm-dense) .fh-field { min-width: 0; }
:is(.pd-crm, .sm-dense) .fh-field--wide { grid-column: 1 / -1; }
:is(.pd-crm, .sm-dense) .fh-field__label { display: block; font-size: .8rem; font-weight: 600; color: var(--pd-text); margin-bottom: .2rem; }
:is(.pd-crm, .sm-dense) .fh-field__value { font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
:is(.pd-crm, .sm-dense) .fh-field__obs { font-size: .85rem; }
:is(.pd-crm, .sm-dense) .fh-field__obs-input { margin-top: .3rem; }
:is(.pd-crm, .sm-dense) .fh-choices { display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
:is(.pd-crm, .sm-dense) .fh-dictation { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
:is(.pd-crm, .sm-dense) .fh-editor { min-height: 320px; }
:is(.pd-crm, .sm-dense) .fh-editor .ql-editor { min-height: 320px; font-size: .95rem; }
:is(.pd-crm, .sm-dense) .ql-toolbar.ql-snow { border: 1px solid var(--pd-border); border-radius: var(--pd-radius) var(--pd-radius) 0 0; }
:is(.pd-crm, .sm-dense) .ql-container.ql-snow { border: 1px solid var(--pd-border); border-top: 0; border-radius: 0 0 var(--pd-radius) var(--pd-radius); }
:is(.pd-crm, .sm-dense) .fh-item__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
:is(.pd-crm, .sm-dense) .fh-item__title { font-weight: 700; color: var(--pd-text); text-decoration: none; overflow-wrap: anywhere; }
:is(.pd-crm, .sm-dense) .fh-item__title:hover,
:is(.pd-crm, .sm-dense) .fh-item__title:focus-visible { color: var(--pd-accent); text-decoration: underline; }
:is(.pd-crm, .sm-dense) .fh-item__actions { display: flex; gap: .25rem; flex: 0 0 auto; }
:is(.pd-crm, .sm-dense) .fh-item__chips { margin: .3rem 0 0; }
:is(.pd-crm, .sm-dense) .fh-item__summary { color: var(--pd-text); }


/* ─── Editor de plantillas de historia (tablero #458, 30-sep): rejilla de formulario y lista de preguntas ordenable ───
   Cada pregunta es una fila: asa de arrastre, número, texto con fichas y acciones. Arrastre nativo HTML5: la fila que se
   arrastra se atenúa y la que recibirá el drop marca una línea en el acento (2,9:1 sobre blanco, solo es señal de foco). */
:is(.pd-crm, .sm-dense) .pd-formgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem .9rem;
}
:is(.pd-crm, .sm-dense) .pd-formgrid__wide { grid-column: 1 / -1; }
:is(.pd-crm, .sm-dense) .pd-qlist { list-style: none; margin: 0; padding: 0; min-height: 2.5rem; }
:is(.pd-crm, .sm-dense) .pd-qlist--over { outline: 2px dashed var(--pd-accent); outline-offset: 4px; border-radius: 8px; }
:is(.pd-crm, .sm-dense) .pd-q {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .5rem .25rem;
    border-top: 1px solid #f1f5f9;
    background: var(--pd-surface);
}
:is(.pd-crm, .sm-dense) .pd-q:first-child { border-top: 0; }
:is(.pd-crm, .sm-dense) .pd-q--dragging { opacity: .45; }
:is(.pd-crm, .sm-dense) .pd-q--over { box-shadow: inset 0 3px 0 var(--pd-accent); }
:is(.pd-crm, .sm-dense) .pd-q__handle { color: #6b7280; cursor: grab; padding: .15rem .1rem; flex: 0 0 auto; }
:is(.pd-crm, .sm-dense) .pd-q__handle .fas { margin-right: 0; }
:is(.pd-crm, .sm-dense) .pd-q__num {
    flex: 0 0 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    font-size: .8rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
:is(.pd-crm, .sm-dense) .pd-q__num .fas { margin-right: 0; }
:is(.pd-crm, .sm-dense) .pd-q__body { flex: 1 1 auto; min-width: 0; }
:is(.pd-crm, .sm-dense) .pd-q__label { font-weight: 600; font-size: .95rem; margin-bottom: .25rem; overflow-wrap: anywhere; }
:is(.pd-crm, .sm-dense) .pd-q__req { color: #b91c1c; margin-left: .15rem; }
:is(.pd-crm, .sm-dense) .pd-q__actions { display: flex; flex-wrap: wrap; gap: .3rem; flex: 0 0 auto; }
:is(.pd-crm, .sm-dense) .pd-q--hidden .pd-q__label { color: var(--pd-muted); }
:is(.pd-crm, .sm-dense) .pd-qsection__name { overflow-wrap: anywhere; }
:is(.pd-crm, .sm-dense) .pd-inline-details > summary { list-style: none; display: inline-flex; }
:is(.pd-crm, .sm-dense) .pd-inline-details > summary::-webkit-details-marker { display: none; }
@media (max-width: 767.98px) {
    :is(.pd-crm, .sm-dense) .pd-q { flex-wrap: wrap; }
    :is(.pd-crm, .sm-dense) .pd-q__actions { width: 100%; padding-left: 2.6rem; }
}

/* ─── Botones de acción con contraste AA (unificar pacientes #428, 30-sep): Metronic pinta btn-primary/btn-danger en 2,9-3,5:1 ───
   Se usan SIN btn-primary/btn-danger (solo .btn + .pd-btn--*): azul de cabecera del estándar (#0369a1, 5,9:1) para la acción
   principal y rojo oscuro (#b91c1c, 5,9:1) para la destructiva. Deshabilitado gris (control inactivo, exento de AA). */
:is(.pd-crm, .sm-dense) .btn.pd-btn--primary { background: #0369a1; border-color: #0369a1; color: #ffffff; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--primary i { color: #ffffff; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--primary:hover,
:is(.pd-crm, .sm-dense) .btn.pd-btn--primary:focus-visible { background: #075985; border-color: #075985; color: #ffffff; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--danger { background: #b91c1c; border-color: #b91c1c; color: #ffffff; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--danger i { color: #ffffff; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--danger:hover,
:is(.pd-crm, .sm-dense) .btn.pd-btn--danger:focus-visible { background: #991b1b; border-color: #991b1b; color: #ffffff; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--primary:disabled,
:is(.pd-crm, .sm-dense) .btn.pd-btn--danger:disabled { background: #94a3b8; border-color: #94a3b8; color: #ffffff; opacity: 1; cursor: not-allowed; }
:is(.pd-crm, .sm-dense) .btn.pd-btn--primary:focus-visible,
:is(.pd-crm, .sm-dense) .btn.pd-btn--danger:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

/* ─── Mensaje de validación de un campo (Ronda 15, área G): el text-danger de Metronic (#f1416c) da 3,7:1 sobre blanco.
   Mismo rojo oscuro que .pd-btn--danger (#b91c1c, 6,5:1 sobre blanco). Lo llena jquery.validate.unobtrusive dentro del
   span de ValidationMessageFor (o el servidor al repintar); vacío no ocupa lugar. ─── */
:is(.pd-crm, .sm-dense) .pd-field-error { display: block; color: #b91c1c; font-size: .85rem; margin-top: .25rem; }
:is(.pd-crm, .sm-dense) .pd-field-error:empty { display: none; }

/* ─── Avisos, texto atenuado en tablas, ayudas y enlaces con contraste AA (Ronda 15, área C; medido con getComputedStyle) ───
   · Avisos (.alert-*): el tema pinta el texto con el color de la variante sobre su fondo claro (2,1-3,4:1). Dentro de la línea
     densa el texto va en el tono oscuro de la misma familia (los pares de las fichas) y el fondo queda como estaba: azul
     #1e40af, verde #166534, ámbar #9a3412, rojo #991b1b, gris #334155 (6,4-9,5:1). Íconos y enlaces del aviso heredan el color.
   · solmed-perfect-system.css pinta TODA celda de .table en #f1f5f9 (--bg-table-row): ahí el gris atenuado (#6b7280) da 4,4:1.
     Dentro de una tabla va #4b5563 (6,9:1 sobre #f1f5f9).
   · .form-text del tema (#a1a5b7) = 2,5:1 sobre blanco → el gris atenuado de la línea (4,8:1).
   · Enlace dentro de un texto atenuado: el azul del tema (#009ef7) = 2,9:1 → #0369a1 subrayado (5,9:1). ─── */
:is(.pd-crm, .sm-dense) .alert-primary,
:is(.pd-crm, .sm-dense) .alert-info { color: #1e40af; }
:is(.pd-crm, .sm-dense) .alert-success { color: #166534; }
:is(.pd-crm, .sm-dense) .alert-warning { color: #9a3412; }
:is(.pd-crm, .sm-dense) .alert-danger { color: #991b1b; }
:is(.pd-crm, .sm-dense) .alert-secondary { color: #334155; }
:is(.pd-crm, .sm-dense) .alert :is(.fas, .far, .fab) { color: inherit; }
:is(.pd-crm, .sm-dense) .alert a:not(.btn) { color: inherit; text-decoration: underline; }
:is(.pd-crm, .sm-dense) .table .pd-muted { color: #4b5563; }
:is(.pd-crm, .sm-dense) .form-text { color: var(--pd-muted); }
:is(.pd-crm, .sm-dense) .pd-muted a:not(.btn) { color: #0369a1; text-decoration: underline; }

/* ─── Contraste AA de los avisos y ayudas (tablero #499, R15) ───
   Medido sobre el gris de los modales densos (#f1f5f9): las ayudas .form-text heredaban un gris de 4,41:1 y los asteriscos y
   avisos .text-danger del tema (#f1416c) daban 3,36:1. Dentro de la línea densa y de los modales: #b91c1c (5,91:1 sobre ese gris,
   6,47:1 sobre blanco). El color nunca es el único portador del dato (Regla #12): el asterisco va junto a su etiqueta. */
:is(.pd-crm, .sm-dense, .modal) .form-text { color: var(--pd-muted, #5b6472) !important; }
.modal { --pd-muted: #5b6472; }
:is(.pd-crm, .sm-dense, .modal) .text-danger { color: #b91c1c !important; }

/* ─── Rejilla por ojo (tablero #629, examen optométrico): una fila por ojo (OD arriba, OI abajo) y una columna por medida
   (esfera · cilindro · eje; K1 · K2 · eje; curva base · diámetro · poder). La etiqueta visible es la cabecera de la columna,
   así que cada input lleva su aria-label. Sin media queries: las columnas se encogen (minmax(0, 1fr)). Cabeceras en el gris
   atenuado de la línea (5,98:1 sobre blanco). Sirve a cualquier dato por ojo (receta de lentes, lentes de contacto). ─── */
:is(.pd-crm, .sm-dense) .pd-eyegrid {
    display: grid;
    grid-template-columns: 2.25rem repeat(3, minmax(0, 1fr));
    gap: .35rem .5rem;
    align-items: center;
}
:is(.pd-crm, .sm-dense) .pd-eyegrid__head { font-size: .75rem; font-weight: 600; color: var(--pd-muted); text-align: center; }
:is(.pd-crm, .sm-dense) .pd-eyegrid__eye { font-size: .85rem; font-weight: 700; color: var(--pd-text); }


/* ─── Detalle de una cita incrustado (#645, R18): Appointments/DetailsPanel dentro de un modal (la ficha del paciente) ───
   La cabecera va sin tarjeta propia (el modal ya lo es) y las acciones en una fila que se acomoda sola. */
:is(.pd-crm, .sm-dense) .pd-appt-panel__head { padding: 0 0 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--pd-border); }
:is(.pd-crm, .sm-dense) .pd-appt-panel__head .pd-name { font-size: 1.3rem; text-transform: none; }
:is(.pd-crm, .sm-dense) .pd-appt-panel__head .pd-name::first-letter { text-transform: uppercase; }
:is(.pd-crm, .sm-dense) .pd-appt-panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--pd-border);
}

/* Cifra de un pd-stat con el color de estado del tema (text-success #50cd89 = 2:1, text-warning #ffc700 = 1,5:1 sobre blanco):
   los tonos AA de las fichas (#645, R18: el contador de citas del detalle de la cita y del formulario). */
:is(.pd-crm, .sm-dense) .pd-stat__value.text-success { color: #166534 !important; }
:is(.pd-crm, .sm-dense) .pd-stat__value.text-warning { color: #9a3412 !important; }

/* ─── Textareas pequeños (R18, visto al probar #646): solmed-perfect-system.css fija «.form-control-sm { height: … !important }»
   para los inputs, y eso también aplastaba a UNA línea todo <textarea class="form-control-sm" rows="N">: el intraoperatorio,
   la agenda, la historia libre, optometría y las plantillas pedían 2 o 5 filas y mostraban una. Aquí manda su «rows». ─── */
:is(.pd-crm, .sm-dense) textarea.form-control-sm { height: auto !important; }

/* ─── Encuesta y cuestionarios del centro (tablero #646, R18) ───
   .pd-count--alert: el contador de una pestaña cuando lo que cuenta es trabajo pendiente (respondidos sin revisar):
   rojo oscuro sobre rojo claro, 7,6:1. Lo demás es de las pantallas de PatientForms: la respuesta del paciente tal como la
   escribió, las barras de resultados (pista gris, relleno en el azul de acción: es un gráfico, no texto) y la lista de textos. */
:is(.pd-crm, .sm-dense) .pd-count--alert { background: #fee2e2; color: #991b1b; }
:is(.pd-crm, .sm-dense) [data-pf-send-select] { max-width: 22rem; padding-right: 2.25rem !important; text-overflow: ellipsis; }
:is(.pd-crm, .sm-dense) .pf-answer { white-space: pre-line; overflow-wrap: anywhere; font-size: .95rem; color: var(--pd-text); }
:is(.pd-crm, .sm-dense) .pf-eq { padding: .75rem .25rem; }
:is(.pd-crm, .sm-dense) .pf-eq .pd-q__actions { flex-direction: column; }
:is(.pd-crm, .sm-dense) .pf-result__avg { font-size: 1rem; margin: 0 0 .5rem; }
:is(.pd-crm, .sm-dense) .pf-bars { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .35rem; }
:is(.pd-crm, .sm-dense) .pf-bars__row {
    display: grid;
    grid-template-columns: minmax(90px, 30%) 1fr minmax(84px, auto);
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}
:is(.pd-crm, .sm-dense) .pf-bars__label { overflow-wrap: anywhere; font-weight: 600; }
:is(.pd-crm, .sm-dense) .pf-bars__track { display: block; height: .7rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
:is(.pd-crm, .sm-dense) .pf-bars__fill { display: block; height: 100%; border-radius: 999px; background: #0369a1; }
:is(.pd-crm, .sm-dense) .pf-bars__value { text-align: right; font-weight: 600; white-space: nowrap; }
/* Tablero de encuestas: promotores / pasivos / detractores con los tonos de estado AA de la línea, y el NPS en rojo oscuro cuando es negativo. */
:is(.pd-crm, .sm-dense) .pf-bars__fill--good { background: #166534; }
:is(.pd-crm, .sm-dense) .pf-bars__fill--mid { background: #b45309; }
:is(.pd-crm, .sm-dense) .pf-bars__fill--bad { background: #b91c1c; }
:is(.pd-crm, .sm-dense) .pd-stat__value.pf-nps--low { color: #b91c1c; }
:is(.pd-crm, .sm-dense) .pf-texts { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .9rem; }
:is(.pd-crm, .sm-dense) .pf-texts li { margin-bottom: .3rem; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    :is(.pd-crm, .sm-dense) .pf-eq .pd-q__actions { flex-direction: row; }
    :is(.pd-crm, .sm-dense) .pf-bars__row { grid-template-columns: 1fr auto; }
    :is(.pd-crm, .sm-dense) .pf-bars__track { grid-column: 1 / -1; order: 3; }
}

/* Tablero #671 (R18) — aviso de que el paciente que se registra YA EXISTE (formulario de Pacientes y alta rápida).
   Naranja suave con texto oscuro, contraste AA medido sobre #fff7ed: título #9a3412 6,9:1; datos #334155 9,8:1. */
.pd-dups { border: 1px solid #fed7aa; background: #fff7ed; border-radius: .5rem; padding: .55rem .75rem; }
.pd-dups__title { font-weight: 600; color: #9a3412; margin-bottom: .3rem; }
.pd-dups__list { list-style: none; margin: 0 0 .2rem; padding: 0; }
.pd-dups__item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-top: 1px dashed #fed7aa; }
.pd-dups__item:first-child { border-top: 0; }
.pd-dups__meta { font-size: .8rem; color: #334155; }
/* La salida «es otra persona» es una acción, no un texto: azul subrayado (#1d4ed8 sobre #fff7ed 6,3:1). */
.pd-dups__ignore { background: none; border: 0; padding: 0; font-size: .82rem; color: #1d4ed8; text-decoration: underline; cursor: pointer; }
.pd-dups__ignore:hover, .pd-dups__ignore:focus-visible { color: #1e3a8a; }