/* =====================================================================
   DERMACLINIC - Sistema de diseño (minimalista, claro / oscuro, responsive)

   Estructura
     1. Tokens de diseño (claro por defecto, oscuro con body.dark-mode)
     2. Base (reset, tipografía, enlaces, elementos nativos)
     3. Shell de la aplicación (header, menú, título, contenido, footer)
     4. Primitivas de layout (stack, row, grid, card, form, field, tablas de datos)
     5. Compatibilidad con clases legacy (StyleSheet.css) usadas por las páginas
     6. Login y páginas sin MasterPage
     7. Utilidades
     8. Responsive
     9. Impresión

   Los estilos de los controles DevExpress están en dermaclinic-dx.css.
   El modo oscuro cambia el tema nativo de DevExpress a Office365Dark (Global.asax) y
   la clase "dark-mode" del <body> (MasterPage) cambia las variables de este archivo.

   GUÍA RÁPIDA PARA PÁGINAS NUEVAS (no usar <table> para maquetar)
     Formulario     <div class="dc-form dc-cols-2">                 1, 2 ó 3 columnas (colapsa en móvil)
                      <div class="dc-field">                        etiqueta a la izquierda, valor a la derecha
                        <label class="dc-label">Nombre:</label>
                        <div class="dc-value"><dx:ASPxTextBox Width="100%" .../></div>
                      </div>
                      <div class="dc-field dc-span-all dc-top">...  campo de ancho completo (memo, editor HTML)
                      <div class="dc-btnrow">...</div>              fila de botones
                    </div>
     Tarjeta        <div class="dc-card dc-medium"> ... </div>       dc-narrow / dc-medium / dc-wide limitan el ancho
     Filtros        <div class="dc-toolbar"> dc-field + botón </div> filtros en una línea que se envuelve
     Detalle        dc-toolbar con dc-field.dc-stacked + dc-w-sm / dc-w-md / dc-w-lg (etiqueta arriba)
     Columnas       <div class="dc-row"> dc-side | dc-grow | dc-half | dc-fixed </div>
     Ficha          <dl class="dc-kv"><dt>..</dt><dd>..</dd></dl>    datos de solo lectura
     Control+ícono  <div class="dc-inline"><div class="dc-grow">combo</div> ícono </div>
     Editores DX    Width="100%" (los anchos en px se limitan solos al ancho disponible)
     Ancho          todas las páginas usan todo el ancho de la ventana (--content-max: none); TemaHelper.AnchoCompleto ya no es necesario
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
    --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-brand: "Cormorant Garamond", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    --fs-base: 14px;
    --fs-sm: 12.5px;
    --fs-lg: 16px;
    --fs-title: 1.375rem;

    --radius: 10px;
    --radius-sm: 6px;
    --gap: 16px;
    --gap-sm: 8px;
    --pad: 16px;
    --content-max: none; /* todas las páginas usan el ancho disponible; las tarjetas se limitan con dc-narrow / dc-medium / dc-wide */
    --gutter: 20px;
    --control-h: 34px;

    /* Colores - modo claro */
    --bg: #f4f6f7;
    --surface: #ffffff;
    --surface-2: #f0f3f4;
    --surface-3: #e8edef;
    --border: #e1e6e9;
    --border-strong: #cdd5d9;
    --text: #1b2428;
    --text-muted: #5b6a71;
    --text-faint: #86939a;

    --accent: #16505c;
    --accent-hover: #0e3a44;
    --accent-soft: #e2eff1;
    --accent-contrast: #ffffff;
    --link: #16505c;

    --danger: #b3261e;
    --danger-soft: #fbeae8;
    --success: #1d7a4d;
    --success-soft: #e5f4ec;
    --warning: #9a6408;
    --warning-soft: #fdf1dc;

    --input-bg: #ffffff;

    --shadow-sm: 0 1px 2px rgba(16, 24, 28, .06);
    --shadow-md: 0 10px 30px rgba(16, 24, 28, .12);
    --overlay: rgba(15, 23, 28, .45);
    --focus-ring: 0 0 0 3px rgba(22, 80, 92, .22);
}

body.dark-mode {
    --bg: #121517;
    --surface: #1b2023;
    --surface-2: #232a2e;
    --surface-3: #2c3439;
    --border: #2e373c;
    --border-strong: #3d484e;
    --text: #e6ebed;
    --text-muted: #a4b0b6;
    --text-faint: #7b888f;

    --accent: #4fb3c0;
    --accent-hover: #7ccad4;
    --accent-soft: #1b3a40;
    --accent-contrast: #08181b;
    --link: #6cc4cf;

    --danger: #ff8a80;
    --danger-soft: #3a1f1d;
    --success: #6fd3a0;
    --success-soft: #16301f;
    --warning: #f0b95c;
    --warning-soft: #33280f;

    --input-bg: #14191b;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .55);
    --overlay: rgba(0, 0, 0, .6);
    --focus-ring: 0 0 0 3px rgba(79, 179, 192, .28);
}

:root:has(body.dark-mode) {
    color-scheme: dark;
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
body.dc-app {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

/* Los temas de DevExpress también fijan el color de fondo del body; body.dc-app tiene más especificidad. */

/* Las tablas heredadas usaban Tahoma 9pt con !important; la tipografía ahora es una sola. */
body, td, th, span, p, div, label, input, select, textarea, button {
    font-family: var(--font-sans);
}

td, th {
    font-size: inherit;
}

img {
    max-width: 100%;
}

a {
    color: var(--link);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
}

h1 { font-size: var(--fs-title); }
h2 { font-size: 1.15rem; }
h3 { font-size: 1.05rem; }
h4 { font-size: 1rem; }

p {
    margin: 0 0 .75em;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--gap) 0;
}

/* Contenedores centrados del legacy: el centrado ahora lo resuelve el layout. */
center {
    display: block;
    text-align: center;
}

::selection {
    background: var(--accent);
    color: var(--accent-contrast);
}

/* Elementos nativos (los inputs de DevExpress se estilizan en dermaclinic-dx.css) */
input[type="text"]:not([class*="dxe"]),
input[type="password"]:not([class*="dxe"]),
input[type="email"]:not([class*="dxe"]),
input[type="number"]:not([class*="dxe"]),
input[type="tel"]:not([class*="dxe"]),
input[type="date"]:not([class*="dxe"]),
input[type="search"]:not([class*="dxe"]),
textarea:not([class*="dxe"]),
select:not([class*="dxe"]) {
    height: var(--control-h);
    padding: 0 10px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-base);
    max-width: 100%;
}

textarea:not([class*="dxe"]) {
    height: auto;
    padding: 8px 10px;
}

input:not([class*="dxe"]):focus,
textarea:not([class*="dxe"]):focus,
select:not([class*="dxe"]):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--accent);
}

/* Botón nativo */
.dc-btn,
input[type="submit"]:not([class*="dx"]),
input[type="button"]:not([class*="dx"]),
button.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--control-h);
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-contrast);
    font-size: var(--fs-base);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}

.dc-btn:hover,
input[type="submit"]:not([class*="dx"]):hover,
input[type="button"]:not([class*="dx"]):hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    text-decoration: none;
}

.dc-btn.dc-btn-ghost {
    background: transparent;
    color: var(--accent);
}

.dc-btn.dc-btn-ghost:hover {
    background: var(--accent-soft);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* No desactivar transition/animation globalmente con prefers-reduced-motion: DevExpress espera el fin de la
   animación para terminar de abrir las listas desplegables (evento DropDown) y hasta entonces ignora los clics
   en sus opciones; en equipos con "reducir movimiento" los combos solo respondían al teclado. */


/* ---------------------------------------------------------------------
   3. SHELL DE LA APLICACIÓN
   --------------------------------------------------------------------- */
.dc-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 20;
}

/* Logo centrado en la parte superior */
.dc-logo-row {
    grid-area: logo;
    display: flex;
    justify-content: center;
}

.dc-logo {
    display: block;
    height: 56px;
    width: auto;
    max-width: 100%;
}

/* El logo es gris: en modo oscuro se aclara para que conserve contraste */
body.dark-mode .dc-logo {
    filter: brightness(1.6);
}

.dc-topbar {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 10px var(--gutter);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "sucursal logo actions";
    align-items: center;
    gap: 8px 16px;
}

/* Pantallas angostas: logo, sucursal debajo del logo y acciones, en una sola columna */
@media (max-width: 900px) {
    .dc-topbar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "sucursal"
            "actions";
        justify-items: center;
    }
}

.dc-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
}

.dc-brand:hover {
    text-decoration: none;
}

.dc-brand-name {
    font-family: var(--font-brand);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1;
    color: var(--accent);
}

.dc-brand-sub {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.dc-topbar-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 12px;
}

.dc-sucursal {
    grid-area: sucursal;
    justify-self: start;
    min-width: 0;
}

@media (max-width: 900px) {
    .dc-sucursal {
        justify-self: center;
    }

    .dc-topbar-actions {
        justify-content: center;
    }
}

.dc-icon-btn,
a.dc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.dc-icon-btn:hover,
a.dc-icon-btn:hover {
    background: var(--surface-2);
    color: var(--accent);
    text-decoration: none;
}

.dc-icon-btn svg {
    display: block;
}

/* Botón de tema: luna en modo claro, sol en modo oscuro */
.dc-theme-toggle .dc-ico-sun { display: none; }
.dc-theme-toggle .dc-ico-moon { display: block; }
body.dark-mode .dc-theme-toggle .dc-ico-sun { display: block; }
body.dark-mode .dc-theme-toggle .dc-ico-moon { display: none; }

.dc-msg-panel {
    display: inline-flex;
}

.dc-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 4px;
    color: var(--text-muted);
    max-width: 260px;
}

.dc-user svg {
    flex: none;
}

.dc-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: 500;
}

.dc-menubar {
    border-top: 1px solid var(--border);
    background: var(--surface);
    display: flex;
    justify-content: center;
}

.dc-menubar > * {
    max-width: var(--content-max);
    width: auto;
}

/* Menú colapsado (hamburguesa): siempre a la izquierda */
@media (max-width: 1024px) {
    .dc-menubar {
        justify-content: flex-start;
    }
}

/* Pie de página siempre al fondo: el formulario ocupa al menos toda la altura de la ventana
   y el contenido (dc-main) absorbe el espacio sobrante. Las páginas de acceso (dc-auth)
   y las incrustadas (dc-embed) no llevan encabezado ni pie, por eso quedan fuera. */
body.dc-app:not(.dc-auth):not(.dc-embed) > form {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.dc-pagehead {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 22px var(--gutter) 6px;
}

.dc-title {
    margin: 0;
    font-size: var(--fs-title);
    font-weight: 600;
    letter-spacing: -.005em;
}

.dc-main {
    display: block;
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 12px var(--gutter) 32px;
}

.dc-footer {
    flex: none;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 18px var(--gutter) 28px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 4px 16px;
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: var(--fs-sm);
}

.dc-version {
    font-style: italic;
}

.dc-version { grid-column: 1; grid-row: 1; }

.dc-credit {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
}

.dc-footer > span:last-of-type,
.dc-footer > #lblCopy {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
}

@media (max-width: 800px) {
    .dc-footer { grid-template-columns: 1fr; text-align: center; }
    .dc-footer > * { grid-column: 1 !important; grid-row: auto !important; text-align: center !important; }
}


/* ---------------------------------------------------------------------
   4. PRIMITIVAS DE LAYOUT
   Reemplazan las tablas de maquetación. Todas colapsan a una columna en pantallas pequeñas.
   --------------------------------------------------------------------- */

/* Pila vertical */
.dc-stack {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    min-width: 0;
}

.dc-stack.dc-tight { gap: var(--gap-sm); }

/* Fila que envuelve (equivale a las tablas de 2-3 celdas lado a lado) */
.dc-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: flex-start;
}

.dc-row > * {
    min-width: 0;
}

.dc-row > .dc-grow { flex: 1 1 320px; }
.dc-row > .dc-half { flex: 1 1 420px; }
.dc-row > .dc-third { flex: 1 1 280px; }
.dc-row > .dc-fixed { flex: 0 0 auto; }
.dc-row > .dc-side { flex: 0 1 320px; min-width: 240px; }

.dc-toolbar.dc-center-row { justify-content: center; }

/* Clases heredadas que usan los encabezados/pies de las grillas */
.uppercase,
.uppercaseB { text-transform: uppercase; }
.totales { font-weight: 600; }
.detailRowPanel { max-width: 100%; margin-inline: auto; } /* panel del detalle de una fila de grilla: centrado (es una tabla, <center> no la centra) */

/* Página de ancho completo: el contenido (y el encabezado/pie, para que queden alineados) ocupa toda la ventana en vez
   del ancho máximo. Se activa desde la página con TemaHelper.AnchoCompleto(this). */
body.dc-fluid { --content-max: none; }

/* Odontograma: cuadrícula de piezas (tabla real) centrada, con scroll horizontal en pantallas chicas */
.dc-odonto {
    text-align: center;
}

.dc-odonto > table {
    margin: 0 auto;
}

/* Selector de caras del diente (arriba / izquierda / centro / derecha / abajo) */
.dc-faces {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    max-width: 400px;
    margin-inline: auto;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.dc-face {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 8px;
    border: 1px solid var(--border);
    margin: -1px 0 0 -1px;
}

.dc-face-top,
.dc-face-bottom {
    grid-column: 1 / -1;
    padding: 10px;
}

.dc-face-bottom {
    order: 5;
}

/* Gráficos: se ajustan al ancho disponible sin deformarse */
.dc-chart { max-width: 100%; overflow-x: auto; }
.dc-chart img,
.dc-chart canvas { max-width: 100%; height: auto; }

.dc-row.dc-center { justify-content: center; }
.dc-row.dc-end { justify-content: flex-end; }
.dc-row.dc-between { justify-content: space-between; }
.dc-row.dc-middle { align-items: center; }
.dc-row.dc-baseline { align-items: baseline; }
.dc-row.dc-stretch { align-items: stretch; }
.dc-row.dc-tight { gap: var(--gap-sm); }

/* Cuadrícula automática: tantas columnas como quepan (--col-min = ancho mínimo por columna) */
.dc-grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(min(var(--col-min, 300px), 100%), 1fr));
}

.dc-grid.dc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-grid.dc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-grid.dc-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.dc-grid > * { min-width: 0; }
.dc-span-all { grid-column: 1 / -1; }

/* Tarjeta / sección */
.dc-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--pad);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.dc-card.dc-flat {
    box-shadow: none;
}

.dc-card > .dc-card-title,
.dc-card-title {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.dc-section-title {
    margin: 0 0 8px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Anchos de contenido */
.dc-narrow { max-width: 480px; margin-inline: auto; }
.dc-medium { max-width: 820px; margin-inline: auto; }
.dc-wide { max-width: 1200px; margin-inline: auto; }
.dc-full { width: 100%; }

/* Formularios: cada .dc-field es "etiqueta | valor". Se acomodan en 1, 2 o 3 columnas. */
.dc-form {
    display: grid;
    gap: 10px 24px;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.dc-form.dc-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-form.dc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dc-field {
    display: grid;
    grid-template-columns: var(--label-w, 165px) minmax(0, 1fr);
    align-items: center;
    gap: 4px 12px;
    min-width: 0;
}

.dc-field.dc-top {
    align-items: start;
}

.dc-field.dc-top > .dc-label {
    padding-top: 7px;
}

.dc-field.dc-stacked {
    grid-template-columns: minmax(0, 1fr);
}

.dc-field.dc-span-all,
.dc-form > .dc-span-all {
    grid-column: 1 / -1;
}

/* Dos campos cortos (p. ej. checks) en una sola línea; en móvil se apilan. */
.dc-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 24px;
}

.dc-pair > .dc-field {
    grid-template-columns: max-content minmax(0, 1fr);
}

@media (max-width: 600px) {
    .dc-pair { grid-template-columns: minmax(0, 1fr); }
    .dc-pair > .dc-field { gap: 4px 12px; }
}

.dc-label {
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    overflow-wrap: anywhere;
}

.dc-value {
    min-width: 0;
    color: var(--text);
}

/* Etiqueta y valor dentro de la ficha de solo lectura (definiciones) */
.dc-kv {
    display: grid;
    grid-template-columns: minmax(90px, max-content) minmax(0, 1fr);
    gap: 6px 14px;
    margin: 0;
}

.dc-kv > dt {
    color: var(--text-muted);
    font-weight: 500;
}

.dc-kv > dd {
    margin: 0;
    color: var(--text);
    overflow-wrap: anywhere;
}

/* Fila de botones */
.dc-btnrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-top: 6px;
}

.dc-btnrow.dc-start { justify-content: flex-start; }
.dc-btnrow.dc-end { justify-content: flex-end; }
.dc-span-all.dc-btnrow { grid-column: 1 / -1; }

/* Barra de filtros / herramientas sobre una tabla */
.dc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.dc-toolbar .dc-grow { flex: 1 1 200px; }

/* Campo etiqueta + valor en una barra de filtros: en línea, con ancho propio */
.dc-toolbar > .dc-field {
    grid-template-columns: auto minmax(150px, 240px);
}

/* Barra con etiquetas arriba de cada campo (captura de líneas de detalle, filtros compactos) */
.dc-toolbar > .dc-field.dc-stacked {
    grid-template-columns: minmax(0, 1fr);
    align-self: flex-end;
    gap: 2px;
}

.dc-toolbar > .dc-w-sm { flex: 0 1 110px; }
.dc-toolbar > .dc-w-md { flex: 1 1 160px; }
.dc-toolbar > .dc-w-lg { flex: 3 1 260px; }
.dc-toolbar > .dc-w-xl { flex: 4 1 360px; }

.dc-toolbar > .dc-btnrow {
    padding-top: 0;
    align-self: flex-end;
}

/* Fila de íconos de acción (celdas de grilla, barras de acciones) */
.dc-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}

/* Los <center> heredados centran el texto; los formularios y fichas siempre se alinean a la izquierda */
.dc-form,
.dc-toolbar,
.dc-kv,
.dc-card {
    text-align: left;
}

/* Un control con íconos/acciones al lado, sin envolver (combo + botón de refrescar) */
.dc-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dc-inline > .dc-grow {
    flex: 1 1 0;
    min-width: 0;
}

/* Campos cuyo único contenido está oculto por script (ClientVisible=false) no ocupan espacio */
/* (se excluye el panel de carga "_LP" que DevExpress emite oculto antes de algunos editores) */
.dc-field:has(> .dc-value > :first-child:not([id$="_LP"])[style*="display:none"]),
.dc-field:has(> .dc-value > :first-child:not([id$="_LP"])[style*="display: none"]) {
    display: none;
}

/* Etiqueta con un ícono/acción al lado (p. ej. "Cliente: [+]") */
.dc-label.dc-label-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Contenedor con scroll horizontal para tablas anchas (no rompe la página en móvil) */
.dc-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Tablas de datos de HTML puro (no de maquetación) */
table.dc-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
}

table.dc-table th {
    padding: 9px 12px;
    text-align: left;
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-strong);
}

table.dc-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

table.dc-table tbody tr:hover td {
    background: var(--surface-2);
}

table.dc-table .dc-num,
table.dc-table td.dc-num,
table.dc-table th.dc-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.dc-table tfoot td {
    font-weight: 600;
    border-top: 1px solid var(--border-strong);
    border-bottom: 0;
}

/* Estados */
.dc-alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.dc-alert.dc-danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.dc-alert.dc-success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.dc-alert.dc-warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }

.dc-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--fs-sm);
    font-weight: 500;
    background: var(--accent-soft);
    color: var(--accent);
}


/* ---------------------------------------------------------------------
   5. COMPATIBILIDAD CON CLASES LEGACY (StyleSheet.css)
   Las páginas que aún usan <td class="col_etiqueta"> / "col_valores" obtienen el estilo nuevo.
   --------------------------------------------------------------------- */
.col_etiqueta,
.col_etiqueta2 {
    padding: 6px 12px 6px 4px;
    vertical-align: middle;
    color: var(--text-muted);
    font-weight: 500;
    text-align: left;
    background: transparent;
    border: 0;
    height: auto;
}

.col_valores {
    padding: 6px 4px;
    vertical-align: middle;
    color: var(--text);
    text-align: left;
    background: transparent;
    border: 0;
    height: auto;
}

.titulo_pagina {
    text-align: left;
    font-weight: 600;
}

.col_left { vertical-align: top; padding: 5px 5px 5px 10px; }
.col_right { vertical-align: top; padding: 5px 10px 5px 5px; }

.tablita {
    border: 1px solid var(--border-strong);
    border-collapse: collapse;
}

.tablita_celda {
    border-bottom: 1px solid var(--border);
}

.textoCuenta {
    display: block;
    text-align: center;
    font-size: 2em;
    font-weight: 700;
    color: var(--text);
}

.lblReceta {
    font-size: medium;
}

.centrado {
    margin: 0 auto;
    float: none;
}


/* ---------------------------------------------------------------------
   6. LOGIN Y PÁGINAS SIN MASTERPAGE
   --------------------------------------------------------------------- */
body.dc-auth {
    min-height: 100vh;
}

.dc-auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 20px;
}

.dc-auth-brand {
    text-align: center;
}

.dc-auth-brand .dc-logo {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto;
}

.dc-auth-card {
    width: 100%;
    max-width: 400px;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

.dc-auth-card h1 {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.dc-auth-card .dc-auth-sub {
    color: var(--text-muted);
    margin-bottom: 18px;
}

.dc-auth-card .dc-field {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 12px;
}

.dc-auth-error {
    margin-top: 12px;
    color: var(--danger);
    font-weight: 500;
    text-align: center;
}

.dc-auth-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
}

/* Página de inicio */
.dc-welcome {
    margin-top: 24px;
    text-align: center;
    padding: 36px var(--pad);
}

.dc-welcome-title {
    margin: 0 0 6px;
    font-size: 1.5rem;
    font-weight: 500;
}

.dc-welcome-name {
    color: var(--accent);
    font-weight: 600;
}

/* Contenido embebido en popup / iframe (MasterPage2) */
body.dc-embed {
    background: var(--surface);
}

.dc-embed-main {
    padding: 16px;
}


/* ---------------------------------------------------------------------
   7. UTILIDADES
   --------------------------------------------------------------------- */
.dc-muted { color: var(--text-muted); }
.dc-faint { color: var(--text-faint); }
.dc-danger-text { color: var(--danger); }
.dc-success-text { color: var(--success); }
.dc-left { text-align: left; }
.dc-right { text-align: right; }
.dc-center-text { text-align: center; }
.dc-nowrap { white-space: nowrap; }
.dc-bold { font-weight: 600; }
.dc-hidden { display: none !important; }
.dc-mt { margin-top: var(--gap); }
.dc-mb { margin-bottom: var(--gap); }
.dc-mx-auto { margin-left: auto; margin-right: auto; }
.dc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ---------------------------------------------------------------------
   8. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .dc-grid.dc-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dc-form.dc-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    :root {
        --gutter: 14px;
        --pad: 14px;
    }

    .dc-form.dc-cols-2,
    .dc-form.dc-cols-3,
    .dc-grid.dc-cols-2,
    .dc-grid.dc-cols-3,
    .dc-grid.dc-cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .dc-row > .dc-grow,
    .dc-row > .dc-half,
    .dc-row > .dc-third {
        flex-basis: 100%;
    }
}

@media (max-width: 600px) {
    :root {
        --gutter: 12px;
        --fs-title: 1.2rem;
    }

    .dc-brand-name { font-size: 1.6rem; }
    .dc-brand-sub { display: none; }

    .dc-topbar { padding-top: 8px; padding-bottom: 8px; }
    .dc-topbar-actions { width: 100%; justify-content: space-between; }
    .dc-user { max-width: 44vw; }

    .dc-field {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .dc-field.dc-top > .dc-label {
        padding-top: 0;
    }

    .dc-kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .dc-kv > dt { margin-top: 8px; font-size: var(--fs-sm); }

    .dc-btnrow > * { flex: 1 1 auto; }

    .dc-card { padding: 12px; }
    .dc-auth-card { padding: 22px 18px; }

    /* Salvaguarda para tablas legacy que aún usen etiqueta/valor en celdas */
    td.col_etiqueta,
    td.col_etiqueta2,
    td.col_valores {
        display: block;
        width: auto !important;
        padding-left: 0;
        padding-right: 0;
    }
}


/* ---------------------------------------------------------------------
   9. IMPRESIÓN
   --------------------------------------------------------------------- */
@media print {
    .dc-header,
    .dc-footer,
    .dc-theme-toggle,
    .dc-pagehead {
        display: none !important;
    }

    body,
    body.dark-mode {
        background: #fff !important;
        color: #000 !important;
    }

    .dc-main {
        max-width: none;
        padding: 0;
    }

    .dc-card {
        box-shadow: none;
        border-color: #ccc;
    }
}

/* Venta: oculta el panel de ordenación del modo adaptable del grid de detalle */
[id$="ContentPlaceHolder1_grid_DXAHeaderPanel"] { display: none !important; }