@import url("listado-profesionales.css?v=20260912c");
@import url("patient-registration.css?v=20260915b");

/* Portal de Pacientes: capa visual compartida sobre gns01. */

body[data-pp-theme="petrol"] {
    --pp-page: #edf5f4;
    --pp-page-accent: #d7e9e7;
    --pp-surface: #ffffff;
    --pp-glass: rgba(255, 255, 255, 0.78);
    --pp-glass-strong: rgba(255, 255, 255, 0.9);
    --pp-text: #173136;
    --pp-muted: #587176;
    --pp-brand: #0f5961;
    --pp-brand-strong: #083c44;
    --pp-accent: #2f95a0;
    --pp-accent-soft: #cce8e9;
    --pp-on-brand: #ffffff;
    --pp-border: rgba(15, 89, 97, 0.2);
    --pp-border-strong: rgba(15, 89, 97, 0.38);
    --pp-focus: #167b86;
    --pp-shadow: rgba(8, 60, 68, 0.13);
    --pp-shadow-strong: rgba(8, 60, 68, 0.2);
    --pp-success: #16794c;
    --pp-success-soft: #e8f5ee;
    --pp-danger: #b42318;
    --pp-danger-action: #b42318;
    --pp-danger-soft: #fff0ee;
    --pp-warning: #9a6700;
    --pp-warning-soft: #fff7dd;
    --pp-info: #1769aa;
    --pp-info-soft: #edf6ff;
}

:root,
body[data-pp-theme="sanitario"] {
    --pp-page: #eef5fc;
    --pp-page-accent: #dbeaf8;
    --pp-surface: #ffffff;
    --pp-glass: rgba(255, 255, 255, 0.8);
    --pp-glass-strong: rgba(255, 255, 255, 0.92);
    --pp-text: #16324f;
    --pp-muted: #567089;
    --pp-brand: #155fb8;
    --pp-brand-strong: #0c3f7a;
    --pp-accent: #3e9bd3;
    --pp-accent-soft: #d9edf9;
    --pp-on-brand: #ffffff;
    --pp-border: rgba(21, 95, 184, 0.2);
    --pp-border-strong: rgba(21, 95, 184, 0.38);
    --pp-focus: #0f6fc6;
    --pp-shadow: rgba(12, 63, 122, 0.13);
    --pp-shadow-strong: rgba(12, 63, 122, 0.2);
    --pp-success: #16794c;
    --pp-success-soft: #e8f5ee;
    --pp-danger: #b42318;
    --pp-danger-action: #b42318;
    --pp-danger-soft: #fff0ee;
    --pp-warning: #9a6700;
    --pp-warning-soft: #fff7dd;
    --pp-info: #1769aa;
    --pp-info-soft: #edf6ff;
}

body[data-pp-theme="coral"] {
    --pp-page: #f7f3f0;
    --pp-page-accent: #eee4df;
    --pp-surface: #ffffff;
    --pp-glass: rgba(255, 255, 255, 0.8);
    --pp-glass-strong: rgba(255, 255, 255, 0.92);
    --pp-text: #292d34;
    --pp-muted: #6c6870;
    --pp-brand: #3b414b;
    --pp-brand-strong: #242932;
    --pp-accent: #cf5d4b;
    --pp-accent-soft: #f8ded8;
    --pp-on-brand: #ffffff;
    --pp-border: rgba(59, 65, 75, 0.2);
    --pp-border-strong: rgba(59, 65, 75, 0.38);
    --pp-focus: #b84939;
    --pp-shadow: rgba(36, 41, 50, 0.13);
    --pp-shadow-strong: rgba(36, 41, 50, 0.2);
    --pp-success: #16794c;
    --pp-success-soft: #e8f5ee;
    --pp-danger: #b42318;
    --pp-danger-action: #b42318;
    --pp-danger-soft: #fff0ee;
    --pp-warning: #9a6700;
    --pp-warning-soft: #fff7dd;
    --pp-info: #1769aa;
    --pp-info-soft: #edf6ff;
}

/* Vitamed: pizarra oscuro, esmeralda y cyan del sistema de diseño vigente. */
body[data-pp-theme="vitamed"] {
    color-scheme: dark;
    --pp-page: #08111f;
    --pp-page-end: #12233a;
    --pp-page-accent: #173f56;
    --pp-surface: #0f172a;
    --pp-glass: rgba(15, 23, 42, 0.78);
    --pp-glass-strong: rgba(15, 23, 42, 0.92);
    --pp-text: #f8fafc;
    --pp-muted: #b8c5d4;
    --pp-brand: #10b981;
    --pp-brand-strong: #34d399;
    --pp-accent: #22d3ee;
    --pp-accent-soft: #12364a;
    --pp-on-brand: #06291e;
    --pp-border: rgba(148, 163, 184, 0.28);
    --pp-border-strong: rgba(125, 211, 252, 0.46);
    --pp-focus: #67e8f9;
    --pp-shadow: rgba(2, 8, 23, 0.42);
    --pp-shadow-strong: rgba(2, 8, 23, 0.62);
    --pp-success: #6ee7b7;
    --pp-success-soft: #12382b;
    --pp-danger: #fda4af;
    --pp-danger-action: #be123c;
    --pp-danger-soft: #3b1822;
    --pp-warning: #fcd34d;
    --pp-warning-soft: #3d2d10;
    --pp-info: #67e8f9;
    --pp-info-soft: #12364a;
}

html {
    min-width: 0;
    background: #edf5f4;
    background: var(--pp-page);
}

body {
    min-width: 0;
    min-height: 100vh;
    color: #173136;
    color: var(--pp-text);
    background: #edf5f4;
    background:
        radial-gradient(circle at 8% 0%, var(--pp-page-accent) 0, transparent 34rem),
        linear-gradient(145deg, var(--pp-page) 0%, var(--pp-page-end, #ffffff) 115%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: #0f5961;
    color: var(--pp-brand);
    text-decoration-color: var(--pp-border-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: #083c44;
    color: var(--pp-brand-strong);
    text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #167b86;
    outline: 3px solid var(--pp-focus);
    outline-offset: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6,
#titulo-pag {
    color: #173136;
    color: var(--pp-text);
    font-family: inherit;
    font-weight: 700;
    letter-spacing: -0.018em;
}

#titulo-pag {
    width: min(100% - 32px, 1120px);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 48px) 0 12px;
    background: transparent;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.15;
}

#estructura {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
}

#contenidos,
#cont-simple {
    flex: 1 0 auto;
    width: 100%;
    position: relative;
    padding-top: clamp(8px, 1.2vw, 14px);
    transition: padding-top 180ms cubic-bezier(0.2, 0.75, 0.35, 1);
}

/* La pantalla vacía conserva el pie al borde inferior. Cuando el paciente ya
   eligió un profesional y hay disponibilidad, el flujo vuelve a su altura
   natural: calendario, horarios y pie quedan como una sola secuencia. */
#contenidos:has(#sel_turno_grupo.pp-selector-listo) {
    flex: 0 0 auto;
    padding-top: 0;
}

/* La piel heredada dibuja un separador oscuro al iniciar el contenido. */
#top-contenidos-wrapper {
    min-height: 0;
    background: transparent;
}

#cont-cuerpo-pagina {
    width: min(100% - 32px, 1120px);
    margin: 0 auto clamp(32px, 6vw, 72px);
    padding: clamp(20px, 3vw, 36px);
    border: 1px solid rgba(15, 89, 97, 0.2);
    border-color: var(--pp-border);
    border-radius: 24px;
    background: #ffffff;
    background: var(--pp-surface);
    box-shadow: 0 18px 54px var(--pp-shadow);
    animation: pp-content-enter 180ms ease-out both;
}

body.sin-titulo-pag #cont-formulario {
    width: min(100% - 32px, 1180px);
    margin: clamp(16px, 2.5vw, 28px) auto clamp(32px, 6vw, 72px);
    padding: clamp(18px, 3vw, 32px);
    border: 1px solid var(--pp-border);
    border-radius: 24px;
    color: var(--pp-text);
    background: var(--pp-glass);
    box-shadow: 0 18px 54px var(--pp-shadow);
    transition: margin-top 180ms cubic-bezier(0.2, 0.75, 0.35, 1);
}

/* Con disponibilidad, el calendario empieza cerca de la cabecera. La misma
   curva de transición acompaña el cierre del aire propio de la pantalla vacía. */
body.sin-titulo-pag:has(#sel_turno_grupo.pp-selector-listo) #cont-formulario {
    margin-top: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    #contenidos,
    body.sin-titulo-pag #cont-formulario {
        transition: none;
    }
}

body.sin-titulo-pag #formulario-ppal {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.sin-titulo-pag #cont-cuerpo-pagina {
    margin-top: clamp(16px, 2.5vw, 28px);
}

/* Las superficies internas ya dan contexto; este marco exterior sólo duplica
   bordes y sombra en las pantallas del portal. */
#cont-cuerpo-pagina,
body.sin-titulo-pag #cont-formulario {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
    #cont-cuerpo-pagina,
    .pp-glass,
    .x-window {
        background: var(--pp-glass);
        -webkit-backdrop-filter: blur(18px) saturate(125%);
        backdrop-filter: blur(18px) saturate(125%);
    }
}

@keyframes pp-content-enter {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */

#norte {
    position: relative;
    z-index: 20;
    padding: 8px 0 0;
    background: transparent !important;
    background-image: none !important;
}

#cabecera,
.pp-header {
    width: min(100% - 32px, 1180px);
    min-height: 62px;
    margin: 0 auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 0 0 22px 22px;
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

#cabecera.cabecera-unif,
.pp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#cabecera .cabecera-unif__inicial,
#cabecera .cabecera-unif__final {
    float: none;
    width: auto;
    min-width: 0;
}

#logo-app,
.pp-brand {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.15;
}

#logo-app a,
.pp-brand__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--pp-brand-strong);
    font-weight: 750;
    text-decoration: none;
}

#logo-app a::before,
.pp-brand__mark {
    content: "P";
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-right: 10px;
    border-radius: 13px;
    color: var(--pp-on-brand);
    background: linear-gradient(145deg, var(--pp-accent), var(--pp-brand-strong));
    box-shadow: 0 7px 18px var(--pp-shadow-strong);
    font-size: 1rem;
    font-weight: 800;
}

.pp-brand--image #logo-app a::before {
    display: none;
}

/* El tema Vitamed incorpora su propio monograma clínico sin alterar el logo
   institucional de cada portal. */
body[data-pp-theme="vitamed"] #logo-app a::before,
body[data-pp-theme="vitamed"] .pp-brand__mark {
    content: "V";
    color: #052e2b;
    background: linear-gradient(145deg, #22d3ee, #34d399);
}

body[data-pp-theme="vitamed"] .pp-brand--image #logo-app a::after {
    content: "V";
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-left: 8px;
    border-radius: 10px;
    color: #052e2b;
    background: linear-gradient(145deg, #22d3ee, #34d399);
    box-shadow: 0 7px 18px var(--pp-shadow-strong);
    font-size: 0.8rem;
    font-weight: 850;
}

#logo-app img,
.pp-brand img {
    display: block;
    width: auto;
    max-width: min(250px, 52vw);
    max-height: 52px;
    object-fit: contain;
}

#sesion-cont,
.pp-session {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

#info-sesion,
.pp-session__info {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--pp-muted);
    font-size: 0.875rem;
}

.sesion-usuario {
    max-width: 22ch;
    padding: 7px 10px;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-page) 70%, transparent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sesion-cerrar a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    text-decoration: none;
}

.pp-session__install {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--pp-brand) 38%, var(--pp-border));
    border-radius: 12px;
    color: var(--pp-brand-strong);
    background: color-mix(in srgb, var(--pp-brand) 9%, var(--pp-page));
    font: inherit;
    font-weight: 750;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
}

.pp-session__install:hover {
    background: color-mix(in srgb, var(--pp-brand) 16%, var(--pp-page));
}

.pp-session__install:focus-visible {
    outline: 3px solid var(--pp-focus);
    outline-offset: 2px;
}

.pp-session__install[hidden] {
    display: none;
}

.bajo-cabecera {
    height: 0;
    min-height: 0;
    background: transparent;
}

.pp-theme-picker {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--pp-glass-strong) 88%, transparent);
}

.pp-theme-picker__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    color: var(--pp-muted);
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
    cursor: pointer;
}

.pp-theme-picker__button:hover {
    color: var(--pp-text);
    background: var(--pp-accent-soft);
}

.pp-theme-picker__button[aria-pressed="true"] {
    color: var(--pp-on-brand);
    background: var(--pp-brand);
    box-shadow: 0 4px 12px var(--pp-shadow);
}

.pp-visually-hidden,
[data-pp-theme-status] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Forms and actions */

form,
.cont_grupo,
.panel-simple {
    max-width: 100%;
}

fieldset,
.cont_grupo,
.panel-simple {
    border-color: var(--pp-border);
    border-radius: 18px;
}

fieldset {
    min-width: 0;
    padding: 18px;
}

legend,
.panel-title {
    color: var(--pp-brand-strong);
    font-weight: 700;
}

.FormTABLE {
    max-width: 100%;
}

.FormTABLE td,
.FormTABLE th {
    vertical-align: middle;
}

.FormLabelTD,
.FormLabelTDHoz,
.FormLabelTDVert,
label,
.labeled-formfield__label--vert {
    color: var(--pp-text);
    font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select,
.Input,
.NumericInput,
.Textarea,
.Select,
.x-form-text {
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid var(--pp-border-strong);
    border-radius: 11px;
    color: var(--pp-text);
    background: #ffffff;
    background: var(--pp-surface);
    background-image: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.035);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

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

input:hover,
textarea:hover,
select:hover,
.Input:hover,
.NumericInput:hover,
.Textarea:hover,
.Select:hover {
    border-color: var(--pp-brand);
}

input:focus,
textarea:focus,
select:focus,
.Input:focus,
.NumericInput:focus,
.Textarea:focus,
.Select:focus,
.x-form-focus {
    border-color: var(--pp-focus);
    background-color: var(--pp-surface);
    background-image: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-focus) 18%, transparent);
}

input[disabled],
textarea[disabled],
select[disabled],
.Disabled {
    color: var(--pp-muted);
    background: var(--pp-page);
    opacity: 0.72;
}

input[readonly],
input.sololectura,
textarea[readonly] {
    color: var(--pp-text) !important;
    background: var(--pp-page) !important;
    background-image: none !important;
    box-shadow: none;
}

input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
    accent-color: var(--pp-brand);
}

select,
select.Select {
    appearance: none;
    padding-right: 40px;
    background-image: linear-gradient(45deg, transparent 50%, var(--pp-brand) 50%),
        linear-gradient(135deg, var(--pp-brand) 50%, transparent 50%);
    background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
}

select:focus,
select.Select:focus {
    background-image: linear-gradient(45deg, transparent 50%, var(--pp-brand-strong) 50%),
        linear-gradient(135deg, var(--pp-brand-strong) 50%, transparent 50%);
}

button,
input[type="button"],
input[type="submit"],
.Button,
.ButtonLinkFields,
.comando-btn--normal,
a.comando.destacado {
    min-height: 44px;
    border: 1px solid var(--pp-brand);
    border-radius: 12px;
    color: var(--pp-on-brand);
    background: var(--pp-brand);
    background-image: none;
    box-shadow: 0 7px 16px var(--pp-shadow);
    font-family: inherit;
    font-weight: 700;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.Button:hover,
.ButtonLinkFields:hover,
.comando-btn--normal:hover,
a.comando.destacado:hover {
    color: var(--pp-on-brand);
    background: var(--pp-brand-strong);
    background-image: none;
    box-shadow: 0 9px 20px var(--pp-shadow-strong);
    transform: translateY(-1px);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
.Button:active {
    transform: translateY(0);
}

button[disabled],
input[disabled][type="button"],
input[disabled][type="submit"],
.Button.Disabled {
    border-color: var(--pp-border);
    color: var(--pp-muted);
    background: var(--pp-page);
    box-shadow: none;
    transform: none;
}

.ButtonAnt,
.ButtonCancel,
.ButtonCerrarVent,
#b_cancel_ident {
    border-color: var(--pp-border-strong);
    color: var(--pp-brand-strong);
    background: var(--pp-surface);
    box-shadow: none;
}

.formfields--hoz {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 16px;
}

.formfields__item--hoz {
    min-width: 0;
    margin: 0;
}

.labeled-formfield--vert {
    display: grid;
    gap: 7px;
}

.explained-button--vert {
    display: grid;
    gap: 5px;
}

.explained-button__expl--vert,
.comment-text,
.FormLabelTD > .comentario,
.FormLabelTDHoz > .comentario,
.FormLabelTDVert > .comentario,
.FormInputTD > .comentario,
.FormInputTDHoz > .comentario,
.FormInputTDVert > .comentario,
.panel-help,
.micro-text {
    color: var(--pp-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

#tabla-login {
    width: min(100%, 620px);
}

#form_login h2 {
    margin-bottom: 18px;
}

#form_login .paso1,
#form_login .paso2 {
    width: 100%;
}

.panel-comandos,
.panel-comandos-simple {
    padding: 16px;
    border-color: var(--pp-border);
    background: var(--pp-page);
}

/* Messages and semantic states */

.cont-msjs,
#cont-msjs-pag,
#cont-msjs-pag-int {
    max-width: 100%;
}

[class^="mensaje_"],
[class*=" mensaje_"],
.msj-info,
.msj-error,
.msj-alerta,
.msj-ok,
.mensaje-info,
.mensaje-error,
.mensaje-alerta,
.mensaje-ok {
    position: relative;
    max-width: 72ch;
    margin: 0 auto 18px;
    padding: 14px 16px 14px 44px;
    border: 1px solid var(--pp-border);
    border-left-width: 5px;
    border-radius: 14px;
    color: var(--pp-text);
    background: var(--pp-surface);
    background-image: none;
    box-shadow: 0 7px 22px var(--pp-shadow);
}

[class^="mensaje_"]::before,
[class*=" mensaje_"]::before,
.msj-info::before,
.msj-error::before,
.msj-alerta::before,
.msj-ok::before,
.mensaje-info::before,
.mensaje-error::before,
.mensaje-alerta::before,
.mensaje-ok::before {
    position: absolute;
    top: 12px;
    left: 15px;
    font-weight: 850;
}

.msj-error,
.mensaje_error,
.mensaje-error {
    border-left-color: var(--pp-danger);
    background: var(--pp-danger-soft);
}

.msj-error::before,
.mensaje_error::before,
.mensaje-error::before {
    content: "!";
    color: var(--pp-danger);
}

.msj-alerta,
.mensaje_alerta,
.mensaje-alerta {
    border-left-color: var(--pp-warning);
    background: var(--pp-warning-soft);
}

.msj-alerta::before,
.mensaje_alerta::before,
.mensaje-alerta::before {
    content: "!";
    color: var(--pp-warning);
}

.msj-info,
.mensaje_info,
.mensaje-info {
    border-left-color: var(--pp-info);
    background: var(--pp-info-soft);
}

.msj-info::before,
.mensaje_info::before,
.mensaje-info::before {
    content: "i";
    color: var(--pp-info);
}

.msj-ok,
.mensaje_ok,
.mensaje-ok {
    border-left-color: var(--pp-success);
    background: var(--pp-success-soft);
}

.msj-ok::before,
.mensaje_ok::before,
.mensaje-ok::before {
    content: "\2713";
    color: var(--pp-success);
}

.error-text {
    color: var(--pp-danger);
}

/* La página de error del motor usa contenedores y un icono propios del skin
   heredado. Se reduce a una sola tarjeta de estado para el portal. */
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) {
    padding: clamp(22px, 3.5vw, 42px);
    background: var(--pp-glass);
}

#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) #cont-contenidos,
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .cont-contenidos,
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) #cont-comandos,
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .bloque-comandos {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) #cont-comandos,
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .bloque-comandos {
    margin-bottom: 18px;
}

#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .ButtonVolver,
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .ButtonVolver .contenido-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--pp-border-strong) !important;
    border-radius: 11px;
    color: var(--pp-brand-strong) !important;
    background: var(--pp-glass-strong) !important;
    background-image: none !important;
    box-shadow: none !important;
    font: inherit;
    font-weight: 720;
    text-decoration: none;
}

#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .ButtonVolver::before,
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .ButtonVolver .contenido-btn::before,
#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .ButtonVolver .contenido-btn::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

:is(#cont-msjs-error, .cont-msjs-error) {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

:is(#cont-msjs-error, .cont-msjs-error) .msj-error {
    position: relative;
    margin: 0;
    padding: 18px 20px 18px 52px;
    border: 1px solid color-mix(in srgb, var(--pp-danger) 38%, var(--pp-border));
    border-left: 5px solid var(--pp-danger);
    border-radius: 16px;
    color: var(--pp-text);
    background: var(--pp-danger-soft);
    background-image: none !important;
    box-shadow: 0 12px 28px var(--pp-shadow);
    font-size: 1rem;
    line-height: 1.5;
}

:is(#cont-msjs-error, .cont-msjs-error) .msj-error::before {
    position: absolute;
    top: 17px;
    left: 17px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: var(--pp-danger-action, var(--pp-danger));
    content: "!";
    font-size: 0.82rem;
    font-weight: 850;
}

:is(#cont-msjs-error, .cont-msjs-error) .msj-error p {
    margin: 0;
    color: inherit;
}

:is(#cont-msjs-error, .cont-msjs-error) .msj-error p + p {
    margin-top: 10px;
    color: var(--pp-muted);
    font-size: 0.94rem;
}

#cont-cuerpo-pagina:has(:is(#cont-msjs-error, .cont-msjs-error)) .ButtonVolver .contenido-btn {
    min-height: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.warn-text {
    color: var(--pp-warning);
}

.ok-text {
    color: var(--pp-success);
}

.info-text,
.flag-importante {
    color: var(--pp-info);
}

/* Reglas finales para neutralizar la mayor especificidad del skin legado. */

#cabecera #logo-app a,
#cabecera .pp-brand__link {
    color: var(--pp-brand-strong);
}

#tabla-login label,
#tabla-login .labeled-formfield__label--vert,
.FormTABLE label,
.CampoRequerido label {
    color: var(--pp-text);
}

#tabla-login button,
#tabla-login input[type="button"],
#tabla-login input[type="submit"],
.FormTABLE button.Button,
.FormTABLE input.Button {
    border-color: var(--pp-brand);
    color: var(--pp-on-brand);
    background: var(--pp-brand);
    background-image: none;
}

#tabla-login button:hover,
#tabla-login input[type="button"]:hover,
#tabla-login input[type="submit"]:hover,
.FormTABLE button.Button:hover,
.FormTABLE input.Button:hover {
    border-color: var(--pp-brand-strong);
    color: var(--pp-on-brand);
    background: var(--pp-brand-strong);
    background-image: none;
}

button.ButtonGuardar:not([disabled]),
input.ButtonGuardar:not([disabled]),
#b-confirmar-asig:not([disabled]) {
    border-color: var(--pp-brand) !important;
    color: var(--pp-on-brand) !important;
    background: var(--pp-brand) !important;
    background-image: none !important;
    box-shadow: 0 7px 16px var(--pp-shadow) !important;
}

button.ButtonGuardar:not([disabled]):hover,
input.ButtonGuardar:not([disabled]):hover,
#b-confirmar-asig:not([disabled]):hover {
    border-color: var(--pp-brand-strong) !important;
    color: var(--pp-on-brand) !important;
    background: var(--pp-brand-strong) !important;
    background-image: none !important;
}

#tabla-login {
    overflow: hidden;
    border: 1px solid var(--pp-border);
    border-radius: 18px;
    background: var(--pp-glass-strong);
    box-shadow: 0 12px 30px var(--pp-shadow);
}

#tabla-login > tbody > tr > td {
    padding: 22px 24px 18px;
    background: transparent;
}

#tabla-login > tfoot > tr > td {
    padding: 12px 16px;
    border-top: 1px solid var(--pp-border);
    background: color-mix(in srgb, var(--pp-page) 72%, var(--pp-surface));
}

/* Tables and lists */

.cont-altura-max,
.x-grid3-scroller,
.x-grid3-header,
.tabla-responsive {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.datos,
table.listado,
.x-grid3 table {
    max-width: 100%;
    border-color: var(--pp-border);
    color: var(--pp-text);
    background: var(--pp-surface);
}

table.datos th,
table.listado th,
.x-grid3-hd-row td {
    border-color: var(--pp-border);
    color: var(--pp-brand-strong);
    background: var(--pp-page-accent);
    background-image: none;
    font-weight: 700;
}

table.datos td,
table.listado td,
.x-grid3-row td {
    border-color: var(--pp-border);
}

table.datos tbody tr:nth-child(even),
table.listado tbody tr:nth-child(even),
.x-grid3-row-alt {
    background: color-mix(in srgb, var(--pp-page) 66%, var(--pp-surface));
}

table.datos tbody tr:hover,
table.listado tbody tr:hover,
.x-grid3-row-over {
    background: var(--pp-accent-soft);
}

td.acciones a,
.acciones a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 7px 10px;
}

/* Legacy ExtJS surfaces: presentation only, geometry remains owned by ExtJS. */

.x-window,
.x-panel,
.x-menu,
.x-combo-list {
    color: var(--pp-text);
    font-family: inherit;
}

.x-window-tl,
.x-window-tr,
.x-window-tc,
.x-window-ml,
.x-window-mr,
.x-window-mc,
.x-window-bl,
.x-window-br,
.x-window-bc,
.x-panel-tl,
.x-panel-tr,
.x-panel-tc,
.x-panel-ml,
.x-panel-mr,
.x-panel-mc,
.x-panel-bl,
.x-panel-br,
.x-panel-bc {
    background-color: var(--pp-surface);
    background-image: none;
}

.x-window,
.x-panel {
    border-radius: 16px;
    box-shadow: 0 20px 60px var(--pp-shadow-strong);
}

.x-window-header,
.x-panel-header {
    border-color: var(--pp-border);
    color: var(--pp-brand-strong);
    background: var(--pp-page-accent);
    background-image: none;
    font-family: inherit;
}

.x-window-body,
.x-panel-body,
.x-combo-list-inner,
.x-list-body {
    border-color: var(--pp-border);
    color: var(--pp-text);
    background: var(--pp-surface);
}

.x-combo-list {
    overflow: hidden;
    border: 1px solid var(--pp-border-strong);
    border-radius: 13px;
    box-shadow: 0 14px 30px var(--pp-shadow-strong);
}

.x-combo-list .x-combo-list-item {
    min-height: 42px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--pp-border);
    color: var(--pp-text);
    background: var(--pp-surface);
    font-size: 0.9rem;
    line-height: 1.3;
}

.x-combo-list .x-combo-list-item:last-child {
    border-bottom: 0;
}

.x-combo-list .x-combo-selected,
.x-combo-list .x-combo-list-item:hover {
    color: var(--pp-brand-strong);
    background: var(--pp-accent-soft);
}

.x-mask {
    background: var(--pp-brand-strong);
    opacity: 0.32;
}

.x-date-picker {
    border-color: var(--pp-border-strong);
    background: var(--pp-surface);
}

.x-date-middle,
.x-date-left,
.x-date-right,
.x-date-inner th {
    color: var(--pp-on-brand);
    background-color: var(--pp-brand);
    background-image: none;
}

.x-date-inner .x-date-selected a,
.x-combo-selected,
.x-view-selected {
    border-color: var(--pp-brand);
    color: var(--pp-brand-strong);
    background: var(--pp-accent-soft);
}

/* Diálogos del portal. Se usan para confirmar acciones sin recurrir a alertas
   nativas, que no respetan el tema ni dan contexto suficiente. */
.pp-dialog-backdrop {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: color-mix(in srgb, var(--pp-brand-strong) 46%, transparent);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.pp-dialog {
    width: min(100%, 560px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--pp-surface) 78%, transparent);
    border-radius: 22px;
    color: var(--pp-text);
    background: var(--pp-glass-strong);
    box-shadow: 0 24px 70px var(--pp-shadow-strong);
}

.pp-dialog__body {
    padding: 24px;
}

.pp-dialog__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    color: var(--pp-brand);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pp-dialog__title {
    margin: 0;
    color: var(--pp-brand-strong);
    font-size: 1.3rem;
    line-height: 1.2;
}

.pp-dialog__message {
    margin: 12px 0 0;
    color: var(--pp-muted);
    white-space: pre-line;
}

.pp-dialog__details {
    display: grid;
    gap: 7px;
    margin: 18px 0 0;
    padding: 14px;
    border: 1px solid var(--pp-border);
    border-radius: 13px;
    background: color-mix(in srgb, var(--pp-page) 76%, var(--pp-surface));
}

.pp-dialog__detail {
    display: grid;
    grid-template-columns: minmax(104px, auto) 1fr;
    gap: 12px;
}

.pp-dialog__detail-label {
    color: var(--pp-muted);
    font-weight: 650;
}

.pp-dialog__detail-value {
    min-width: 0;
    color: var(--pp-text);
    font-weight: 750;
}

.pp-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--pp-border);
    background: color-mix(in srgb, var(--pp-page) 70%, var(--pp-surface));
}

.pp-dialog__cancel {
    border-color: var(--pp-border-strong);
    color: var(--pp-brand-strong);
    background: var(--pp-surface);
    box-shadow: none;
}

/* Selector de profesionales: la ventana heredada conserva su comportamiento,
   pero adopta una jerarquía visual propia y no una tabla de administración. */
#div-contenedor-seleccionable {
    overflow: hidden;
    border: 1px solid var(--pp-border) !important;
    border-radius: 22px;
    background: var(--pp-glass-strong) !important;
    box-shadow: 0 24px 72px var(--pp-shadow-strong) !important;
}

#comandos-seleccionable {
    display: flex;
    justify-content: flex-end;
    min-height: 62px;
    padding: 12px 16px;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-border) !important;
    background: color-mix(in srgb, var(--pp-page) 74%, var(--pp-surface)) !important;
}

#b_cerrar_seleccionable {
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid var(--pp-border-strong);
    border-radius: 11px;
    color: var(--pp-brand-strong);
    background: var(--pp-surface);
    box-shadow: none;
}

body.sin-estructura #cont-simple {
    width: 100%;
    padding: 0;
}

body.sin-estructura #titulo-pag {
    width: 100%;
    margin: 0;
    padding: 26px 30px 18px;
    border: 0;
    background: transparent;
}

body.sin-estructura #cont-listado {
    width: 100%;
    margin: 0;
    padding: 14px 22px 22px;
    background: transparent;
}

#buscador {
    display: grid;
    grid-template-columns: minmax(130px, 0.18fr) minmax(260px, 0.82fr);
    gap: 9px 16px;
    width: min(100%, 720px);
    margin: 0 0 20px;
    padding: 18px;
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    background: var(--pp-glass);
}

#buscador label {
    align-self: center;
}

#buscador input,
#buscador select {
    width: 100% !important;
    max-width: none !important;
}

#buscador #cont-comandos,
#buscador .comandos,
#buscador > div:last-child {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

#tabla-datos {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--pp-border);
    border-radius: 14px;
    color: var(--pp-text);
    background: var(--pp-surface);
}

#tabla-datos th,
#tabla-datos td {
    padding: 9px 12px;
    border-color: var(--pp-border);
}

#tabla-datos th {
    color: var(--pp-brand-strong);
    background: var(--pp-page-accent);
}

#tabla-datos tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--pp-page) 66%, var(--pp-surface));
}

#tabla-datos tbody tr:hover {
    background: var(--pp-accent-soft);
}

/* El buscador heredado incluye tabla y resultados dentro del mismo formulario.
   Se estilizan sus bloques internos para no convertir todo el listado en grilla. */
#buscador {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#cont-buscador {
    width: min(100%, 720px);
    margin: 0 0 18px;
    padding: 18px;
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    background: var(--pp-glass);
}

#cont-buscador .mensaje_error,
#cont-buscador .mensaje_notificacion {
    max-width: none;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
}

#busquedapers > table {
    width: 100%;
}

#busquedapers > table > tbody > tr {
    display: grid;
    grid-template-columns: minmax(130px, 0.22fr) minmax(0, 0.78fr);
    gap: 8px 16px;
    align-items: center;
    margin-top: 9px;
}

#busquedapers > table > tbody > tr > td {
    padding: 0;
}

#busquedapers > table > tfoot > tr > td {
    padding: 14px 0 0;
}

#busquedapers > table > tfoot > tr > td:last-child {
    display: flex;
    gap: 9px;
}

#cont-tabla-datos {
    display: block !important;
    width: 100%;
    margin: 0;
}

#tabla-datos {
    width: 100% !important;
}

@media (max-width: 600px) {
    .pp-dialog-backdrop {
        align-items: end;
        padding: 12px;
    }

    .pp-dialog {
        border-radius: 18px;
    }

    .pp-dialog__body {
        padding: 20px;
    }

    .pp-dialog__detail {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .pp-dialog__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 12px;
    }

    #buscador {
        grid-template-columns: 1fr;
        padding: 14px;
    }

    #buscador #cont-comandos,
    #buscador .comandos,
    #buscador > div:last-child {
        grid-column: auto;
    }
}

/* Controles heredados: los sprites ya no forman parte del lenguaje visual. */
.Button .contenido-btn,
.ButtonLinkFields .contenido-btn,
.ButtonBuscar .contenido-btn,
.ButtonLimpiar .contenido-btn,
.ButtonAnt .contenido-btn,
.ButtonSiguiente .contenido-btn,
.ButtonGuardar .contenido-btn,
.ButtonCerrarVent .contenido-btn {
    padding-left: 0 !important;
    background-image: none !important;
    font-family: inherit !important;
}

button.Button,
button.ButtonGuardar,
button.ButtonAnt,
button.ButtonSiguiente,
button.ButtonCerrarVent,
button.ButtonBuscar,
button.ButtonLimpiar,
input.Button,
input.ButtonGuardar,
input.ButtonAnt,
input.ButtonSiguiente,
input.ButtonCerrarVent,
input.ButtonBuscar,
input.ButtonLimpiar {
    background-image: none !important;
}

.Button .contenido-btn::before,
.Button .contenido-btn::after,
.ButtonLinkFields .contenido-btn::before,
.ButtonLinkFields .contenido-btn::after,
.ButtonBuscar .contenido-btn::before,
.ButtonBuscar .contenido-btn::after,
.ButtonLimpiar .contenido-btn::before,
.ButtonLimpiar .contenido-btn::after,
.ButtonAnt .contenido-btn::before,
.ButtonAnt .contenido-btn::after,
.ButtonSiguiente .contenido-btn::before,
.ButtonSiguiente .contenido-btn::after,
.ButtonGuardar .contenido-btn::before,
.ButtonGuardar .contenido-btn::after,
.ButtonCerrarVent .contenido-btn::before,
.ButtonCerrarVent .contenido-btn::after,
#realizar-anular .contenido-btn::before,
#realizar-anular .contenido-btn::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

#realizar-anular .contenido-btn {
    padding-left: 0 !important;
    background-image: none !important;
}

/* Algunas acciones antiguas incluyen una imagen dentro del contenido del botón. */
button[class*="Button"] *,
input[class*="Button"] * {
    padding-left: 0 !important;
    background-image: none !important;
}

button[class*="Button"] img,
input[class*="Button"] img,
button[class*="Button"] .icon,
input[class*="Button"] .icon {
    display: none !important;
}

[class*="Button"]::before,
[class*="Button"]::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* El selector modal no usa form-turnos.css: tiene su propia composición. */
body.sin-estructura #estructura,
body.sin-estructura #cont-simple {
    min-height: 100%;
    padding: 0;
    background: var(--pp-page);
}

body.sin-estructura #titulo-pag {
    width: 100%;
    margin: 0;
    padding: clamp(22px, 3vw, 36px) clamp(20px, 4vw, 46px);
    color: var(--pp-text) !important;
    background: linear-gradient(100deg, var(--pp-page-accent), var(--pp-surface));
}

body.sin-estructura #cont-listado {
    width: min(100% - 32px, 1120px);
    margin: 22px auto 34px;
}

body.sin-estructura #cont-buscador {
    width: min(100%, 760px);
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid var(--pp-border);
    border-radius: 18px;
    background: var(--pp-glass-strong);
    box-shadow: 0 10px 26px var(--pp-shadow);
}

body.sin-estructura #busquedapers,
body.sin-estructura #busquedapers table,
body.sin-estructura #busquedapers tbody {
    display: block;
    width: 100%;
}

body.sin-estructura #busquedapers tbody > tr {
    display: grid;
    grid-template-columns: minmax(124px, 0.28fr) minmax(0, 1fr);
    gap: 8px 16px;
    align-items: center;
    margin: 10px 0;
}

body.sin-estructura #busquedapers tfoot,
body.sin-estructura #busquedapers tfoot tr {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 10px;
    margin: 0 0 14px;
}

body.sin-estructura #busquedapers tfoot td:first-child { display: none; }
body.sin-estructura #busquedapers tfoot td:last-child { display: flex; gap: 10px; }

body.sin-estructura #busquedapers .FormLabelTDVert,
body.sin-estructura #busquedapers .FormLabelTDVert label {
    color: var(--pp-text) !important;
    font-weight: 720;
}

body.sin-estructura #busquedapers input,
body.sin-estructura #busquedapers select {
    width: 100% !important;
}

body.sin-estructura #b_buscar_pers,
body.sin-estructura #b_limpiar_pers {
    min-width: 118px;
    border-color: var(--pp-brand) !important;
    color: var(--pp-on-brand) !important;
    background: var(--pp-brand) !important;
    background-image: none !important;
    white-space: nowrap;
}

body.sin-estructura #b_buscar_pers:hover,
body.sin-estructura #b_limpiar_pers:hover {
    background: var(--pp-brand-strong) !important;
}

body.sin-estructura #cont-tabla-datos {
    overflow: auto;
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    background: var(--pp-surface);
    box-shadow: 0 8px 22px var(--pp-shadow);
}

body.sin-estructura #cont-tabla-datos table {
    width: 100%;
    min-width: 520px;
    border-spacing: 0;
    color: var(--pp-text);
}

body.sin-estructura #cont-tabla-datos .HeaderTD {
    padding: 12px 14px;
    border-bottom: 1px solid var(--pp-border);
    color: var(--pp-text) !important;
    background: var(--pp-page-accent) !important;
    font-size: 0.82rem;
    font-weight: 780;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

body.sin-estructura #cont-tabla-datos .HeaderTD img {
    display: none;
}

body.sin-estructura #cont-tabla-datos .DataTD {
    padding: 11px 14px;
    border-bottom: 1px solid var(--pp-border);
    color: var(--pp-text) !important;
    background: var(--pp-surface) !important;
}

body.sin-estructura #cont-tabla-datos tr:nth-child(even) .DataTD {
    background: color-mix(in srgb, var(--pp-page) 58%, var(--pp-surface)) !important;
}

body.sin-estructura #cont-tabla-datos tr:hover .DataTD {
    background: var(--pp-accent-soft) !important;
}

body.sin-estructura #cont-tabla-datos .DataLink {
    color: var(--pp-brand-strong) !important;
    font-weight: 720;
    text-decoration: none;
}

body.sin-estructura #cont-tabla-datos .DataLink:hover {
    text-decoration: underline;
}

/* En el selector de profesionales el contexto ya queda claro por el botón
   que lo abre. Se conserva el título para lectores de pantalla sin ocupar un
   bloque visual que retrasa el listado. */
body.sin-estructura #titulo-pag {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

body.sin-estructura #cont-listado {
    margin: 14px auto 24px;
}

body.sin-estructura #cont-buscador {
    width: 100%;
    margin: 0 0 14px;
    padding: 16px;
}

body.sin-estructura #busquedapers > table {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.sin-estructura #busquedapers tbody {
    order: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 16px;
}

body.sin-estructura #busquedapers tbody > tr {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 0;
}

body.sin-estructura #busquedapers tfoot,
body.sin-estructura #busquedapers tfoot tr,
body.sin-estructura #busquedapers tfoot td:last-child {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    gap: 10px;
    margin: 0;
}

body.sin-estructura #busquedapers tfoot td:first-child {
    display: none;
}

@media (max-width: 600px) {
    body.sin-estructura #cont-listado { width: min(100% - 20px, 1120px); margin-top: 12px; }
    body.sin-estructura #cont-buscador { padding: 14px; }
    body.sin-estructura #busquedapers tbody > tr { grid-template-columns: 1fr; gap: 5px; }
    body.sin-estructura #busquedapers tfoot,
    body.sin-estructura #busquedapers tfoot tr {
        display: block !important;
        margin: 0 0 12px;
    }
    body.sin-estructura #busquedapers tfoot td:last-child {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100% !important;
    }
    body.sin-estructura #b_buscar_pers,
    body.sin-estructura #b_limpiar_pers {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        min-width: 0;
        min-height: 42px;
        margin: 0 !important;
    }
}

@media (max-width: 760px) {
    body.sin-estructura #busquedapers tbody {
        grid-template-columns: 1fr;
    }
}

/* Footer */

.pre-footer {
    width: min(100% - 32px, 1120px);
    margin: 0 auto 12px;
    padding: 14px 18px;
    border: 1px solid var(--pp-border);
    border-radius: 16px;
    color: var(--pp-text);
    background: var(--pp-surface);
    box-shadow: 0 9px 26px var(--pp-shadow);
}

#sur {
    flex: 0 0 auto;
    width: 100%;
    padding: 24px max(16px, calc((100% - 1120px) / 2)) 26px;
    border-top: 0;
    color: var(--pp-muted);
    background: linear-gradient(
        180deg,
        transparent,
        color-mix(in srgb, var(--pp-page-accent) 34%, transparent)
    );
    font-size: 0.8125rem;
}

/*
 * Versión anterior, como tarjeta independiente:
 *
 * #sur .interno1.cols3 {
 *     padding: 14px 18px;
 *     border: 1px solid var(--pp-border);
 *     border-radius: 16px;
 *     background: color-mix(in srgb, var(--pp-surface) 86%, transparent);
 *     box-shadow: 0 8px 24px var(--pp-shadow);
 * }
 */

/* Footer integrado: la información institucional queda bajo demanda. */
#sur .pp-footer-info {
    width: min(100% - 32px, 1120px);
    margin: 0 auto;
    padding-top: 12px;
    border-top: 1px solid var(--pp-border);
}

#sur .pp-footer-info > summary {
    width: fit-content;
    margin: 0 0 0 auto;
    color: var(--pp-muted);
    cursor: pointer;
    font-size: 0.8125rem;
}

#sur .pp-footer-info > summary:hover {
    color: var(--pp-brand-strong);
}

#sur .interno1.cols3 {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
    width: 100%;
    padding: 18px 0 4px;
    border: 0;
    border-top: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

#sur > .interno1 {
    border-top: 0;
    padding: 0;
}

#sur .cols3 .col-left,
#sur .cols3 .col-center,
#sur .cols3 .col-right {
    float: none;
    width: auto;
    min-width: 0;
}

#sur .col-center {
    text-align: center;
}

#sur .col-right {
    text-align: right;
}

#sur .info-contacto,
#sur address {
    width: auto;
    margin: 0;
    color: inherit;
    font-style: normal;
}

#sur .app-titulo,
#sur .app-copyright {
    display: block;
}

#sur .pagina-fechahora {
    color: var(--pp-text);
    font-weight: 650;
}

#sur .micro-text {
    margin-top: 4px;
    line-height: 1.35;
}

#cont-contenidos {
    width: min(100% - 32px, 1120px);
    margin: 24px auto 72px;
}

#formulario_error {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 24px;
    border: 1px solid var(--pp-border);
    border-radius: 20px;
    background: var(--pp-glass);
    box-shadow: 0 18px 54px var(--pp-shadow);
}

#formulario_error .mensaje_error,
#formulario_error .mensaje_alerta {
    margin-bottom: 8px;
}

#formulario_error #contenido-form {
    padding: 0;
}

#formulario_error #contenido-form > p {
    margin: 0 0 22px;
    color: var(--pp-muted);
    line-height: 1.5;
}

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

#formulario_error table td {
    border: 0;
    padding: 0 0 0 12px;
    background: transparent;
    vertical-align: top;
}

#formulario_error table td:first-child {
    padding-left: 0;
}

#formulario_error table .FormLabelTD {
    width: 150px;
    padding-top: 11px;
    color: var(--pp-text);
    font-weight: 700;
}

#formulario_error table .FormInputTD {
    width: auto;
}

#formulario_error table textarea,
#formulario_error table input[type="text"],
#formulario_error table input[type="email"],
#formulario_error table input[type="tel"] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--pp-border-strong);
    border-radius: 12px;
    color: var(--pp-text);
    background: var(--pp-surface);
}

#formulario_error table textarea {
    min-height: 132px;
    resize: vertical;
}

#formulario_error table input[name="telefono"] {
    max-width: 260px;
}

#formulario_error table tfoot {
    border-top: 1px solid var(--pp-border);
}

#formulario_error table tfoot td {
    padding-top: 18px;
}

#formulario_error table input[type="submit"],
#formulario_error table button {
    min-height: 42px;
    margin-left: 8px;
    padding: 0 14px;
    border: 1px solid var(--pp-border-strong);
    border-radius: 12px;
    color: var(--pp-text);
    background: var(--pp-glass);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

#formulario_error table input[type="submit"] {
    color: var(--pp-on-brand);
    border-color: var(--pp-brand-strong);
    background: var(--pp-brand-strong);
}

#formulario_error table input[type="submit"]:hover,
#formulario_error table button:hover {
    filter: brightness(0.97);
}

@media (max-width: 900px) {
    #cabecera,
    .pp-header {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pp-header__inner {
        flex-wrap: wrap;
    }

    .pp-theme-picker {
        order: 3;
    }

    #cont-cuerpo-pagina {
        border-radius: 20px;
    }

    #sur .interno1.cols3 {
        grid-template-columns: 1fr 1fr;
    }

    #sur .col-right {
        text-align: left;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 16px;
    }

    #cabecera,
    .pp-header {
        width: calc(100% - 20px);
        min-height: 0;
        margin-top: 10px;
        padding: 10px 12px;
        border-radius: 17px;
    }

    #cabecera.cabecera-unif,
    .pp-header__inner {
        align-items: stretch;
        gap: 9px;
    }

    #cabecera .cabecera-unif__inicial,
    #cabecera .cabecera-unif__final,
    #sesion-cont,
    .pp-session {
        width: 100%;
    }

    #info-sesion,
    .pp-session__info {
        width: 100%;
        justify-content: space-between;
    }

    .sesion-usuario {
        max-width: 19ch;
    }

    .pp-theme-picker {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 100%;
        border-radius: 15px;
    }

    .pp-theme-picker__button {
        min-width: 0;
        padding-inline: 6px;
    }

    #titulo-pag,
    #cont-cuerpo-pagina,
    body.sin-titulo-pag #cont-formulario {
        width: calc(100% - 20px);
    }

    #titulo-pag {
        padding-top: 24px;
    }

    #cont-cuerpo-pagina {
        margin-bottom: 28px;
        padding: 18px 14px;
        border-radius: 17px;
    }

    body.sin-titulo-pag #cont-cuerpo-pagina {
        margin-top: 24px;
    }

    body.sin-titulo-pag #cont-formulario {
        margin-top: 24px;
        margin-bottom: 28px;
        padding: 14px 10px;
        border-radius: 17px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    textarea,
    select,
    .Input,
    .NumericInput,
    .Textarea,
    .Select,
    .x-form-text {
        max-width: 100%;
        font-size: 16px;
    }

    .formfields--hoz,
    .formfields__item--hoz,
    .labeled-formfield--vert,
    .explained-button--vert {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    #tabla-login .formfields__item--hoz {
        margin-left: 0;
    }

    .FormTABLE,
    .FormTABLE > tbody,
    .FormTABLE > tbody > tr,
    .FormTABLE > tbody > tr > .FormLabelTD,
    .FormTABLE > tbody > tr > .FormInputTD,
    .FormTABLE > tbody > tr > .FormReqTD,
    .FormTABLE > tbody > tr > .FormLabelTDVert,
    .FormTABLE > tbody > tr > .FormInputTDVert,
    .FormTABLE > tbody > tr > .FormReqTDVert {
        display: block;
        width: 100%;
    }

    .FormLabelTD,
    .FormLabelTDVert,
    .FormInputTD,
    .FormInputTDVert,
    .FormReqTD,
    .FormReqTDVert {
        padding-right: 0;
        padding-left: 0;
    }

    /* El pie del formulario de acceso se pinta antes que el cuerpo en tablas.
       En móvil lo convertimos en una pila para dejar la acción tras los campos. */
    #tabla-login {
        display: flex;
        flex-direction: column;
    }

    #tabla-login > tbody,
    #tabla-login > tfoot {
        display: block;
        width: 100%;
    }

    #tabla-login > tbody > tr,
    #tabla-login > tfoot > tr,
    #tabla-login > tbody > tr > td,
    #tabla-login > tfoot > tr > td {
        display: block;
        box-sizing: border-box;
        width: 100%;
    }

    #tabla-login > tbody {
        order: 1;
    }

    #tabla-login > tfoot {
        order: 2;
    }

    fieldset {
        padding: 14px 12px;
    }

    .pre-footer {
        width: calc(100% - 20px);
        margin: -10px auto 20px;
    }

    #sur {
        display: none;
    }

    #sur .interno1.cols3 {
        grid-template-columns: 1fr;
        gap: 14px;
        text-align: left;
    }

    #sur .col-center,
    #sur .col-right {
        text-align: left;
    }

    #cont-contenidos {
        width: calc(100% - 20px);
        margin-top: 18px;
        margin-bottom: 36px;
    }

    #formulario_error {
        margin-top: 18px;
        padding: 18px 14px;
        border-radius: 17px;
    }

    #formulario_error table,
    #formulario_error table tbody,
    #formulario_error table tfoot,
    #formulario_error table tr,
    #formulario_error table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    #formulario_error table td {
        padding-left: 0;
    }

    #formulario_error table .FormLabelTD {
        padding-top: 0;
        padding-bottom: 5px;
    }

    #formulario_error table tfoot td {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 14px;
    }

    #formulario_error table input[type="submit"],
    #formulario_error table button {
        margin-left: 0;
    }
}

/* Cabecera compacta: conserva las acciones sin reservar una franja de pantalla. */
#norte {
    padding-top: 0;
}

#cabecera.pp-header {
    min-height: 64px;
    height: 64px;
    padding: 5px 14px;
    border-radius: 0 0 16px 16px;
}

#cabecera.cabecera-unif {
    gap: 12px;
}

#logo-app a,
.pp-brand__link {
    min-height: 34px;
    font-size: 0.9rem;
}

#logo-app a::before,
.pp-brand__mark {
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

#sesion-cont.pp-session {
    margin: 0 !important;
}

#info-sesion.pp-session__info {
    gap: 6px;
    font-size: 0.78rem;
}

.sesion-usuario {
    max-width: 18ch;
    padding: 5px 8px;
}

.sesion-cerrar a {
    min-height: 32px;
    padding: 0 9px;
}

.pp-theme-picker {
    gap: 3px;
    padding: 3px;
}

.pp-theme-picker__button {
    min-width: 36px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.75rem;
}

@media (max-width: 600px) {
    #cabecera.pp-header {
        width: 100%;
        min-height: 0;
        height: auto;
        margin-top: 0;
        padding: 7px 10px;
        border-radius: 0 0 16px 16px;
    }

    #cabecera.cabecera-unif {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: 7px 10px;
    }

    #cabecera .cabecera-unif__inicial,
    #cabecera .cabecera-unif__final,
    #sesion-cont.pp-session {
        width: auto;
    }

    #cabecera .cabecera-unif__inicial.pp-brand {
        grid-column: 1;
        width: 100%;
    }

    #logo-app .pp-brand__link,
    .pp-brand__link {
        display: flex;
        width: 100%;
        min-width: 0;
    }

    .pp-brand__vitamed {
        min-width: 0;
        width: 100%;
    }

    .pp-brand__vitamed > span:last-child {
        min-width: 0;
        overflow-wrap: normal;
        word-break: normal;
        white-space: normal;
    }

    #sesion-cont.pp-session {
        grid-column: 1;
        justify-content: flex-end;
        width: 100%;
    }

    #info-sesion.pp-session__info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        justify-content: stretch;
        width: 100%;
        max-width: 100%;
    }

    #logo-app a,
    .pp-brand__link {
        min-height: 32px;
        font-size: 0.82rem;
    }

    #info-sesion.pp-session__info {
        width: 100%;
    }

    .sesion-usuario {
        display: block;
        min-width: 0;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sesion-cerrar a {
        min-height: 32px;
        padding: 0 8px;
    }

    .pp-session__install {
        min-height: 32px;
        padding: 0 9px;
        font-size: 0.78rem;
    }

    .pp-theme-picker {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        border-radius: 12px;
    }

    .pp-theme-picker__button {
        min-height: 32px;
        padding-inline: 4px;
    }
}

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

/* Pantallas de acceso: la cabecera ya identifica el portal. El título técnico
   queda disponible para lectores de pantalla sin consumir el primer pliegue. */
body:has(#tabla-login) #titulo-pag {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

body:has(#tabla-login) #cont-cuerpo-pagina {
    width: min(100% - 32px, 980px);
    margin-top: clamp(18px, 3vw, 34px);
    padding: clamp(20px, 3vw, 32px);
}

body:has(#tabla-login) [class^="mensaje_"],
body:has(#tabla-login) [class*=" mensaje_"] {
    width: min(100%, 900px);
    max-width: min(100%, 900px);
    margin-bottom: 20px;
}

body:has(#tabla-login) #tabla-login {
    width: min(100%, 640px);
    margin: 0 auto;
}

body:has(#tabla-login) #tabla-login > tbody > tr > td {
    padding: 20px 24px 16px;
}

/* La lista pública no es una ventana administrativa: se integra a la página
   principal y conserva sólo una separación útil entre búsqueda y resultados. */
body.sin-estructura #top-contenidos-wrapper,
body.sin-estructura #contenidos,
body.sin-estructura #cont-simple {
    border: 0 !important;
    box-shadow: none !important;
}

body.sin-estructura #comandos {
    display: flex;
    align-items: center;
    width: min(100% - 32px, 1120px);
    min-height: 54px;
    margin: 0 auto;
    padding: 8px 0;
    border: 0 !important;
    background: transparent !important;
}

body.sin-estructura #comandos .ButtonVolver {
    min-height: 38px;
    padding-inline: 12px;
    border-color: var(--pp-border-strong);
    color: var(--pp-brand-strong);
    background: var(--pp-surface);
    box-shadow: none;
}

body.sin-estructura #cont-listado {
    margin-top: 0;
}

body.sin-estructura #cont-buscador {
    width: 100%;
    margin-bottom: 16px;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--pp-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none !important;
}

/* La marca Vitamed se mantiene en todos los temas del portal. */
.pp-brand__vitamed {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pp-brand-strong);
    font-size: 0.95rem;
    font-weight: 820;
    letter-spacing: 0.01em;
}

body[data-pp-theme="vitamed"] .pp-brand__vitamed { color: #f8fafc; }

.pp-brand__vitamed-mark {
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    color: var(--pp-on-brand);
    background: linear-gradient(145deg, var(--pp-accent), var(--pp-brand-strong));
    box-shadow: 0 6px 14px var(--pp-shadow-strong);
    font-size: 0.78rem;
    font-weight: 900;
}

body[data-pp-theme="vitamed"] .pp-brand__vitamed-mark {
    color: #052e2b;
    background: linear-gradient(145deg, #22d3ee, #34d399);
}

/* Ajustes finales para avisos del motor y comprobantes de turnos. */
#mensaje-flash {
    position: relative;
    width: min(100% - 32px, 1120px);
    margin: 10px auto 0;
    padding: 13px 46px 13px 48px !important;
    border: 1px solid var(--pp-warning) !important;
    border-left-width: 5px !important;
    border-radius: 14px;
    color: var(--pp-text) !important;
    background: var(--pp-warning-soft) !important;
    background-image: none !important;
    box-shadow: 0 7px 22px var(--pp-shadow);
}

/* El aviso del motor pertenece al contenido, no al encabezado fijo. */
#mensaje-flash.transitorio {
    position: relative !important;
    inset: auto !important;
    width: min(100% - 32px, 1120px) !important;
    margin: 12px auto !important;
}

#mensaje-flash:has(> .info) {
    border-color: var(--pp-brand) !important;
    background: var(--pp-info-soft) !important;
}

#mensaje-flash:has(> .info)::before {
    color: var(--pp-brand-strong);
    content: "\2713";
}

#mensaje-flash > .info {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    font-weight: 700;
}

#mensaje-flash::before {
    position: absolute;
    top: 12px;
    left: 15px;
    color: var(--pp-warning);
    content: "!";
    font-size: 1.05rem;
    font-weight: 850;
}

#mensaje-flash .warning { color: inherit !important; font-weight: 700; }
#mensaje-flash .warning {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    color: inherit !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
#mensaje-flash .warning::before,
#mensaje-flash .warning::after {
    display: none !important;
    content: none !important;
    background: none !important;
}
#mensaje-flash .comandos { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
#mensaje-flash .comandos a {
    display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 9px;
    color: var(--pp-text) !important; font-size: 1rem; font-weight: 800; text-decoration: none;
}
#mensaje-flash .comandos a:hover { background: color-mix(in srgb, var(--pp-warning) 16%, transparent); }

#sesion-cont.pp-session {
    padding: 4px !important;
    border: 1px solid var(--pp-border) !important;
    border-radius: 14px;
    background: var(--pp-glass-strong) !important;
}
#info-sesion.pp-session__info { padding: 0 !important; background: transparent !important; }
.sesion-usuario { color: var(--pp-text) !important; background: var(--pp-page) !important; }
.sesion-cerrar a { color: var(--pp-brand-strong) !important; background: transparent !important; }

/* Comprobante y anulaci\u00f3n: una ficha legible, con acciones inequ\u00edvocas. */
.panel-info-datosturno {
    display: grid !important;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, 0.92fr);
    gap: clamp(18px, 3vw, 30px);
    padding: clamp(18px, 3vw, 28px) !important;
    border: 1px solid var(--pp-border) !important;
    border-radius: 20px;
    color: var(--pp-text);
    background: var(--pp-glass-strong) !important;
    box-shadow: 0 14px 34px var(--pp-shadow);
}
.panel-info-datosturno > * { float: none !important; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
.panel-info-datosturno table { width: 100%; border: 0 !important; color: var(--pp-text); background: transparent !important; }
.panel-info-datosturno td { padding: 6px 0 !important; border: 0 !important; color: var(--pp-text) !important; background: transparent !important; vertical-align: top; }
.panel-info-datosturno td:first-child { width: 42%; padding-right: 14px !important; color: var(--pp-muted) !important; font-weight: 720; }
.panel-info-datosturno td:last-child { font-size: 1.04rem; font-weight: 760; }
.panel-info-datosturno td *,
.panel-info-datosturno .datos-tab *,
.panel-info-datosturno .panel-comandos * { color: inherit !important; }
.panel-info-datosturno td:first-child,
.panel-info-datosturno td:first-child * { color: var(--pp-muted) !important; }
.panel-info-datosturno .panel-comandos,
.panel-info-datosturno .panel-comandos-simple,
.panel-info-datosturno .cont-comandos {
    min-height: 100%; padding-left: clamp(18px, 3vw, 28px) !important;
    border-left: 1px solid var(--pp-border) !important; color: var(--pp-muted);
}
.panel-info-datosturno .panel-comandos a,
.panel-info-datosturno .panel-comandos-simple a,
.panel-info-datosturno .cont-comandos a { color: var(--pp-brand-strong); font-weight: 720; }
.panel-info-datosturno .cont-help {
    grid-column: 1 / -1;
    margin-top: 2px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--pp-border) !important;
    color: var(--pp-muted) !important;
}
#comandos-turno { margin-top: 18px; }
#realizar-anular {
    display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px !important; border: 1px solid var(--pp-danger) !important; border-radius: 12px !important;
    color: #ffffff !important; background: var(--pp-danger-action, var(--pp-danger)) !important; background-image: none !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--pp-danger-action, var(--pp-danger)) 24%, transparent); font-weight: 760;
}
.panel-info-datosturno #realizar-anular .contenido-btn,
#realizar-anular .contenido-btn { display: inline-flex !important; align-items: center; justify-content: center; min-height: 0; padding: 0 !important; background: transparent !important; }
.panel-info-datosturno #realizar-anular,
.panel-info-datosturno #realizar-anular .contenido-btn { color: #ffffff !important; text-shadow: none !important; }
#realizar-anular:hover { filter: brightness(0.94); transform: translateY(-1px); }
.bloque-comandos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding: 0 !important; border: 0 !important; background: transparent !important; }
.bloque-comandos a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 15px; border: 1px solid var(--pp-border-strong); border-radius: 11px; color: var(--pp-brand-strong); background: var(--pp-glass-strong); font-weight: 720; text-decoration: none; }
.bloque-comandos a:hover { color: var(--pp-on-brand); background: var(--pp-brand); }

/* En el detalle ya existe la ficha del turno: el contenedor genérico no debe duplicarla. */
#cont-cuerpo-pagina:has(.panel-info-datosturno) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 600px) {
    .panel-info-datosturno { grid-template-columns: 1fr; }
    .panel-info-datosturno .panel-comandos,
    .panel-info-datosturno .panel-comandos-simple,
    .panel-info-datosturno .cont-comandos { padding-top: 18px !important; padding-left: 0 !important; border-top: 1px solid var(--pp-border) !important; border-left: 0 !important; }
    .panel-info-datosturno td:first-child { width: 46%; }
    .bloque-comandos a { flex: 1 1 180px; justify-content: center; }
}

/* El monograma genérico se reemplaza por la marca Vitamed real. */
#logo-app:has(.pp-brand__vitamed) a::before {
    display: none;
}

/* Marca real de Vitamed, coloreada con la paleta activa. */
.pp-brand__vitamed-mark {
    display: inline-grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    color: transparent;
    background: transparent !important;
    box-shadow: none;
    font-size: 0;
}

body[data-pp-theme="vitamed"] .pp-brand__vitamed-mark {
    background: transparent !important;
}

.pp-brand__vitamed-mark::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 50px;
    height: 50px;
    background: var(--pp-brand);
    -webkit-mask: url("vitamed-symbol.png?v=20260913a") center / 150% 150% no-repeat;
    mask: url("vitamed-symbol.png?v=20260913a") center / 150% 150% no-repeat;
}

body[data-pp-theme="vitamed"] .pp-brand__vitamed-mark::before {
    background: var(--pp-brand);
}

/* El aviso acompaña al pie de la reserva y mantiene su icono alineado. */
#sur > .mensaje_info.integrado {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: fit-content !important;
    max-width: min(100%, 1120px) !important;
    min-height: 0;
    margin: 0 auto 14px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--pp-border) !important;
    border-radius: 12px !important;
    color: var(--pp-text) !important;
    background: color-mix(in srgb, var(--pp-accent-soft) 72%, var(--pp-surface)) !important;
    box-shadow: none !important;
    font-size: 0.86rem;
    line-height: 1.4;
    white-space: nowrap;
    hyphens: none;
    overflow-wrap: normal;
}

#sur > .mensaje_info.integrado::before {
    position: static !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
    transform: none !important;
}

@media (max-width: 900px) {
    #sur > .mensaje_info.integrado {
        white-space: normal;
        overflow-wrap: break-word;
    }
}

/* El alta sigue accesible, pero no compite con la identificación. */
body:has(#tabla-login) #cont-cuerpo-pagina {
    display: flex;
    flex-direction: column;
}

body:has(#tabla-login) #cont-cuerpo-pagina > .mensaje_info {
    order: 3;
    max-width: 640px;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--pp-muted);
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.85rem;
    text-align: center;
}

body:has(#tabla-login) #cont-cuerpo-pagina > .mensaje_info::before {
    content: none;
}

body:has(#tabla-login) #form_login { order: 1; }
body:has(#tabla-login) .panel-comandos-login { order: 4; }

/* La confirmacion usa los mismos tonos de texto que el resto del portal. */
body #tabla-login .paso2,
body #tabla-login .paso2 .comment-text {
    color: var(--pp-text) !important;
}

body #tabla-login .datos-confirmacion .label {
    color: var(--pp-muted) !important;
}

body #tabla-login .datos-confirmacion .dato {
    color: var(--pp-brand-strong) !important;
}

/* La confirmación pide una sola decisión. Corregir el documento queda como
   una salida secundaria, visible pero sin competir con el ingreso. */
#form_login .pp-login-confirm-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin-top: 10px;
}

#form_login .pp-login-confirm-cancel,
#form_login .pp-login-confirm-primary {
    display: block;
}

#form_login .pp-login-confirm-primary {
    text-align: right;
}

#form_login .pp-login-confirm-actions #b_cancel_ident {
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--pp-brand) !important;
    border-radius: 12px;
    color: var(--pp-brand-strong);
    background: var(--pp-surface) !important;
    box-shadow: none;
    font-size: 0.9rem;
    font-weight: 760;
    text-decoration: none;
}

#form_login .pp-login-confirm-actions #b_cancel_ident:hover,
#form_login .pp-login-confirm-actions #b_cancel_ident:focus-visible {
    color: var(--pp-on-brand);
    background: var(--pp-brand) !important;
}

#form_login .pp-login-confirm-actions #b_login {
    min-width: 220px;
}

#form_login .pp-login-confirm-warning {
    grid-column: 1 / -1;
    width: 100%;
    margin: 4px 0 0;
    padding: 11px 13px;
    border: 1px solid var(--pp-border);
    border-radius: 12px;
    color: var(--pp-text) !important;
    background: var(--pp-accent-soft);
    text-align: left;
}

@media (max-width: 600px) {
    #form_login .pp-login-confirm-actions {
        grid-template-columns: 1fr;
    }

    #form_login .pp-login-confirm-primary {
        grid-row: 1;
        text-align: left;
    }

    #form_login .pp-login-confirm-actions #b_login {
        width: 100%;
    }
}

/* El bloqueo conserva el flujo de ingreso, pero deja atras el GIF heredado. */
.mensaje-bloqueo {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: min(320px, calc(100vw - 40px));
    min-height: 128px;
    padding: 24px;
    border: 1px solid var(--pp-border);
    border-radius: 18px;
    color: var(--pp-text) !important;
    background: var(--pp-surface);
    box-shadow: 0 18px 42px var(--pp-shadow);
    font-size: 0.95rem;
    font-weight: 650;
    text-align: center;
}

.mensaje-bloqueo img,
.mensaje-bloqueo br {
    display: none !important;
}

.mensaje-bloqueo::before {
    content: "";
    width: 28px;
    height: 28px;
    border: 3px solid var(--pp-accent-soft);
    border-top-color: var(--pp-brand);
    border-radius: 50%;
    animation: pp-loading-turn 750ms linear infinite;
}

@keyframes pp-loading-turn {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mensaje-bloqueo::before { animation: none; }
}

/* Selectores separados para neutralizar también las reglas heredadas de cada
   contenedor cuando el listado se abre fuera del flujo principal. */
body.sin-estructura #top-contenidos-wrapper {
    border: 0 !important;
}

body.sin-estructura #cont-buscador {
    box-shadow: none !important;
}

body.sin-estructura #comandos {
    border: 0 !important;
}

/* El acceso al listado complementa el ingreso, sin recuperar la cápsula del
   skin antiguo ni competir con la acción principal. */
body:has(#tabla-login) .panel-comandos-login {
    display: flex;
    justify-content: center;
    margin-top: 18px;
    padding: 0 !important;
    border: 0 !important;
    color: var(--pp-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body:has(#tabla-login) .panel-comandos-login .comando {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid var(--pp-border-strong);
    border-radius: 11px;
    color: var(--pp-brand-strong);
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 700;
    text-decoration: none;
}

body:has(#tabla-login) .panel-comandos-login .comando:hover {
    color: var(--pp-on-brand);
    background: var(--pp-brand) !important;
}

/* Directorio público: filtros y resultados comparten el ancho de lectura de
   la aplicación, sin la tarjeta administrativa heredada. */
body.sin-estructura #cont-listado {
    width: min(100% - 32px, 1120px) !important;
}

body.sin-estructura #cont-buscador {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px 20px;
    align-items: end;
    padding: 18px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pp-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body.sin-estructura #busquedapers {
    grid-column: 1 / -1;
}

body.sin-estructura #busquedapers tbody {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: end;
}

body.sin-estructura #busquedapers tfoot,
body.sin-estructura #busquedapers tfoot tr,
body.sin-estructura #busquedapers tfoot td:last-child {
    grid-column: 1 / -1;
    justify-content: flex-start;
}

body.sin-estructura #b_buscar_pers,
body.sin-estructura #b_limpiar_pers {
    min-height: 42px;
    padding-inline: 16px;
    border-radius: 11px !important;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    body.sin-estructura #busquedapers tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Debe prevalecer incluso cuando el navegador habilita el efecto glass. */
#cont-cuerpo-pagina,
body.sin-titulo-pag #cont-formulario {
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}