/* Brand typography is bundled locally in brand.css. */

:root {
    --primary-900: #082F3C;
    --primary-800: #0D4049;
    --primary-700: #15565B;
    --primary-600: #1F6D6B;
    --primary-500: #2B7F75;
    --success-900: #3B6506;
    --success-800: #4C7A0B;
    --success-700: #659711;
    --success-600: #7FB519;
    --success-500: #9CD323;
    --success-400: #BCE455;
    --success-300: #D3F178;
    --success-200: #EBFAA6;
    --success-100: #F5FCD2;
    --error-900: #620B49;
    --error-800: #770E4E;
    --error-700: #941657;
    --error-600: #B1205C;
    --error-500: #CE2C60;
    --error-400: #E15C7A;
    --error-300: #F07E8D;
    --error-200: #FAABAD;
    --error-100: #FCD7D4;
    --warning-900: #7A5214;
    --warning-800: #936A22;
    --warning-700: #B78C35;
    --warning-600: #DBB04E;
    --warning-500: #FFD66B;
    --warning-400: #FFE390;
    --warning-300: #FFEBA6;
    --warning-200: #FFF3C3;
    --warning-100: #FFFAE1;
    --info-900: #102E7A;
    --info-800: #1A4393;
    --info-700: #2A60B7;
    --info-600: #3D81DB;
    --info-500: #54A6FF;
    --info-400: #7EC2FF;
    --info-300: #98D3FF;
    --info-200: #BAE5FF;
    --info-100: #DCF3FF;
    --secondary-900: #04070E;
    --secondary-800: #080B11;
    --secondary-700: #0D1015;
    --secondary-600: #131619;
    --secondary-500: #1A1C1E;
    --secondary-400: #6C7278;
    --secondary-300: #ACB5BB;
    --secondary-200: #DCE4E8;
    --secondary-100: #EDF1F3;
    --white: #FFFFFF;
    --background: #F8FAFB;
    --border: #E6E8EC;
    --radius: 14px;
    --sidebar-width: 280px;
    --shadow-soft: 0 16px 40px rgba(8, 47, 60, 0.06);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--secondary-500);
    font-family: Inter, "Plus Jakarta Sans", Manrope, Poppins, Arial, sans-serif;
    letter-spacing: 0;
}

a {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--white);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 22px;
    border-bottom: 1px solid var(--border);
}

.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--white);
    background: var(--secondary-900);
    font-weight: 800;
}

.brand-title {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--secondary-700);
}

.brand-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--secondary-400);
    font-size: 13px;
}

.sidebar-nav {
    padding: 16px 12px;
    display: grid;
    gap: 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--secondary-500);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: var(--secondary-100);
    color: var(--secondary-900);
}

.sidebar-footer {
    margin-top: auto;
    padding: 16px 12px 22px;
    border-top: 1px solid var(--border);
}

.main-panel {
    min-width: 0;
}

.topbar {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 28px;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.topbar h1 {
    margin: 0;
    text-align: left;
    color: var(--secondary-800);
    font-size: 22px;
    line-height: 1.2;
}

.topbar p {
    margin: 4px 0 0;
    text-align: left;
    color: var(--secondary-400);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dropdown-shell {
    position: relative;
}

.online-pill,
.avatar-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
    font-weight: 700;
    font-size: 13px;
}

.online-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #14C761;
}

.avatar-pill {
    width: 40px;
    height: 40px;
    justify-content: center;
    border-radius: 999px;
    background: var(--secondary-100);
}

.avatar-button,
.quick-plus {
    cursor: pointer;
}

.quick-plus {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--secondary-900);
    background: var(--secondary-900);
    color: var(--white);
    font-size: 24px;
    line-height: 1;
    font-weight: 700;
    transition: transform 0.18s ease, background 0.18s ease;
}

.quick-plus:hover {
    transform: translateY(-1px);
    background: var(--primary-700);
}

.topbar-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    width: min(280px, calc(100vw - 32px));
    display: none;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.topbar-dropdown.open {
    display: grid;
    gap: 6px;
}

.topbar-dropdown a,
.dropdown-empty {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--secondary-600);
    text-decoration: none;
    font-weight: 700;
}

.topbar-dropdown a:hover {
    background: var(--secondary-100);
    color: var(--secondary-900);
}

.dropdown-title {
    padding: 8px 12px 6px;
    color: var(--secondary-400);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-summary {
    display: grid;
    gap: 3px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.profile-summary strong {
    color: var(--secondary-800);
    overflow-wrap: anywhere;
}

.profile-summary span {
    color: var(--secondary-400);
    font-size: 13px;
    text-transform: capitalize;
}

.content {
    padding: 28px;
}

.content-grid {
    display: grid;
    gap: 24px;
}

.content-grid > .nota-sistema,
.content-grid > form,
.content-grid > .tabla-responsive,
.content-grid > .acciones-superiores,
.content-grid > .menu,
.content-grid > p,
.content-grid > h2,
.content-grid > h3,
.content-grid > label,
.content-grid > textarea,
.content-grid > .grid-form {
    min-width: 0;
}

.stat-grid,
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.card,
.stat-card,
.panel-card,
.contenedor,
.login-container {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}

.stat-card {
    min-height: 132px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--secondary-600);
    font-weight: 800;
}

.stat-value {
    margin-top: 24px;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: var(--secondary-900);
}

.stat-note {
    margin-top: 8px;
    color: var(--secondary-400);
    font-weight: 600;
}

.dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
    gap: 24px;
}

.panel-card {
    padding: 22px;
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.panel-card h2,
.panel-card h3 {
    margin: 0 0 8px;
    text-align: left;
    color: var(--secondary-800);
}

.panel-card > p {
    margin: 0 0 18px;
    text-align: left;
    color: var(--secondary-400);
}

.panel-header p {
    margin: 0;
    color: var(--secondary-400);
}

.appointment-list,
.activity-list,
.quick-actions {
    display: grid;
    gap: 12px;
}

.appointment-item,
.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--white);
}

.patient-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--secondary-100);
    color: var(--secondary-600);
    font-weight: 800;
}

.patient-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.patient-name {
    font-weight: 800;
    color: var(--secondary-700);
}

.patient-meta {
    color: var(--secondary-400);
    font-size: 14px;
}

.quick-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-action {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
    color: var(--secondary-700);
    background: var(--white);
}

.quick-action.primary {
    background: var(--secondary-900);
    color: var(--white);
}

.contenedor {
    max-width: 1180px;
    margin: 28px auto;
    padding: 28px;
    text-align: left;
}

.contenedor h1,
.contenedor h2 {
    text-align: left;
    color: var(--secondary-800);
}

.filtros-citas,
.nota-sistema {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
}

input,
select,
textarea {
    border: 1px solid var(--secondary-200);
    border-radius: 10px;
    color: var(--secondary-700);
    background: var(--white);
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(43, 127, 117, 0.18);
    border-color: var(--primary-500);
}

button,
.menu a,
.acciones-superiores a,
.acciones-tabla a,
.boton-tabla,
.btn-primary,
.btn-secondary,
.btn-table {
    border-radius: 10px;
    border: none;
    text-decoration: none;
    font-weight: 800;
    cursor: pointer;
}

.acciones-tabla a,
.boton-tabla,
.btn-table {
    font-size: 12px;
    padding: 8px 10px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    background: var(--secondary-900);
    color: var(--white);
}

.btn-secondary,
.btn-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--secondary-700);
    border: 1px solid var(--border);
}

.btn-table.danger,
.danger {
    color: var(--error-700);
}

.acciones-tabla,
.actions-inline,
.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.acciones-tabla form {
    display: inline-flex;
    margin: 0;
}

.filters-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) minmax(160px, 220px) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 18px;
}

table {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

th {
    background: var(--secondary-100);
    color: var(--secondary-600);
    font-size: 13px;
    text-transform: none;
}

td {
    color: var(--secondary-600);
}

.estado-cita,
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 10px;
    background: var(--secondary-100);
    color: var(--secondary-600);
    font-weight: 800;
    font-size: 12px;
}

.estado-listo,
.badge-success {
    background: var(--success-100);
    color: var(--success-800);
}

.badge-warning {
    background: var(--warning-100);
    color: var(--warning-900);
}

.badge-info {
    background: var(--info-100);
    color: var(--info-800);
}

.badge-error,
.badge-danger {
    background: var(--error-100);
    color: var(--error-800);
}

.badge-muted {
    background: var(--secondary-100);
    color: var(--secondary-500);
}

.badge-role {
    background: var(--info-100);
    color: var(--primary-700);
}

.row-completed {
    background: #EEF1F3;
    color: var(--secondary-400);
}

.row-cancelled,
.row-no-show {
    background: var(--error-100);
}

.form-card {
    display: grid;
    gap: 18px;
}

.narrow-form {
    max-width: 560px;
}

.section-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

.role-section {
    display: grid;
    gap: 12px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.detail-grid > div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
}

.detail-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-400);
    font-size: 12px;
    font-weight: 800;
}

.detail-grid strong {
    color: var(--secondary-700);
    overflow-wrap: anywhere;
}

.empty-state {
    padding: 26px;
    text-align: center;
    color: var(--secondary-400);
}

.clinical-workspace {
    display: grid;
    gap: 18px;
}

.clinical-top-strip,
.clinical-actions-bar,
.clinical-final-bar,
.clinical-tabs,
.clinical-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.clinical-top-strip {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
}

.clinical-top-strip > div {
    min-width: min(280px, 100%);
}

.clinical-top-strip strong {
    display: block;
    color: var(--secondary-800);
}

.clinical-top-strip > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--secondary-100);
    color: var(--secondary-600);
    font-weight: 700;
    font-size: 13px;
}

.eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--secondary-400);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.clinical-actions-bar,
.clinical-final-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
}

.clinical-actions-bar h2 {
    margin: 0 0 4px;
    color: var(--secondary-800);
}

.clinical-actions-bar p {
    margin: 0;
    color: var(--secondary-400);
}

.clinical-form {
    display: grid;
    gap: 18px;
}

.clinical-tabs {
    position: sticky;
    top: 70px;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.clinical-tab {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--secondary-500);
    font-weight: 800;
}

.clinical-tab.active {
    background: var(--secondary-900);
    color: var(--white);
}

.clinical-tab-panel {
    display: none;
    gap: 18px;
}

.clinical-tab-panel.active {
    display: grid;
}

.clinical-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.section-heading h3,
.future-card h4 {
    margin: 0;
    color: var(--secondary-800);
}

.patient-summary-grid,
.vitals-grid,
.future-module-grid {
    display: grid;
    gap: 10px;
}

.patient-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.patient-summary-grid > div,
.vital-card,
.future-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
}

.patient-summary-grid span,
.vital-card label {
    display: block;
    margin-bottom: 6px;
    color: var(--secondary-400);
    font-size: 12px;
    font-weight: 800;
}

.patient-summary-grid strong {
    color: var(--secondary-700);
    overflow-wrap: anywhere;
}

.segmented-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.segment-option input,
.chip-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segment-option span,
.chip-check span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--secondary-600);
    font-weight: 800;
    cursor: pointer;
}

.segment-option input:checked + span,
.chip-check input:checked + span,
.clinical-chip-card.selected .chip-check span {
    border-color: var(--primary-500);
    background: var(--success-100);
    color: var(--primary-800);
}

.chip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.clinical-chip-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
}

.clinical-chip-card textarea {
    min-height: 70px;
}

.vitals-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.vital-card input {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    font-weight: 800;
}

.clinical-accordion {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--background);
    overflow: hidden;
}

.clinical-accordion summary {
    cursor: pointer;
    padding: 14px;
    color: var(--secondary-700);
    font-weight: 900;
}

.clinical-accordion .chip-grid {
    padding: 0 14px 14px;
}

.clinical-table th,
.clinical-table td {
    vertical-align: top;
}

.clinical-table input,
.clinical-table select {
    width: 100%;
    min-width: 130px;
}

.fila-medicamento-oculta {
    display: none;
}

.future-module-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.future-card {
    display: grid;
    align-content: start;
    gap: 12px;
}

.future-card p {
    margin: 0;
    color: var(--secondary-400);
    line-height: 1.5;
}

.tab-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.clinical-final-bar .formulario-exportar {
    margin: 0;
}

.modo-lectura .clinical-form {
    opacity: 0.92;
}

.save-status {
    border: 1px solid var(--border);
}

.save-status-clean,
.save-status-saved {
    background: var(--success-100) !important;
    color: var(--success-800) !important;
}

.save-status-dirty {
    background: var(--warning-100) !important;
    color: var(--warning-900) !important;
}

.save-status-saving {
    background: var(--info-100) !important;
    color: var(--info-800) !important;
}

.save-status-error {
    background: var(--error-100) !important;
    color: var(--error-800) !important;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(4, 7, 14, 0.36);
}

.modal-backdrop[hidden] {
    display: none !important;
}

.modal-card {
    width: min(520px, 100%);
    display: grid;
    gap: 14px;
    padding: 22px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.modal-card h3 {
    margin: 0;
    color: var(--secondary-800);
}

.modal-card p {
    margin: 0;
    color: var(--secondary-500);
    line-height: 1.5;
}

.alerta {
    border-radius: 12px;
    border: 1px solid var(--border);
}

.auth-body {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
    background: var(--white);
}

.auth-visual {
    margin: 20px;
    border-radius: 0;
    background:
        radial-gradient(circle at 78% 78%, rgba(220, 228, 232, 0.11) 0 120px, transparent 121px),
        linear-gradient(135deg, rgba(8, 47, 60, 0.92), rgba(4, 7, 14, 0.96)),
        linear-gradient(45deg, #DCE4E8, #EDF1F3);
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 44px;
    overflow: hidden;
}

.auth-visual::before {
    content: "";
    min-height: 52%;
    display: block;
    margin-bottom: 36px;
    border: 18px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(135deg, rgba(84, 166, 255, 0.22), rgba(255, 255, 255, 0.08)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 10px, transparent 10px 20px);
}

.auth-visual h1 {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--white);
    text-align: left;
    font-size: 38px;
    line-height: 1.25;
}

.auth-visual p {
    max-width: 640px;
    margin: 0;
    color: var(--secondary-300);
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
}

.auth-panel {
    display: grid;
    place-items: center;
    padding: 48px;
}

.auth-card {
    width: min(100%, 520px);
}

.auth-card .grid-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-card #datos-medico {
    margin-top: 8px;
}

.auth-card .drop-zone {
    min-height: 78px;
}

.auth-logo {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin: 0 auto 120px;
    border-radius: 14px;
    color: var(--white);
    background: var(--secondary-900);
    font-weight: 900;
}

.auth-card h1 {
    margin: 0 0 12px;
    color: var(--secondary-800);
    font-size: 40px;
    text-align: left;
}

.auth-card p {
    text-align: left;
    color: var(--secondary-400);
}

.auth-card button {
    background: #000;
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .sidebar-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .topbar-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .clinical-tabs,
    .patient-summary-grid,
    .vitals-grid,
    .future-module-grid {
        grid-template-columns: 1fr;
    }

    .chip-grid {
        grid-template-columns: 1fr;
    }

    .clinical-actions-bar,
    .clinical-final-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .clinical-top-strip,
    .clinical-tabs {
        position: static;
    }

    .stat-grid,
    .dashboard-columns,
    .quick-actions,
    .auth-body {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        min-height: 360px;
    }

    .auth-logo {
        margin-bottom: 48px;
    }

    .auth-card .grid-form {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   HC PROJECT VISUAL RENEWAL
   Capa global de identidad visual: clinica, compacta y con profundidad.
   -------------------------------------------------------------------------- */

:root {
    /* Typography */
    --font-sans: "Poppins", Inter, "Plus Jakarta Sans", Manrope, Arial, sans-serif;

    /* Backgrounds and surfaces */
    --background: #F3F7FA;
    --surface-base: #F3F7FA;
    --surface-shell: #EEF4F7;
    --surface-raised: #FFFFFF;
    --surface-card: #FEFEFC;
    --surface-subtle: #F8FAFC;
    --surface-interactive: #F5F8FA;
    --surface-floating: #FFFFFF;
    --surface-input: #FBFCFD;

    /* Text */
    --text-strong: #12272F;
    --text-main: #243B43;
    --text-muted: #6E7E86;
    --text-soft: #91A0A7;

    /* Borders and accents */
    --border: #DDE7EC;
    --border-soft: rgba(19, 45, 55, 0.08);
    --border-focus: rgba(31, 109, 107, 0.42);
    --primary-900: #082F3C;
    --primary-800: #0D4049;
    --primary-700: #15565B;
    --primary-600: #1F6D6B;
    --primary-500: #2B7F75;
    --primary-400: #59B29F;
    --primary-300: #82D8BE;
    --primary-200: #B2F2D8;
    --primary-100: #D7F8E8;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(8, 47, 60, 0.05);
    --shadow-sm: 0 8px 22px rgba(8, 47, 60, 0.07);
    --shadow-md: 0 16px 42px rgba(8, 47, 60, 0.10);
    --shadow-lg: 0 24px 70px rgba(8, 47, 60, 0.18);
    --shadow-soft: var(--shadow-sm);

    /* Radius */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius: var(--radius-lg);

    /* Spacing and motion */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --motion-fast: 150ms ease-out;
    --motion-med: 210ms cubic-bezier(0.2, 0.8, 0.2, 1);
    --sidebar-width: 286px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(13, 64, 73, 0.28) transparent;
}

html {
    background: var(--surface-base);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% -10%, rgba(89, 178, 159, 0.12), transparent 34%),
        linear-gradient(180deg, #F8FBFC 0%, var(--surface-base) 42%, #EFF5F8 100%);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a,
button,
input,
select,
textarea {
    transition:
        background-color var(--motion-fast),
        border-color var(--motion-fast),
        box-shadow var(--motion-fast),
        color var(--motion-fast),
        opacity var(--motion-fast),
        transform var(--motion-fast);
}

a {
    color: var(--primary-700);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--primary-600);
}

.app-shell {
    background: transparent;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(8, 47, 60, 0.98), rgba(12, 45, 56, 0.96)),
        var(--primary-900);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 18px 0 48px rgba(8, 47, 60, 0.12);
}

.brand {
    min-height: 94px;
    padding: 24px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    font-weight: 700;
}

.brand-title {
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
}

.brand-subtitle {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 400;
}

.sidebar-nav {
    gap: 4px;
    padding: 18px 14px;
}

.sidebar-link {
    position: relative;
    min-height: 44px;
    padding: 11px 14px 11px 18px;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

.sidebar-link::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 999px;
    background: var(--primary-300);
    transform: translateY(-50%);
    transition: opacity 180ms ease;
    opacity: 0;
}

.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.075);
    color: #FFFFFF;
    transform: none;
}

.sidebar-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.sidebar-link.active::before {
    height: 22px;
    opacity: 1;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding: 16px 14px 22px;
}

.main-panel {
    background: transparent;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 78px;
    padding: 17px 30px;
    border-bottom: 1px solid rgba(221, 231, 236, 0.75);
    background: rgba(248, 251, 252, 0.88);
    backdrop-filter: blur(14px);
}

.topbar h1 {
    color: var(--text-strong);
    font-size: clamp(22px, 2vw, 27px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.topbar p {
    max-width: 840px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

.topbar-actions {
    gap: 10px;
}

.online-pill,
.avatar-pill,
.quick-plus {
    box-shadow: var(--shadow-xs);
}

.online-pill {
    min-height: 36px;
    border-color: var(--border-soft);
    background: var(--surface-floating);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 500;
}

.online-dot {
    background: #20B56B;
    box-shadow: 0 0 0 4px rgba(32, 181, 107, 0.12);
}

.quick-plus {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(8, 47, 60, 0.08);
    background: var(--primary-800);
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 600;
}

.quick-plus:hover {
    background: var(--primary-600);
    box-shadow: var(--shadow-sm);
}

.quick-plus:active,
.btn-primary:active,
.btn-secondary:active,
.btn-table:active,
.quick-action:active,
button:active {
    transform: scale(0.98);
}

.avatar-pill {
    border: 1px solid var(--border-soft);
    background: var(--surface-interactive);
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.avatar-pill:hover {
    background: #EAF2F4;
    color: var(--primary-800);
}

.topbar-dropdown {
    padding: 8px;
    border-color: var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-floating);
    box-shadow: var(--shadow-lg);
    transform: translateY(4px) scale(0.98);
    opacity: 0;
    transform-origin: top right;
}

.topbar-dropdown.open {
    animation: hcDropdownIn 170ms ease-out forwards;
}

.topbar-dropdown a,
.dropdown-empty {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
}

.topbar-dropdown a:hover {
    background: var(--surface-interactive);
    color: var(--primary-800);
}

.dropdown-title {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.profile-summary {
    border-bottom-color: var(--border-soft);
}

.profile-summary strong {
    color: var(--text-strong);
    font-weight: 600;
}

.profile-summary span {
    color: var(--text-muted);
    font-weight: 400;
}

.content {
    padding: 30px;
}

.content-grid {
    gap: 22px;
}

.card,
.stat-card,
.panel-card,
.contenedor,
.login-container,
.clinical-top-strip,
.clinical-actions-bar,
.clinical-final-bar,
.clinical-tabs,
.clinical-card,
.filtros-citas,
.nota-sistema,
.tabla-responsive {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.stat-grid,
.stats-grid {
    gap: 18px;
}

.stat-card {
    min-height: 118px;
    padding: 20px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
        var(--surface-card);
}

.stat-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.stat-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.stat-value {
    margin-top: 18px;
    color: var(--text-strong);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.stat-note {
    margin-top: 6px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 400;
}

.dashboard-columns {
    gap: 22px;
}

.panel-card {
    padding: 22px;
}

.panel-card h2,
.panel-card h3,
.clinical-actions-bar h2,
.section-heading h3,
.future-card h4 {
    color: var(--text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.panel-card h2,
.clinical-actions-bar h2 {
    font-size: 19px;
}

.panel-card h3,
.section-heading h3 {
    font-size: 16px;
}

.panel-card > p,
.panel-header p,
.clinical-actions-bar p,
.future-card p {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

.appointment-item,
.activity-item,
.quick-action {
    border-color: var(--border-soft);
    background: var(--surface-subtle);
    box-shadow: none;
}

.appointment-item:hover,
.activity-item:hover,
.quick-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.patient-avatar {
    background: #E6F2F1;
    color: var(--primary-800);
    font-weight: 600;
}

.patient-name {
    color: var(--text-strong);
    font-weight: 600;
}

.patient-meta {
    color: var(--text-muted);
    font-size: 12px;
}

.quick-action {
    min-height: 70px;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

.quick-action.primary,
.btn-primary {
    background: linear-gradient(180deg, var(--primary-700), var(--primary-800));
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(13, 64, 73, 0.16);
}

.quick-action.primary:hover,
.btn-primary:hover {
    background: linear-gradient(180deg, var(--primary-600), var(--primary-700));
    color: #FFFFFF;
    box-shadow: 0 12px 28px rgba(13, 64, 73, 0.18);
}

.acciones-superiores {
    justify-content: flex-start;
    margin: 0;
}

.menu a,
.acciones-superiores a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-floating);
    color: var(--text-main);
    box-shadow: var(--shadow-xs);
    font-size: 13px;
    font-weight: 500;
}

.menu a:hover,
.acciones-superiores a:hover {
    background: var(--surface-interactive);
    color: var(--primary-800);
    transform: translateY(-1px);
}

.filtros-citas,
.nota-sistema {
    margin: 0;
    padding: 18px;
    background: var(--surface-subtle);
}

.nota-sistema {
    border-left: 4px solid var(--primary-500);
    color: var(--text-main);
    box-shadow: var(--shadow-xs);
}

label {
    margin: 0 0 6px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 500;
}

.grid-form {
    gap: 14px;
}

input,
select,
textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-input);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

textarea {
    min-height: 92px;
    resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #C8D7DE;
    background: #FFFFFF;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    background: #FFFFFF;
    box-shadow:
        0 0 0 4px rgba(43, 127, 117, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

input[readonly],
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

button,
.menu a,
.acciones-superiores a,
.acciones-tabla a,
.boton-tabla,
.btn-primary,
.btn-secondary,
.btn-table {
    min-height: 40px;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

.btn-secondary,
.btn-table,
.boton-tabla,
.acciones-tabla a {
    border: 1px solid var(--border-soft);
    background: var(--surface-floating);
    color: var(--text-main);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover,
.btn-table:hover,
.boton-tabla:hover,
.acciones-tabla a:hover {
    background: var(--surface-interactive);
    color: var(--primary-800);
    transform: translateY(-1px);
}

.btn-table.danger,
.danger,
.boton-tabla.peligro {
    color: var(--error-700);
}

.btn-table.danger:hover,
.danger:hover,
.boton-tabla.peligro:hover {
    background: var(--error-100);
    color: var(--error-800);
}

.tabla-responsive {
    overflow-x: auto;
    background: var(--surface-card);
}

table {
    width: 100%;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-soft);
    background: #EEF5F7;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(221, 231, 236, 0.70);
    color: var(--text-main);
    font-size: 13px;
}

tbody tr {
    transition: background-color var(--motion-fast), opacity var(--motion-fast);
}

tbody tr:hover {
    background: rgba(89, 178, 159, 0.055);
}

tbody tr:last-child td {
    border-bottom: 0;
}

.estado-cita,
.estado-listo,
.badge,
.save-status {
    min-height: 26px;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.estado-cita,
.badge-muted {
    background: #EDF3F5;
    color: var(--text-muted);
}

.estado-listo,
.badge-success,
.save-status-clean,
.save-status-saved {
    border-color: rgba(76, 122, 11, 0.08);
    background: #ECF8DF !important;
    color: #416E0A !important;
}

.badge-warning,
.save-status-dirty {
    background: #FFF6D9 !important;
    color: #835A16 !important;
}

.badge-info,
.badge-role,
.save-status-saving {
    background: #E5F4FF !important;
    color: #1C5F8E !important;
}

.badge-error,
.badge-danger,
.save-status-error {
    background: #FCE3E1 !important;
    color: #8D1648 !important;
}

.row-completed {
    background: #EAEFF2 !important;
    color: var(--text-muted);
}

.row-cancelled,
.row-no-show {
    background: #FFF0EF !important;
}

.form-card {
    gap: 18px;
}

.section-divider {
    background: var(--border-soft);
}

.detail-grid > div,
.patient-summary-grid > div,
.vital-card,
.future-card,
.clinical-chip-card,
.clinical-accordion {
    border-color: var(--border-soft);
    background: var(--surface-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.detail-grid span,
.patient-summary-grid span,
.vital-card label,
.eyebrow {
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.detail-grid strong,
.patient-summary-grid strong {
    color: var(--text-main);
    font-weight: 600;
}

.clinical-workspace {
    gap: 18px;
}

.clinical-top-strip {
    top: 82px;
    z-index: 20;
    padding: 15px;
    background:
        linear-gradient(135deg, rgba(215, 248, 232, 0.62), rgba(255, 255, 255, 0.96)),
        var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.clinical-top-strip strong {
    color: var(--text-strong);
    font-weight: 600;
}

.clinical-top-strip > span {
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 500;
    box-shadow: inset 0 0 0 1px rgba(19, 45, 55, 0.05);
}

.clinical-actions-bar,
.clinical-final-bar {
    background: var(--surface-card);
}

.clinical-tabs {
    top: 156px;
    gap: 6px;
    padding: 7px;
    background: #EAF2F5;
    box-shadow: var(--shadow-xs);
}

.clinical-tab {
    min-height: 40px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.clinical-tab:hover {
    background: rgba(255, 255, 255, 0.66);
    color: var(--text-main);
}

.clinical-tab.active {
    background: var(--surface-floating);
    color: var(--primary-800);
    box-shadow: var(--shadow-xs);
}

.clinical-tab-panel {
    opacity: 0;
    transform: translateY(4px);
}

.clinical-tab-panel.active {
    animation: hcTabIn 180ms ease-out forwards;
}

.clinical-card {
    gap: 15px;
    padding: 19px;
    background: var(--surface-card);
}

.clinical-card:hover {
    box-shadow: var(--shadow-sm);
}

.section-heading {
    padding-bottom: 2px;
}

.patient-summary-grid,
.vitals-grid,
.future-module-grid {
    gap: 10px;
}

.patient-summary-grid > div,
.vital-card,
.future-card {
    border-radius: var(--radius-md);
}

.segment-option span,
.chip-check span {
    min-height: 34px;
    border-color: var(--border-soft);
    background: var(--surface-floating);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 500;
}

.segment-option span:hover,
.chip-check span:hover {
    background: #EDF7F5;
    border-color: rgba(43, 127, 117, 0.20);
}

.segment-option input:checked + span,
.chip-check input:checked + span,
.clinical-chip-card.selected .chip-check span {
    border-color: rgba(43, 127, 117, 0.34);
    background: #E2F6ED;
    color: var(--primary-800);
    box-shadow: inset 0 0 0 1px rgba(43, 127, 117, 0.10);
}

.clinical-chip-card {
    border-radius: var(--radius-md);
}

.clinical-accordion summary {
    color: var(--text-main);
    font-weight: 600;
}

.clinical-table input,
.clinical-table select {
    min-width: 126px;
}

.tab-footer {
    padding-top: 2px;
}

.save-status {
    position: relative;
    padding-left: 22px;
}

.save-status::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    transform: translateY(-50%);
}

.modal-backdrop {
    background: rgba(8, 47, 60, 0.32);
    backdrop-filter: blur(5px);
    animation: hcFadeIn 150ms ease-out both;
}

.modal-card {
    border-color: var(--border-soft);
    border-radius: var(--radius-xl);
    background: var(--surface-floating);
    box-shadow: var(--shadow-lg);
    animation: hcModalIn 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.modal-card h3 {
    color: var(--text-strong);
    font-weight: 600;
}

.modal-card p {
    color: var(--text-main);
    font-size: 13px;
}

.alerta {
    padding: 13px 15px;
    border-color: var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-floating);
    box-shadow: var(--shadow-xs);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
}

.alerta.success {
    background: #ECF8DF;
    color: #416E0A;
}

.alerta.warning {
    background: #FFF6D9;
    color: #835A16;
}

.alerta.danger,
.alerta.error {
    background: #FCE3E1;
    color: #8D1648;
}

.auth-body {
    background: var(--surface-base);
}

.auth-visual {
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 72% 22%, rgba(89, 178, 159, 0.24), transparent 30%),
        linear-gradient(145deg, rgba(8, 47, 60, 0.96), rgba(17, 39, 49, 0.98));
    box-shadow: var(--shadow-lg);
}

.auth-visual::before {
    border-width: 0;
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.035)),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 18px);
}

.auth-visual h1 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.auth-visual p,
.auth-card p {
    font-size: 14px;
    font-weight: 400;
}

.auth-logo {
    margin-bottom: 72px;
    background: var(--primary-800);
    font-weight: 700;
}

.auth-card {
    padding: 26px;
    border-radius: var(--radius-xl);
    background: rgba(255, 255, 255, 0.72);
}

.auth-card h1 {
    color: var(--text-strong);
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.auth-card button {
    background: linear-gradient(180deg, var(--primary-700), var(--primary-800));
}

.drop-zone {
    border-color: rgba(43, 127, 117, 0.28);
    border-style: dashed;
    background: #F2FAF7;
    color: var(--primary-800);
}

.drop-zone:hover {
    background: #E9F7F2;
    border-color: rgba(43, 127, 117, 0.42);
}

.patient-module {
    gap: 18px;
}

.view-switch {
    display: inline-flex;
    width: fit-content;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background: #EAF2F5;
    box-shadow: var(--shadow-xs);
}

.view-switch a {
    min-width: 116px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.view-switch a:hover {
    background: rgba(255, 255, 255, 0.62);
    color: var(--text-main);
}

.view-switch a.active {
    background: var(--surface-floating);
    color: var(--primary-800);
    box-shadow: var(--shadow-xs);
}

.patient-profile-card {
    display: grid;
    gap: 18px;
    padding: 22px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(215, 248, 232, 0.58), rgba(255, 255, 255, 0.96)),
        var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.patient-profile-card h2 {
    margin: 4px 0 0;
    color: var(--text-strong);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.patient-profile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.patient-profile-grid > div {
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.66);
}

.patient-profile-grid span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-soft);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.patient-profile-grid strong {
    color: var(--text-main);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pagination-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

.appointment-calendar {
    gap: 16px;
}

.calendar-toolbar,
.calendar-controls,
.calendar-navigation,
.calendar-filter,
.calendar-legend,
.calendar-mobile-navigation,
.appointment-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calendar-toolbar,
.calendar-controls,
.appointment-detail-header {
    justify-content: space-between;
}

.calendar-controls {
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.calendar-navigation {
    flex-wrap: wrap;
}

.calendar-nav-button {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-floating);
    color: var(--text-main);
    font-size: 25px;
    line-height: 1;
    text-decoration: none;
}

.calendar-nav-button:hover {
    background: var(--surface-interactive);
}

.calendar-range {
    color: var(--text-main);
    font-size: 13px;
    font-weight: 600;
}

.calendar-filter {
    flex-wrap: wrap;
}

.calendar-filter label {
    margin: 0;
}

.calendar-filter input {
    width: 145px;
}

.calendar-filter select {
    width: min(270px, 100%);
}

.calendar-legend {
    flex-wrap: wrap;
    gap: 8px;
}

.calendar-legend-item,
.calendar-count {
    font-size: 11px;
    font-weight: 500;
}

.calendar-legend-item {
    padding: 5px 8px;
    border-left: 3px solid var(--primary-500);
    border-radius: 3px;
    background: #E8F5F1;
}

.calendar-count {
    margin-left: auto;
    color: var(--text-muted);
}

.calendar-scroll {
    overflow: auto;
    max-height: min(72vh, 950px);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.calendar-grid {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
}

.calendar-grid th,
.calendar-grid td {
    border-right: 1px solid var(--border-soft);
}

.calendar-grid th:last-child,
.calendar-grid td:last-child {
    border-right: 0;
}

.calendar-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px;
    text-align: left;
}

.calendar-grid .calendar-hour-heading,
.calendar-grid .calendar-hour {
    width: 68px;
    text-align: center;
}

.calendar-grid .calendar-hour {
    position: sticky;
    left: 0;
    z-index: 1;
    padding: 12px 6px;
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.calendar-grid thead .calendar-day a {
    display: block;
    color: var(--text-main);
    text-decoration: none;
}

.calendar-grid thead .calendar-day span {
    display: block;
    color: var(--text-muted);
}

.calendar-grid .is-today {
    background: #E4F4EF;
}

.calendar-grid td {
    padding: 4px;
    vertical-align: top;
}

.calendar-slot {
    display: grid;
    min-height: 46px;
    gap: 4px;
    align-content: start;
}

.calendar-event,
.calendar-free {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 2px;
    padding: 6px 7px;
    border-left: 3px solid var(--primary-500);
    border-radius: 3px;
    background: #E8F5F1;
    color: var(--text-main);
    font-size: 11px;
    line-height: 1.35;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.calendar-event strong {
    font-weight: 600;
}

.calendar-event small,
.calendar-event-time {
    color: var(--text-muted);
    font-size: 10px;
}

.calendar-event:hover,
.calendar-free:hover {
    filter: brightness(0.96);
}

.calendar-free {
    border: 1px dashed #BCD5CD;
    background: #F6FAF8;
    color: var(--primary-700);
    text-align: center;
}

.calendar-unavailable {
    padding: 8px 4px;
    color: var(--text-soft);
    font-size: 10px;
    text-align: center;
}

.calendar-event.is-confirmed,
.calendar-legend-item.is-confirmed {
    border-left-color: var(--info-600);
    background: var(--info-100);
}

.calendar-event.is-admitted,
.calendar-legend-item.is-admitted {
    border-left-color: var(--success-700);
    background: var(--success-100);
}

.calendar-event.is-completed,
.calendar-legend-item.is-completed {
    border-left-color: var(--secondary-400);
    background: var(--secondary-100);
}

.calendar-event.is-cancelled,
.calendar-legend-item.is-cancelled,
.calendar-event.is-no-show {
    border-left-color: var(--error-500);
    background: var(--error-100);
}

.calendar-mobile-navigation {
    display: none;
}

.appointment-detail-header,
.appointment-detail-grid {
    padding: 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.appointment-detail-header h2 {
    margin: 0 0 8px;
    font-size: 18px;
}

.appointment-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
}

.appointment-detail-grid dt {
    color: var(--text-muted);
    font-size: 11px;
}

.appointment-detail-grid dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 500;
}

.appointment-detail-wide {
    grid-column: 1 / -1;
}

@keyframes hcDropdownIn {
    from {
        opacity: 0;
        transform: translateY(5px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes hcTabIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hcFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hcModalIn {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (max-width: 1180px) {
    .stat-grid,
    .stats-grid,
    .patient-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vitals-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        position: relative;
        height: auto;
        box-shadow: var(--shadow-md);
    }

    .brand {
        min-height: auto;
    }

    .sidebar-nav {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 12px 14px 16px;
    }

    .sidebar-link {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 9px 13px;
        white-space: nowrap;
    }

    .sidebar-link::before {
        display: none;
    }

    .sidebar-footer {
        display: none;
    }

    .topbar {
        position: sticky;
        padding: 16px 18px;
    }

    .content {
        padding: 18px;
    }

    .dashboard-columns,
    .future-module-grid,
    .quick-actions,
    .filters-row {
        grid-template-columns: 1fr;
    }

    .clinical-top-strip,
    .clinical-tabs {
        position: static;
    }
}

@media (max-width: 680px) {
    .calendar-toolbar,
    .calendar-controls,
    .appointment-detail-header {
        align-items: stretch;
        flex-direction: column;
    }

    .calendar-filter {
        display: grid;
        grid-template-columns: 1fr;
    }

    .calendar-filter input,
    .calendar-filter select {
        width: 100%;
    }

    .calendar-mobile-navigation {
        display: flex;
        justify-content: space-between;
    }

    .calendar-grid {
        min-width: 0;
    }

    .calendar-grid .calendar-hour-heading,
    .calendar-grid .calendar-hour {
        width: 62px;
    }

    .calendar-grid .calendar-day:not(.is-selected) {
        display: none;
    }

    .calendar-event,
    .calendar-free {
        font-size: 11px;
    }

    .calendar-count {
        width: 100%;
        margin-left: 0;
    }

    .appointment-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body {
        font-size: 13px;
    }

    .topbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .topbar-actions {
        justify-content: space-between;
    }

    .online-pill {
        display: none;
    }

    .stat-grid,
    .stats-grid,
    .patient-summary-grid,
    .vitals-grid,
    .chip-grid,
    .detail-grid,
    .grid-form,
    .grid-form.tres-columnas,
    .grid-form.cuatro-columnas {
        grid-template-columns: 1fr;
    }

    .panel-card,
    .clinical-card,
    .stat-card,
    .filtros-citas,
    .nota-sistema {
        padding: 16px;
        border-radius: var(--radius-md);
    }

    .clinical-tabs {
        grid-template-columns: 1fr 1fr;
    }

    .view-switch,
    .view-switch a,
    .pagination-row {
        width: 100%;
    }

    .patient-profile-grid {
        grid-template-columns: 1fr;
    }

    .pagination-row {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-tabla,
    .actions-inline,
    .form-actions,
    .tab-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-tabla a,
    .acciones-tabla form,
    .acciones-tabla button,
    .btn-primary,
    .btn-secondary,
    .btn-table {
        width: 100%;
    }

    .auth-panel {
        padding: 24px 18px;
    }

    .auth-visual {
        margin: 12px;
        padding: 28px;
    }
}

.clinical-sticky-context {
    position: sticky;
    top: var(--clinical-sticky-top, 78px);
    z-index: 30;
    min-width: 0;
    box-shadow: var(--shadow-sm);
}

.clinical-workspace .clinical-top-strip {
    position: static;
    top: auto;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: none;
}

.clinical-vitals-strip {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 48px;
    padding: 7px 12px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: #EDF5F7;
    scrollbar-width: thin;
}

.clinical-vital {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 12px;
    white-space: nowrap;
    border-right: 1px solid #CFDEE3;
    color: var(--text-muted);
    font-size: 12px;
}

.clinical-vital:last-child {
    border-right: 0;
}

.clinical-vital strong {
    color: var(--primary-900);
    font-size: 13px;
    font-weight: 600;
}

.clinical-vital small {
    font-size: 11px;
    font-weight: 400;
}

.clinical-vitals-empty {
    padding: 2px 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.clinical-workspace .clinical-tabs {
    position: static;
    top: auto;
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.clinical-workspace .clinical-tab {
    flex: 0 0 auto;
    min-height: 38px;
    white-space: nowrap;
}

.diagnosis-priority {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.clinical-order-group + .clinical-order-group {
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.clinical-order-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.clinical-order-heading h4 {
    margin: 0;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
}

.clinical-order-heading .btn-secondary {
    width: auto;
    min-height: 34px;
    padding: 6px 10px;
    white-space: nowrap;
}

.clinical-order-list {
    display: grid;
    gap: 0;
}

.clinical-order-item {
    padding: 12px 0;
    border-top: 1px solid var(--border);
}

.clinical-order-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
    align-items: end;
    gap: 10px;
}

.clinical-order-item[data-order-item="lab"] .clinical-order-main {
    grid-template-columns: minmax(0, 1fr) 34px;
}

.clinical-order-main label,
.clinical-order-extra label {
    min-width: 0;
    margin: 0;
}

.clinical-order-remove {
    width: 34px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--error-700);
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
}

.clinical-order-remove:hover {
    background: var(--error-100);
}

.clinical-order-details {
    margin-top: 8px;
}

.clinical-order-details summary {
    width: fit-content;
    color: var(--primary-700);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.clinical-order-extra {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 10px;
}

.clinical-order-empty {
    margin: 0;
    padding: 12px 0 16px;
    color: var(--text-muted);
    font-size: 13px;
}

.clinical-medication-list {
    display: grid;
    gap: 12px;
}

.clinical-medication-item {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--background);
    animation: clinical-medication-enter 180ms ease-out;
}

@keyframes clinical-medication-enter {
    from { opacity: .6; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.clinical-medication-heading,
.clinical-recipe-version {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.clinical-medication-heading {
    margin-bottom: 12px;
}

.clinical-medication-tools {
    display: flex;
    gap: 4px;
}

.clinical-medication-tools button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-card);
    cursor: pointer;
}

.clinical-medication-tools button:disabled {
    opacity: .4;
    cursor: default;
}

.clinical-medication-tools [data-remove-medication] {
    color: var(--error-700);
}

.clinical-medication-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.clinical-medication-grid label {
    min-width: 0;
}

.clinical-medication-grid input,
.clinical-medication-grid textarea {
    width: 100%;
}

.clinical-medication-wide {
    grid-column: 1 / -1;
}

.clinical-recipe-versions {
    display: grid;
    gap: 0;
}

.clinical-recipe-version {
    padding: 9px 0;
    border-top: 1px solid var(--border);
}

.clinical-recipe-version .actions-inline {
    flex-wrap: nowrap;
}

.clinical-prescription-action {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0;
}

.clinical-recipe-preview summary {
    cursor: pointer;
    font-weight: 600;
}

.clinical-recipe-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.clinical-recipe-preview-grid > div + div {
    border-left: 1px solid var(--border);
    padding-left: 20px;
}

.clinical-recipe-preview-grid h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
}

.clinical-recipe-preview-item {
    margin-bottom: 14px;
    white-space: pre-line;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.5;
}

.clinical-document-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 18px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.clinical-document-tab {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 7px 12px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.clinical-document-tab.active {
    border-color: var(--border);
    background: var(--background);
    color: var(--primary-800);
}

.clinical-document-panel[hidden],
.clinical-document-heading [hidden] {
    display: none !important;
}

.clinical-document-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.clinical-document-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
    margin: 0 0 16px;
    border-top: 1px solid var(--border);
}

.clinical-document-preview > div {
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.clinical-document-preview dt {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.clinical-document-preview dd {
    margin: 3px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-line;
    font-size: 13px;
}

.clinical-document-date-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 620px) {
    .clinical-document-tabs { flex-wrap: nowrap; overflow-x: auto; }
    .clinical-document-tab { flex: 0 0 auto; }
    .clinical-document-preview,
    .clinical-document-date-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .clinical-medication-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .clinical-medication-grid {
        grid-template-columns: 1fr;
    }

    .clinical-recipe-version {
        align-items: flex-start;
        flex-direction: column;
    }

    .clinical-recipe-preview-grid {
        grid-template-columns: 1fr;
    }

    .clinical-recipe-preview-grid > div + div {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding: 12px 0 0;
    }
}

.clinical-form .segment-option input,
.clinical-form .chip-check input {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
}

@media (max-width: 680px) {
    .clinical-order-main,
    .clinical-order-item[data-order-item="lab"] .clinical-order-main {
        grid-template-columns: minmax(0, 1fr) 34px;
    }

    .clinical-order-main label:nth-of-type(2) {
        grid-column: 1;
    }

    .clinical-order-main .clinical-order-remove {
        grid-column: 2;
        grid-row: 1;
    }

    .clinical-order-extra {
        grid-template-columns: 1fr;
    }

    .clinical-workspace .clinical-top-strip {
        gap: 6px;
        padding: 9px 10px;
    }

    .clinical-workspace .clinical-top-strip > div {
        min-width: 0;
        flex: 1 1 100%;
    }

    .clinical-workspace .clinical-top-strip strong {
        overflow-wrap: anywhere;
        font-size: 13px;
    }

    .clinical-workspace .clinical-top-strip .clinical-meta {
        display: none;
    }

    .clinical-workspace .clinical-top-strip > span {
        min-height: 25px;
        padding: 3px 8px;
        font-size: 11px;
    }

    .clinical-vitals-strip {
        min-height: 42px;
        padding: 5px 7px;
    }

    .clinical-vital {
        padding: 2px 9px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* The existing sidebar has one layout on desktop and becomes a drawer on mobile. */
html[data-sidebar-mode="collapsed"] {
    --sidebar-width: 78px;
}

.app-shell {
    transition: none;
}

.sidebar {
    z-index: 60;
    min-width: 0;
}

.brand {
    gap: 8px;
    padding-left: 14px;
    padding-right: 14px;
}

.brand-mark {
    flex: 0 0 42px;
}

.brand-copy {
    min-width: 0;
    flex: 1;
    white-space: nowrap;
}

.sidebar-toggle,
.sidebar-mobile-close,
.sidebar-open-button {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.sidebar-toggle {
    color: rgba(255, 255, 255, 0.78);
    font-size: 28px;
}

.sidebar-toggle:hover,
.sidebar-mobile-close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}

.sidebar-mobile-close,
.sidebar-open-button,
.sidebar-backdrop {
    display: none;
}

.sidebar-link {
    gap: 12px;
    min-height: 48px;
    transition: background-color 180ms ease, color 180ms ease;
    transform: none;
}

.sidebar-link::before {
    height: 22px;
}

.sidebar-icon {
    flex: 0 0 24px;
    width: 24px;
    display: grid;
    place-items: center;
    height: 24px;
}

.sidebar-icon svg {
    display: block;
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-link, .sidebar-link::before, .sidebar-link::after {
        transition: none !important;
    }
}

.sidebar-label {
    white-space: nowrap;
}

.sidebar-link:focus-visible,
.sidebar-toggle:focus-visible,
.sidebar-mobile-close:focus-visible,
.sidebar-open-button:focus-visible {
    outline: 2px solid var(--primary-300);
    outline-offset: 2px;
}

@media (min-width: 701px) {
    html[data-sidebar-mode="collapsed"] .brand {
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        padding: 14px 8px;
    }

    html[data-sidebar-mode="collapsed"] .brand-copy,
    html[data-sidebar-mode="collapsed"] .sidebar-label {
        display: none;
    }

    html[data-sidebar-mode="collapsed"] .sidebar-toggle {
        transform: rotate(180deg);
    }

    html[data-sidebar-mode="collapsed"] .sidebar-nav {
        display: grid;
        gap: 4px;
        overflow: visible;
        padding: 14px 8px;
    }

    html[data-sidebar-mode="collapsed"] .sidebar-link {
        justify-content: center;
        width: 54px;
        height: 48px;
        padding: 0;
        margin: 0 auto;
    }

    html[data-sidebar-mode="collapsed"] .sidebar-link::before {
        left: 1px;
        display: block;
    }

    html[data-sidebar-mode="collapsed"] .sidebar-link::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        z-index: 90;
        padding: 7px 10px;
        border-radius: 6px;
        background: var(--primary-900);
        color: #FFFFFF;
        box-shadow: var(--shadow-sm);
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transform: translate(-5px, -50%);
        transition: opacity 150ms ease, transform 150ms ease;
    }

    html[data-sidebar-mode="collapsed"] .sidebar-link:hover::after,
    html[data-sidebar-mode="collapsed"] .sidebar-link:focus-visible::after {
        opacity: 1;
        transform: translate(0, -50%);
    }

    html[data-sidebar-mode="collapsed"] .sidebar-footer {
        padding: 12px 8px 18px;
    }
}

@media (min-width: 701px) and (max-width: 1024px) {
    .app-shell {
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    .sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
    }

    .sidebar-nav {
        display: grid;
        overflow: visible;
    }

    .sidebar-footer {
        display: block;
    }
}

@media (max-width: 700px) {
    .app-shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(82vw, 304px);
        height: 100dvh;
        transform: translateX(-105%);
        transition: transform 190ms ease;
        box-shadow: 18px 0 48px rgba(8, 47, 60, 0.22);
    }

    html[data-sidebar-open="true"] .sidebar {
        transform: translateX(0);
    }

    .brand {
        min-height: 78px;
    }

    .sidebar-toggle {
        display: none;
    }

    .sidebar-mobile-close {
        display: grid;
        color: #FFFFFF;
        font-size: 25px;
    }

    .sidebar-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: min-content;
        align-content: start;
        gap: 4px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 12px 14px;
    }

    .sidebar-link {
        width: 100%;
        min-height: 48px;
        padding: 11px 14px 11px 18px;
    }

    .sidebar-link::before {
        display: block;
    }

    .sidebar-footer {
        display: block;
    }

    .sidebar-open-button {
        display: grid;
        color: var(--primary-900);
        background: var(--surface-subtle);
        font-size: 20px;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 59;
        border: 0;
        background: rgba(4, 22, 30, 0.46);
    }

    html[data-sidebar-open="true"] .sidebar-backdrop {
        display: block;
    }

    html[data-sidebar-open="true"] body {
        overflow: hidden;
    }

    .topbar {
        justify-content: flex-start;
    }

    .topbar > div:first-of-type {
        min-width: 0;
        flex: 1;
    }

    .topbar-actions {
        width: auto;
        margin-left: auto;
    }
}

/* Autocompletado CIE-10: el codigo oficial solo se fija al elegir una sugerencia. */
.celda-autocomplete {
    position: relative;
}

.cie10-sugerencias {
    display: none;
    position: absolute;
    z-index: 30;
    top: calc(100% - 4px);
    right: 0;
    width: max(100%, min(480px, 70vw));
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(8, 47, 60, 0.16);
    color: var(--text-muted);
    font-size: 13px;
}

.cie10-sugerencias button {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cie10-sugerencias button:hover,
.cie10-sugerencias button:focus {
    background: var(--primary-100, #E6F2F0);
    outline: none;
}

.cie10-sugerencias button strong {
    display: inline-block;
    min-width: 52px;
    color: var(--primary-700);
}

.cie10-aviso {
    display: none;
    margin-top: 3px;
    color: var(--warning-900);
    font-size: 11px;
}

.cie10-pendiente .cie10-aviso {
    display: block;
}

.cie10-pendiente .cie10-codigo,
.cie10-pendiente .cie10-nombre {
    border-color: var(--warning-600);
}

/* Registro maestro de pacientes */
.patient-registry-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.patient-audit {
    margin: 10px 0 0;
    font-size: 12px;
}

/* Procedencia de la medicion vigente y acciones del medico */
.clinical-vitals-source {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-top: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--surface-raised, #FFFFFF);
    color: var(--text-muted);
    font-size: 12px;
}

.clinical-vitals-strip + .clinical-vitals-source {
    margin-top: -1px;
}

.clinical-vitals-source strong {
    color: var(--primary-900);
}

.clinical-vitals-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn-small {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 12px;
}

.vitals-modal-card {
    width: min(640px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
}

.vitals-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.vitals-modal-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.vitals-error {
    color: var(--error-700);
    font-size: 13px;
}

/* Ultima visita en Enfermeria */
.vitals-previous {
    padding: 14px 16px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-subtle, #F8FAFC);
}

.vitals-previous-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vitals-previous-head h2 {
    margin: 2px 0 0;
}

.vitals-previous-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.vitals-previous-grid div {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--surface-raised, #FFFFFF);
    font-size: 12px;
    color: var(--text-muted);
}

.vitals-previous-grid strong {
    color: var(--primary-900);
    font-size: 14px;
}

.vital-row-vigente td {
    background: var(--primary-100, #D7F8E8);
}

.vitals-history-table small {
    display: block;
}

.vitals-current-label {
    display: block;
    margin-top: 22px;
}

/* Las tablas del modulo de pacientes se desplazan dentro de su contenedor sin ensanchar la pagina. */
.patient-module > * {
    min-width: 0;
}

/* Texto solo para lectores de pantalla */
.sr-only,
.vital-tooltip {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Indicadores de apoyo visual de signos vitales: forma del icono + estilo + texto, no solo color */
.clinical-vital .vital-flag {
    display: inline-flex;
    align-self: center;
}

.clinical-vital .vital-flag .icon {
    width: 14px;
    height: 14px;
}

.clinical-vital[tabindex] {
    cursor: help;
    border-radius: 8px;
    transition: background-color 150ms ease, box-shadow 150ms ease;
}

.clinical-vital[tabindex]:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

.vital-normal .vital-flag {
    color: var(--success-800);
}

.vital-atencion {
    background: #FFF6DA;
}

.vital-atencion .vital-flag,
.vital-atencion strong {
    color: var(--warning-900) !important;
}

.vital-atencion strong {
    text-decoration: underline dotted 1.5px;
    text-underline-offset: 3px;
}

.vital-fuera_de_rango {
    background: #FCE8EA;
}

.vital-fuera_de_rango .vital-flag,
.vital-fuera_de_rango strong {
    color: var(--error-800) !important;
}

.vital-fuera_de_rango strong {
    font-weight: 700 !important;
    text-decoration: underline solid 2px;
    text-underline-offset: 3px;
}

.vital-invalido .vital-flag {
    color: var(--text-muted);
}

.vitals-tip-line,
.vitals-disclaimer {
    margin: 0;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-top: 0;
    background: var(--surface-raised, #FFFFFF);
    color: var(--text-main);
    font-size: 11.5px;
}

.vitals-disclaimer {
    color: var(--text-muted);
    font-size: 11px;
}

/* ==========================================================================
   Dashboard: pantalla de trabajo (saludo + acciones + metricas + agenda)
   ========================================================================== */
.dash {
    display: grid;
    gap: 18px;
    min-width: 0;
    font-family: var(--font-sans);
}

.dash .icon {
    flex: 0 0 auto;
}

.dash-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 22px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F7F8 100%);
    box-shadow: var(--shadow-xs), 0 0 0 1px var(--border-soft);
}

.dash-greeting h2 {
    margin: 2px 0 4px;
    color: var(--text-strong);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.dash-date {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.dash-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--primary-700);
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dash-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.dash-action .icon {
    color: var(--primary-600);
}

.dash-action:hover,
.dash-action:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--border-focus), var(--shadow-sm);
}

.dash-action:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

.dash-action.is-primary {
    background: var(--primary-800);
    color: #FFFFFF;
}

.dash-action.is-primary .icon {
    color: var(--primary-200);
}

.dash-metrics {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 2fr;
    gap: 14px;
}

.metric-hero {
    display: grid;
    align-content: space-between;
    gap: 10px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, var(--primary-800) 0%, var(--primary-900) 100%);
    box-shadow: var(--shadow-md);
    color: #E7F4F1;
}

.metric-hero-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
}

.metric-hero-head .icon {
    color: var(--primary-300);
}

.metric-hero-value {
    color: #FFFFFF;
    font-size: 44px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-breakdown {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    list-style: none;
    font-size: 12.5px;
}

.metric-breakdown li {
    display: flex;
    justify-content: space-between;
    color: #C6E3DC;
}

.metric-breakdown strong {
    color: #FFFFFF;
    font-weight: 600;
}

.metric-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.metric-tile {
    display: grid;
    align-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
}

.metric-tile strong {
    color: var(--text-strong);
    font-size: 30px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.metric-tile small {
    color: var(--text-muted);
    font-size: 11.5px;
}

.metric-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.metric-label .icon {
    width: 16px;
    height: 16px;
    color: var(--primary-600);
}

.metric-tile.is-attention {
    background: #FFFBEF;
}

.metric-tile.is-attention .metric-label .icon {
    color: var(--warning-800);
}

.dash-main {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 14px;
    align-items: start;
}

.dash-agenda,
.dash-progress {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-sm);
}

.dash-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dash-section-head h2 {
    margin: 0;
    color: var(--text-strong);
    font-size: 16px;
    font-weight: 600;
}

.dash-section-head p {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.dash-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--primary-700);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.dash-link:hover {
    text-decoration: underline;
}

.agenda-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.agenda-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background-color 150ms ease;
}

.agenda-row:hover {
    background: var(--surface-interactive);
}

.agenda-row.is-next {
    background: #EEF7F5;
    box-shadow: inset 3px 0 0 var(--primary-500);
}

.agenda-time {
    display: grid;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.agenda-time small {
    color: var(--primary-700);
    font-size: 10.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agenda-patient {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.agenda-patient > div {
    display: grid;
    min-width: 0;
}

.agenda-patient strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-interactive);
    color: var(--primary-700);
    font-size: 12px;
    font-weight: 600;
}

.agenda-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-meta .icon {
    width: 14px;
    height: 14px;
}

.agenda-stage {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-interactive);
    color: var(--text-main);
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}

.stage-por_admitir { background: #FFF6DA; color: var(--warning-900); }
.stage-enfermeria { background: #E8F1FB; color: var(--info-800); }
.stage-espera_medico { background: #E3F4EE; color: var(--primary-800); }
.stage-en_consulta { background: var(--primary-800); color: #FFFFFF; }

.agenda-action {
    padding: 7px 12px;
    border-radius: 10px;
    background: var(--surface-interactive);
    color: var(--primary-800);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

.agenda-action:hover,
.agenda-action:focus-visible {
    background: var(--primary-800);
    color: #FFFFFF;
}

.dash-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 12px;
    color: var(--text-muted);
    text-align: center;
}

.dash-empty .icon {
    width: 28px;
    height: 28px;
    color: var(--primary-400);
}

.dash-empty p {
    margin: 0;
    font-size: 13px;
}

.progress-figure {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.progress-figure strong {
    color: var(--text-strong);
    font-size: 30px;
    font-weight: 600;
}

.progress-figure span {
    color: var(--text-muted);
    font-size: 12.5px;
}

.progress-track {
    height: 8px;
    margin: 10px 0 16px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-interactive);
}

.progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
}

.flow-steps {
    display: grid;
    gap: 8px;
    margin: 0;
}

.flow-steps div {
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
}

.flow-steps div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.flow-steps dt {
    color: var(--text-muted);
}

.flow-steps dd {
    margin: 0;
    color: var(--text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* iPad y portatiles pequenos */
@media (max-width: 1199px) {
    .dash-metrics {
        grid-template-columns: 1fr;
    }

    .metric-hero {
        grid-template-columns: auto 1fr;
        align-items: center;
    }

    .metric-hero-head {
        grid-column: 1 / -1;
    }

    .metric-breakdown {
        padding: 0 0 0 18px;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.14);
    }

    .dash-main {
        grid-template-columns: 1fr;
    }
}

/* Tablet vertical */
@media (max-width: 860px) {
    .metric-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* iPhone */
@media (max-width: 600px) {
    .dash {
        gap: 12px;
    }

    .dash-hero {
        padding: 16px;
    }

    .dash-actions {
        flex-wrap: nowrap;
        width: 100%;
        margin: 0 -2px;
        padding: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .dash-action {
        flex: 0 0 auto;
    }

    .metric-hero {
        grid-template-columns: 1fr;
    }

    .metric-breakdown {
        padding: 10px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 0;
    }

    .metric-tile strong {
        font-size: 26px;
    }

    .dash-agenda,
    .dash-progress {
        padding: 14px;
    }

    .agenda-row {
        grid-template-columns: 52px minmax(0, 1fr) auto;
        gap: 8px 10px;
        padding: 10px 8px;
    }

    .agenda-stage {
        grid-column: 2;
        justify-self: start;
    }

    .agenda-action {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .agenda-avatar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-action,
    .agenda-row,
    .agenda-action {
        transition: none;
    }

    .dash-action:hover {
        transform: none;
    }
}

/* ==========================================================================
   Admision: resumen, bloques en tarjetas, estado y accion principal
   ========================================================================== */
.adm {
    display: grid;
    gap: 16px;
    min-width: 0;
    font-family: var(--font-sans);
}

.adm .icon {
    flex: 0 0 auto;
}

.adm-summary {
    position: sticky;
    top: 8px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    padding: 14px 18px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-sm);
}

.adm-summary-patient {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.adm-summary-patient > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.adm-summary-patient strong {
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
}

.adm-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--primary-700), var(--primary-900));
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
}

.adm-eyebrow,
.adm-summary-grid dt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.adm-summary-grid dt .icon {
    width: 13px;
    height: 13px;
}

.adm-patient-badge {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

.adm-patient-badge.is-known {
    background: #E3F4EE;
    color: var(--primary-800);
}

.adm-patient-badge.is-new {
    background: #E8F1FB;
    color: var(--info-800);
}

.adm-summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    margin: 0;
}

.adm-summary-grid div {
    display: grid;
    gap: 2px;
}

.adm-summary-grid dd {
    margin: 0;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 500;
}

.adm-state {
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-interactive);
    font-size: 12px;
}

.adm-card {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
}

.adm-card-quiet {
    background: var(--surface-subtle);
    box-shadow: 0 0 0 1px var(--border-soft);
}

.adm-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.adm-card-icon {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #E9F4F2;
    color: var(--primary-700);
}

.adm-card-title {
    display: block;
    margin: 0;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
}

.adm-card-sub {
    display: block;
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 400;
}

.adm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.adm-form {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.adm-intro {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    background: #EEF5FA;
    color: var(--text-main);
    font-size: 13px;
}

.adm-intro .icon {
    color: var(--info-700);
}

.adm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 16px;
}

.adm-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
}

.adm-field.span-2,
.adm-readonly .span-2 {
    grid-column: span 2;
}

.adm-field label {
    margin: 0;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 500;
}

.adm-field label span {
    color: var(--error-600);
}

.adm-field input,
.adm-field select {
    width: 100%;
    min-height: 42px;
    margin: 0;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.adm-field input[readonly] {
    background: var(--surface-subtle);
    color: var(--text-muted);
}

.field-hint {
    min-height: 0;
    margin: 0;
    color: var(--text-muted);
    font-size: 11.5px;
}

.field-hint:empty {
    display: none;
}

.field-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--error-700);
    font-size: 12px;
    font-weight: 500;
}

.field-error::before {
    content: "!";
    display: inline-grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--error-700);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
}

.has-error input,
.has-error select {
    border-color: var(--error-500) !important;
    background: #FFF8F9;
    box-shadow: 0 0 0 3px rgba(206, 44, 96, 0.12);
}

.adm-subgroup {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.adm-subgroup-title {
    display: block;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.adm-readonly {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0;
}

.adm-readonly dt {
    color: var(--text-muted);
    font-size: 11.5px;
}

.adm-readonly dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 500;
}

.adm-confirm {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.adm-confirm[hidden] {
    display: none;
}

.adm-aside {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 12px;
}

.adm-flow {
    display: grid;
    gap: 0;
    margin: 12px 0 10px;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.adm-flow li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    color: var(--text-muted);
    font-size: 13px;
    counter-increment: paso;
}

.adm-flow li::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--surface-interactive);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
}

.adm-flow li.is-done::before {
    content: "✓";
    background: #E3F4EE;
    color: var(--primary-700);
}

.adm-flow li.is-current {
    color: var(--text-strong);
    font-weight: 600;
}

.adm-flow li.is-current::before {
    background: var(--primary-800);
    color: #FFFFFF;
}

.adm-status-note {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.adm-actions {
    display: grid;
    gap: 8px;
}

.adm-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 12px 18px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--primary-700), var(--primary-900));
    box-shadow: 0 10px 24px rgba(8, 47, 60, 0.22);
    color: #FFFFFF;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.adm-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(8, 47, 60, 0.28);
}

.adm-primary:focus-visible {
    outline: 3px solid var(--primary-300);
    outline-offset: 2px;
}

.adm-primary.is-busy {
    opacity: 0.75;
    cursor: progress;
}

.adm-secondary {
    padding: 8px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    text-decoration: none;
}

.adm-secondary:hover {
    color: var(--text-strong);
    text-decoration: underline;
}

/* Jornada */
.adm-day {
    padding: 0;
}

.adm-day > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
}

.adm-day > summary::-webkit-details-marker {
    display: none;
}

.adm-day > summary > span {
    display: grid;
}

.adm-day-chevron {
    color: var(--text-muted);
    transition: transform 150ms ease;
}

.adm-day[open] .adm-day-chevron {
    transform: rotate(90deg);
}

.adm-day-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 0;
    padding: 0 20px 12px;
}

.adm-day-filter label {
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.adm-day-filter input,
.adm-day-filter button {
    width: auto;
    min-height: 38px;
    margin: 0;
}

.adm-day-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0 12px 14px;
    list-style: none;
}

.adm-day-row {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    transition: background-color 150ms ease;
}

.adm-day-row:hover {
    background: var(--surface-interactive);
}

.adm-day-row.is-current {
    background: #EEF7F5;
    box-shadow: inset 3px 0 0 var(--primary-500);
}

.adm-day-row time {
    color: var(--text-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.adm-day-patient {
    display: grid;
    min-width: 0;
}

.adm-day-patient strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-day-patient span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adm-day-action {
    padding: 7px 14px;
    border-radius: 10px;
    background: var(--primary-800);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.adm-day-action:hover,
.adm-day-action:focus-visible {
    background: var(--primary-900);
}

.adm-day-done {
    color: var(--text-muted);
    font-size: 12px;
}

.adm-day-empty {
    padding: 14px 8px;
    color: var(--text-muted);
    font-size: 13px;
}

/* iPad horizontal y portatiles pequenos */
@media (max-width: 1180px) {
    .adm-grid,
    .adm-readonly {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet vertical y movil: todo apilado; la accion principal queda al alcance */
@media (max-width: 900px) {
    .adm-layout {
        grid-template-columns: 1fr;
    }

    .adm-aside {
        position: static;
    }

    .adm-actions {
        position: sticky;
        bottom: 0;
        z-index: 6;
        margin: 0 -4px;
        padding: 10px 4px calc(10px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(243, 247, 250, 0), var(--surface-base) 30%);
    }

    .adm-summary {
        position: static;
    }
}

@media (max-width: 600px) {
    .adm-grid,
    .adm-readonly {
        grid-template-columns: 1fr;
    }

    .adm-field.span-2,
    .adm-readonly .span-2 {
        grid-column: auto;
    }

    .adm-card {
        padding: 16px;
    }

    .adm-summary-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .adm-day-row {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .adm-day-row .estado-cita {
        grid-column: 2;
        justify-self: start;
    }

    .adm-day-row > :last-child {
        grid-column: 3;
        grid-row: 1 / span 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .adm-primary,
    .adm-day-chevron,
    .adm-day-row,
    .adm-field input,
    .adm-field select {
        transition: none;
    }
}

/* Los hijos de las rejillas pueden encogerse: las filas desplazables no ensanchan la pagina */
.dash > *,
.dash-hero > *,
.dash-metrics > *,
.dash-main > *,
.adm > *,
.adm-layout > *,
.adm-summary > * {
    min-width: 0;
}

.dash-actions {
    max-width: 100%;
}

@media (max-width: 600px) {
    /* En movil se prioriza leer el nombre completo del paciente */
    .agenda-patient strong,
    .adm-day-patient strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 900px) {
    /* El panel lateral se disuelve para que la accion principal quede fija sobre todo el formulario */
    .adm-aside {
        display: contents;
    }
}

/* ==========================================================================
   Interconsultas (Formulario 007)
   ========================================================================== */
.ic-page {
    display: grid;
    gap: 16px;
    min-width: 0;
    padding-bottom: 12px;
    font-family: var(--font-sans);
}

.ic-page > * {
    min-width: 0;
}

.ic-summary {
    position: static;
}

.ic-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: paso;
}

.ic-steps li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft);
    color: var(--text-muted);
    font-size: 12.5px;
    counter-increment: paso;
}

.ic-steps li::before {
    content: counter(paso);
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-interactive);
    font-size: 11px;
    font-weight: 600;
}

.ic-steps li.is-done::before {
    content: "✓";
    background: #E3F4EE;
    color: var(--primary-700);
}

.ic-steps li.is-current {
    color: var(--text-strong);
    font-weight: 600;
}

.ic-steps li.is-current::before {
    background: var(--primary-800);
    color: #FFFFFF;
}

.ic-stage {
    display: grid;
    gap: 16px;
}

.ic-stage .adm-card-head {
    margin-bottom: 0;
}

.ic-save-state {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.ic-field {
    display: grid;
    align-content: start;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.ic-field.span-2 {
    grid-column: span 2;
}

.ic-field label,
.ic-field legend,
.ic-label {
    margin: 0;
    padding: 0;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 500;
}

.ic-field textarea {
    width: 100%;
    min-height: 70px;
    margin: 0;
    resize: vertical;
    line-height: 1.5;
}

.ic-lectura {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-strong);
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.ic-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ic-field[hidden],
.ic-externo[hidden] {
    display: none;
}

.ic-segmented {
    display: inline-flex;
    flex: 0 0 auto;
    padding: 3px;
    border-radius: 10px;
    background: var(--surface-interactive);
}

.ic-segmented-wide {
    display: flex;
    flex-wrap: wrap;
}

.ic-segmented label {
    position: relative;
    margin: 0;
}

.ic-segmented input {
    position: absolute;
    opacity: 0;
}

.ic-segmented span {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.ic-segmented input:checked + span {
    background: var(--surface-raised);
    box-shadow: var(--shadow-xs);
    color: var(--primary-800);
}

.ic-segmented input:focus-visible + span {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

.ic-segmented input:disabled + span {
    cursor: default;
}

.ic-diagnosticos {
    display: grid;
    gap: 10px;
}

.ic-diag-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: diag;
}

.ic-diag-row {
    display: grid;
    grid-template-columns: 24px 64px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--surface-subtle);
    counter-increment: diag;
}

.ic-diag-row::before {
    content: counter(diag) ".";
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.ic-diag-codigo {
    color: var(--primary-800);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ic-diag-nombre {
    color: var(--text-strong);
    font-size: 13px;
}

.ic-diag-tipo {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-interactive);
    font-size: 12px;
    font-weight: 600;
}

.ic-diag-quitar {
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}

.ic-diag-quitar:hover {
    background: #FCE8EA;
    color: var(--error-700);
}

.ic-diag-vacio {
    color: var(--text-muted);
    font-size: 13px;
}

.ic-diag-agregar {
    position: relative;
}

.ic-cie-buscar {
    width: 100%;
    margin: 0;
}

.ic-cie-sugerencias {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    border-radius: 12px;
    background: var(--surface-floating);
    box-shadow: var(--shadow-md);
    color: var(--text-muted);
    font-size: 13px;
}

.ic-cie-sugerencias:empty {
    display: none;
}

.ic-cie-sugerencias button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ic-cie-sugerencias button:hover,
.ic-cie-sugerencias button:focus-visible {
    background: var(--surface-interactive);
}

.ic-cie-sugerencias strong {
    display: inline-block;
    min-width: 50px;
    color: var(--primary-700);
}

.ic-diag-historia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.ic-chip {
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--surface-interactive);
    color: var(--text-main);
    font-size: 12px;
    cursor: pointer;
}

.ic-chip:hover {
    background: #E3F4EE;
    color: var(--primary-800);
}

.ic-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
}

.ic-check input {
    width: auto;
    margin: 2px 0 0;
}

.ic-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-md);
}

.ic-actions-spacer {
    flex: 1;
}

.ic-accion-mensaje {
    margin: 0;
    color: var(--error-700);
    font-size: 12.5px;
}

.ic-accion-mensaje:empty {
    display: none;
}

.ic-actions .ic-primary {
    width: auto;
    min-height: 44px;
}

.ic-inline-form {
    margin: 0;
}

/* Pestana Interconsulta dentro de la historia */
.ic-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ic-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.ic-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
}

.ic-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ic-card header strong {
    color: var(--text-strong);
    font-size: 14px;
}

.ic-estado {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-interactive);
    color: var(--text-main);
    font-size: 11px;
    font-weight: 500;
}

.ic-solicitada .ic-estado { background: #FFF6DA; color: var(--warning-900); }
.ic-respondida .ic-estado { background: #E8F1FB; color: var(--info-800); }
.ic-finalizada .ic-estado { background: #E3F4EE; color: var(--primary-800); }

.ic-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
}

.ic-card dt {
    color: var(--text-muted);
    font-size: 11px;
}

.ic-card dd {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 12.5px;
}

.ic-urgente {
    color: var(--error-700);
    font-weight: 600;
}

.ic-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ic-card-actions a,
.ic-card-actions button {
    margin: 0;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: var(--surface-interactive);
    color: var(--primary-800);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ic-card-actions a:hover,
.ic-card-actions button:hover {
    background: var(--primary-800);
    color: #FFFFFF;
}

.ic-vacio,
.ic-mensaje {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 700px) {
    .ic-field.span-2 {
        grid-column: auto;
    }

    .ic-diag-row {
        grid-template-columns: 22px 56px minmax(0, 1fr) auto;
    }

    .ic-diag-row .ic-segmented,
    .ic-diag-row .ic-diag-tipo {
        grid-column: 2 / 4;
        justify-self: start;
    }

    .ic-actions {
        padding: 10px;
    }

    .ic-actions-spacer {
        display: none;
    }

    .ic-actions .ic-primary {
        width: 100%;
        order: -1;
    }
}

.field-error[hidden] {
    display: none;
}

/* Firma grafica y sello */
.signature-note {
    margin: 0 0 14px;
    font-size: 12.5px;
}

.signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.signature-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
}

.signature-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.signature-preview,
.signature-thumb {
    /* Cuadricula para distinguir la transparencia de la imagen */
    background-color: #FFFFFF;
    background-image: linear-gradient(45deg, #EEF2F4 25%, transparent 25%), linear-gradient(-45deg, #EEF2F4 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #EEF2F4 75%), linear-gradient(-45deg, transparent 75%, #EEF2F4 75%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}

.signature-preview {
    display: grid;
    place-items: center;
    min-height: 110px;
    padding: 10px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
}

.signature-preview img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}

.signature-thumb {
    display: block;
    max-width: 240px;
    max-height: 90px;
    margin: 6px 0;
    padding: 6px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.signature-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.signature-actions form {
    margin: 0;
}

.signature-file {
    position: relative;
    cursor: pointer;
}

.signature-file input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* Historias clinicas */
.historias-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
}

.historias-grid label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 500;
}

.historias-grid input,
.historias-grid select {
    width: 100%;
    margin: 0;
}

.historias-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.historias-acciones .texto-secundario {
    margin-right: auto;
}

.historias-tabla td small {
    display: block;
}

.historias-texto {
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.historia-estado {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-interactive);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.historia-estado.estado-borrador { background: #FFF6DA; color: var(--warning-900); }
.historia-estado.estado-historia-guardada { background: #E8F1FB; color: var(--info-800); }
.historia-estado.estado-finalizada { background: #E3F4EE; color: var(--primary-800); }

.clinical-ficha-link {
    color: var(--primary-700);
    font-weight: 500;
    text-decoration: none;
}

.clinical-ficha-link:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .historias-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .historias-grid {
        grid-template-columns: 1fr;
    }
}

.historias-tabla td:first-child {
    white-space: nowrap;
}

/* Admision: busqueda de citas de hoy y asignacion de turno (demanda espontanea) */
.adm-lookup {
    display: grid;
    gap: 12px;
}

.adm-lookup-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.adm-lookup-form .adm-field {
    flex: 1 1 240px;
    min-width: 0;
}

.adm-lookup-patient {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.adm-lookup-patient strong {
    color: var(--text-strong);
}

.adm-lookup-title {
    margin: 4px 0 0;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 600;
}

.adm-citas-hoy {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.adm-cita-hoy {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #E9F4F2;
    box-shadow: 0 0 0 1px var(--border-soft);
}

.adm-cita-hoy time {
    color: var(--primary-800);
    font-size: 20px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.adm-cita-hoy div {
    display: grid;
    min-width: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.adm-cita-hoy strong {
    color: var(--text-strong);
    font-size: 14px;
}

.adm-citas-hoy.is-muted .adm-cita-hoy {
    background: var(--surface-subtle);
}

.adm-citas-hoy.is-muted time {
    color: var(--text-muted);
    font-size: 15px;
}

.adm-sin-cita {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--warning-100, #FFF8E1);
    box-shadow: 0 0 0 1px var(--warning-300);
}

.adm-sin-cita p {
    margin: 0;
    color: var(--text-strong);
    font-size: 13px;
}

.adm-lookup > .btn-secondary {
    justify-self: start;
}

.adm-origen {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--warning-300);
    color: var(--warning-900);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .adm-cita-hoy {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .adm-cita-hoy > a,
    .adm-cita-hoy > .adm-day-done {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
    }
}

/* ==========================================================================
   Admision: acordeon por secciones y jerarquia de acciones
   ========================================================================== */
.acc-group {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.acc {
    min-width: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
    transition: box-shadow 200ms ease-out;
}

.acc.is-open {
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-sm);
}

.acc-heading {
    margin: 0;
    font: inherit;
}

.acc-trigger {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 14px 18px;
    border: 0;
    border-radius: var(--radius-lg);
    background: transparent;
    color: var(--text-strong);
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.acc-trigger:hover {
    background: var(--surface-interactive);
}

.acc.is-open .acc-trigger:hover {
    background: transparent;
}

.acc-trigger:focus-visible {
    outline: 3px solid var(--primary-300);
    outline-offset: -3px;
}

.acc-trigger:disabled {
    cursor: not-allowed;
}

.acc.is-locked {
    background: var(--surface-subtle);
    box-shadow: 0 0 0 1px var(--border-soft);
}

.acc.is-locked .acc-trigger {
    padding-top: 11px;
    padding-bottom: 11px;
    color: var(--text-muted);
}

.acc.is-locked .acc-chevron {
    visibility: hidden;
}

.acc-step {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-interactive);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

.acc.is-open .acc-step {
    background: var(--primary-800);
    color: #FFFFFF;
}

.acc .acc-check {
    display: none;
    width: 15px;
    height: 15px;
}

.acc.is-complete .acc-num {
    display: none;
}

.acc.is-complete .acc-check {
    display: block;
}

.acc.is-complete .acc-step {
    background: #E3F4EE;
    color: var(--primary-700);
}

.acc-text {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.acc-title {
    font-size: 15px;
    font-weight: 600;
}

.acc-meta {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acc-chevron {
    color: var(--text-muted);
    transition: transform 200ms ease-out;
}

.acc.is-open .acc-chevron {
    transform: rotate(90deg);
}

.acc-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 200ms ease-out, opacity 160ms ease-out;
}

.acc.is-open .acc-panel {
    grid-template-rows: 1fr;
    opacity: 1;
}

.acc-inner {
    min-height: 0;
    overflow: hidden;
}

.acc-body {
    display: grid;
    gap: 14px;
    padding: 2px 20px 18px;
}

/* Las columnas dependen del ancho real de la seccion, no de la ventana (hay menu y panel lateral). */
.acc-body .adm-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.acc-body .adm-readonly {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.acc-body .adm-readonly .span-3 {
    grid-column: 1 / -1;
}

.acc-body .adm-review {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.acc-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.acc-foot {
    display: flex;
    justify-content: flex-end;
}

.adm-readonly .span-3 {
    grid-column: span 3;
}

.adm-field-label {
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 500;
}

.adm-generado {
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 13px;
}

.adm-origen-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-interactive);
    color: var(--text-strong);
    font-size: 12.5px;
    font-weight: 500;
}

.adm-origen-chip.is-demanda {
    background: var(--warning-100);
    color: var(--warning-900);
    box-shadow: inset 0 0 0 1px var(--warning-300);
}

.adm-review {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.adm-review .span-2 {
    grid-column: span 2;
}

.adm-review dt {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.adm-review dd {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Panel "Asignar turno" dentro de Cita y lugar de atencion */
.adm-turno-panel {
    padding: 16px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    box-shadow: inset 0 0 0 1px var(--border-soft);
}

.adm-turno-panel[hidden] {
    display: none;
}

.adm-turno-panel form {
    display: grid;
    gap: 14px;
}

.adm-turno-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.adm-turno-group legend {
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.adm-turno-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Botones: primario (accion final), secundario tonal (avanzar/buscar), auxiliar discreto (cancelar/volver) */
.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, color 150ms ease;
}

.adm-btn .icon {
    width: 18px;
    height: 18px;
}

.adm-btn[hidden] {
    display: none;
}

.adm-btn:focus-visible {
    outline: 3px solid var(--primary-300);
    outline-offset: 2px;
}

.adm-btn-primary {
    background: linear-gradient(160deg, var(--primary-700), var(--primary-900));
    box-shadow: 0 8px 20px rgba(8, 47, 60, 0.18);
    color: #FFFFFF;
}

.adm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(8, 47, 60, 0.24);
    color: #FFFFFF;
}

.adm-btn-secondary {
    background: #E9F4F2;
    box-shadow: inset 0 0 0 1px rgba(21, 86, 91, 0.14);
    color: var(--primary-800);
}

.adm-btn-secondary:hover {
    background: #DCEFEB;
    color: var(--primary-900);
}

.adm-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    font-weight: 500;
}

.adm-btn-ghost:hover {
    background: var(--surface-interactive);
    color: var(--text-strong);
}

.adm-btn-lg {
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    font-size: 15px;
}

.adm-btn-sm {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
}

.adm-btn.is-busy {
    opacity: 0.75;
    cursor: progress;
}

.adm-icon-back {
    transform: rotate(180deg);
}

.adm-lookup > .adm-btn {
    justify-self: start;
}

/* Progreso lateral */
.adm-progress-list {
    display: grid;
    gap: 2px;
    margin: 10px 0 12px;
    padding: 0;
    list-style: none;
}

.adm-progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.adm-progress-item:hover,
.adm-progress-item:focus-visible {
    background: var(--surface-interactive);
    color: var(--text-strong);
}

.adm-progress-dot {
    display: grid;
    place-items: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-interactive);
    font-size: 11px;
    font-weight: 600;
}

.adm-progress-item.is-complete {
    color: var(--text-strong);
}

.adm-progress-item.is-complete .adm-progress-dot {
    background: #E3F4EE;
    color: transparent;
    position: relative;
}

.adm-progress-item.is-complete .adm-progress-dot::after {
    content: "✓";
    position: absolute;
    color: var(--primary-700);
    font-size: 12px;
}

@media (max-width: 1180px) {
    .adm-review {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 900px) {
    .adm-progress {
        display: none;
    }
}

@media (max-width: 600px) {
    .acc-trigger {
        gap: 12px;
        padding: 13px 14px;
    }

    .acc-body {
        padding: 2px 14px 16px;
    }

    .acc-foot .adm-btn,
    .adm-turno-actions .adm-btn,
    .adm-lookup-form .adm-btn {
        width: 100%;
    }

    .adm-turno-actions {
        flex-direction: column-reverse;
    }

    .adm-turno-panel {
        padding: 14px 12px;
    }

    .adm-review {
        grid-template-columns: 1fr;
    }

    .acc-body .adm-field.span-2,
    .adm-review .span-2 {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc,
    .acc-panel,
    .acc-step,
    .acc-chevron,
    .adm-btn,
    .adm-progress-item {
        transition: none;
    }
}

/* Casilla de cambio de sede: la entrada oculta queda contenida en su chip (no ensancha la pagina al enfocarla). */
.adm-confirm .chip-check {
    position: relative;
    display: inline-flex;
}

.adm-confirm .chip-check input {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.adm-confirm .chip-check input:focus-visible + span {
    outline: 3px solid var(--primary-300);
    outline-offset: 2px;
}

.adm-confirm.has-error .chip-check span {
    border-color: var(--error-500);
    background: #FFF8F9;
}

/* ==========================================================================
   Atencion medica: cabecera clinica, pestanas con estado y narrativa
   ========================================================================== */
.clinical-workspace .clinical-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    padding: 12px 16px;
    background: var(--surface-raised);
}

.clinical-header-patient {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 280px;
    min-width: 0;
}

.clinical-workspace .clinical-header > .clinical-header-patient {
    min-width: 0;
}

.clinical-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #E9F4F2;
    color: var(--primary-800);
    font-size: 13px;
    font-weight: 600;
}

.clinical-header-patient > div {
    display: grid;
    min-width: 0;
}

.clinical-workspace .clinical-header-name {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clinical-header-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 12px;
    color: var(--text-muted);
    font-size: 12.5px;
}

.clinical-header-sub .clinical-ficha-link {
    color: var(--primary-700);
    font-weight: 500;
    text-decoration: none;
}

.clinical-header-sub .clinical-ficha-link:hover,
.clinical-header-sub .clinical-ficha-link:focus-visible {
    text-decoration: underline;
}

.clinical-header-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 0;
}

.clinical-header-facts div {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.clinical-header-facts dt {
    display: inline-flex;
    color: var(--text-muted);
}

.clinical-header-facts dt .icon {
    width: 16px;
    height: 16px;
}

.clinical-header-facts dd {
    margin: 0;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 500;
}

.clinical-state {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-interactive);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
}

.clinical-state-en-proceso {
    background: #E5F4FF;
    color: #1C5F8E;
}

.clinical-state-finalizada {
    background: #ECF8DF;
    color: #416E0A;
}

.clinical-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.clinical-workspace .clinical-header .save-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px 5px 24px;
    transition: background-color 200ms ease, color 200ms ease;
}

.clinical-header-actions .btn-ghost {
    min-height: 34px;
    padding: 6px 10px;
    text-decoration: none;
}

.save-status-saving::before {
    animation: hcPulso 900ms ease-in-out infinite;
}

@keyframes hcPulso {
    50% { opacity: 0.3; }
}

/* Barra de acciones: solo aviso de modo y botones */
.clinical-workspace .clinical-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.clinical-mode-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: #E9F4F2;
    color: var(--primary-900);
    font-size: 13px;
}

.clinical-mode-note:empty {
    display: none;
}

.clinical-mode-note .icon {
    width: 16px;
    height: 16px;
    color: var(--primary-700);
}

/* Pestanas: actual, con informacion, completas y con cambios sin guardar */
.clinical-workspace .clinical-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.clinical-workspace .clinical-tab:focus-visible {
    outline: 3px solid var(--primary-300);
    outline-offset: -3px;
}

.clinical-tab .tab-num {
    color: inherit;
    opacity: 0.7;
}

.clinical-tab .tab-state {
    display: none;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

.clinical-tab.is-complete .tab-state,
.clinical-tab.has-data .tab-state {
    display: inline-grid;
}

.clinical-tab.is-complete .tab-state {
    background: #E3F4EE;
    color: var(--primary-700);
}

.clinical-tab.is-complete .tab-state:empty::before {
    content: "✓";
}

.clinical-tab.has-data .tab-state {
    background: #EAF0F3;
    color: var(--text-main);
}

.clinical-tab.has-data .tab-state:empty {
    min-width: 7px;
    width: 7px;
    height: 7px;
    padding: 0;
    background: var(--text-muted);
    opacity: 0.55;
}

.clinical-tab.has-pending::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--warning-600);
    box-shadow: 0 0 0 2px var(--surface-floating);
}

.clinical-workspace .clinical-tab.active {
    box-shadow: var(--shadow-xs), inset 0 -2px 0 var(--primary-600);
}

/* Tarjetas: se resalta la seccion en la que se esta escribiendo */
.clinical-workspace .clinical-card {
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.clinical-workspace .clinical-card:focus-within {
    border-color: rgba(43, 127, 117, 0.35);
    box-shadow: 0 0 0 3px rgba(43, 127, 117, 0.08), var(--shadow-sm);
}

/* Seccion A plegable (sus datos principales ya estan en la cabecera) */
.clinical-collapsible > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.clinical-collapsible > summary::-webkit-details-marker {
    display: none;
}

.clinical-collapsible > summary::after {
    content: "";
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 180ms ease-out;
}

.clinical-collapsible[open] > summary::after {
    transform: rotate(45deg);
}

.clinical-collapsible-meta {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12.5px;
}

.clinical-collapsible:not([open]) {
    gap: 0;
}

/* Descripcion del problema actual */
.clinical-narrative {
    width: 100%;
    min-height: 180px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.65;
    resize: vertical;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.clinical-narrative:focus {
    border-color: var(--primary-500);
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 127, 117, 0.16);
}

.clinical-legacy-note {
    font-style: italic;
}

/* Pie de pestana: anterior discreto, siguiente con destino */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: var(--surface-interactive);
    color: var(--text-strong);
}

.tab-footer .tab-nav-prev {
    margin-right: auto;
}

@media (max-width: 700px) {
    .clinical-workspace .clinical-header {
        gap: 8px 12px;
        padding: 10px 12px;
    }

    .clinical-header-actions {
        margin-left: 0;
        justify-content: flex-start;
        width: 100%;
    }

    .clinical-header-actions .btn-ghost {
        margin-left: auto;
    }

    .clinical-collapsible-meta {
        display: none;
    }

    .clinical-narrative {
        min-height: 160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .save-status-saving::before {
        animation: none;
    }

    .clinical-workspace .clinical-tab,
    .clinical-workspace .clinical-card,
    .clinical-collapsible > summary::after {
        transition: none;
    }
}

/* Medicacion y receta: datos automaticos, etiquetas y vista previa por letras */
.clinical-recipe-auto {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.clinical-recipe-auto .span-2 {
    grid-column: span 2;
}

.clinical-recipe-auto dt {
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.clinical-recipe-auto dd {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.clinical-medication-grid label .req {
    color: var(--error-600);
}

.clinical-medication-grid label .opt {
    color: var(--text-muted);
    font-weight: 400;
}

.clinical-recipe-preview-item {
    display: grid;
    align-content: start;
    gap: 2px;
    white-space: normal;
}

.clinical-recipe-preview-item strong {
    color: var(--text-strong);
    font-weight: 600;
}

.clinical-recipe-preview-item span {
    color: var(--text-main);
}

@media (max-width: 700px) {
    .clinical-medication-grid {
        grid-template-columns: 1fr;
    }

    .clinical-recipe-auto {
        grid-template-columns: 1fr;
    }

    .clinical-recipe-auto .span-2 {
        grid-column: auto;
    }
}

/* Agendar cita desde Pacientes */
.acciones-tabla .accion-agendar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.acciones-tabla .accion-agendar .icon {
    width: 15px;
    height: 15px;
}

.cita-paciente-origen,
.cita-creada {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: #E9F4F2;
    box-shadow: inset 0 0 0 1px rgba(21, 86, 91, 0.14);
}

.cita-paciente-origen > div:first-child {
    display: grid;
    gap: 2px;
}

.cita-paciente-origen strong,
.cita-creada strong {
    color: var(--primary-900);
}

.cita-paciente-datos {
    margin: 18px 0 12px;
}

.cita-paciente-datos > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text-strong);
}

.cita-paciente-datos[open] > summary {
    margin-bottom: 12px;
}

/* ==========================================================================
   Enfermeria: registro de signos vitales en tarjetas compactas
   ========================================================================== */
.vitals-current {
    display: grid;
    gap: 16px;
    margin-top: 22px;
    padding: 18px;
    border-radius: var(--radius-xl, 16px);
    background: var(--bg-glass, rgba(246, 250, 255, 0.88));
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-sm);
}

.vitals-current-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 20px;
}

.vitals-current-head h2 {
    margin: 2px 0 0;
}

.vitals-current .vitals-current-label {
    margin-top: 0;
}

.vitals-progress {
    display: grid;
    gap: 6px;
    min-width: min(260px, 100%);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.vitals-progress-bar {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-interactive);
}

.vitals-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-500);
    transition: width 200ms ease-out;
}

.vitals-progress-bar.is-complete > span {
    background: var(--primary-700);
}

.vitals-when {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.vitals-when-field {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 4px 8px;
    margin: 0;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 500;
}

.vitals-when-field input {
    grid-column: 1 / -1;
    min-width: 170px;
    margin: 0;
}

.vital-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}

.vital-input-card {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-lg, 8px);
    background: var(--surface-card, #FFFFFF);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.vital-input-card.is-wide {
    grid-column: span 2;
}

.vital-input-card.is-filled {
    border-style: solid;
    border-color: color-mix(in srgb, var(--primary-500) 30%, transparent);
}

.vital-input-card.is-pending {
    background: var(--surface-subtle);
}

.vital-input-card:focus-within {
    border-style: solid;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-500) 14%, transparent);
    background: var(--surface-card, #FFFFFF);
}

.vital-input-card.is-computed {
    border-style: solid;
    background: var(--surface-subtle);
}

.vital-input-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
}

.vital-input-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--primary-100);
    color: var(--primary-700);
}

.vital-input-icon svg {
    width: 16px;
    height: 16px;
}

.vital-input-label {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.vital-input-label small {
    color: var(--text-muted);
    font-weight: 400;
}

.vital-input-state svg {
    display: block;
    width: 16px;
    height: 16px;
}

.vital-input-state .vital-state-ok {
    display: none;
    color: var(--primary-600);
}

.vital-input-state .vital-state-pending {
    color: var(--text-muted);
    opacity: 0.55;
}

.vital-input-card.is-filled .vital-state-ok {
    display: block;
}

.vital-input-card.is-filled .vital-state-pending,
.vital-input-card:not([data-principal]) .vital-state-pending {
    display: none;
}

.vital-input-field {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.vital-input-field input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 8px 10px;
    background: var(--surface-input, #F9FBFD);
    color: var(--text-strong);
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vital-input-field input[readonly] {
    background: transparent;
    color: var(--text-strong);
}

.vital-input-field input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

.vital-input-sep {
    color: var(--text-muted);
    font-size: 20px;
}

.vital-input-unit {
    flex: 0 0 auto;
    min-width: 34px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.vitals-subtitle {
    margin: 4px 0 0;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 600;
}

.vitals-subtitle small {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 400;
}

.vitals-notes-label {
    margin: 0;
}

/* Visita anterior: claramente separada y de solo lectura */
.vitals-previous .eyebrow {
    color: var(--text-muted);
}

@media (max-width: 420px) {
    .vital-cards {
        grid-template-columns: 1fr 1fr;
    }

    .vital-input-card {
        padding: 10px;
    }

    .vital-input-field input {
        font-size: 16px;
    }

    .vital-input-unit {
        min-width: 0;
    }
}

@media (max-width: 340px) {
    .vital-cards {
        grid-template-columns: 1fr;
    }

    .vital-input-card.is-wide {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vital-input-card,
    .vitals-progress-bar > span {
        transition: none;
    }
}

/* ==========================================================================
   Atencion medica: Anamnesis compacta (solo presentacion)
   ========================================================================== */
.anam-card {
    display: grid;
    gap: 14px;
}

.anam-titulo {
    margin: 0;
    color: var(--text-strong);
    font-size: 15px;
    font-weight: 600;
}

.anam-principal {
    gap: 0;
}

.anam-principal .anam-bloque {
    display: grid;
    gap: 10px;
}

.anam-principal .anam-bloque + .anam-bloque {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

.anam-bloque label,
.anam-label-general {
    margin: 0;
}

.antecedentes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    align-items: start;
}

.antecedente {
    display: grid;
    min-width: 0;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-subtle, #F7F9FC);
    transition: border-color 150ms ease, background-color 150ms ease;
}

.antecedente.selected {
    border-color: color-mix(in srgb, var(--primary-500) 40%, transparent);
    background: var(--primary-100);
}

.antecedente-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 9px 12px;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}

.antecedente-check input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    accent-color: var(--primary-600);
    cursor: pointer;
}

.antecedente-check input:focus-visible {
    outline: 3px solid var(--primary-300);
    outline-offset: 2px;
}

/* El detalle solo ocupa espacio si esta marcado o si ya tiene texto guardado. */
.antecedente-detalle {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 180ms ease-out;
}

.antecedente.is-open .antecedente-detalle {
    grid-template-rows: 1fr;
}

.antecedente-detalle > div {
    min-height: 0;
    overflow: hidden;
}

.antecedente.is-open .antecedente-detalle > div {
    padding: 0 10px 10px;
}

.antecedente-detalle textarea {
    width: 100%;
    min-height: 58px;
    margin: 0;
    background: var(--surface-card, #FFFFFF);
    font-size: 13px;
    resize: vertical;
}

.antecedente-aviso {
    display: none;
    margin: 6px 0 0;
    color: var(--warning-900, #7A5214);
    font-size: 11.5px;
}

.antecedente.is-inconsistente {
    border-style: dashed;
    border-color: var(--warning-600, #DBB04E);
}

.antecedente.is-inconsistente .antecedente-aviso {
    display: block;
}

@media (max-width: 600px) {
    .antecedentes-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .antecedente,
    .antecedente-detalle {
        transition: none;
    }
}

/* ==========================================================================
   Atencion medica: Examen fisico compacto (mismos campos que antes)
   ========================================================================== */
.examen-head,
.examen-subhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6px 12px;
}

.examen-subgrupo {
    display: grid;
    gap: 8px;
}

.examen-subgrupo + .examen-subgrupo {
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.examen-subhead h4 {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.examen-contador {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
}

.examen-contador.tiene-datos {
    color: var(--primary-700);
}

.examen-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.antecedente.con-icono .antecedente-check {
    gap: 8px;
    padding: 8px 10px;
}

.antecedente-icono {
    display: inline-grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--surface-interactive);
    color: var(--primary-700);
}

.antecedente-icono svg {
    width: 15px;
    height: 15px;
}

.antecedente.selected .antecedente-icono {
    background: var(--surface-card, #FFFFFF);
}

.antecedente-nombre {
    min-width: 0;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.antecedente-codigo {
    display: inline-block;
    margin-right: 6px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 1024px) and (min-width: 601px) {
    .examen-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Atencion medica: diagnosticos CIE-10 (PRE / DEF)
   ========================================================================== */
.dx-contadores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dx-contadores span {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-interactive);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dx-contadores span.is-lleno {
    background: var(--primary-100);
    color: var(--primary-800);
}

.dx-aviso-contexto {
    margin: 0;
}

.dx-buscador {
    position: relative;
    display: grid;
    gap: 6px;
}

.dx-buscador label {
    margin: 0;
}

.dx-buscador input {
    width: 100%;
    min-height: 44px;
    margin: 0;
}

.dx-resultados {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    display: grid;
    max-height: 320px;
    margin-top: 4px;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-card, #FFFFFF);
    box-shadow: var(--shadow-md);
}

.dx-resultados[hidden] {
    display: none;
}

.dx-opcion {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 2px 10px;
    align-items: baseline;
    width: 100%;
    margin: 0;
    padding: 9px 12px;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    color: var(--text-strong);
    font-family: var(--font-sans);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.dx-opcion:hover,
.dx-opcion:focus-visible {
    background: var(--surface-interactive);
    outline: none;
}

.dx-opcion strong {
    color: var(--primary-800);
    font-variant-numeric: tabular-nums;
}

.dx-opcion small {
    grid-column: 2;
    color: var(--warning-900, #7A5214);
    font-size: 11.5px;
}

.dx-opcion[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

.dx-opcion-bloqueado small {
    color: var(--error-700, #941657);
}

.dx-sin-resultados {
    margin: 0;
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.dx-mensaje {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-md, 8px);
    background: var(--warning-100, #FFFAE1);
    color: var(--warning-900, #7A5214);
    font-size: 13px;
}

.dx-mensaje[hidden] {
    display: none;
}

.dx-lista {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dx-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "principal tipo"
        "observacion acciones";
    gap: 8px 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md, 8px);
    background: var(--surface-card, #FFFFFF);
}

.dx-item.dx-sin-tipo {
    border-style: dashed;
}

.dx-item.dx-pendiente {
    background: var(--surface-subtle);
}

.dx-item-principal {
    grid-area: principal;
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.dx-codigo {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--primary-100);
    color: var(--primary-800);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dx-nombre {
    min-width: 0;
    color: var(--text-strong);
    font-size: 13.5px;
    font-weight: 500;
    overflow-wrap: break-word;
}

.dx-tipo {
    grid-area: tipo;
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--surface-interactive);
}

.dx-tipo-opcion {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px 12px;
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12.5px;
    cursor: pointer;
    white-space: nowrap;
}

.dx-tipo-opcion input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.dx-tipo-opcion strong {
    color: inherit;
}

.dx-tipo-opcion:has(input:checked) {
    background: var(--surface-card, #FFFFFF);
    box-shadow: var(--shadow-xs);
    color: var(--primary-800);
}

.dx-tipo-opcion:has(input:focus-visible) {
    outline: 3px solid var(--primary-300);
    outline-offset: 1px;
}

.dx-observacion {
    grid-area: observacion;
    width: 100%;
    min-height: 38px;
    margin: 0;
    font-size: 13px;
}

.dx-acciones {
    grid-area: acciones;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.dx-eliminar {
    color: var(--error-700, #941657);
}

.dx-falta-tipo,
.dx-advertencia {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
}

.dx-falta-tipo {
    color: var(--text-muted);
}

.dx-advertencia {
    color: var(--warning-900, #7A5214);
}

.dx-vacio {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 700px) {
    .dx-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "principal"
            "tipo"
            "observacion"
            "acciones";
    }

    .dx-tipo {
        justify-self: start;
    }
}

/* ---- Ordenes diagnosticas (Solicitud de ordenes) ---- */
.orden-bloque {
    display: grid;
    gap: 12px;
    padding: 16px 0;
    border-top: 1px solid var(--border-soft);
}

.orden-bloque-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.orden-bloque-head h4 {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.orden-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
    scroll-margin-top: 90px;
}

.orden-card.is-cancelada {
    opacity: 0.7;
}

.orden-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.orden-card-head > div {
    display: grid;
    gap: 2px;
}

.orden-meta {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
}

.orden-estado {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-subtle);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.orden-estado.is-solicitada { background: var(--info-100); color: var(--info-800); }
.orden-estado.is-resultado_recibido { background: var(--warning-100); color: var(--warning-900); }
.orden-estado.is-revisada { background: var(--success-100); color: var(--success-900); }
.orden-estado.is-cancelada { background: var(--error-100); color: var(--error-800); }

.orden-items {
    display: grid;
    gap: 8px;
}

.orden-item {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) auto;
    align-items: end;
    gap: 8px;
}

.orden-card[data-orden-tipo="imagenologia"] .orden-item {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 2fr) auto;
}

.orden-item label,
.orden-datos label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.orden-item-quitar {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}

.orden-item-quitar:hover {
    background: var(--error-100);
    color: var(--error-800);
}

.orden-agregar-item {
    justify-self: start;
}

.orden-datos {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    gap: 10px;
}

.orden-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.orden-acciones input[type="text"] {
    flex: 1 1 220px;
    max-width: 320px;
}

.orden-btn-peligro {
    color: var(--error-700);
}

.orden-btn-peligro:hover {
    background: var(--error-100);
    color: var(--error-800);
}

.orden-lista,
.orden-resultados ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.orden-lista li span {
    display: block;
    color: var(--text-muted);
    font-size: 13px;
}

.orden-resultados {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.orden-resultados a {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.orden-adjuntar {
    display: grid;
    gap: 10px;
}

.orden-adjuntar[open] {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--border-soft);
}

.orden-adjuntar summary {
    color: var(--primary-800);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.orden-adjuntar .orden-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 10px 0;
}

.orden-vacia {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.orden-historial {
    display: grid;
    gap: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--border-soft);
    overflow-x: auto;
}

.orden-historial table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.orden-historial th,
.orden-historial td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
}

.orden-historial th {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

@media (max-width: 720px) {
    .orden-item,
    .orden-card[data-orden-tipo="imagenologia"] .orden-item,
    .orden-datos,
    .orden-adjuntar .orden-datos {
        grid-template-columns: minmax(0, 1fr);
    }
    .orden-item-quitar {
        justify-self: end;
    }
}

/* Dentro de la historia los submit heredan el estilo primario global: se restituyen las variantes. */
#tab-ordenes button.adm-btn-secondary {
    background: #E9F4F2;
    box-shadow: inset 0 0 0 1px rgba(21, 86, 91, 0.14);
    color: var(--primary-800);
}

#tab-ordenes button.adm-btn-secondary:hover {
    background: #DCEFEB;
    color: var(--primary-900);
    transform: none;
}

#tab-ordenes button.adm-btn-ghost {
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
}

#tab-ordenes button.adm-btn-ghost:hover {
    background: var(--surface-interactive);
    color: var(--text-strong);
    transform: none;
}

#tab-ordenes button.orden-btn-peligro {
    color: var(--error-700);
}

#tab-ordenes button.orden-btn-peligro:hover {
    background: var(--error-100);
    color: var(--error-800);
}

.orden-datos {
    align-items: start;
}

/* Saludo del inicio: saludo + tratamiento y nombre (titulo compacto), fecha secundaria, hora discreta. */
.dash-greeting h2 {
    margin: 0 0 4px;
}

.dash-greeting .dash-date {
    margin: 0 0 4px;
}

.dash-greeting .dash-nombre {
    overflow-wrap: anywhere;
}

/* ---- Orden de laboratorio: selector del catalogo del Formulario 010A ---- */
.lab-picker {
    display: grid;
    gap: 12px;
}

.lab-seleccion {
    display: grid;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.lab-seleccion strong {
    color: var(--text-strong);
    font-size: 13px;
}

.lab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lab-chips:empty {
    display: none;
}

.lab-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    background: #E5EFFC;
    color: var(--hc-blue-900, #173F9E);
    font-size: 12px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.lab-chip--otro {
    padding-right: 10px;
    background: #FFF4DE;
    color: #6B4A06;
}

.clinical-form .lab-chip-quitar {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.clinical-form .lab-chip-quitar:hover {
    background: rgba(23, 63, 158, 0.12);
    transform: none;
}

.lab-buscar {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.lab-categorias {
    display: grid;
    gap: 6px;
    max-height: 520px;
    overflow-y: auto;
    padding-right: 2px;
}

.lab-cat {
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--border-soft);
    background: var(--surface-raised);
}

.lab-cat > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 12px;
    color: var(--text-strong);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.lab-cat > summary::-webkit-details-marker {
    display: none;
}

.lab-cat > summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 150ms ease;
    opacity: 0.55;
}

.lab-cat[open] > summary::before {
    transform: rotate(45deg);
}

.lab-cat-cuenta:not(:empty) {
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--hc-blue-500, #2F72E4);
    color: #FFFFFF;
    font-size: 11px;
    text-align: center;
}

.lab-cat-pagina {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
}

.lab-cat-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 2px 12px;
    padding: 0 12px 10px;
}

.lab-item {
    display: grid;
    gap: 4px;
}

.lab-item[hidden],
.lab-cat[hidden] {
    display: none;
}

.lab-item label,
.lab-dato-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 5px 4px;
    border-radius: 6px;
    color: var(--text-main);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.3;
    cursor: pointer;
}

.lab-item label:hover,
.lab-dato-check:hover {
    background: var(--surface-interactive);
}

.lab-item input[type="checkbox"],
.lab-dato-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    min-height: 0; /* los campos globales tienen 42 px: la casilla quedaria desplazada */
    margin: 1px 0 0;
    padding: 0;
}

.lab-detalle {
    margin-left: 28px;
}

.lab-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 12px;
    margin: 0 12px 12px;
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.lab-datos legend {
    padding: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.lab-datos label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.lab-datos .lab-dato-check {
    display: flex;
    color: var(--text-main);
    font-weight: 400;
}

.lab-dx {
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
}

.lab-dx-tipo {
    padding: 0 6px;
    border-radius: 4px;
    background: #E5EFFC;
    color: var(--hc-blue-900, #173F9E);
    font-size: 10.5px;
    font-weight: 700;
}

.lab-tratamiento {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.lab-usar-medicacion {
    justify-self: start;
}

.orden-item--otro {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto;
}

.orden-datos--prioridad {
    grid-template-columns: minmax(0, 200px);
}

.orden-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    color: var(--text-muted);
    font-size: 12.5px;
}

.orden-resumen span:first-child::before {
    content: "Laboratorio · ";
    color: var(--text-strong);
    font-weight: 600;
}

@media (max-width: 720px) {
    .orden-item--otro {
        grid-template-columns: minmax(0, 1fr);
    }
    .lab-cat-items {
        grid-template-columns: minmax(0, 1fr);
    }
    .lab-categorias {
        max-height: none;
    }
}

/* ---- Orden de imagenologia (Formulario 012A) ---- */
.img-form {
    display: grid;
    gap: 12px;
}

.img-bloque {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.img-bloque legend,
.img-campo {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.img-modalidades {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.img-chip {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.img-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.img-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface-subtle);
    box-shadow: inset 0 0 0 1px var(--border-soft);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
}

.img-chip input:checked + span {
    background: #E5EFFC;
    box-shadow: inset 0 0 0 1.5px var(--hc-blue-500, #2F72E4);
    color: var(--hc-blue-900, #173F9E);
    font-weight: 600;
}

.img-chip input:focus-visible + span {
    outline: 2px solid var(--hc-blue-500, #2F72E4);
    outline-offset: 2px;
}

.img-sino {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    color: var(--text-main);
    font-size: 13px;
}

.img-sino > span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.img-sino label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.img-sino input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.img-campo {
    display: grid;
    gap: 4px;
    margin: 0;
}

.img-campo small {
    font-weight: 400;
}

.img-campo--corto {
    max-width: 240px;
}

.img-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px 24px;
}

.img-usar-resumen {
    justify-self: start;
}

.orden-resumen--imagen span:first-child::before {
    content: "Imagen · ";
}

/* ---- Proxima cita de control (tras finalizar la atencion) ---- */
.proxima-cita {
    display: grid;
    gap: 10px;
    margin: 16px 0;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
}

.proxima-cita h3 {
    margin: 2px 0 0;
    font-size: 16px;
}

.proxima-cita .adm-btn {
    justify-self: start;
}

.proxima-cita-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.proxima-cita-datos.is-nueva {
    background: #E9F7EF;
    box-shadow: inset 0 0 0 1px #BFE3CC;
}

.proxima-cita-datos dt {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.proxima-cita-datos dd {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 600;
}

.control-modal-ok {
    margin: 0 0 4px;
    color: #1F7A45;
    font-size: 13px;
    font-weight: 600;
}

.descarga-oculta {
    display: none;
}

.cita-control-origen {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: #EEF5FD;
    box-shadow: inset 0 0 0 1px #D3E3F6;
}

.cita-control-origen .btn-small {
    justify-self: start;
}

/* ---- Interconsulta: seguimiento (agenda y atencion del especialista) ---- */
.ic-seguimiento-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 20px;
    margin: 0 0 12px;
}

.ic-seguimiento-datos dt {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.ic-seguimiento-datos dd {
    margin: 2px 0 0;
    color: var(--text-strong);
    font-size: 14px;
    font-weight: 500;
}

.ic-seguimiento-acciones {
    display: grid;
    gap: 10px;
}

.ic-seguimiento-form {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.ic-seguimiento-form summary {
    color: var(--primary-800);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ic-seguimiento-form form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.ic-seguimiento-form form > button {
    justify-self: start;
}

.ic-externo-datos[hidden] {
    display: none;
}

/* ---- Modulo Interconsultas ---- */
.icm {
    display: grid;
    gap: 16px;
}

.icm-alerta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: #FFF6E5;
    box-shadow: inset 0 0 0 1px #F2D39B;
    color: #6B4A06;
    text-decoration: none;
}

.icm-alerta:hover {
    background: #FFEFD1;
}

.icm-alerta span:not(.icm-alerta-num) {
    flex: 1;
    font-size: 13px;
}

.icm-alerta strong {
    display: block;
    font-size: 14px;
}

.icm-alerta-num {
    min-width: 34px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #B7791F;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.dash-alerta-ic {
    margin: 0;
}

.icm-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.icm-filtros a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--border-soft);
    color: var(--text-main);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.icm-filtros a.is-active {
    background: #E5EFFC;
    box-shadow: inset 0 0 0 1.5px var(--hc-blue-500, #2F72E4);
    color: var(--hc-blue-900, #173F9E);
    font-weight: 600;
}

.icm-num {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface-subtle);
    font-size: 12px;
    text-align: center;
}

.icm-filtros a.is-alerta .icm-num {
    background: #B7791F;
    color: #FFFFFF;
}

.icm-tabla {
    overflow-x: auto;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
}

.icm-tabla table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 13px;
}

.icm-tabla th,
.icm-tabla td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    vertical-align: top;
}

.icm-tabla th {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.icm-sub {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
}

.icm-fila.is-resaltada {
    background: #EEF7F1;
}

.icm-urgente {
    color: #973D49;
    font-weight: 700;
}

.icm-estado {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--surface-subtle);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.icm-estado.is-solicitada { background: #FFF1D6; color: #7A5200; }
.icm-estado.is-agendada { background: #E5EFFC; color: #1D4E9E; }
.icm-estado.is-atendida, .icm-estado.is-respondida { background: #EFE8FB; color: #5B3B99; }
.icm-estado.is-finalizada { background: #E6F4EC; color: #1F6B41; }

.icm-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 160px;
}

.icm-acciones .adm-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 13px;
}

.icm-vacio {
    margin: 0;
    padding: 24px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-muted);
    text-align: center;
}

.sidebar-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #B7791F;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

html[data-sidebar-mode="collapsed"] .sidebar-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
}

.ic-aviso-especialista {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: #F1ECFB;
    box-shadow: inset 0 0 0 1px #D9CCF3;
    color: #3F2A70;
    font-size: 13px;
}

.ic-aviso-especialista span {
    flex: 1 1 320px;
}

.ic-aviso-especialista strong {
    display: block;
    font-size: 14px;
}

.ic-bitacora {
    margin-top: 12px;
    font-size: 13px;
}

.ic-bitacora summary {
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
}

.ic-bitacora ol {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    padding-left: 18px;
}

.ic-bitacora time {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Interconsultas en pantallas medianas y moviles: cada solicitud es una tarjeta (sin scroll lateral). */
@media (max-width: 1100px) {
    .icm-tabla {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    .icm-tabla table,
    .icm-tabla tbody,
    .icm-tabla tr,
    .icm-tabla td {
        display: block;
        min-width: 0;
    }
    .icm-tabla thead {
        display: none;
    }
    .icm-tabla tr.icm-fila {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 8px 16px;
        margin-bottom: 10px;
        padding: 14px;
        border-radius: var(--radius-md);
        background: var(--surface-raised);
        box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
    }
    .icm-tabla tr.icm-fila.is-resaltada {
        background: #EEF7F1;
    }
    .icm-tabla td {
        padding: 0;
        border: 0;
    }
    .icm-tabla td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .icm-tabla td[data-label="Paciente"] {
        grid-column: 1 / -1;
    }
    .icm-tabla td.icm-acciones {
        grid-column: 1 / -1;
        padding-top: 6px;
        border-top: 1px solid var(--border-soft);
    }
}

/* Plan terapeutico: estudios derivados de las ordenes (solo lectura). */
.plan-estudios {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
}
.plan-estudios-titulo {
    margin: 0 0 6px;
    font-weight: 600;
}
.plan-estudios-titulo small,
.plan-estudios-vacio {
    color: var(--text-muted);
    font-weight: 400;
}
.plan-estudios-titulo small { margin-left: 6px; }
.plan-estudios-vacio { margin: 0; }
.plan-estudios ul { margin: 0; padding-left: 18px; }
.plan-estudios li + li { margin-top: 4px; }

/* Citas y Usuarios en tablet y movil: cada fila es una tarjeta; Estado y Acciones siempre visibles (sin scroll lateral). */
@media (max-width: 1100px) {
    :is(.citas-tabla, .usuarios-tabla) {
        overflow: visible;
        background: transparent;
        box-shadow: none;
    }
    :is(.citas-tabla, .usuarios-tabla) table,
    :is(.citas-tabla, .usuarios-tabla) tbody,
    :is(.citas-tabla, .usuarios-tabla) tr,
    :is(.citas-tabla, .usuarios-tabla) td {
        display: block;
        min-width: 0;
    }
    :is(.citas-tabla, .usuarios-tabla) thead {
        display: none;
    }
    :is(.citas-tabla, .usuarios-tabla) tr:is(.citas-fila, .usuarios-fila) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px 16px;
        margin-bottom: 10px;
        padding: 14px;
        border-radius: var(--radius-md);
        background: var(--surface-raised, #FFFFFF);
        box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
    }
    :is(.citas-tabla, .usuarios-tabla) td {
        padding: 0;
        border: 0;
    }
    :is(.citas-tabla, .usuarios-tabla) td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    :is(.citas-tabla, .usuarios-tabla) td:is(.citas-paciente, .usuarios-nombre) {
        grid-column: 1 / -1;
        font-weight: 600;
    }
    :is(.citas-tabla, .usuarios-tabla) td:is(.citas-acciones, .usuarios-acciones) {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border-soft);
    }
}

/* Historia clinica en tablet: solo la cabecera del paciente y los signos quedan fijos (mas espacio para escribir). */
@media (max-width: 1180px) {
    .main-panel:has(.clinical-sticky-context) .topbar {
        position: static;
    }
}

/* ===== Sidebar en tablet (Sexta revision 6.2) =====
   Causa del error en iPad vertical: la regla antigua @media (max-width: 980px) pone .sidebar-nav en dos
   columnas; el riel compacto no la redefinia y los iconos quedaban en 2 columnas cortadas. */
@media (min-width: 701px) {
    html[data-sidebar-mode="collapsed"] .sidebar-nav {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
}
@media (min-width: 701px) and (max-width: 1024px) {
    .sidebar-nav {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Tablet vertical: riel de iconos fijo (78 px) y nombres en un panel superpuesto (no desplaza el contenido). */
/* Riel compacto: iPad vertical y telefonos en horizontal (pantalla baja). */
@media (min-width: 701px) and (max-width: 1100px) and (orientation: portrait), (min-width: 701px) and (max-width: 1100px) and (max-height: 500px) {
    .app-shell {
        grid-template-columns: 78px minmax(0, 1fr);
    }
    .main-panel {
        grid-column: 2;
    }
    .sidebar {
        width: 78px;
        padding-left: env(safe-area-inset-left, 0px);
    }
    html[data-sidebar-mode="collapsed"] .sidebar-nav {
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        align-content: start;
    }
    html[data-sidebar-mode="collapsed"] .sidebar-footer {
        padding-bottom: max(18px, env(safe-area-inset-bottom, 0px));
    }
    /* Sin tooltips de hover en el riel: en tactil el panel muestra los nombres. */
    html[data-sidebar-mode="collapsed"] .sidebar-link::after {
        display: none;
    }

    /* Panel con nombres */
    html[data-sidebar-open="true"] .sidebar {
        position: fixed;
        top: 14px;
        bottom: 14px;
        left: 14px;
        z-index: 80;
        width: min(300px, calc(100vw - 120px));
        height: auto;
        box-shadow: 0 24px 60px rgba(8, 47, 60, 0.32);
        animation: hcDrawerIn 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
    html[data-sidebar-open="true"] .sidebar .brand {
        flex-direction: row;
        justify-content: flex-start;
        padding: 18px 16px;
    }
    html[data-sidebar-mode="collapsed"][data-sidebar-open="true"] .brand-copy,
    html[data-sidebar-mode="collapsed"][data-sidebar-open="true"] .sidebar-label {
        display: block;
    }
    html[data-sidebar-mode="collapsed"][data-sidebar-open="true"] .brand-mark {
        display: none;
    }
    html[data-sidebar-mode="collapsed"][data-sidebar-open="true"] .sidebar-nav {
        justify-items: stretch;
        padding: 14px 12px;
    }
    html[data-sidebar-mode="collapsed"][data-sidebar-open="true"] .sidebar-link {
        justify-content: flex-start;
        width: 100%;
        padding: 0 14px;
    }
    html[data-sidebar-open="true"] .sidebar-toggle {
        display: none;
    }
    html[data-sidebar-open="true"] .sidebar-mobile-close {
        display: grid;
        margin-left: auto;
    }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 79;
        border: 0;
        background: rgba(4, 22, 30, 0.38);
        animation: hcFadeIn 150ms ease-out both;
    }
    html[data-sidebar-open="true"] .sidebar-backdrop {
        display: block;
    }
}
@keyframes hcDrawerIn {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Usuarios (6.3): misma escala que el resto; celdas con dato principal + secundario y acciones en una fila. */
.usuarios-tabla td .texto-secundario {
    display: block;
    margin-top: 2px;
    font-size: 12px;
}
.usuarios-tabla td.usuarios-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.usuarios-tabla td.usuarios-acciones form {
    margin: 0;
}
.content-grid > .metric-tiles {
    margin: 0;
}
/* Firma y sello: caja de alto fijo; la imagen se ajusta sin cambiar el tamano del formulario. */
.recurso-caja {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 260px;
    height: 96px;
    margin: 4px 0 8px;
}
.recurso-caja .signature-thumb {
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}
@media (min-width: 1101px) {
    .usuarios-tabla td .texto-secundario { white-space: nowrap; }
    .usuarios-tabla td.usuarios-acciones { min-width: 250px; }
}
.content-grid > .panel-card { min-width: 0; }
/* Zona de carga (firma, sello, P12): un campo mas del formulario, no un control nativo suelto. */
.form-card .drop-zone {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-width: 1px;
    border-radius: 14px;
    cursor: pointer;
}
.form-card .drop-zone > span {
    font-size: 12.5px;
    font-weight: 500;
}
.form-card .drop-zone input[type=file] {
    min-height: 0;
    padding: 4px 0;
    border: 0;
    background: transparent;
    font-size: 13px;
}
/* Usuarios: tarjetas segun el ancho disponible de su panel (menu expandido o compacto), no del viewport. */
.usuarios-panel { container: usuarios / inline-size; }
@container usuarios (max-width: 1000px) {
    .usuarios-tabla { overflow: visible; background: transparent; box-shadow: none; }
    .usuarios-tabla table, .usuarios-tabla tbody, .usuarios-tabla tr, .usuarios-tabla td { display: block; min-width: 0; }
    .usuarios-tabla thead { display: none; }
    .usuarios-tabla tr.usuarios-fila {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 8px 16px;
        margin-bottom: 10px;
        padding: 14px;
        border-radius: var(--radius-md);
        background: var(--surface-raised, #FFFFFF);
        box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
    }
    .usuarios-tabla td { padding: 0; border: 0; }
    .usuarios-tabla td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }
    .usuarios-tabla td.usuarios-nombre { grid-column: 1 / -1; }
    .usuarios-tabla td.usuarios-acciones {
        grid-column: 1 / -1;
        min-width: 0;
        padding-top: 8px;
        border-top: 1px solid var(--border-soft);
    }
}

/* ---- 6.5 Documentos de la atencion (centro de documentos y panel de cierre) ---- */
.docs-atencion {
    display: grid;
    gap: 12px;
    margin: 16px 0;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 0 0 0 1px var(--border-soft), var(--shadow-xs);
}

.docs-atencion h3 {
    margin: 2px 0 0;
    font-size: 16px;
}

.docs-cierre {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-cierre {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.doc-cierre-titulo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-width: 0;
}

.doc-cierre-titulo > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.doc-cierre-titulo strong {
    color: var(--text-strong);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.doc-cierre-icono {
    display: inline-flex;
    margin-top: 1px;
    color: var(--success-600, #15803d);
}

.doc-cierre.is-pendiente .doc-cierre-icono,
.doc-cierre.is-desactualizado .doc-cierre-icono {
    color: var(--warning-800, #936A22);
}

.doc-cierre.is-aviso .doc-cierre-icono {
    color: var(--text-muted, #64748b);
}

.doc-cierre-mensaje {
    color: var(--text-main);
    font-size: 13px;
}

.doc-cierre.is-pendiente .doc-cierre-mensaje {
    color: var(--warning-900, #7A5214);
    font-weight: 600;
}

.doc-cierre-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.doc-cierre-acciones .btn-table,
.doc-cierre-reintento .btn-secondary {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.doc-cierre-reintento {
    margin: 0;
    justify-self: end;
}

.doc-cierre-avisos {
    grid-column: 1 / -1;
    margin: 0;
    padding: 6px 10px 6px 28px;
    border-radius: var(--radius-sm);
    color: var(--warning-900, #7A5214);
    background: var(--warning-100, #FFFAE1);
    font-size: 12.5px;
}

.cierre-modal-card {
    width: min(680px, 100%);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cierre-modal-card .control-modal-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.cierre-modal-alerta {
    margin: 0;
    padding: 10px 12px;
}

.cierre-modal-control {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
}

.cierre-modal-control h4 {
    margin: 0;
    font-size: 15px;
    color: var(--text-strong);
}

.marco-impresion {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 640px) {
    .doc-cierre {
        grid-template-columns: 1fr;
    }

    .doc-cierre-acciones,
    .doc-cierre-reintento {
        justify-content: flex-start;
        justify-self: stretch;
    }

    .doc-cierre-acciones .btn-table {
        flex: 1 1 calc(33% - 6px);
    }
}

@media print {
    .docs-atencion,
    #cierre-modal {
        display: none !important;
    }
}

/* ---- 6.7 Regresion multidispositivo ---- */
/* Safari de iPhone amplia la pagina al enfocar un campo con letra menor de 16px (y obliga a pellizcar
   para volver). En pantallas de telefono todos los campos usan 16px. */
@media (max-width: 700px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Filtro de jornada de Admision: area tactil minima de 44px en tablet y telefono. */
@media (max-width: 1180px) {
    .adm-day-filter input,
    .adm-day-filter .btn-secondary {
        min-height: 44px;
    }
}

/* Opciones del buscador CIE-10: area tactil minima en tablet y telefono. */
@media (max-width: 1180px) {
    .dx-opcion {
        min-height: 44px;
    }
}