/* =====================================================================
   DERMACLINIC - Ajustes de DevExpress

   DevExpress aplica el tema nativo por servidor (Global.asax):
     modo claro  -> MaterialCompact   (clases  dxgvControl_MaterialCompact, ...)
     modo oscuro -> Office365Dark     (clases  dxgvControl_Office365Dark, ...)
   Estas reglas usan selectores por prefijo ([class*="dxgvHeader_"]) para que valgan para ambos
   temas, y toman colores, bordes y radios de las variables de dermaclinic.css. Así los controles
   quedan integrados con el resto del diseño en claro y oscuro, y con el mismo aspecto minimalista.
   Todos los selectores empiezan con "body:not(#dc)": el :not(#dc) (un id que nunca existe) sube la
   especificidad por encima de las reglas del tema de DevExpress (que usan selectores de clase
   anidados como ".dxpcLite_Office365Dark .dxpc-mainDiv") sin necesidad de usar !important.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. RESPONSIVE GENERAL: nada de DevExpress debe desbordar la pantalla
   --------------------------------------------------------------------- */
body:not(#dc) [class*="dxgvControl_"],
body:not(#dc) [class*="dxtlControl_"],
body:not(#dc) [class*="dxeTextBoxSys"],
body:not(#dc) [class*="dxeButtonEditSys"],
body:not(#dc) [class*="dxeMemoSys"],
body:not(#dc) [class*="dxeListBoxSys"],
body:not(#dc) [class*="dxpnlControl"],
body:not(#dc) [class*="dxrpControl_"],
body:not(#dc) [class*="dxtcControl_"],
body:not(#dc) [class*="dxheControl_"],
body:not(#dc) [class*="dxpcControl"] {
    max-width: 100%;
}

/* Grillas anchas: en pantallas chicas se desplazan horizontalmente dentro de su propio contenedor
   en lugar de ensanchar toda la página. El <tbody> se mantiene como tabla al 100% para que en
   pantallas grandes la grilla siga ocupando todo el ancho. */
body:not(#dc) table[class*="dxgvControl_"],
body:not(#dc) table[class*="dxtlControl_"] {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body:not(#dc) table[class*="dxgvControl_"] > tbody,
body:not(#dc) table[class*="dxtlControl_"] > tbody {
    display: table;
    width: 100%;
}

/* Hipervínculos DX (p. ej. el número de DTE): el tema oscuro los pinta naranja o verde azulado apagado, difíciles de leer,
   y distinto si ya se visitaron; se usa el color de enlace del diseño, que tiene buen contraste en claro y oscuro. */
body:not(#dc) a[class*="dxeHyperlink"],
body:not(#dc) a[class*="dxeHyperlink"]:visited {
    color: var(--link);
}

body:not(#dc) a[class*="dxeHyperlink"]:hover {
    color: var(--accent-hover);
}

/* Fila de detalle de una grilla (plantilla DetailRow): el tema le deja un relleno a la derecha que descentra el panel
   del detalle respecto a la grilla; sin él, el panel (.detailRowPanel, centrado) queda en el centro de la grilla. */
body:not(#dc) tr[class*="dxgvDetailRow_"] > td {
    padding-right: 0;
}

body:not(#dc) .dxpc-mainDiv {
    max-width: calc(100vw - 16px);
}

body:not(#dc) .dxpc-content {
    overflow: visible;
    max-width: 100%;
}

/* ---------------------------------------------------------------------
   2. EDITORES
   --------------------------------------------------------------------- */
body:not(#dc) table[class*="dxeTextBox_"],
body:not(#dc) table[class*="dxeButtonEdit_"],
body:not(#dc) table[class*="dxeMemo_"],
body:not(#dc) table[class*="dxeSpinEdit_"] {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body:not(#dc) table[class*="dxeTextBox_"]:hover,
body:not(#dc) table[class*="dxeButtonEdit_"]:hover,
body:not(#dc) table[class*="dxeMemo_"]:hover {
    border-color: var(--text-faint);
}

body:not(#dc) table[class*="dxeTextBox_"]:focus-within,
body:not(#dc) table[class*="dxeButtonEdit_"]:focus-within,
body:not(#dc) table[class*="dxeMemo_"]:focus-within {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

body:not(#dc) input[class*="dxeEditArea_"],
body:not(#dc) textarea[class*="dxeEditArea_"] {
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
}

body:not(#dc) input[class*="dxeEditArea_"]::placeholder,
body:not(#dc) [class*="dxeNullText"] {
    color: var(--text-faint);
}

/* Editores deshabilitados / solo lectura */
body:not(#dc) table[class*="dxeDisabled"],
body:not(#dc) table[class*="dxeReadOnly"] {
    background: var(--surface-2);
    opacity: .75;
}

/* Botones de los editores (flecha del combo, calendario, spin) */
body:not(#dc) td[class*="dxeButtonEditButton_"],
body:not(#dc) td[class*="dxeSpinIncButton_"],
body:not(#dc) td[class*="dxeSpinDecButton_"] {
    background: transparent;
    border-color: transparent;
}

body:not(#dc) td[class*="dxeButtonEditButton_"]:hover {
    background: var(--surface-2);
}

/* Etiqueta (Caption) del editor */
body:not(#dc) [class*="dxeCaption"],
body:not(#dc) td[class*="dxeCaptionCell"] {
    color: var(--text-muted);
    font-family: var(--font-sans);
}

/* Errores de validación */
body:not(#dc) [class*="dxeErrorCell"],
body:not(#dc) [class*="dxeErrorFrame"] {
    color: var(--danger);
}

/* Casillas y radios */
body:not(#dc) [class*="dxeCheckBox"] label,
body:not(#dc) [class*="dxeRadioButton"] label,
body:not(#dc) span[class*="dxeBase_"] {
    color: var(--text);
}

/* Listas desplegables */
body:not(#dc) [class*="dxpcDropDown_"],
body:not(#dc) [class*="dxeListBox_"] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

body:not(#dc) td[class*="dxeListBoxItem_"],
body:not(#dc) td[class*="dxeListBoxItemRow"] {
    color: var(--text);
    background: transparent;
}

body:not(#dc) td[class*="dxeListBoxItemHover"],
body:not(#dc) tr[class*="dxeListBoxItemHover"] td {
    background: var(--surface-2);
}

body:not(#dc) td[class*="dxeListBoxItemSelected"],
body:not(#dc) tr[class*="dxeListBoxItemSelected"] td {
    background: var(--accent-soft);
    color: var(--accent);
}

/* Calendario */
body:not(#dc) [class*="dxeCalendar_"] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}

body:not(#dc) td[class*="dxeCalendarSelected"] {
    background: var(--accent);
    color: var(--accent-contrast);
}

body:not(#dc) td[class*="dxeCalendarToday"] {
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* ---------------------------------------------------------------------
   3. BOTONES
   --------------------------------------------------------------------- */
body:not(#dc) div[class*="dxbButton_"] {
    background: var(--accent);
    color: var(--accent-contrast);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: none;
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color .15s ease, border-color .15s ease;
}

body:not(#dc) div[class*="dxbButton_"] * {
    color: inherit;
}

body:not(#dc) div[class*="dxbButton_"]:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

body:not(#dc) div[class*="dxbButton_"][class*="dxbDisabled"] {
    background: var(--surface-3);
    border-color: var(--surface-3);
    color: var(--text-faint);
    opacity: 1;
}

/* Botones "link" o de imagen dentro de las celdas del grid: sin fondo */
body:not(#dc) [class*="dxgvDataRow_"] div[class*="dxbButton_"],
body:not(#dc) [class*="dxgvDataRow_"] div[class*="dxbButtonSys"] {
    background: transparent;
    border-color: transparent;
    color: var(--accent);
    padding: 0;
}

/* ---------------------------------------------------------------------
   4. GRID (ASPxGridView)
   --------------------------------------------------------------------- */
body:not(#dc) table[class*="dxgvControl_"] {
    background: transparent;
    color: var(--text);
    border: 0;
    font-family: var(--font-sans);
}

body:not(#dc) table[class*="dxgvTable_"] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-collapse: separate;
    border-spacing: 0;
}

body:not(#dc) td[class*="dxgvHeader_"],
body:not(#dc) th[class*="dxgvHeader_"],
body:not(#dc) [class*="dxgvHeaderPanel"] {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

body:not(#dc) tr[class*="dxgvDataRow_"] > td,
body:not(#dc) td[class*="dxgvCommandColumn_"] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

body:not(#dc) tr[class*="dxgvDataRow_"]:hover > td {
    background: var(--surface-2);
}

body:not(#dc) tr[class*="dxgvFocusedRow_"] > td,
body:not(#dc) tr[class*="dxgvSelectedRow_"] > td {
    background: var(--accent-soft);
    color: var(--text);
}

body:not(#dc) tr[class*="dxgvFilterRow_"] > td {
    background: var(--surface);
    border-color: var(--border);
}

body:not(#dc) tr[class*="dxgvGroupRow_"] > td {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
    font-weight: 600;
}

body:not(#dc) td[class*="dxgvFooter_"],
body:not(#dc) tr[class*="dxgvFooter_"] > td {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
    font-weight: 600;
}

body:not(#dc) tr[class*="dxgvEmptyDataRow_"] > td {
    background: var(--surface);
    color: var(--text-muted);
}

body:not(#dc) [class*="dxgvGroupPanel_"] {
    background: transparent;
    color: var(--text-faint);
    font-size: var(--fs-sm);
}

body:not(#dc) [class*="dxgvPagerBottomPanel_"],
body:not(#dc) [class*="dxgvPagerTopPanel_"] {
    background: transparent;
    color: var(--text-muted);
}

/* Formulario de edición del grid (EditForm / popup) */
body:not(#dc) [class*="dxgvEditFormTable_"],
body:not(#dc) td[class*="dxgvEditForm_"] {
    background: var(--surface);
    color: var(--text);
}

/* ---------------------------------------------------------------------
   5. PAGINADOR
   --------------------------------------------------------------------- */
body:not(#dc) [class*="dxpControl_"],
body:not(#dc) .dxp-summary,
body:not(#dc) .dxp-lead {
    color: var(--text-muted);
    background: transparent;
}

body:not(#dc) .dxp-num,
body:not(#dc) .dxp-button {
    color: var(--text);
    border-radius: var(--radius-sm);
}

body:not(#dc) .dxp-current {
    background: var(--accent);
    color: var(--accent-contrast);
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   6. POPUPS
   --------------------------------------------------------------------- */
body:not(#dc) .dxpc-mainDiv {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    /* visible: la lista desplegable de un combo dentro del popup no debe recortarse en el borde del popup */
    overflow: visible;
}

body:not(#dc) .dxpc-header {
    background: var(--surface);
    color: var(--text);
    border: 0;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

body:not(#dc) .dxpc-headerContent,
body:not(#dc) .dxpc-headerText {
    color: var(--text);
}

body:not(#dc) .dxpc-content {
    background: var(--surface);
    color: var(--text);
}

body:not(#dc) .dxpc-footer {
    background: var(--surface-2);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

body:not(#dc) [class*="dxpcModalBackground"],
body:not(#dc) .dxpc-modalBackground {
    background: var(--overlay);
    opacity: 1;
}

/* Panel de carga */
body:not(#dc) [class*="dxlpLoadingPanel_"],
body:not(#dc) [class*="dxlpLoadingPanelWithContent_"] {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}

body:not(#dc) [class*="dxlpLoadingDiv_"],
body:not(#dc) [class*="dxlp-loadingDiv"] {
    background: var(--overlay);
}

/* ---------------------------------------------------------------------
   7. MENÚ PRINCIPAL (ASPxMenu dentro de .dc-menubar)
   --------------------------------------------------------------------- */
body:not(#dc) .dc-menubar .dxm-main {
    background: transparent;
    border: 0;
    box-shadow: none;
    font-family: var(--font-sans);
}

body:not(#dc) .dc-menubar .dxm-main ul.dx {
    margin: 0;
}

body:not(#dc) .dc-menubar .dxm-item {
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
}

body:not(#dc) .dc-menubar .dxm-content,
body:not(#dc) .dc-menubar .dxm-content a {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .03em;
}

body:not(#dc) .dc-menubar .dxm-item.dxm-hovered,
body:not(#dc) .dc-menubar .dxm-item.dxm-selected,
body:not(#dc) .dc-menubar .dxm-item:hover {
    background: var(--surface-2);
}

body:not(#dc) .dc-menubar .dxm-item.dxm-hovered .dxm-content,
body:not(#dc) .dc-menubar .dxm-item.dxm-selected .dxm-content {
    color: var(--accent);
}

body:not(#dc) .dc-menubar li.dxm-separator {
    display: none !important;
}

/* Submenús desplegables (se renderizan fuera de .dc-menubar) */
body:not(#dc) .dxm-popup {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

body:not(#dc) .dxm-popup .dxm-main {
    background: transparent;
}

body:not(#dc) .dxm-popup .dxm-item {
    background: transparent;
}

body:not(#dc) .dxm-popup .dxm-content,
body:not(#dc) .dxm-popup .dxm-content a {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
}

body:not(#dc) .dxm-popup .dxm-item.dxm-hovered,
body:not(#dc) .dxm-popup .dxm-item:hover {
    background: var(--surface-2);
}

body:not(#dc) .dxm-popup .dxm-item.dxm-hovered .dxm-content {
    color: var(--accent);
}

/* ---------------------------------------------------------------------
   8. ELEMENTOS DEL ENCABEZADO (combo de sucursal, etiqueta de usuario, panel de mensajes)
   --------------------------------------------------------------------- */
.dc-sucursal table[class*="dxeButtonEdit_"] {
    min-width: 160px;
}

.dc-sucursal [class*="dxeCaption"] {
    padding-right: 6px;
}

.dc-msg-panel [class*="dxbButton_"] {
    background: transparent;
    border: 0;
}

/* ---------------------------------------------------------------------
   9. OTROS CONTENEDORES
   --------------------------------------------------------------------- */

/* ASPxDataView (fichas de paciente / cliente / cuadro clínico) */
body:not(#dc) [class*="dxdvControl_"],
body:not(#dc) [class*="dxdvContent_"] {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
}

body:not(#dc) [class*="dxdvItem_"] {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

body:not(#dc) [class*="dxdvEmptyData_"] {
    background: transparent;
    color: var(--text-muted);
}

body:not(#dc) [class*="dxrpControl_"],
body:not(#dc) [class*="dxpnlControl"] {
    background: transparent;
    color: var(--text);
    border-color: var(--border);
}

body:not(#dc) [class*="dxtcControl_"] {
    background: transparent;
    color: var(--text);
}

body:not(#dc) [class*="dxtc-tab"],
body:not(#dc) [class*="dxtc-link"] {
    color: var(--text-muted);
}

body:not(#dc) [class*="dxtc-activeTab"],
body:not(#dc) [class*="dxtc-activeTab"] * {
    color: var(--accent);
}

body:not(#dc) [class*="dxheControl_"] {
    background: var(--surface);
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
}

@media (max-width: 600px) {
    .dc-sucursal {
        width: 100%;
        max-width: 360px;
    }

    .dc-sucursal table[class*="dxeButtonEdit_"] {
        min-width: 0;
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   Scheduler (AgendarCita.aspx) en modo oscuro.
   Las citas usan fondos claros (Azure, LightBlue, Red) definidos en el servidor;
   el tema oscuro de DevExpress les pone texto claro y quedan ilegibles.
   --------------------------------------------------------------------- */
body.dark-mode:not(#dc) .dxsc-apt-content-layer,
body.dark-mode:not(#dc) .dxsc-apt-content-layer span,
body.dark-mode:not(#dc) .dxsc-apt-content-layer div,
body.dark-mode:not(#dc) .dxsc-apt-time-container,
body.dark-mode:not(#dc) .dxsc-apt-time-container span,
body.dark-mode:not(#dc) .dxsc-apt-description-container span {
    color: #10272c !important;
}

body.dark-mode:not(#dc) .dxsc-apt-status-container {
    background: var(--surface-3);
}

body.dark-mode:not(#dc) .dxsc-apt-gradient {
    display: none;
}

/* Contenedor, cabeceras y celdas */
body.dark-mode:not(#dc) [class*="dxscControl"] {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

body.dark-mode:not(#dc) [class*="dxscControl"] td[class*="dxsc"],
body.dark-mode:not(#dc) [class*="dxscControl"] .dxsc-time-ruler,
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-hour"] {
    border-color: var(--border);
}

body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-time-cell"],
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-cell"] {
    background: var(--surface);
}

body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-alternate"],
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-time-cell"][class*="Alternate"] {
    background: var(--surface-2);
}

body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-time-ruler"],
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-time-ruler"] * {
    background: var(--surface-2);
    color: var(--text-muted);
}

body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-date-header"],
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-header"] {
    background: var(--accent-soft);
    color: var(--text);
}

/* Barra de vistas (Day, Work Week, ...) y navegación */
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-view-selector"],
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-toolbar"],
body.dark-mode:not(#dc) [class*="dxscControl"] [class*="dxsc-navigator"] {
    background: var(--surface-2);
    color: var(--text);
}