/* ==========================================================================
MDA UI
SISTEMA VISUAL BASE REUTILIZABLE
==========================================================================
OBJETIVO
--------------------------------------------------------------------------
Centralizar el diseño visual de formularios, filtros, encabezados,
controles y acciones en un único sistema reutilizable.
PRINCIPIO DE CONFIGURACIÓN
--------------------------------------------------------------------------
1. La paleta global de colores se define en :root para que también esté
disponible en modales o componentes renderizados fuera de .mda-ui.
2. Las variables de estructura y componentes se definen en .mda-ui.
3. Los componentes consumen estas variables mediante var(--mda-...).
4. Para cambiar el estilo general, se modifican variables globales y NO
las reglas internas de cada componente.
5. Los IDs pertenecen a la lógica funcional del formulario.
Las clases mda-* pertenecen al diseño y comportamiento reutilizable.
COMPONENTES INCLUIDOS
--------------------------------------------------------------------------
- Contenedor raíz
- Header reutilizable de reportes
- Panel y menú desplegable de exportación
- Encabezado normal de página
- Tarjeta general de filtros
- Encabezado interno de secciones
- Grid de filtros
- Campos y labels
- Iconos semánticos
- Inputs y selects
- Select2
- Chosen
- Opciones / checkboxes básicos
- Sección reutilizable de opciones
- Botones
- Acciones del formulario
- Elementos ocultos
- Responsive
NOTA SOBRE RESPONSIVE
--------------------------------------------------------------------------
Los valores usados en @media se mantienen escritos directamente porque
las variables CSS no pueden utilizarse de forma estándar en la condición
de una media query.
========================================================================== */
/* ==========================================================================
1. VARIABLES GLOBALES
========================================================================== */
/* ==========================================================================
PALETA GLOBAL MDA
--------------------------------------------------------------------------
Los colores se declaran en :root para que estén disponibles tanto dentro
de .mda-ui como en componentes renderizados fuera de ese contenedor,
por ejemplo modales creados dinámicamente por jQuery.
IMPORTANTE:
- Aquí se centralizan únicamente colores y transparencias.
- Las variables de estructura, tamaños y componentes permanecen en .mda-ui.
- No modifica la lógica, IDs, eventos ni comportamiento de los controles.
========================================================================== */
:root {
--mda-color-d5e4ef: #d5e4ef;
--mda-color-218fdb: #218fdb;
--mda-color-b8ddf4: #b8ddf4;
--mda-color-dcefff: #dcefff;
--mda-color-edf7ff: #edf7ff;
--mda-color-7655e9: #7655e9;
--mda-color-d2c7f7: #d2c7f7;
--mda-color-e6e0ff: #e6e0ff;
--mda-color-f3f0ff: #f3f0ff;
--mda-color-18a4ce: #18a4ce;
--mda-color-b5e4ef: #b5e4ef;
--mda-color-d6f3fa: #d6f3fa;
--mda-color-ebfafe: #ebfafe;
--mda-color-ffffff: #ffffff;
--mda-color-173752: #173752;
--mda-color-57748c: #57748c;
--mda-color-243d55: #243d55;
--mda-color-6f879b: #6f879b;
--mda-color-c7d9e8: #c7d9e8;
--mda-color-eeeaff: #eeeaff;
--mda-color-e3f6fb: #e3f6fb;
--mda-color-c9ddea: #c9ddea;
--mda-color-cddfeb: #cddfeb;
--mda-color-e4f3ff: #e4f3ff;
--mda-color-edf1ff: #edf1ff;
--mda-color-eef9fd: #eef9fd;
--mda-color-42b3ef: #42b3ef;
--mda-color-277fd5: #277fd5;
--mda-color-20394f: #20394f;
--mda-color-637e95: #637e95;
--mda-color-d5e4ee: #d5e4ee;
--mda-color-fcfeff: #fcfeff;
--mda-color-f7fbfe: #f7fbfe;
--mda-color-178fd0: #178fd0;
--mda-color-dff2fc: #dff2fc;
--mda-color-284158: #284158;
--mda-color-71879a: #71879a;
--mda-color-d4e2ec: #d4e2ec;
--mda-color-a5cde5: #a5cde5;
--mda-color-263d53: #263d53;
--mda-color-cadbe6: #cadbe6;
--mda-color-178fd4: #178fd4;
--mda-color-e1f2fd: #e1f2fd;
--mda-color-2196dc: #2196dc;
--mda-color-f0f9ff: #f0f9ff;
--mda-color-25a66d: #25a66d;
--mda-color-e5f8ef: #e5f8ef;
--mda-color-f1fbf6: #f1fbf6;
--mda-color-7355e6: #7355e6;
--mda-color-ece8ff: #ece8ff;
--mda-color-f5f3ff: #f5f3ff;
--mda-color-169fb9: #169fb9;
--mda-color-e1f7fa: #e1f7fa;
--mda-color-f0fbfd: #f0fbfd;
--mda-color-e8d198: #e8d198;
--mda-color-fff9e9: #fff9e9;
--mda-color-fff2cf: #fff2cf;
--mda-color-644f27: #644f27;
--mda-color-d4a137: #d4a137;
--mda-color-cadfea: #cadfea;
--mda-color-d7e6ef: #d7e6ef;
--mda-color-fbfdff: #fbfdff;
--mda-color-f3f9fd: #f3f9fd;
--mda-color-168fd3: #168fd3;
--mda-color-e7f5fd: #e7f5fd;
--mda-color-203b55: #203b55;
--mda-color-6a8298: #6a8298;
--mda-color-eef3f6: #eef3f6;
--mda-color-91a7b5: #91a7b5;
--mda-color-e1ebf1: #e1ebf1;
--mda-color-52758f: #52758f;
--mda-color-c8dce8: #c8dce8;
--mda-color-304b63: #304b63;
--mda-color-edf1f4: #edf1f4;
--mda-color-dde4e9: #dde4e9;
--mda-color-e0ebf2: #e0ebf2;
--mda-color-8fcbea: #8fcbea;
--mda-color-f8fcff: #f8fcff;
--mda-color-08486d: #08486d;
--mda-color-299bd5: #299bd5;
--mda-color-eef9ff: #eef9ff;
--mda-color-d6e5ef: #d6e5ef;
--mda-color-355069: #355069;
--mda-color-cce5f5: #cce5f5;
--mda-color-f2faff: #f2faff;
--mda-color-eaf6fd: #eaf6fd;
--mda-color-168fd0: #168fd0;
--mda-color-e1f3fd: #e1f3fd;
--mda-color-c4e8dc: #c4e8dc;
--mda-color-f3fcf8: #f3fcf8;
--mda-color-ebf9f4: #ebf9f4;
--mda-color-15976b: #15976b;
--mda-color-def5eb: #def5eb;
--mda-color-148d64: #148d64;
--mda-color-efdbad: #efdbad;
--mda-color-fffaf0: #fffaf0;
--mda-color-fff4dc: #fff4dc;
--mda-color-d28b16: #d28b16;
--mda-color-fff0cb: #fff0cb;
--mda-color-ce8108: #ce8108;
--mda-color-bcdff4: #bcdff4;
--mda-color-eef8ff: #eef8ff;
--mda-color-e4f4fe: #e4f4fe;
--mda-color-137fc4: #137fc4;
--mda-color-dceffc: #dceffc;
--mda-color-0879c0: #0879c0;
--mda-color-c8dbe7: #c8dbe7;
--mda-color-30485e: #30485e;
--mda-color-2798d5: #2798d5;
--mda-color-e8c36d: #e8c36d;
--mda-color-fffdf7: #fffdf7;
--mda-color-d7e3eb: #d7e3eb;
--mda-color-eef5f9: #eef5f9;
--mda-color-43637b: #43637b;
--mda-color-000000: #000000;
--mda-color-edf3f6: #edf3f6;
--mda-color-d7e2e8: #d7e2e8;
--mda-color-e4ebef: #e4ebef;
--mda-color-82929d: #82929d;
--mda-color-8998a3: #8998a3;
--mda-color-dce4e9: #dce4e9;
--mda-color-e3e9ed: #e3e9ed;
--mda-color-929fa8: #929fa8;
--mda-color-edf7fc: #edf7fc;
--mda-color-e5f1f8: #e5f1f8;
--mda-color-cfe0ea: #cfe0ea;
--mda-color-176394: #176394;
--mda-color-1597d5: #1597d5;
--mda-color-f9fcfe: #f9fcfe;
--mda-color-eaf5fb: #eaf5fb;
--mda-color-138dce: #138dce;
--mda-color-f04455: #f04455;
--mda-color-fff8f8: #fff8f8;
--mda-color-9dd1eb: #9dd1eb;
--mda-color-128fd0: #128fd0;
--mda-color-f4fbff: #f4fbff;
--mda-color-91afbf: #91afbf;
--mda-color-cbdfea: #cbdfea;
--mda-color-d5e5ef: #d5e5ef;
--mda-color-138fd3: #138fd3;
--mda-color-6a8398: #6a8398;
--mda-color-e6f2f8: #e6f2f8;
--mda-color-176495: #176495;
--mda-color-e3edf3: #e3edf3;
--mda-color-c9dce8: #c9dce8;
--mda-color-30495f: #30495f;
--mda-color-708492: #708492;
--mda-color-2196d4: #2196d4;
--mda-color-c7deec: #c7deec;
--mda-color-f6fbfe: #f6fbfe;
--mda-color-276d99: #276d99;
--mda-color-e15361: #e15361;
--mda-color-70b9df: #70b9df;
--mda-color-ffffff00: #ffffff00;
--mda-color-fff7f8: #fff7f8;
--mda-color-ffedef: #ffedef;
--mda-color-cfe0ee: #cfe0ee;
--mda-color-f4faff: #f4faff;
--mda-color-ddebfb: #ddebfb;
--mda-color-1778d3: #1778d3;
--mda-color-173766: #173766;
--mda-color-6f8498: #6f8498;
--mda-color-d3dfea: #d3dfea;
--mda-color-354b63: #354b63;
--mda-color-eef3f8: #eef3f8;
--mda-color-546a80: #546a80;
--mda-color-0c7ef2: #0c7ef2;
--mda-color-056fe2: #056fe2;
--mda-color-0b75e0: #0b75e0;
--mda-color-055fc2: #055fc2;
--mda-color-163a68: #163a68;
--mda-color-60758e: #60758e;
--mda-color-d9e4f3: #d9e4f3;
--mda-color-11245d: #11245d;
--mda-color-7485a8: #7485a8;
--mda-color-fbfcff: #fbfcff;
--mda-color-f7faff: #f7faff;
--mda-color-dbe4f1: #dbe4f1;
--mda-color-7688a9: #7688a9;
--mda-color-10245e: #10245e;
--mda-color-edf5ff: #edf5ff;
--mda-color-e5efff: #e5efff;
--mda-color-147ff5: #147ff5;
--mda-color-65799e: #65799e;
--mda-color-1769e8: #1769e8;
--mda-color-d9e4f2: #d9e4f2;
--mda-color-f5f8ff: #f5f8ff;
--mda-color-e3e9f3: #e3e9f3;
--mda-color-3155da: #3155da;
--mda-color-edf0ff: #edf0ff;
--mda-color-dde4ff: #dde4ff;
--mda-color-163a96: #163a96;
--mda-color-8796b2: #8796b2;
--mda-color-2f63ff: #2f63ff;
--mda-color-eef4ff: #eef4ff;
--mda-color-304261: #304261;
--mda-color-a4afc1: #a4afc1;
--mda-color-315efb: #315efb;
--mda-color-293c5e: #293c5e;
--mda-color-cbd8eb: #cbd8eb;
--mda-color-9ba9bd: #9ba9bd;
--mda-color-aabbd8: #aabbd8;
--mda-color-3974f6: #3974f6;
--mda-color-e0e7f1: #e0e7f1;
--mda-color-20365f: #20365f;
--mda-color-bdcce2: #bdcce2;
--mda-color-233de8: #233de8;
--mda-color-0876f5: #0876f5;
--mda-color-667895: #667895;
--mda-color-f8fbff: #f8fbff;
--mda-color-cbd9ea: #cbd9ea;
--mda-color-edf3ff: #edf3ff;
--mda-color-f0f3f8: #f0f3f8;
--mda-color-aebbd0: #aebbd0;
--mda-color-d9e8f8: #d9e8f8;
--mda-color-d92d20: #d92d20;
--mda-color-fff1f0: #fff1f0;
--mda-color-f97066: #f97066;
--mda-color-fee4e2: #fee4e2;
--mda-color-067647: #067647;
--mda-color-ecfdf3: #ecfdf3;
--mda-color-75d1a3: #75d1a3;
/* Colores con transparencia utilizados en sombras y gradientes. */
--mda-color-rgba-36-55-70-0_07: rgba(36, 55, 70, 0.07);
--mda-color-rgba-31-66-94-0_07: rgba(31, 66, 94, 0.07);
--mda-color-rgba-32-62-90-0_13: rgba(32, 62, 90, 0.13);
--mda-color-rgba-255-255-255-0_98: rgba(255, 255, 255, 0.98);
--mda-color-rgba-247-251-254-0_94: rgba(247, 251, 254, 0.94);
--mda-color-rgba-35-58-78-0_08: rgba(35, 58, 78, 0.08);
--mda-color-rgba-39-127-213-0_18: rgba(39, 127, 213, 0.18);
--mda-color-rgba-33-66-92-0_10: rgba(33, 66, 92, 0.10);
--mda-color-rgba-36-70-100-0_12: rgba(36, 70, 100, 0.12);
--mda-color-rgba-34-59-78-0_07: rgba(34, 59, 78, 0.07);
--mda-color-rgba-41-155-213-0_10: rgba(41, 155, 213, 0.10);
--mda-color-rgba-35-62-83-0_03: rgba(35, 62, 83, 0.03);
--mda-color-rgba-39-152-213-0_10: rgba(39, 152, 213, 0.10);
--mda-color-rgba-35-58-78-0_07: rgba(35, 58, 78, 0.07);
--mda-color-rgba-6-116-232-0_20: rgba(6, 116, 232, 0.20);
--mda-color-rgba-31-66-94-0_09: rgba(31, 66, 94, 0.09);
--mda-color-rgba-25-40-78-0_28: rgba(25, 40, 78, 0.28);
--mda-color-rgba-37-56-91-0_05: rgba(37, 56, 91, 0.05);
--mda-color-rgba-57-116-246-0_10: rgba(57, 116, 246, 0.10);
--mda-color-rgba-37-54-85-0_04: rgba(37, 54, 85, 0.04);
--mda-color-rgba-34-78-218-0_24: rgba(34, 78, 218, 0.24);
--mda-color-rgba-255-255-255-0_85: rgba(255, 255, 255, 0.85);
--mda-color-transparent: transparent;
/* ======================================================================
BOTONES MDA - VARIABLES GLOBALES
----------------------------------------------------------------------
Estas variables deben estar disponibles fuera de .mda-ui porque
algunos componentes, como los modales jQuery, se renderizan
directamente en el body.
====================================================================== */
--mda-primary: #2598cf;
--mda-primary-hover: #1686bd;
--mda-primary-active: #1174a5;
--mda-primary-soft: #eaf7fd;
--mda-success: #24ad6b;
--mda-warning: #ed9418;
--mda-danger: #d9534f;
--mda-text-primary: #243746;
--mda-text-secondary: #526b7d;
--mda-text-inverse: #ffffff;
--mda-surface: #ffffff;
--mda-border-width: 1px;
--mda-border: #bcd7e7;
--mda-button-height: 32px;
--mda-button-padding-x: 13px;
--mda-button-font-size: 13px;
--mda-button-font-weight: 600;
--mda-button-radius: 6px;
--mda-button-gap: 6px;
--mda-transition-normal: 0.18s ease;
}
.mda-ui {
/* ======================================================================
1.1 IDENTIDAD PRINCIPAL
====================================================================== */
--mda-primary: #2598cf;
--mda-primary-hover: #1686bd;
--mda-primary-active: #1174a5;
--mda-primary-soft: #eaf7fd;
--mda-primary-border: #b9dcec;
/* ======================================================================
1.2 ESTADOS SEMÁNTICOS
====================================================================== */
--mda-success: #24ad6b;
--mda-success-soft: #eaf8f1;
--mda-warning: #ed9418;
--mda-warning-soft: #fff3df;
--mda-danger: #d9534f;
--mda-danger-soft: #fceceb;
--mda-info: #637ed2;
--mda-info-soft: #eef1fc;
/* ======================================================================
1.3 TEXTO
====================================================================== */
--mda-text-primary: #243746;
--mda-text-secondary: #526b7d;
--mda-text-muted: #8195a5;
--mda-text-inverse: #ffffff;
/* ======================================================================
1.4 SUPERFICIES
====================================================================== */
--mda-surface: #ffffff;
--mda-surface-soft: #f7fbfd;
--mda-surface-hover: #f0f8fc;
--mda-surface-disabled: #eef4f7;
/* ======================================================================
1.5 BORDES
====================================================================== */
--mda-border-width: 1px;
--mda-border: #bcd7e7;
--mda-border-soft: #dce9f1;
--mda-border-hover: #77b8d8;
--mda-border-focus: var(--mda-primary);
/* ======================================================================
1.6 RADIOS GENERALES
====================================================================== */
--mda-radius-sm: 5px;
--mda-radius-md: 7px;
--mda-radius-lg: 10px;
--mda-radius-pill: 999px;
/* ======================================================================
1.7 SOMBRAS GENERALES
====================================================================== */
--mda-shadow-sm:
0 1px 3px rgba(32, 60, 80, 0.05);
--mda-shadow-focus:
0 0 0 2px rgba(37, 152, 207, 0.10);
/* ======================================================================
1.8 TRANSICIONES GENERALES
====================================================================== */
--mda-transition-fast: 0.15s ease;
--mda-transition-normal: 0.18s ease;
/* ======================================================================
1.9 HEADER DE REPORTES
====================================================================== */
/* Alineación exterior */
--mda-report-header-margin-x: var(--mda-filter-card-margin-x);
--mda-report-header-margin-bottom: 16px;
/* Fondo y borde */
--mda-report-header-background-start: var(--mda-surface);
--mda-report-header-background-end: var(--mda-surface-soft);
--mda-report-header-border-color: var(--mda-border);
--mda-report-header-radius: var(--mda-radius-lg);
/* Sombra */
--mda-report-header-shadow:
0 4px 12px rgba(36, 55, 70, 0.07);
/* Bloque principal */
--mda-report-header-main-padding-x: 20px;
--mda-report-header-main-padding-y: 18px;
--mda-report-header-gap: 18px;
/* Icono principal */
--mda-report-icon-size: 76px;
--mda-report-icon-font-size: 32px;
--mda-report-icon-radius: 50%;
--mda-report-icon-shadow:
0 8px 20px rgba(37, 152, 207, 0.22);
/* Categoría superior */
--mda-report-kicker-gap: 7px;
--mda-report-kicker-margin-bottom: 5px;
--mda-report-kicker-font-size: 11px;
--mda-report-kicker-font-weight: 800;
--mda-report-kicker-letter-spacing: 0.08em;
--mda-report-kicker-line-width: 28px;
--mda-report-kicker-line-height: 3px;
/* Título */
--mda-report-title-size: 24px;
--mda-report-title-weight: 800;
--mda-report-title-line-height: 1.15;
/* Descripción */
--mda-report-description-size: 13px;
--mda-report-description-max-width: 720px;
--mda-report-description-margin-top: 6px;
--mda-report-description-line-height: 1.45;
/* Metadatos */
--mda-report-meta-row-gap: 10px;
--mda-report-meta-row-margin-top: 10px;
--mda-report-meta-gap: 5px;
--mda-report-meta-size: 13px;
/* Badges */
--mda-report-badge-height: 26px;
--mda-report-badge-padding-x: 10px;
--mda-report-badge-gap: 5px;
--mda-report-badge-radius: var(--mda-radius-pill);
--mda-report-badge-font-size: 13px;
--mda-report-badge-font-weight: 700;
/* Responsive del header */
--mda-report-mobile-icon-size: 58px;
--mda-report-mobile-icon-font-size: 24px;
--mda-report-mobile-title-size: 19px;
/* ======================================================================
1.10 PANEL DE EXPORTACIÓN DEL HEADER
====================================================================== */
--mda-report-export-panel-min-width: 300px;
--mda-report-export-panel-padding-x: 18px;
--mda-report-export-panel-padding-y: 16px;
--mda-report-export-panel-background:
rgba(255, 255, 255, 0.55);
--mda-report-export-panel-title-size: 13px;
--mda-report-export-panel-title-weight: 800;
--mda-report-export-panel-description-size: 13px;
--mda-report-export-panel-description-margin-top: 3px;
--mda-report-export-panel-description-margin-bottom: 10px;
/* ======================================================================
1.11 EXPORTACIÓN LEGACY
----------------------------------------------------------------------
Conserva compatibilidad con formularios que todavía utilizan:
.mda-report-export-actions
.mda-report-export
.mda-report-export-icon
====================================================================== */
--mda-report-export-actions-gap: 8px;
--mda-report-export-height: 42px;
--mda-report-export-padding-x: 12px;
--mda-report-export-gap: 6px;
--mda-report-export-font-size: 11px;
--mda-report-export-font-weight: 700;
--mda-report-export-icon-size: 26px;
--mda-report-export-icon-font-size: 14px;
/* ======================================================================
1.12 MENÚ DESPLEGABLE DE EXPORTACIÓN
====================================================================== */
/* Botón principal */
--mda-export-trigger-min-width: 150px;
--mda-export-trigger-height: 42px;
--mda-export-trigger-padding-x: 14px;
--mda-export-trigger-gap: 8px;
--mda-export-trigger-font-size: 12px;
--mda-export-trigger-font-weight: 700;
--mda-export-trigger-icon-size: 15px;
--mda-export-trigger-focus-shadow:
0 0 0 3px rgba(37, 152, 207, 0.12);
/* Dropdown */
--mda-export-dropdown-width: 320px;
--mda-export-dropdown-offset-y: 8px;
--mda-export-dropdown-padding: 8px;
--mda-export-dropdown-shadow:
0 12px 28px rgba(36, 55, 70, 0.16);
/* Opciones */
--mda-export-option-gap: 10px;
--mda-export-option-padding: 10px;
--mda-export-option-icon-size: 37px;
--mda-export-option-icon-font-size: 16px;
--mda-export-option-title-size: 13px;
--mda-export-option-title-weight: 700;
--mda-export-option-title-line-height: 1.2;
--mda-export-option-help-size: 13px;
--mda-export-option-help-margin-top: 2px;
--mda-export-option-help-line-height: 1.25;
/* ======================================================================
1.13 ENCABEZADO DE PÁGINAS NORMALES
====================================================================== */
--mda-page-header-padding-x: 12px;
--mda-page-header-padding-y: 8px;
--mda-page-title-size: 19px;
--mda-page-title-weight: 700;
--mda-page-title-line-height: 1.2;
--mda-page-description-size: 13px;
--mda-page-description-line-height: 1.3;
--mda-page-header-gap: 4px;
--mda-page-header-margin-bottom: 10px;
/* ======================================================================
1.14 TARJETA GENERAL DE FILTROS
====================================================================== */
--mda-filter-card-margin-x: 22px;
--mda-filter-padding-x: 12px;
--mda-filter-padding-y: 10px;
--mda-filter-radius: 10px;
--mda-filter-border-width: 1px;
--mda-filter-background: var(--mda-surface-soft);
--mda-filter-border-color: var(--mda-border);
/* ======================================================================
1.15 ENCABEZADO INTERNO DE SECCIÓN / FILTROS
====================================================================== */
--mda-section-header-margin-bottom: 9px;
--mda-section-header-padding-bottom: 5px;
--mda-section-header-border-color: var(--mda-primary);
--mda-section-heading-gap: 6px;
--mda-section-title-size: 13px;
--mda-section-title-weight: 700;
--mda-section-title-line-height: 1.2;
--mda-section-description-size: 13px;
--mda-section-description-margin-top: 2px;
/* ======================================================================
1.16 GRID DE FILTROS
====================================================================== */
--mda-filter-column-gap: 16px;
--mda-filter-row-gap: 25px;
/* ======================================================================
1.17 CAMPO GENERAL
====================================================================== */
--mda-field-width: 100%;
/* ======================================================================
1.18 LABEL DEL CAMPO
====================================================================== */
--mda-label-gap: 8px;
--mda-label-control-gap: 6px;
--mda-label-min-height: 30px;
--mda-field-title-size: 14px;
--mda-field-title-weight: 700;
--mda-field-title-line-height: 1.1;
--mda-field-help-size: 14px;
--mda-field-help-margin-top: 2px;
--mda-field-help-line-height: 1.15;
/* ======================================================================
1.19 ICONOS DE CAMPOS
====================================================================== */
--mda-field-icon-size: 35px;
--mda-field-icon-font-size: 30px;
--mda-field-icon-radius: 6px;
/* ======================================================================
1.20 CONTROLES
====================================================================== */
--mda-control-width: 100%;
--mda-control-height: 40px;
--mda-control-radius: 5px;
--mda-control-font-size: 13px;
--mda-control-padding-x: 10px;
--mda-control-focus-shadow:
0 0 0 2px rgba(37, 152, 207, 0.10);
--mda-control-disabled-opacity: 0.80;
/* ======================================================================
1.21 SELECT2
====================================================================== */
--mda-select2-rendered-padding-right: 20px;
--mda-select2-arrow-right: 4px;
/* ======================================================================
1.22 CHOSEN
====================================================================== */
--mda-chosen-multi-padding-y: 2px;
--mda-chosen-multi-padding-x: 6px;
/* ======================================================================
1.23 OPCIONES / CHECKBOXES BÁSICOS - COMPATIBILIDAD
====================================================================== */
--mda-filter-options-gap: 12px;
--mda-filter-options-margin-top: 9px;
--mda-option-basic-gap: 6px;
--mda-option-basic-title-size: 10px;
--mda-option-basic-title-weight: 600;
--mda-option-basic-help-size: 8px;
--mda-option-basic-help-margin-top: 1px;
/* ======================================================================
1.24 SECCIÓN REUTILIZABLE DE OPCIONES
====================================================================== */
/* Contenedor */
--mda-option-section-margin-top: 16px;
--mda-option-section-padding-x: 12px;
--mda-option-section-padding-y: 10px;
--mda-option-section-radius: 9px;
--mda-option-section-background: #f8fbfe;
--mda-option-section-border: #c8d9e8;
--mda-option-section-shadow:
0 1px 3px rgba(36, 55, 70, 0.05);
/* Header */
--mda-option-section-header-margin-bottom: 10px;
--mda-option-section-header-padding-bottom: 8px;
--mda-option-section-header-border: #d7e4ee;
--mda-option-section-heading-gap: 7px;
/* Icono */
--mda-option-section-icon-size: 28px;
--mda-option-section-icon-font-size: 13px;
--mda-option-section-icon-radius: var(--mda-radius-md);
/* Título y descripción */
--mda-option-section-title-size: 14px;
--mda-option-section-title-weight: 700;
--mda-option-section-title-line-height: 1.2;
--mda-option-section-description-size: 14px;
--mda-option-section-description-margin-top: 2px;
--mda-option-section-description-line-height: 1.25;
/* Grid */
--mda-option-grid-gap: 10px;
/* Tarjeta */
--mda-option-card-min-height: 54px;
--mda-option-card-padding-x: 12px;
--mda-option-card-padding-y: 9px;
--mda-option-card-gap: 9px;
--mda-option-card-radius: 7px;
--mda-option-card-background: #ffffff;
--mda-option-card-background-hover: #f2f8fc;
--mda-option-card-border: #ccd9e5;
--mda-option-card-border-hover: #9fc6df;
--mda-option-card-border-selected: var(--mda-primary);
--mda-option-card-background-selected: var(--mda-primary-soft);
--mda-option-card-shadow-hover:
0 2px 6px rgba(36, 55, 70, 0.06);
--mda-option-card-shadow-selected:
0 0 0 1px rgba(37, 152, 207, 0.10);
/* Checkbox */
--mda-option-checkbox-size: 15px;
/* Texto */
--mda-option-title-size: 14px;
--mda-option-title-weight: 700;
--mda-option-title-line-height: 1.2;
--mda-option-help-size: 13px;
--mda-option-help-margin-top: 3px;
--mda-option-help-line-height: 1.25;
/* ======================================================================
1.25 BOTONES
====================================================================== */
--mda-button-height: 32px;
--mda-button-padding-x: 13px;
--mda-button-font-size: 13px;
--mda-button-font-weight: 600;
--mda-button-radius: 6px;
--mda-button-gap: 6px;
/* ======================================================================
1.26 ACCIONES DEL FORMULARIO
====================================================================== */
--mda-actions-margin-top: 10px;
--mda-actions-gap: 7px;
/* ======================================================================
MDA TABLE SECTION
CONTENEDOR GENERAL DE LA SECCIÓN DE TABLA
======================================================================
PREFIJO DE VARIABLES:
--mda-table-section-*
PREFIJO DE CLASES:
.mda-table-section*
====================================================================== */
/* CONTENEDOR */
--mda-table-section-margin-top: 16px;
--mda-table-section-background:
var(--mda-surface);
--mda-table-section-border-width:
var(--mda-border-width);
--mda-table-section-border-color:
var(--mda-border);
--mda-table-section-radius:
var(--mda-radius-lg);
--mda-table-section-shadow:
0 2px 7px rgba(36, 55, 70, 0.06);
/* HEADER */
--mda-table-section-header-min-height: 44px;
--mda-table-section-header-padding-x: 14px;
--mda-table-section-header-padding-y: 10px;
--mda-table-section-header-background:
#f8fbfe;
--mda-table-section-header-border-width:
var(--mda-border-width);
--mda-table-section-header-border-color:
var(--mda-border-soft);
/* HEADING */
--mda-table-section-heading-gap: 8px;
/* TÍTULO */
--mda-table-section-title-color:
var(--mda-text-primary);
--mda-table-section-title-size: 14px;
--mda-table-section-title-weight: 700;
--mda-table-section-title-line-height: 1.2;
/* MARCADOR DEL TÍTULO */
--mda-table-section-title-accent-width: 3px;
--mda-table-section-title-accent-height: 20px;
--mda-table-section-title-accent-color:
var(--mda-primary);
--mda-table-section-title-accent-radius:
var(--mda-radius-pill);
/* BODY */
--mda-table-section-body-padding-x: 0px;
--mda-table-section-body-padding-y: 0px;
/* ======================================================================
MDA UI / CONTENEDOR PRINCIPAL
======================================================================
RESPONSABILIDAD:
Define la separación general del contenido respecto a los bordes.
Todos los componentes ubicados dentro de .mda-ui quedan alineados
automáticamente.
====================================================================== */
--mda-ui-padding-x: 22px;
--mda-ui-padding-top: 0px;
--mda-ui-padding-bottom: 16px;
/* ======================================================================
MDA TABLE SECTION
SECCIÓN CONTENEDORA DE TABLAS
======================================================================
PREFIJO DE VARIABLES:
--mda-table-section-*
PREFIJO DE CLASES:
.mda-table-section*
RESPONSABILIDAD:
Controla únicamente:
- contenedor exterior
- header
- título
- cuerpo donde se ubica la tabla
====================================================================== */
/* CONTENEDOR */
--mda-table-section-margin-top: 16px;
--mda-table-section-background:
var(--mda-surface);
--mda-table-section-border-width:
var(--mda-border-width);
--mda-table-section-border-color:
var(--mda-border);
--mda-table-section-radius:
var(--mda-radius-lg);
--mda-table-section-shadow:
0 2px 7px rgba(36, 55, 70, 0.06);
/* HEADER */
--mda-table-section-header-min-height: 44px;
--mda-table-section-header-padding-x: 12px;
--mda-table-section-header-padding-y: 10px;
--mda-table-section-header-background:
#f8fbfe;
--mda-table-section-header-border-width:
var(--mda-border-width);
--mda-table-section-header-border-color:
var(--mda-border-soft);
/* HEADING */
--mda-table-section-heading-gap: 8px;
/* TÍTULO */
--mda-table-section-title-color:
var(--mda-text-primary);
--mda-table-section-title-size: 14px;
--mda-table-section-title-weight: 700;
--mda-table-section-title-line-height: 1.2;
/* MARCADOR DEL TÍTULO */
--mda-table-section-title-accent-width: 3px;
--mda-table-section-title-accent-height: 20px;
--mda-table-section-title-accent-color:
var(--mda-primary);
--mda-table-section-title-accent-radius:
var(--mda-radius-pill);
/* BODY */
--mda-table-section-body-padding-x: 0px;
--mda-table-section-body-padding-y: 0px;
/* ======================================================================
MDA TABLE
TABLA REUTILIZABLE
======================================================================
PREFIJO DE VARIABLES:
--mda-table-*
PREFIJO DE CLASES:
.mda-table*
RESPONSABILIDAD:
Controla cualquier tabla MDA independientemente de la cantidad
y tipo de columnas.
====================================================================== */
/* TABLA */
--mda-table-width: 100%;
--mda-table-background:
#ffffff;
--mda-table-font-size: 13px;
--mda-table-text-color:
var(--mda-text-secondary);
/* ======================================================================
MDA TABLE / DIMENSIONES GENERALES DE COLUMNAS
======================================================================
Todas las columnas parten de estas dimensiones.
Si existen muchas columnas, la tabla crece horizontalmente
y se activa el scroll.
Si el contenido es largo, baja de línea y se muestra completo.
====================================================================== */
--mda-table-column-min-width: 130px;
--mda-table-column-preferred-width: 170px;
--mda-table-column-max-width: 260px;
/* Variantes reutilizables */
--mda-table-column-compact-width: 100px;
--mda-table-column-wide-width: 240px;
--mda-table-column-extra-wide-width: 320px;
/* ======================================================================
MDA TABLE / CONTENIDO DE CELDAS
====================================================================== */
--mda-table-cell-padding-x: 12px;
--mda-table-cell-padding-y: 10px;
--mda-table-cell-line-height: 1.35;
--mda-table-cell-white-space: normal;
--mda-table-cell-word-break: normal;
--mda-table-cell-overflow-wrap: anywhere;
--mda-table-cell-border-color:
#e3edf3;
/* ======================================================================
MDA TABLE / HEADER
====================================================================== */
--mda-table-header-background:
#eef7fc;
--mda-table-header-color:
#1f5e83;
--mda-table-header-border-color:
#c9e0ed;
--mda-table-header-font-size: 13px;
--mda-table-header-font-weight: 700;
--mda-table-header-white-space: normal;
/* ======================================================================
MDA TABLE / FILAS
====================================================================== */
--mda-table-row-background:
#ffffff;
--mda-table-row-even-background:
#fbfdfe;
--mda-table-row-hover-background:
#f2f9fd;
--mda-table-row-transition:
0.15s ease;
/* ======================================================================
MDA TABLE / VALORES NUMÉRICOS
====================================================================== */
--mda-table-number-color:
#263f52;
--mda-table-number-weight: 600;
/* ======================================================================
MDA TABLE / SCROLL
====================================================================== */
--mda-table-scroll-max-height: 390px;
--mda-table-scroll-background:
#ffffff;
--mda-table-scrollbar-size: 10px;
--mda-table-scrollbar-track:
#eaf1f6;
--mda-table-scrollbar-thumb:
#b7ccda;
--mda-table-scrollbar-thumb-hover:
#8eb4cb;
/* ======================================================================
CONTENEDOR RAÍZ MDA
======================================================================
Define la separación general de todos los componentes respecto
a los bordes del contenedor principal.
====================================================================== */
--mda-ui-padding-x: 22px;
--mda-ui-padding-top: 0px;
--mda-ui-padding-bottom: 16px;
/* ======================================================================
MDA DATATABLE
CONTROLES DE BÚSQUEDA, PAGINACIÓN Y CANTIDAD DE REGISTROS
====================================================================== */
/* CONTENEDOR DATATABLE */
--mda-datatable-width: 100%;
/* ======================================================================
MDA DATATABLE / BÚSQUEDA
====================================================================== */
--mda-datatable-search-width: 250px;
--mda-datatable-search-height: 32px;
--mda-datatable-search-padding-x: 10px;
--mda-datatable-search-font-size: 11px;
--mda-datatable-search-background:
var(--mda-surface);
--mda-datatable-search-border-color:
var(--mda-border);
--mda-datatable-search-border-focus:
var(--mda-primary);
--mda-datatable-search-radius:
var(--mda-radius-md);
--mda-datatable-search-focus-shadow:
var(--mda-control-focus-shadow);
/* ======================================================================
MDA DATATABLE / FOOTER
====================================================================== */
--mda-table-footer-min-height: 46px;
--mda-table-footer-padding-x: 12px;
--mda-table-footer-padding-y: 8px;
--mda-table-footer-gap: 12px;
--mda-table-footer-background:
var(--mda-surface);
--mda-table-footer-border-color:
var(--mda-border-soft);
--mda-table-footer-font-size: 11px;
--mda-table-footer-color:
var(--mda-text-secondary);
/* ======================================================================
MDA DATATABLE / SELECT DE REGISTROS
====================================================================== */
--mda-datatable-length-height: 30px;
--mda-datatable-length-padding-x: 8px;
--mda-datatable-length-background:
var(--mda-surface);
--mda-datatable-length-border-color:
var(--mda-border);
--mda-datatable-length-radius:
var(--mda-radius-sm);
/* ======================================================================
MDA DATATABLE / PAGINACIÓN
====================================================================== */
--mda-datatable-page-min-width: 30px;
--mda-datatable-page-height: 30px;
--mda-datatable-page-padding-x: 8px;
--mda-datatable-page-gap: 5px;
--mda-datatable-page-background:
var(--mda-surface);
--mda-datatable-page-background-hover:
var(--mda-surface-hover);
--mda-datatable-page-border-color:
var(--mda-border);
--mda-datatable-page-border-hover:
var(--mda-primary);
--mda-datatable-page-radius:
var(--mda-radius-sm);
--mda-datatable-page-color:
var(--mda-text-primary);
--mda-datatable-page-current-background:
var(--mda-primary);
--mda-datatable-page-current-border:
var(--mda-primary);
--mda-datatable-page-current-color:
var(--mda-text-inverse);
--mda-datatable-page-disabled-color:
var(--mda-text-muted);
--mda-datatable-page-disabled-background:
var(--mda-surface);
--mda-datatable-page-disabled-border:
var(--mda-border-soft);
/* ======================================================================
MDA DATATABLE
CONTROLES SUPERIORES E INFERIORES
====================================================================== */
/* BARRA SUPERIOR */
--mda-datatable-top-min-height: 52px;
--mda-datatable-top-padding-x: 40px;
--mda-datatable-top-padding-y: 9px;
--mda-datatable-top-gap: 16px;
--mda-datatable-top-background:
var(--mda-surface-soft);
--mda-datatable-top-border-color:
var(--mda-border-soft);
/* TEXTO */
--mda-datatable-font-size: 13px;
--mda-datatable-text-color:
var(--mda-text-secondary);
/* SELECT DE CANTIDAD */
--mda-datatable-length-height: 32px;
--mda-datatable-length-min-width: 68px;
--mda-datatable-length-padding-x: 8px;
/* BUSCADOR */
--mda-datatable-search-width: 20px;
--mda-datatable-search-height: 32px;
--mda-datatable-search-padding-x: 10px;
/* INPUTS / SELECT */
--mda-datatable-control-background:
var(--mda-surface);
--mda-datatable-control-border:
var(--mda-border);
--mda-datatable-control-border-hover:
var(--mda-border-hover);
--mda-datatable-control-border-focus:
var(--mda-primary);
--mda-datatable-control-radius:
var(--mda-control-radius);
/* BARRA INFERIOR */
--mda-datatable-bottom-min-height: 48px;
--mda-datatable-bottom-padding-x: 12px;
--mda-datatable-bottom-padding-y: 8px;
--mda-datatable-bottom-gap: 14px;
--mda-datatable-bottom-background:
var(--mda-surface);
--mda-datatable-bottom-border-color:
var(--mda-border-soft);
/* PAGINACIÓN */
--mda-datatable-page-height: 30px;
--mda-datatable-page-min-width: 30px;
--mda-datatable-page-padding-x: 8px;
--mda-datatable-page-gap: 4px;
--mda-datatable-page-background:
var(--mda-surface);
--mda-datatable-page-background-hover:
var(--mda-surface-hover);
--mda-datatable-page-border:
var(--mda-border);
--mda-datatable-page-current-background:
var(--mda-primary);
--mda-datatable-page-current-color:
var(--mda-text-inverse);
--mda-panel-gap: 14px;
--mda-panel-radius: 15px;
--mda-panel-border: var(--mda-color-d5e4ef);
--mda-panel-shadow: 0 4px 12px var(--mda-color-rgba-36-55-70-0_07);
--mda-panel-header-padding-x: 16px;
--mda-panel-header-padding-y: 11px;
--mda-panel-body-padding-x: 16px;
--mda-panel-body-padding-y: 13px;
--mda-panel-number-size: 35px;
--mda-panel-title-size: 16px;
--mda-panel-description-size: 12px;
--mda-panel-grid-gap-x: 22px;
--mda-panel-grid-gap-y: 14px;
--mda-panel-blue-main: var(--mda-color-218fdb);
--mda-panel-blue-border: var(--mda-color-b8ddf4);
--mda-panel-blue-header-start: var(--mda-color-dcefff);
--mda-panel-blue-header-end: var(--mda-color-edf7ff);
--mda-panel-purple-main: var(--mda-color-7655e9);
--mda-panel-purple-border: var(--mda-color-d2c7f7);
--mda-panel-purple-header-start: var(--mda-color-e6e0ff);
--mda-panel-purple-header-end: var(--mda-color-f3f0ff);
--mda-panel-cyan-main: var(--mda-color-18a4ce);
--mda-panel-cyan-border: var(--mda-color-b5e4ef);
--mda-panel-cyan-header-start: var(--mda-color-d6f3fa);
--mda-panel-cyan-header-end: var(--mda-color-ebfafe);
}
.mda-ui {
width: 100%;
min-width: 0;
box-sizing: border-box;
padding:
var(--mda-ui-padding-top)
var(--mda-ui-padding-x)
var(--mda-ui-padding-bottom);
color:
var(--mda-text-primary);
display: flex;
flex-direction: column;
gap: 16px;
}
.mda-ui *,
.mda-ui *::before,
.mda-ui *::after {
box-sizing: border-box;
}
/* ==========================================================================
3. HEADER REUTILIZABLE DE REPORTES
==========================================================================
USO:
Presenta la identidad del reporte y su panel de exportación.
ESTRUCTURA:
.mda-report-header
.mda-report-header-main
.mda-report-header-icon
.mda-report-header-content
.mda-report-kicker
.mda-report-title
.mda-report-description
.mda-report-meta-row
.mda-report-export-panel
========================================================================== */
/* --------------------------------------------------------------------------
3.1 CONTENEDOR PRINCIPAL
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-header {
width:
calc(
100% - (var(--mda-report-header-margin-x) * 2)
);
max-width:
calc(
100% - (var(--mda-report-header-margin-x) * 2)
);
min-width: 0;
margin-left: auto;
margin-right: auto;
margin-bottom:
var(--mda-report-header-margin-bottom);
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: stretch;
background:
linear-gradient(
135deg,
var(--mda-report-header-background-start) 0%,
var(--mda-report-header-background-end) 100%
);
border:
var(--mda-border-width)
solid
var(--mda-report-header-border-color);
border-radius:
var(--mda-report-header-radius);
box-shadow:
var(--mda-report-header-shadow);
/*
* Debe mantenerse visible para permitir que el dropdown de exportación
* salga fuera del header sin ser recortado.
*/
overflow: visible;
position: relative;
box-sizing: border-box;
}
#main #workspace .mda-ui .mda-report-header {
width:
calc(
100% - (var(--mda-report-header-margin-x) * 2)
);
max-width:
calc(
100% - (var(--mda-report-header-margin-x) * 2)
);
min-width: 0;
margin-left: auto;
margin-right: auto;
margin-bottom:
var(--mda-report-header-margin-bottom);
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto;
align-items: stretch;
background:
linear-gradient(
135deg,
var(--mda-report-header-background-start) 0%,
var(--mda-report-header-background-end) 100%
);
border:
var(--mda-border-width)
solid
var(--mda-report-header-border-color);
border-radius:
var(--mda-report-header-radius);
box-shadow:
var(--mda-report-header-shadow);
overflow: visible;
position: relative;
box-sizing: border-box;
}
/* SOLO EN ENTRADA DE ALMACÉN */
#main #workspace:has(#formEntradaAlmacen) {
overflow-x: hidden !important;
}
/* PANEL DERECHO */
.mda-report-export-panel {
position: relative;
}
/* BOTÓN VOLVER */
.mda-entry-back-wrapper {
position: absolute;
top: 14px;
right: 14px;
z-index: 10;
}
.mda-entry-back {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 7px;
min-width: 100px;
height: 38px;
margin: 0;
padding: 0 14px;
color: #1689d8;
background: #ffffff;
border: 1px solid #2196e3;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.mda-entry-back:hover {
background: #eef8ff;
text-decoration: none;
}
/* EVITA QUE EL TEXTO CHOQUE CON VOLVER */
.mda-report-export-panel-title,
.mda-report-export-panel-description {
padding-right: 120px;
}
/* --------------------------------------------------------------------------
3.2 BLOQUE PRINCIPAL
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-header-main {
min-width: 0;
display: flex;
align-items: center;
gap:
var(--mda-report-header-gap);
padding:
var(--mda-report-header-main-padding-y)
var(--mda-report-header-main-padding-x);
}
/* --------------------------------------------------------------------------
3.3 ICONO PRINCIPAL
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-header-icon {
width:
var(--mda-report-icon-size);
height:
var(--mda-report-icon-size);
flex:
0 0
var(--mda-report-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
color:
var(--mda-text-inverse);
background:
linear-gradient(
145deg,
var(--mda-primary),
var(--mda-primary-active)
);
border-radius:
var(--mda-report-icon-radius);
font-size:
var(--mda-report-icon-font-size);
box-shadow:
var(--mda-report-icon-shadow);
}
/* --------------------------------------------------------------------------
3.4 BLOQUE DE TEXTO
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-header-content {
min-width: 0;
display: flex;
flex-direction: column;
}
/* --------------------------------------------------------------------------
3.5 CATEGORÍA SUPERIOR / KICKER
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-kicker {
display: inline-flex;
align-items: center;
gap:
var(--mda-report-kicker-gap);
width: fit-content;
margin-bottom:
var(--mda-report-kicker-margin-bottom);
color:
var(--mda-primary);
font-size:
var(--mda-report-kicker-font-size);
font-weight:
var(--mda-report-kicker-font-weight);
letter-spacing:
var(--mda-report-kicker-letter-spacing);
text-transform: uppercase;
}
#main #workspace .mda-ui .mda-report-kicker::before {
content: "";
width:
var(--mda-report-kicker-line-width);
height:
var(--mda-report-kicker-line-height);
background:
var(--mda-primary);
border-radius:
var(--mda-radius-pill);
}
/* --------------------------------------------------------------------------
3.6 TÍTULO
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-title {
margin: 0;
color:
var(--mda-text-primary);
font-size:
var(--mda-report-title-size);
font-weight:
var(--mda-report-title-weight);
line-height:
var(--mda-report-title-line-height);
}
/* --------------------------------------------------------------------------
3.7 DESCRIPCIÓN
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-description {
max-width:
var(--mda-report-description-max-width);
margin:
var(--mda-report-description-margin-top)
0
0;
color:
var(--mda-text-secondary);
font-size:
var(--mda-report-description-size);
line-height:
var(--mda-report-description-line-height);
}
/* --------------------------------------------------------------------------
3.8 METADATOS
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-meta-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap:
var(--mda-report-meta-row-gap);
margin-top:
var(--mda-report-meta-row-margin-top);
}
#main #workspace .mda-ui .mda-report-meta {
display: inline-flex;
align-items: center;
gap:
var(--mda-report-meta-gap);
color:
var(--mda-text-muted);
font-size:
var(--mda-report-meta-size);
}
#main #workspace .mda-ui .mda-report-meta i {
color:
var(--mda-primary);
}
/* --------------------------------------------------------------------------
3.9 BADGES
-------------------------------------------------------------------------- */
#main #workspace .mda-ui .mda-report-badge {
display: inline-flex;
align-items: center;
gap:
var(--mda-report-badge-gap);
min-height:
var(--mda-report-badge-height);
padding:
0
var(--mda-report-badge-padding-x);
border-radius:
var(--mda-report-badge-radius);
font-size:
var(--mda-report-badge-font-size);
font-weight:
var(--mda-report-badge-font-weight);
}
#main #workspace .mda-ui .mda-report-badge--primary {
color:
var(--mda-primary);
background:
var(--mda-primary-soft);
}
#main #workspace .mda-ui .mda-report-badge--success {
color:
var(--mda-success);
background:
var(--mda-success-soft);
}
#main #workspace .mda-ui .mda-report-badge--danger {
color: var(--mda-danger);
background: var(--mda-danger-soft);
}
#main #workspace .mda-ui .mda-report-badge--warning {
color: var(--mda-warning);
background: var(--mda-warning-soft);
}
/* ==========================================================================
4. PANEL DERECHO DE EXPORTACIÓN
========================================================================== */
#main #workspace .mda-ui .mda-report-export-panel {
min-width:
var(--mda-report-export-panel-min-width);
display: flex;
flex-direction: column;
justify-content: center;
padding:
var(--mda-report-export-panel-padding-y)
var(--mda-report-export-panel-padding-x);
border-left:
var(--mda-border-width)
solid
var(--mda-border-soft);
background:
var(--mda-report-export-panel-background);
}
#main #workspace .mda-ui .mda-report-export-panel-title {
margin: 0;
color:
var(--mda-text-primary);
font-size:
var(--mda-report-export-panel-title-size);
font-weight:
var(--mda-report-export-panel-title-weight);
}
#main #workspace .mda-ui .mda-report-export-panel-description {
margin:
var(--mda-report-export-panel-description-margin-top)
0
var(--mda-report-export-panel-description-margin-bottom);
color:
var(--mda-text-muted);
font-size:
var(--mda-report-export-panel-description-size);
}
/* ==========================================================================
5. EXPORTACIÓN LEGACY
==========================================================================
COMPATIBILIDAD:
Este bloque se conserva para pantallas antiguas que todavía muestran
botones individuales de exportación.
Los formularios nuevos deberían utilizar el menú desplegable de la
sección 6.
========================================================================== */
#main #workspace .mda-ui .mda-report-export-actions {
display: flex;
align-items: center;
gap:
var(--mda-report-export-actions-gap);
}
#main #workspace .mda-ui .mda-report-export {
min-height:
var(--mda-report-export-height);
display: inline-flex;
align-items: center;
justify-content: center;
gap:
var(--mda-report-export-gap);
padding:
0
var(--mda-report-export-padding-x);
color:
var(--mda-text-primary);
background:
var(--mda-surface);
border:
var(--mda-border-width)
solid
var(--mda-border);
border-radius:
var(--mda-radius-md);
text-decoration: none;
font-size:
var(--mda-report-export-font-size);
font-weight:
var(--mda-report-export-font-weight);
cursor: pointer;
transition:
transform var(--mda-transition-fast),
border-color var(--mda-transition-fast),
background var(--mda-transition-fast),
box-shadow var(--mda-transition-fast);
}
#main #workspace .mda-ui .mda-report-export:hover {
transform:
translateY(-1px);
border-color:
var(--mda-primary-border);
background:
var(--mda-primary-soft);
box-shadow:
var(--mda-shadow-sm);
}
#main #workspace .mda-ui .mda-report-export-icon {
width:
var(--mda-report-export-icon-size);
height:
var(--mda-report-export-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius:
var(--mda-radius-sm);
font-size:
var(--mda-report-export-icon-font-size);
}
#main #workspace
.mda-ui
.mda-report-export--primary
.mda-report-export-icon {
color:
var(--mda-primary);
background:
var(--mda-primary-soft);
}
#main #workspace
.mda-ui
.mda-report-export--danger
.mda-report-export-icon {
color:
var(--mda-danger);
background:
var(--mda-danger-soft);
}
#main #workspace
.mda-ui
.mda-report-export--success
.mda-report-export-icon {
color:
var(--mda-success);
background:
var(--mda-success-soft);
}
#main #workspace
.mda-ui
.mda-report-export--info
.mda-report-export-icon {
color:
var(--mda-info);
background:
var(--mda-info-soft);
}
/* ==========================================================================
6. MENÚ DESPLEGABLE DE EXPORTACIÓN
==========================================================================
ESTRUCTURA:
.mda-export-menu
.mda-export-trigger
.mda-export-dropdown
.mda-export-option
.mda-export-option-icon
.mda-export-option-content
COMPORTAMIENTO:
El JavaScript únicamente agrega o elimina la clase .is-open.
La generación real de PDF/Excel/CSV sigue controlada por los IDs y por
el JS propio del formulario.
========================================================================== */
/* --------------------------------------------------------------------------
6.1 CONTENEDOR
-------------------------------------------------------------------------- */
.mda-ui .mda-export-menu {
position: relative;
width: 100%;
}
/* --------------------------------------------------------------------------
6.2 BOTÓN PRINCIPAL
-------------------------------------------------------------------------- */
.mda-ui .mda-export-trigger {
min-width:
var(--mda-export-trigger-min-width);
min-height:
var(--mda-export-trigger-height);
display: inline-flex;
align-items: center;
justify-content: center;
gap:
var(--mda-export-trigger-gap);
padding:
0
var(--mda-export-trigger-padding-x);
color:
var(--mda-text-inverse);
background:
var(--mda-primary);
border:
var(--mda-border-width)
solid
var(--mda-primary);
border-radius:
var(--mda-radius-md);
outline: none;
font-size:
var(--mda-export-trigger-font-size);
font-weight:
var(--mda-export-trigger-font-weight);
cursor: pointer;
transition:
background var(--mda-transition-fast),
border-color var(--mda-transition-fast),
box-shadow var(--mda-transition-fast),
transform var(--mda-transition-fast);
}
.mda-ui .mda-export-trigger:hover {
background:
var(--mda-primary-hover);
border-color:
var(--mda-primary-hover);
}
.mda-ui .mda-export-trigger:focus {
box-shadow:
var(--mda-export-trigger-focus-shadow);
}
.mda-ui .mda-export-trigger:active {
background:
var(--mda-primary-active);
border-color:
var(--mda-primary-active);
transform:
translateY(1px);
}
/**
botón desactivado
*/
.mda-ui .mda-export-trigger:disabled {
background: var(--mc_secondary);
border-color:var(--mc_secondary);
cursor:not-allowed;
}
.mda-ui .mda-export-trigger-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size:
var(--mda-export-trigger-icon-size);
}
/* --------------------------------------------------------------------------
6.3 DROPDOWN
-------------------------------------------------------------------------- */
.mda-ui .mda-export-dropdown {
position: absolute;
top:
calc(
100% + var(--mda-export-dropdown-offset-y)
);
right: 0;
z-index: 1000;
width:
var(--mda-export-dropdown-width);
display: none;
padding:
var(--mda-export-dropdown-padding);
background:
var(--mda-surface);
border:
var(--mda-border-width)
solid
var(--mda-border);
border-radius:
var(--mda-radius-lg);
box-shadow:
var(--mda-export-dropdown-shadow);
}
.mda-ui .mda-export-dropdown.is-open {
display: block;
}
/* --------------------------------------------------------------------------
6.4 OPCIÓN DE EXPORTACIÓN
-------------------------------------------------------------------------- */
.mda-ui .mda-export-option {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
gap:
var(--mda-export-option-gap);
padding:
var(--mda-export-option-padding);
color:
var(--mda-text-primary);
background:
transparent;
border-radius:
var(--mda-radius-md);
text-decoration: none;
transition:
background var(--mda-transition-fast);
}
.mda-ui .mda-export-option:hover {
background:
var(--mda-surface-hover);
}
/* --------------------------------------------------------------------------
6.5 ICONO DE LA OPCIÓN
-------------------------------------------------------------------------- */
.mda-ui .mda-export-option-icon {
width:
var(--mda-export-option-icon-size);
height:
var(--mda-export-option-icon-size);
flex:
0 0
var(--mda-export-option-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius:
var(--mda-radius-md);
font-size:
var(--mda-export-option-icon-font-size);
}
.mda-ui .mda-export-option-icon--danger {
color:
var(--mda-danger);
background:
var(--mda-danger-soft);
}
.mda-ui .mda-export-option-icon--success {
color:
var(--mda-success);
background:
var(--mda-success-soft);
}
.mda-ui .mda-export-option-icon--info {
color:
var(--mda-info);
background:
var(--mda-info-soft);
}
/* --------------------------------------------------------------------------
6.6 TEXTO DE LA OPCIÓN
-------------------------------------------------------------------------- */
.mda-ui .mda-export-option-content {
min-width: 0;
display: flex;
flex-direction: column;
}
.mda-ui .mda-export-option-content strong {
color:
var(--mda-text-primary);
font-size:
var(--mda-export-option-title-size);
font-weight:
var(--mda-export-option-title-weight);
line-height:
var(--mda-export-option-title-line-height);
}
.mda-ui .mda-export-option-content small {
margin-top:
var(--mda-export-option-help-margin-top);
color:
var(--mda-text-muted);
font-size:
var(--mda-export-option-help-size);
line-height:
var(--mda-export-option-help-line-height);
}
/* ==========================================================================
7. ENCABEZADO PRINCIPAL DE PÁGINA
==========================================================================
USO:
Encabezados normales que no requieren panel de exportación.
EJEMPLO:
Panel de control
Consulta y visualización de información...
========================================================================== */
.mda-ui .mda-page-header {
width: 100%;
padding:
var(--mda-page-header-padding-y)
var(--mda-page-header-padding-x);
margin-bottom:
var(--mda-page-header-margin-bottom);
}
.mda-ui .mda-page-header-content {
min-width: 0;
}
.mda-ui .mda-page-title {
margin: 0;
color:
var(--mda-text-primary);
font-size:
var(--mda-page-title-size);
font-weight:
var(--mda-page-title-weight);
line-height:
var(--mda-page-title-line-height);
}
.mda-ui .mda-page-description {
margin:
var(--mda-page-header-gap)
0
0;
color:
var(--mda-text-secondary);
font-size:
var(--mda-page-description-size);
line-height:
var(--mda-page-description-line-height);
}
/* ==========================================================================
8. TARJETA GENERAL DE FILTROS
==========================================================================
CONTIENE:
- Encabezado interno
- Grid de campos
- Opciones
- Acciones
========================================================================== */
.mda-ui .mda-filter-card {
width: auto;
min-width: 0;
margin-left:
var(--mda-filter-card-margin-x);
margin-right:
var(--mda-filter-card-margin-x);
padding:
var(--mda-filter-padding-y)
var(--mda-filter-padding-x);
background:
var(--mda-filter-background);
border:
var(--mda-filter-border-width)
solid
var(--mda-filter-border-color);
border-radius:
var(--mda-filter-radius);
box-shadow:
var(--mda-shadow-sm);
}
/* ==========================================================================
9. ENCABEZADO INTERNO DE SECCIÓN / FILTROS
========================================================================== */
.mda-ui .mda-section-header {
width: 100%;
margin-bottom:
var(--mda-section-header-margin-bottom);
padding-bottom:
var(--mda-section-header-padding-bottom);
border-bottom:
var(--mda-border-width)
solid
var(--mda-section-header-border-color);
}
.mda-ui .mda-section-heading {
display: flex;
align-items: center;
gap:
var(--mda-section-heading-gap);
}
.mda-ui .mda-section-title {
margin: 0;
color:
var(--mda-text-primary);
font-size:
var(--mda-section-title-size);
font-weight:
var(--mda-section-title-weight);
line-height:
var(--mda-section-title-line-height);
}
.mda-ui .mda-section-description {
margin:
var(--mda-section-description-margin-top)
0
0;
color:
var(--mda-text-muted);
font-size:
var(--mda-section-description-size);
}
/* ==========================================================================
10. GRID DE FILTROS
==========================================================================
ESCRITORIO:
[ Campo ] [ Campo ]
[ Campo ] [ Campo ]
MÓVIL:
[ Campo ]
[ Campo ]
========================================================================== */
.mda-ui .mda-filter-grid {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
column-gap:
var(--mda-filter-column-gap);
row-gap:
var(--mda-filter-row-gap);
align-items: start;
}
/* ==========================================================================
11. CAMPO GENERAL
==========================================================================
Un .mda-field representa una unidad completa:
label
+
control
========================================================================== */
.mda-ui .mda-field {
width:
var(--mda-field-width);
min-width: 0;
display: flex;
flex-direction: column;
}
/* ==========================================================================
12. LABEL DEL CAMPO
========================================================================== */
.mda-ui .mda-field-label {
width: 100%;
min-width: 0;
min-height:
var(--mda-label-min-height);
display: flex;
align-items: center;
gap:
var(--mda-label-gap);
margin:
0
0
var(--mda-label-control-gap)
0;
color:
var(--mda-text-primary);
cursor: pointer;
}
/* ==========================================================================
13. CONTENIDO DEL LABEL
========================================================================== */
.mda-ui .mda-field-label-content {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.mda-ui .mda-field-title {
color:
var(--mda-text-primary);
font-size:
var(--mda-field-title-size);
font-weight:
var(--mda-field-title-weight);
line-height:
var(--mda-field-title-line-height);
}
.mda-ui .mda-field-help {
display: block;
margin-top:
var(--mda-field-help-margin-top);
color:
var(--mda-text-muted);
font-size:
var(--mda-field-help-size);
font-weight: 400;
line-height:
var(--mda-field-help-line-height);
}
/* ==========================================================================
14. ICONOS DE CAMPOS
========================================================================== */
.mda-ui .mda-field-icon {
width:
var(--mda-field-icon-size);
height:
var(--mda-field-icon-size);
flex:
0 0
var(--mda-field-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius:
var(--mda-field-icon-radius);
font-size:
var(--mda-field-icon-font-size);
}
.mda-ui .mda-field-icon--primary {
color:
var(--mda-primary);
background:
var(--mda-primary-soft);
}
.mda-ui .mda-field-icon--success {
color:
var(--mda-success);
background:
var(--mda-success-soft);
}
.mda-ui .mda-field-icon--warning {
color:
var(--mda-warning);
background:
var(--mda-warning-soft);
}
.mda-ui .mda-field-icon--danger {
color:
var(--mda-danger);
background:
var(--mda-danger-soft);
}
.mda-ui .mda-field-icon--info {
color:
var(--mda-info);
background:
var(--mda-info-soft);
}
/* ==========================================================================
15. CONTENEDOR DEL CONTROL
==========================================================================
El ancho global de controles se maneja mediante:
--mda-control-width
Esto afecta:
- input
- select
- Select2
- Chosen
========================================================================== */
.mda-ui .mda-control {
width:
var(--mda-control-width);
min-width: 0;
}
/* ==========================================================================
16. SELECT E INPUT BASE
========================================================================== */
.mda-ui .mda-select,
.mda-ui .mda-input {
width: 100%;
height:
var(--mda-control-height);
min-height:
var(--mda-control-height);
padding:
0
var(--mda-control-padding-x);
color:
var(--mda-text-primary);
background:
var(--mda-surface);
border:
var(--mda-border-width)
solid
var(--mda-border);
border-radius:
var(--mda-control-radius);
outline: none;
font-size:
var(--mda-control-font-size);
transition:
border-color var(--mda-transition-normal),
box-shadow var(--mda-transition-normal),
background var(--mda-transition-normal);
}
.mda-ui .mda-select {
cursor: pointer;
}
/*
inputs requeridos (required)
*/
.mda-ui input:required {
border-left: 3px solid var(--mc_danger);
}
/* ==========================================================================
17. HOVER DE CONTROLES
========================================================================== */
.mda-ui .mda-select:hover,
.mda-ui .mda-input:hover {
border-color:
var(--mda-border-hover);
}
/* ==========================================================================
18. FOCUS DE CONTROLES
========================================================================== */
.mda-ui .mda-select:focus,
.mda-ui .mda-input:focus {
border-color:
var(--mda-border-focus);
box-shadow:
var(--mda-control-focus-shadow);
}
/* ==========================================================================
19. CONTROLES DESHABILITADOS
========================================================================== */
.mda-ui .mda-select:disabled,
.mda-ui .mda-input:disabled {
color:
var(--mda-text-muted);
background:
var(--mda-surface-disabled);
cursor: not-allowed;
opacity:
var(--mda-control-disabled-opacity);
}
/* ==========================================================================
20. SELECT2
========================================================================== */
.mda-ui .select2-container {
width: 100% !important;
}
.mda-ui
select:required
+ .select2-container
.select2-selection--single {
border-left:
3px
solid
var(--mc_danger) !important;
}
.mda-ui
.select2-container
.select2-selection--single {
width: 100%;
height:
var(--mda-control-height) !important;
min-height:
var(--mda-control-height) !important;
display: flex;
align-items: center;
padding:
0
var(--mda-control-padding-x);
background:
var(--mda-surface) !important;
border:
var(--mda-border-width)
solid
var(--mda-border) !important;
border-radius:
var(--mda-control-radius) !important;
box-shadow: none !important;
}
.mda-ui
.select2-container
.select2-selection--single
.select2-selection__rendered {
width: 100%;
padding:
0
var(--mda-select2-rendered-padding-right)
0
0 !important;
color:
var(--mda-text-primary) !important;
font-size:
var(--mda-control-font-size);
line-height: normal !important;
}
.mda-ui
.select2-container
.select2-selection--single
.select2-selection__arrow {
height: 100% !important;
top: 0 !important;
right:
var(--mda-select2-arrow-right) !important;
}
.mda-ui
.select2-container--focus
.select2-selection--single,
.mda-ui
.select2-container--open
.select2-selection--single {
border-color:
var(--mda-border-focus) !important;
box-shadow:
var(--mda-control-focus-shadow) !important;
}
/* ==========================================================================
21. CHOSEN
========================================================================== */
.mda-ui .chosen-container {
width: 100% !important;
}
/* --------------------------------------------------------------------------
21.1 CHOSEN SIMPLE
-------------------------------------------------------------------------- */
.mda-ui
.chosen-container-single
.chosen-single {
width: 100%;
height:
var(--mda-control-height);
min-height:
var(--mda-control-height);
display: flex;
align-items: center;
padding:
0
var(--mda-control-padding-x);
color:
var(--mda-text-primary);
background:
var(--mda-surface);
border:
var(--mda-border-width)
solid
var(--mda-border);
border-radius:
var(--mda-control-radius);
box-shadow: none;
font-size:
var(--mda-control-font-size);
}
/* --------------------------------------------------------------------------
21.2 CHOSEN MÚLTIPLE
-------------------------------------------------------------------------- */
.mda-ui
.chosen-container-multi
.chosen-choices {
width: 100%;
min-height:
var(--mda-control-height);
padding:
var(--mda-chosen-multi-padding-y)
var(--mda-chosen-multi-padding-x);
background:
var(--mda-surface);
border:
var(--mda-border-width)
solid
var(--mda-border);
border-radius:
var(--mda-control-radius);
box-shadow: none;
}
/* --------------------------------------------------------------------------
21.3 CHOSEN ACTIVO
-------------------------------------------------------------------------- */
.mda-ui
.chosen-container-active
.chosen-single,
.mda-ui
.chosen-container-active
.chosen-choices {
border-color:
var(--mda-border-focus);
box-shadow:
var(--mda-control-focus-shadow);
}
/* ==========================================================================
22. OPCIONES / CHECKBOXES BÁSICOS - COMPATIBILIDAD
==========================================================================
Se conserva para formularios antiguos.
Para formularios nuevos se recomienda utilizar:
.mda-option-section
.mda-option-grid
.mda-option-card
========================================================================== */
.mda-ui .mda-filter-options {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
gap:
var(--mda-filter-options-gap);
margin-top:
var(--mda-filter-options-margin-top);
}
.mda-ui .mda-option {
display: inline-flex;
align-items: center;
gap:
var(--mda-option-basic-gap);
cursor: pointer;
}
.mda-ui .mda-checkbox {
margin: 0;
cursor: pointer;
}
.mda-ui .mda-option-content {
display: flex;
flex-direction: column;
}
.mda-ui .mda-option-title {
color:
var(--mda-text-primary);
font-size:
var(--mda-option-basic-title-size);
font-weight:
var(--mda-option-basic-title-weight);
}
.mda-ui .mda-option-help {
margin-top:
var(--mda-option-basic-help-margin-top);
color:
var(--mda-text-muted);
font-size:
var(--mda-option-basic-help-size);
}
/* ==========================================================================
23. SECCIÓN REUTILIZABLE DE OPCIONES
==========================================================================
USO:
Agrupa opciones booleanas relacionadas con una consulta.
EJEMPLOS:
- Detallar por tercero
- Excluir cierre
- Incluir saldos
- Mostrar anulados
- Agrupar por centro de costo
ESTRUCTURA:
.mda-option-section
.mda-option-section-header
.mda-option-section-heading
.mda-option-section-icon
.mda-option-section-heading-content
.mda-option-grid
.mda-option-card
.mda-option-card-control
.mda-option-checkbox
.mda-option-card-content
.mda-option-card-title
.mda-option-card-help
========================================================================== */
/* --------------------------------------------------------------------------
23.1 CONTENEDOR PRINCIPAL
-------------------------------------------------------------------------- */
.mda-ui .mda-option-section {
width: 100%;
margin-top:
var(--mda-option-section-margin-top);
padding:
var(--mda-option-section-padding-y)
var(--mda-option-section-padding-x);
background:
var(--mda-option-section-background);
border:
var(--mda-border-width)
solid
var(--mda-option-section-border);
border-radius:
var(--mda-option-section-radius);
box-shadow:
var(--mda-option-section-shadow);
}
/* --------------------------------------------------------------------------
23.2 ENCABEZADO
-------------------------------------------------------------------------- */
.mda-ui .mda-option-section-header {
width: 100%;
margin-bottom:
var(--mda-option-section-header-margin-bottom);
padding-bottom:
var(--mda-option-section-header-padding-bottom);
border-bottom:
var(--mda-border-width)
solid
var(--mda-option-section-header-border);
}
.mda-ui .mda-option-section-heading {
display: flex;
align-items: center;
gap:
var(--mda-option-section-heading-gap);
}
.mda-ui .mda-option-section-heading-content {
min-width: 0;
display: flex;
flex-direction: column;
}
/* --------------------------------------------------------------------------
23.3 ICONO DEL ENCABEZADO
-------------------------------------------------------------------------- */
.mda-ui .mda-option-section-icon {
width:
var(--mda-option-section-icon-size);
height:
var(--mda-option-section-icon-size);
flex:
0 0
var(--mda-option-section-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
color:
var(--mda-primary);
background:
var(--mda-primary-soft);
border-radius:
var(--mda-option-section-icon-radius);
font-size:
var(--mda-option-section-icon-font-size);
}
/* --------------------------------------------------------------------------
23.4 TÍTULO Y DESCRIPCIÓN
-------------------------------------------------------------------------- */
.mda-ui .mda-option-section-title {
margin: 0;
color:
var(--mda-text-primary);
font-size:
var(--mda-option-section-title-size);
font-weight:
var(--mda-option-section-title-weight);
line-height:
var(--mda-option-section-title-line-height);
}
.mda-ui .mda-option-section-description {
margin:
var(--mda-option-section-description-margin-top)
0
0;
color:
var(--mda-text-muted);
font-size:
var(--mda-option-section-description-size);
line-height:
var(--mda-option-section-description-line-height);
}
/* --------------------------------------------------------------------------
23.5 GRID DE OPCIONES
-------------------------------------------------------------------------- */
.mda-ui .mda-option-grid {
width: 100%;
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
var(--mda-option-grid-gap);
}
/* --------------------------------------------------------------------------
23.6 TARJETA DE OPCIÓN
-------------------------------------------------------------------------- */
.mda-ui .mda-option-card {
min-width: 0;
min-height:
var(--mda-option-card-min-height);
display: flex;
align-items: flex-start;
gap:
var(--mda-option-card-gap);
padding:
var(--mda-option-card-padding-y)
var(--mda-option-card-padding-x);
background:
var(--mda-option-card-background);
border:
var(--mda-border-width)
solid
var(--mda-option-card-border);
border-radius:
var(--mda-option-card-radius);
cursor: pointer;
transition:
border-color var(--mda-transition-fast),
background var(--mda-transition-fast),
box-shadow var(--mda-transition-fast);
}
.mda-ui .mda-option-card:hover {
background:
var(--mda-option-card-background-hover);
border-color:
var(--mda-option-card-border-hover);
box-shadow:
var(--mda-option-card-shadow-hover);
}
/* --------------------------------------------------------------------------
23.7 CONTROL CHECKBOX
-------------------------------------------------------------------------- */
.mda-ui .mda-option-card-control {
min-height:
var(--mda-option-checkbox-size);
display: flex;
align-items: center;
justify-content: center;
}
.mda-ui .mda-option-checkbox {
width:
var(--mda-option-checkbox-size);
height:
var(--mda-option-checkbox-size);
margin: 0;
accent-color:
var(--mda-primary);
cursor: pointer;
}
/* --------------------------------------------------------------------------
23.8 CONTENIDO
-------------------------------------------------------------------------- */
.mda-ui .mda-option-card-content {
min-width: 0;
display: flex;
flex-direction: column;
}
.mda-ui .mda-option-card-title {
color:
var(--mda-text-primary);
font-size:
var(--mda-option-title-size);
font-weight:
var(--mda-option-title-weight);
line-height:
var(--mda-option-title-line-height);
}
.mda-ui .mda-option-card-help {
display: block;
margin-top:
var(--mda-option-help-margin-top);
color:
var(--mda-text-muted);
font-size:
var(--mda-option-help-size);
font-weight: 400;
line-height:
var(--mda-option-help-line-height);
}
/* --------------------------------------------------------------------------
23.9 OPCIÓN SELECCIONADA
-------------------------------------------------------------------------- */
.mda-ui .mda-option-card:has(
.mda-option-checkbox:checked
) {
background:
var(--mda-option-card-background-selected);
border-color:
var(--mda-option-card-border-selected);
box-shadow:
var(--mda-option-card-shadow-selected);
}
/* ==========================================================================
24. BOTÓN BASE
========================================================================== */
.mda-ui .mda-btn,
.mda-btn {
min-height: var(--mda-button-height);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mda-button-gap);
padding:
0
var(--mda-button-padding-x);
border:
var(--mda-border-width)
solid
transparent;
border-radius:
var(--mda-button-radius);
cursor: pointer;
font-size:
var(--mda-button-font-size);
font-weight:
var(--mda-button-font-weight);
white-space: nowrap;
transition:
background var(--mda-transition-normal),
border-color var(--mda-transition-normal),
color var(--mda-transition-normal);
}
/* ==========================================================================
25. BOTÓN PRIMARY
========================================================================== */
.mda-ui .mda-btn--primary,
.mda-btn--primary {
color: var(--mda-text-inverse);
background: var(--mda-primary);
border-color: var(--mda-primary);
}
.mda-ui .mda-btn--primary:hover,
.mda-btn--primary:hover {
background:
var(--mda-primary-hover);
border-color:
var(--mda-primary-hover);
}
/* ==========================================================================
26. BOTÓN SECONDARY
========================================================================== */
.mda-ui .mda-btn--secondary,
.mda-btn--secondary {
color:
var(--mda-text-secondary);
background:
var(--mda-surface);
border-color:
var(--mda-border);
}
.mda-ui .mda-btn--secondary:hover,
.mda-btn--secondary:hover {
color:
var(--mda-primary);
background:
var(--mda-primary-soft);
border-color:
var(--mda-primary);
}
/* ==========================================================================
27. BOTÓN SUCCESS
========================================================================== */
.mda-ui .mda-btn--success,
.mda-btn--success {
color:
var(--mda-text-inverse);
background:
var(--mda-success);
border-color:
var(--mda-success);
}
/* ==========================================================================
28. BOTÓN WARNING
========================================================================== */
.mda-ui .mda-btn--warning,
.mda-btn--warning {
color:
var(--mda-text-inverse);
background:
var(--mda-warning);
border-color:
var(--mda-warning);
}
/* ==========================================================================
29. BOTÓN DANGER
========================================================================== */
.mda-ui .mda-btn--danger,
.mda-btn--danger {
color:
var(--mda-text-inverse);
background:
var(--mda-danger);
border-color:
var(--mda-danger);
}
/* ==========================================================================
30. ACCIONES DEL FORMULARIO
==========================================================================
EJEMPLO:
[ Limpiar ] [ Consultar ]
========================================================================== */
.mda-ui .mda-filter-actions {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap:
var(--mda-actions-gap);
margin-top:
var(--mda-actions-margin-top);
}
/* ==========================================================================
31. ELEMENTOS OCULTOS
========================================================================== */
.mda-ui .mda-hidden {
display: none !important;
}
/* ==========================================================================
COMPONENTE SELECTOR / PRODUCTOS / ANEXOS
========================================================================== */
/* ==========================================================================
COMPONENTE PRINCIPAL
========================================================================== */
.mda-ui .mda-selector-table {
width: 100%;
min-width: 0;
border: 1px solid #cadfea;
border-radius: 16px;
background: #ffffff;
box-shadow:
0 5px 16px
rgba(34, 59, 78, 0.07);
overflow: hidden;
}
/* ==========================================================================
HEADER PRINCIPAL
========================================================================== */
.mda-ui .mda-selector-table__header {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
border-bottom: 1px solid #d7e6ef;
background:
linear-gradient(
90deg,
#ffffff 0%,
#fbfdff 65%,
#f3f9fd 100%
);
}
.mda-ui .mda-selector-table__heading {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.mda-ui .mda-selector-table__icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #e7f5fd;
color: #168fd3;
font-size: 20px;
}
.mda-ui .mda-selector-table__title {
margin: 0;
color: #203b55;
font-size: 18px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-selector-table__description {
margin: 3px 0 0;
color: #6a8298;
font-size: 13px;
line-height: 1.35;
}
.mda-ui .mda-selector-table__actions {
display: flex;
align-items: center;
gap: 9px;
}
/* ==========================================================================
BODY
========================================================================== */
.mda-ui .mda-selector-table__body {
display: flex;
flex-direction: column;
gap: 18px;
padding: 16px;
}
/* ==========================================================================
TOOLBAR
========================================================================== */
.mda-ui .mda-selector-toolbar {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap: 28px;
padding: 2px 0 4px;
}
.mda-ui .mda-selector-toolbar__field {
min-width: 0;
}
.mda-ui .mda-selector-toolbar .mda-field-label {
min-height: 0;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 7px;
}
.mda-ui .mda-selector-toolbar .mda-control {
width: 100%;
}
.mda-ui .mda-selector-toolbar .mda-select {
width: 100%;
min-height: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid #c7d9e8;
border-radius: 8px;
background: #ffffff;
color: #243d55;
font-size: 13px;
}
/* ==========================================================================
SELECT2
========================================================================== */
.mda-ui .mda-selector-toolbar .select2-container {
width: 100% !important;
}
.mda-ui .mda-selector-toolbar
.select2-container
.select2-selection--single {
height: 42px !important;
min-height: 42px !important;
border: 1px solid #c7d9e8 !important;
border-radius: 8px !important;
background: #ffffff !important;
}
.mda-ui .mda-selector-toolbar
.select2-container
.select2-selection__rendered {
height: 40px !important;
padding-left: 12px !important;
padding-right: 32px !important;
color: #243d55 !important;
font-size: 13px !important;
line-height: 40px !important;
}
.mda-ui .mda-selector-toolbar
.select2-container
.select2-selection__arrow {
height: 40px !important;
}
/* ==========================================================================
SECCIÓN
========================================================================== */
.mda-ui .mda-selector-section {
width: 100%;
min-width: 0;
border: 1px solid #d7e5ee;
border-radius: 14px;
background: #ffffff;
overflow: hidden;
box-shadow:
0 2px 7px
rgba(34, 59, 78, 0.04);
}
/* ==========================================================================
HEADER DE SECCIÓN
========================================================================== */
.mda-ui .mda-selector-section__header {
min-height: 62px;
display: flex;
align-items: center;
gap: 11px;
padding: 11px 14px;
border-bottom: 1px solid #d8e8f1;
background:
linear-gradient(
90deg,
#f9fcfe,
#f2f9fd
);
}
.mda-ui .mda-selector-section__icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #e2f3fc;
color: #168fd3;
font-size: 17px;
}
.mda-ui .mda-selector-section__heading {
min-width: 0;
}
.mda-ui .mda-selector-section__title {
margin: 0;
color: #23435f;
font-size: 17px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-selector-section__description {
margin: 3px 0 0;
color: #69849a;
font-size: 14px;
line-height: 1.3;
}
/* ==========================================================================
WRAPPER DE TABLA
========================================================================== */
.mda-ui .mda-selector-table-wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
max-height: 420px;
overflow-x: auto;
overflow-y: visible;
background: #ffffff;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color:
#91a7b5
#eef3f6;
}
.mda-ui .mda-selector-table-wrapper::-webkit-scrollbar {
height: 7px;
}
.mda-ui .mda-selector-table-wrapper::-webkit-scrollbar-track {
background: #eef3f6;
}
.mda-ui .mda-selector-table-wrapper::-webkit-scrollbar-thumb {
background: #91a7b5;
border-radius: 10px;
}
/* ==========================================================================
DATATABLE WRAPPER
========================================================================== */
.mda-ui
.mda-selector-table-wrapper
.dataTables_wrapper {
width: max-content;
min-width: 100%;
overflow: visible;
}
/* ==========================================================================
TABLA BASE
========================================================================== */
.mda-ui .mda-selector-grid {
width: max-content !important;
min-width: 100%;
max-width: none !important;
margin: 0 !important;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
box-sizing: border-box;
background: #ffffff;
color: #30495f;
font-size: 13px;
counter-reset: mda-selector-row;
}
.mda-ui .mda-selector-grid thead {
display: table-header-group;
}
.mda-ui .mda-selector-grid tbody {
display: table-row-group;
}
.mda-ui .mda-selector-grid tr {
display: table-row;
}
.mda-ui .mda-selector-grid th,
.mda-ui .mda-selector-grid td {
display: table-cell;
box-sizing: border-box;
vertical-align: middle;
white-space: nowrap;
}
/* ==========================================================================
COLUMNAS
========================================================================== */
.mda-ui .mda-selector-grid col.mda-col--xs {
width: 95px;
}
.mda-ui .mda-selector-grid col.mda-col--sm {
width: 130px;
}
.mda-ui .mda-selector-grid col.mda-col--md {
width: 160px;
}
.mda-ui .mda-selector-grid col.mda-col--lg {
width: 200px;
}
.mda-ui .mda-selector-grid col.mda-col--xl {
width: 260px;
}
.mda-ui .mda-selector-grid col.mda-col--money {
width: 165px;
}
.mda-ui .mda-selector-grid col.mda-col--action {
width: 100px;
}
.mda-ui .mda-selector-grid col.mda-col--fluid {
width: auto;
}
/* ==========================================================================
HEADER DE TABLA
========================================================================== */
.mda-ui .mda-selector-grid thead th {
height: 64px;
padding: 12px 18px;
border: 0;
background:
linear-gradient(
180deg,
#eef8fd 0%,
#dceef8 100%
);
color: #0f4c7d;
font-size: 14px;
font-weight: 800;
text-align: center;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
.mda-ui .mda-selector-grid__th {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
line-height: 1.15;
}
.mda-ui .mda-selector-grid__th > i {
color: #1494d3;
font-size: 15px;
}
.mda-ui .mda-selector-grid__th > span {
display: block;
color: #145f8d;
font-size: 16px;
font-weight: 800;
}
.mda-ui .mda-selector-grid__th small {
display: block;
margin-top: 3px;
color: #68879d;
font-size: 14px;
font-weight: 600;
}
/* ==========================================================================
FILAS
========================================================================== */
.mda-ui .mda-selector-grid tbody tr {
counter-increment: mda-selector-row;
background: #ffffff;
transition:
background 0.15s ease;
}
.mda-ui .mda-selector-grid
tbody tr:nth-of-type(even) {
background: #eef7fc;
}
.mda-ui .mda-selector-grid
tbody tr:hover {
background: #e4f2fa;
}
/* ==========================================================================
CELDAS
========================================================================== */
.mda-ui .mda-selector-grid tbody td {
height: 56px;
padding: 10px 18px;
border: 0;
background: transparent;
color: #173a59;
font-size: 14px;
font-weight: 600;
text-align: center;
white-space: nowrap;
position: relative;
}
/* ==========================================================================
ALINEACIONES
========================================================================== */
.mda-ui .mda-cell--left {
text-align: left !important;
}
.mda-ui .mda-cell--center {
text-align: center !important;
}
.mda-ui .mda-cell--right,
.mda-ui .mda-cell--money {
text-align: right !important;
}
/* ==========================================================================
DATATABLE VACÍO
========================================================================== */
.mda-ui .mda-selector-grid
tbody tr:has(td.dataTables_empty) {
counter-increment: none;
}
.mda-ui .mda-selector-grid
tbody tr:has(td.dataTables_empty)
td:first-child {
padding-left: 12px;
}
.mda-ui .mda-selector-grid
tbody tr:has(td.dataTables_empty)
td:first-child::before {
display: none;
}
/* ==========================================================================
INPUTS
========================================================================== */
.mda-ui .mda-selector-grid
input:not([type="checkbox"]):not([type="radio"]) {
width: 100%;
min-width: 80px;
height: 38px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid #bdd3e1;
border-radius: 8px;
background: #ffffff;
color: #173a59;
font-family: inherit;
font-size: 14px;
font-weight: 700;
text-align: center;
outline: none;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease;
}
.mda-ui .mda-selector-grid
input:not([type="checkbox"]):not([type="radio"]):hover {
border-color: #9fc3d8;
}
.mda-ui .mda-selector-grid
input:not([type="checkbox"]):not([type="radio"]):focus {
border-color: #168fd3;
box-shadow:
0 0 0 3px
rgba(22, 143, 211, 0.11);
}
/* ==========================================================================
CHECKBOX / RADIO
========================================================================== */
.mda-ui .mda-selector-grid
input[type="checkbox"],
.mda-ui .mda-selector-grid
input[type="radio"] {
appearance: auto;
-webkit-appearance: auto;
width: 18px;
height: 18px;
min-width: 18px;
min-height: 18px;
display: block;
margin: 0 auto;
padding: 0;
border: 0;
accent-color: #168fd3;
cursor: pointer;
box-shadow: none;
}
/* ==========================================================================
FOOTER
========================================================================== */
.mda-ui .mda-selector-section__footer {
display: flex;
align-items: center;
padding: 10px 12px 12px;
border-top: 1px solid #e2edf3;
background: #fbfdff;
}
/* ==========================================================================
BOTÓN AGREGAR
========================================================================== */
.mda-ui .mda-selector-add {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 16px;
border: 0;
border-radius: 8px;
background: #168fd3;
color: #ffffff;
font-size: 13px;
font-weight: 800;
cursor: pointer;
box-shadow:
0 3px 8px
rgba(22, 143, 211, 0.18);
transition:
background 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
}
.mda-ui .mda-selector-add:hover {
background: #087fc2;
transform: translateY(-1px);
box-shadow:
0 4px 10px
rgba(22, 143, 211, 0.22);
}
.mda-ui .mda-selector-add__icon {
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid
rgba(255, 255, 255, 0.65);
border-radius: 50%;
font-size: 10px;
}
/* ==========================================================================
TABLA COMPACTA
========================================================================== */
.mda-ui .mda-selector-grid--compact {
min-width: 100%;
}
.mda-ui .mda-selector-grid--compact
thead th {
height: 56px;
}
.mda-ui .mda-selector-grid--compact
tbody td {
height: 52px;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 900px) {
.mda-ui .mda-selector-toolbar {
grid-template-columns: 1fr;
}
.mda-ui .mda-selector-table__header {
align-items: flex-start;
flex-direction: column;
}
.mda-ui .mda-selector-table__actions {
width: 100%;
}
}
@media (max-width: 600px) {
.mda-ui .mda-selector-table__body {
padding: 10px;
}
.mda-ui .mda-selector-section__header {
align-items: flex-start;
}
}
/* ==========================================================================
MDA TABLE SECTION / CONTENEDOR
========================================================================== */
.mda-ui .mda-table-section {
width: calc(
100% - (var(--mda-filter-card-margin-x) * 2)
);
margin-left:
var(--mda-filter-card-margin-x);
margin-right:
var(--mda-filter-card-margin-x);
min-width: 0;
margin-top:
var(--mda-table-section-margin-top);
background:
var(--mda-table-section-background);
border:
var(--mda-table-section-border-width)
solid
var(--mda-table-section-border-color);
border-radius:
var(--mda-table-section-radius);
box-shadow:
var(--mda-table-section-shadow);
overflow: hidden;
}
/* ==========================================================================
MDA TABLE SECTION / HEADER
========================================================================== */
.mda-ui .mda-table-section-header {
width: 100%;
min-height:
var(--mda-table-section-header-min-height);
display: flex;
align-items: center;
padding:
var(--mda-table-section-header-padding-y)
var(--mda-table-section-header-padding-x);
background:
var(--mda-table-section-header-background);
border-bottom:
var(--mda-table-section-header-border-width)
solid
var(--mda-table-section-header-border-color);
}
/* ==========================================================================
MDA TABLE SECTION / HEADING
========================================================================== */
.mda-ui .mda-table-section-heading {
min-width: 0;
display: flex;
align-items: center;
gap:
var(--mda-table-section-heading-gap);
}
/* ==========================================================================
MDA TABLE SECTION / TÍTULO
========================================================================== */
.mda-ui .mda-table-section-title {
min-width: 0;
display: flex;
align-items: center;
margin: 0;
color:
var(--mda-table-section-title-color);
font-size:
var(--mda-table-section-title-size);
font-weight:
var(--mda-table-section-title-weight);
line-height:
var(--mda-table-section-title-line-height);
}
/* ==========================================================================
MDA TABLE SECTION / MARCADOR DEL TÍTULO
========================================================================== */
.mda-ui .mda-table-section-title::before {
content: "";
width:
var(--mda-table-section-title-accent-width);
height:
var(--mda-table-section-title-accent-height);
flex:
0 0
var(--mda-table-section-title-accent-width);
margin-right:
var(--mda-table-section-heading-gap);
background:
var(--mda-table-section-title-accent-color);
border-radius:
var(--mda-table-section-title-accent-radius);
}
/* ==========================================================================
MDA TABLE SECTION / BODY
========================================================================== */
.mda-ui .mda-table-section-body {
width: 100%;
min-width: 0;
padding:
var(--mda-table-section-body-padding-y)
var(--mda-table-section-body-padding-x);
}
/* ==========================================================================
MDA TABLE SECTION / SOLO HEADER
========================================================================== */
.mda-ui
.mda-table-section
> .mda-table-section-header:last-child {
border-bottom: 0;
}
/* ==========================================================================
RESUMEN DE LA SALIDA
========================================================================== */
.mda-ui .mda-output-summary--right {
width: 100%;
display: flex;
justify-content: flex-end;
margin-top: 16px;
}
/* ==========================================================================
PANEL
========================================================================== */
.mda-ui .mda-output-summary--right .mda-output-summary__panel {
width: 46%;
min-width: 430px;
border: 1px solid #cfe0ea;
border-radius: 14px;
background: #ffffff;
overflow: hidden;
box-shadow:
0 5px 16px
rgba(34, 59, 78, 0.08);
}
/* ==========================================================================
HEADER
========================================================================== */
.mda-ui .mda-output-summary__header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-bottom: 1px solid #d8e8f1;
background:
linear-gradient(
90deg,
#f8fcff,
#eef8fd
);
}
.mda-ui .mda-output-summary__header-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #e1f3fd;
color: #168fd3;
font-size: 17px;
}
/* Título principal */
.mda-ui .mda-output-summary__title {
margin: 0;
color: #203b55;
font-size: 17px;
font-weight: 800;
line-height: 1.2;
}
/* Subtítulo */
.mda-ui .mda-output-summary__description {
margin: 3px 0 0;
color: #6a8298;
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
/* ==========================================================================
CONTENEDOR DE TOTALES
========================================================================== */
.mda-ui .mda-output-totals {
display: flex;
flex-direction: column;
gap: 9px;
padding: 12px;
}
/* ==========================================================================
FILA BASE
========================================================================== */
.mda-ui .mda-output-total {
min-height: 60px;
display: grid;
grid-template-columns:
40px
minmax(0, 1fr)
auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid #d9e5ed;
border-radius: 10px;
background: #f9fcfe;
}
/* ==========================================================================
ICONO
========================================================================== */
.mda-ui .mda-output-total__icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
font-size: 16px;
}
/* ==========================================================================
TEXTO
========================================================================== */
.mda-ui .mda-output-total__content {
min-width: 0;
}
.mda-ui .mda-output-total__label {
display: block;
color: #243d55;
font-size: 16px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-output-total__help {
display: block;
margin-top: 3px;
color: #71879a;
font-size: 12px;
font-weight: 500;
line-height: 1.25;
}
/* ==========================================================================
VALOR
========================================================================== */
.mda-ui .mda-output-total__value {
min-width: 135px;
text-align: right;
}
.mda-ui .mda-output-total__value input {
width: 100%;
padding: 0;
border: 0 !important;
outline: 0;
background: transparent !important;
color: #243d55;
font-size: 15px;
font-weight: 800;
text-align: right;
box-shadow: none !important;
}
.mda-ui .mda-output-total__value small {
display: block;
margin-top: 2px;
color: #71879a;
font-size: 11px;
font-weight: 500;
}
/* ==========================================================================
CANTIDAD TOTAL - AZUL
========================================================================== */
.mda-ui .mda-output-total--blue {
border-color: #cce5f5;
background:
linear-gradient(
90deg,
#f8fcff,
#eef8ff
);
}
.mda-ui .mda-output-total--blue .mda-output-total__icon {
background: #dceffc;
color: #137fc4;
}
/* ==========================================================================
SUB TOTAL - VERDE
========================================================================== */
.mda-ui .mda-output-total--green {
border-color: #c4e8dc;
background:
linear-gradient(
90deg,
#fbfefc,
#f3fcf8
);
}
.mda-ui .mda-output-total--green .mda-output-total__icon {
background: #def5eb;
color: #15976b;
}
/* ==========================================================================
IVA - NARANJA
========================================================================== */
.mda-ui .mda-output-total--orange {
border-color: #efdbad;
background:
linear-gradient(
90deg,
#fffdf8,
#fffaf0
);
}
.mda-ui .mda-output-total--orange .mda-output-total__icon {
background: #fff0cb;
color: #ce8108;
}
/* ==========================================================================
DEPRECIACIÓN - MORADO
========================================================================== */
.mda-ui .mda-output-total--purple {
border-color: #d2c7f7;
background:
linear-gradient(
90deg,
#fcfbff,
#f5f3ff
);
}
.mda-ui .mda-output-total--purple .mda-output-total__icon {
background: #ece8ff;
color: #7355e6;
}
/* ==========================================================================
TOTAL FINAL
========================================================================== */
.mda-ui .mda-output-total--total {
min-height: 68px;
border-color: #70b9df;
background:
linear-gradient(
135deg,
#eef9ff,
#dceffc
);
box-shadow:
0 3px 10px
rgba(22, 143, 211, 0.12);
}
.mda-ui .mda-output-total--total .mda-output-total__icon {
width: 42px;
height: 42px;
background: #168fd3;
color: #ffffff;
font-size: 18px;
}
.mda-ui .mda-output-total--total .mda-output-total__label {
color: #08486d;
font-size: 17px;
}
.mda-ui .mda-output-total--total .mda-output-total__help {
color: #52758f;
}
.mda-ui .mda-output-total--total .mda-output-total__value input {
color: #0879c0;
font-size: 17px;
font-weight: 900;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 900px) {
.mda-ui
.mda-output-summary--right
.mda-output-summary__panel {
width: 100%;
min-width: 0;
}
}
@media (max-width: 600px) {
.mda-ui .mda-output-total {
grid-template-columns:
38px
minmax(0, 1fr);
}
.mda-ui .mda-output-total__value {
grid-column: 2;
width: 100%;
min-width: 0;
text-align: left;
}
.mda-ui .mda-output-total__value input {
text-align: left;
}
}
/* ==========================================================================
MDA TABLE
CONTENEDOR DE SCROLL
==========================================================================
RESPONSABILIDAD:
- Mantener la tabla dentro de la sección.
- Permitir scroll horizontal.
- Permitir scroll vertical.
- Mantener la barra horizontal disponible sin bajar hasta el final
de todos los registros.
========================================================================== */
.mda-ui .mda-table-scroll {
width: 100%;
max-width: 100%;
min-width: 0;
max-height:
var(--mda-table-scroll-max-height);
overflow-x: auto;
overflow-y: auto;
background:
var(--mda-table-scroll-background);
-webkit-overflow-scrolling: touch;
scrollbar-width: auto;
scrollbar-color:
var(--mda-table-scrollbar-thumb)
var(--mda-table-scrollbar-track);
}
/* ==========================================================================
MDA TABLE / SCROLLBAR
========================================================================== */
.mda-ui .mda-table-scroll::-webkit-scrollbar {
width:
var(--mda-table-scrollbar-size);
height:
var(--mda-table-scrollbar-size);
}
.mda-ui .mda-table-scroll::-webkit-scrollbar-track {
background:
var(--mda-table-scrollbar-track);
}
.mda-ui .mda-table-scroll::-webkit-scrollbar-thumb {
background:
var(--mda-table-scrollbar-thumb);
border:
2px solid
var(--mda-table-scrollbar-track);
border-radius:
var(--mda-radius-pill);
}
.mda-ui .mda-table-scroll::-webkit-scrollbar-thumb:hover {
background:
var(--mda-table-scrollbar-thumb-hover);
}
/* ==========================================================================
MDA TABLE / BASE
========================================================================== */
.mda-ui .mda-table {
width: max-content !important;
min-width:
var(--mda-table-min-width);
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0;
table-layout: auto;
background:
var(--mda-table-background);
color:
var(--mda-table-text-color);
font-size:
var(--mda-table-font-size) !important;
}
/* ==========================================================================
MDA TABLE SECTION
SECCIÓN REUTILIZABLE PARA TABLAS
==========================================================================
ESTRUCTURA:
.mda-table-section
|
+-- .mda-table-section-header
| |
| +-- .mda-table-section-heading
| |
| +-- .mda-table-section-title
|
+-- .mda-table-section-body
|
+-- .mda-table-scroll
|
+-- .mda-table
========================================================================== */
/* ==========================================================================
MDA TABLE SECTION / CONTENEDOR
========================================================================== */
/* .mda-ui .mda-table-section {
width: 100%;
min-width: 0;
margin-top:
var(--mda-table-section-margin-top);
background:
var(--mda-table-section-background);
border:
var(--mda-table-section-border-width)
solid
var(--mda-table-section-border-color);
border-radius:
var(--mda-table-section-radius);
box-shadow:
var(--mda-table-section-shadow);
overflow: hidden;
} */
/* ==========================================================================
MDA TABLE SECTION / HEADER
========================================================================== */
.mda-ui .mda-table-section-header {
width: 100%;
min-height:
var(--mda-table-section-header-min-height);
display: flex;
align-items: center;
padding:
var(--mda-table-section-header-padding-y)
var(--mda-table-section-header-padding-x);
background:
var(--mda-table-section-header-background);
border-bottom:
var(--mda-table-section-header-border-width)
solid
var(--mda-table-section-header-border-color);
}
/* ==========================================================================
MDA TABLE SECTION / HEADING
========================================================================== */
.mda-ui .mda-table-section-heading {
min-width: 0;
display: flex;
align-items: center;
gap:
var(--mda-table-section-heading-gap);
}
/* ==========================================================================
MDA TABLE SECTION / TÍTULO
========================================================================== */
.mda-ui .mda-table-section-title {
min-width: 0;
display: flex;
align-items: center;
margin: 0;
color:
var(--mda-table-section-title-color);
font-size:
var(--mda-table-section-title-size);
font-weight:
var(--mda-table-section-title-weight);
line-height:
var(--mda-table-section-title-line-height);
}
/* ==========================================================================
MDA TABLE SECTION / MARCADOR DEL TÍTULO
========================================================================== */
.mda-ui .mda-table-section-title::before {
content: "";
width:
var(--mda-table-section-title-accent-width);
height:
var(--mda-table-section-title-accent-height);
flex:
0 0
var(--mda-table-section-title-accent-width);
margin-right:
var(--mda-table-section-heading-gap);
background:
var(--mda-table-section-title-accent-color);
border-radius:
var(--mda-table-section-title-accent-radius);
}
/* ==========================================================================
MDA TABLE SECTION / BODY
========================================================================== */
.mda-ui .mda-table-section-body {
width: 100%;
min-width: 0;
padding:
var(--mda-table-section-body-padding-y)
var(--mda-table-section-body-padding-x);
}
/* ==========================================================================
MDA TABLE SECTION / SOLO HEADER
========================================================================== */
.mda-ui
.mda-table-section
> .mda-table-section-header:last-child {
border-bottom: 0;
}
/* ==========================================================================
MDA TABLE / CONTENEDOR DE SCROLL
==========================================================================
El scroll pertenece únicamente a la tabla.
overflow-x: scroll
fuerza la existencia del área de desplazamiento horizontal.
max-height permite desplazarse verticalmente dentro de la tabla
sin tener que bajar hasta el final de todos los registros.
========================================================================== */
.mda-ui .mda-table-scroll {
width: 100%;
max-width: 100%;
min-width: 0;
max-height:
var(--mda-table-scroll-max-height);
overflow-x: scroll;
overflow-y: auto;
background:
var(--mda-table-scroll-background);
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
scrollbar-color:
var(--mda-table-scrollbar-thumb)
var(--mda-table-scrollbar-track);
}
/* ==========================================================================
MDA TABLE / SCROLLBAR
========================================================================== */
.mda-ui .mda-table-scroll::-webkit-scrollbar {
width:
var(--mda-table-scrollbar-size);
height:
var(--mda-table-scrollbar-size);
}
.mda-ui .mda-table-scroll::-webkit-scrollbar-track {
background:
var(--mda-table-scrollbar-track);
}
.mda-ui .mda-table-scroll::-webkit-scrollbar-thumb {
background:
var(--mda-table-scrollbar-thumb);
border:
2px solid
var(--mda-table-scrollbar-track);
border-radius:
var(--mda-radius-pill);
}
.mda-ui .mda-table-scroll::-webkit-scrollbar-thumb:hover {
background:
var(--mda-table-scrollbar-thumb-hover);
}
/* ==========================================================================
MDA TABLE / BASE
==========================================================================
IMPORTANTE:
No se establece un ancho específico para una cantidad concreta
de columnas.
Si una tabla tiene más columnas, su ancho natural aumenta y
.mda-table-scroll se encarga del desplazamiento horizontal.
========================================================================== */
.mda-ui .mda-table {
width:
var(--mda-table-width) !important;
min-width: 100%;
margin: 0 !important;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
background:
var(--mda-table-background);
color:
var(--mda-table-text-color);
font-size:
var(--mda-table-font-size) !important;
}
/* ==========================================================================
MDA TABLE / HEADER
========================================================================== */
.mda-ui .mda-table > thead > tr > th {
position: sticky;
top: 0;
z-index: 5;
min-width:
var(--mda-table-column-min-width);
width:
var(--mda-table-column-preferred-width);
max-width:
var(--mda-table-column-max-width);
padding:
var(--mda-table-cell-padding-y)
var(--mda-table-cell-padding-x) !important;
color:
var(--mda-table-header-color) !important;
background:
var(--mda-table-header-background) !important;
border-top: 0 !important;
border-right: 0 !important;
border-bottom:
1px solid
var(--mda-table-header-border-color) !important;
font-size:
var(--mda-table-header-font-size) !important;
font-weight:
var(--mda-table-header-font-weight) !important;
line-height:
var(--mda-table-cell-line-height);
text-align: left;
vertical-align: middle;
white-space:
var(--mda-table-header-white-space);
word-break:
var(--mda-table-cell-word-break);
overflow-wrap:
var(--mda-table-cell-overflow-wrap);
}
/* ==========================================================================
MDA TABLE / CELDAS
==========================================================================
El contenido nunca se oculta con ellipsis.
Cuando un texto supera el ancho disponible:
- baja de línea
- aumenta la altura de la fila
- continúa mostrando el contenido completo
========================================================================== */
.mda-ui .mda-table > tbody > tr > td {
min-width:
var(--mda-table-column-min-width);
width:
var(--mda-table-column-preferred-width);
max-width:
var(--mda-table-column-max-width);
padding:
var(--mda-table-cell-padding-y)
var(--mda-table-cell-padding-x) !important;
color:
var(--mda-table-text-color);
background:
var(--mda-table-row-background);
border-top: 0 !important;
border-right: 0 !important;
border-bottom:
1px solid
var(--mda-table-cell-border-color) !important;
font-size:
var(--mda-table-font-size) !important;
line-height:
var(--mda-table-cell-line-height);
text-align: left;
vertical-align: middle;
white-space:
var(--mda-table-cell-white-space);
word-break:
var(--mda-table-cell-word-break);
overflow-wrap:
var(--mda-table-cell-overflow-wrap);
overflow: visible;
text-overflow: clip;
transition:
background
var(--mda-table-row-transition);
}
/* ==========================================================================
MDA TABLE / FILAS ALTERNADAS
========================================================================== */
.mda-ui .mda-table > tbody > tr:nth-child(even) > td {
background:
var(--mda-table-row-even-background);
}
/* ==========================================================================
MDA TABLE / HOVER
========================================================================== */
.mda-ui .mda-table.table-hover > tbody > tr:hover > td,
.mda-ui .mda-table > tbody > tr:hover > td {
background:
var(--mda-table-row-hover-background) !important;
}
/* ==========================================================================
MDA TABLE / COLUMNA NUMÉRICA
==========================================================================
USO:
| Débitos |
1.250.000,00
|
========================================================================== */
.mda-ui .mda-table .mda-table-cell--numeric {
text-align: right !important;
white-space: nowrap;
color:
var(--mda-table-number-color);
font-weight:
var(--mda-table-number-weight);
}
/* ==========================================================================
MDA TABLE / FECHA
========================================================================== */
.mda-ui .mda-table .mda-table-cell--date {
text-align: center !important;
white-space: nowrap;
}
/* ==========================================================================
MDA TABLE / NO WRAP
==========================================================================
Para valores que nunca deben bajar de línea.
Ejemplo:
- códigos
- consecutivos
- identificadores cortos
========================================================================== */
.mda-ui .mda-table .mda-table-cell--nowrap {
white-space: nowrap;
}
/* ==========================================================================
MDA TABLE / COLUMNA COMPACTA
========================================================================== */
.mda-ui .mda-table .mda-table-cell--compact {
width:
var(--mda-table-column-compact-width);
min-width:
var(--mda-table-column-compact-width);
}
/* ==========================================================================
MDA TABLE / COLUMNA AMPLIA
========================================================================== */
.mda-ui .mda-table .mda-table-cell--wide {
width:
var(--mda-table-column-wide-width);
min-width:
var(--mda-table-column-wide-width);
max-width:
var(--mda-table-column-wide-width);
}
/* ==========================================================================
MDA TABLE / COLUMNA EXTRA AMPLIA
========================================================================== */
.mda-ui .mda-table .mda-table-cell--extra-wide {
width:
var(--mda-table-column-extra-wide-width);
min-width:
var(--mda-table-column-extra-wide-width);
max-width:
var(--mda-table-column-extra-wide-width);
}
/* ==========================================================================
MDA DATATABLE
CONTENEDOR GENERAL DE DATATABLES
========================================================================== */
.mda-ui .mda-datatable,
.mda-ui .mda-datatable > .dataTables_wrapper {
width:
var(--mda-datatable-width);
max-width: 100%;
min-width: 0;
}
/* ==========================================================================
MDA DATATABLE / HEADER SUPERIOR
==========================================================================
Contiene:
- título de la sección
- buscador
========================================================================== */
.mda-ui .mda-table-section-header {
justify-content: space-between;
gap: 12px;
}
/* ==========================================================================
MDA DATATABLE / BUSCADOR
========================================================================== */
.mda-ui .mda-table-section-header .dataTables_filter {
flex: 0 0 auto;
margin: 0;
padding: 0;
}
.mda-ui .mda-table-section-header .dataTables_filter label {
display: flex;
align-items: center;
margin: 0;
font-size:
var(--mda-datatable-search-font-size);
color:
var(--mda-text-secondary);
}
.mda-ui .mda-table-section-header .dataTables_filter input {
width:
var(--mda-datatable-search-width);
height:
var(--mda-datatable-search-height);
margin-left: 0;
padding:
0
var(--mda-datatable-search-padding-x);
color:
var(--mda-text-primary);
background:
var(--mda-datatable-search-background);
border:
var(--mda-border-width)
solid
var(--mda-datatable-search-border-color);
border-radius:
var(--mda-datatable-search-radius);
outline: none;
font-size:
var(--mda-datatable-search-font-size);
transition:
border-color var(--mda-transition-fast),
box-shadow var(--mda-transition-fast);
}
.mda-ui .mda-table-section-header .dataTables_filter input:focus {
border-color:
var(--mda-datatable-search-border-focus);
box-shadow:
var(--mda-datatable-search-focus-shadow);
}
/* ==========================================================================
MDA DATATABLE / PIE
==========================================================================
IMPORTANTE:
Este contenedor queda FUERA de .mda-table-scroll.
De esta forma:
- cantidad de registros
- información
- paginación
permanecen visibles aunque la tabla tenga scroll horizontal.
========================================================================== */
.mda-ui .mda-table-footer {
width: 100%;
min-height:
var(--mda-table-footer-min-height);
display: grid;
grid-template-columns:
auto
1fr
auto;
align-items: center;
gap:
var(--mda-table-footer-gap);
padding:
var(--mda-table-footer-padding-y)
var(--mda-table-footer-padding-x);
background:
var(--mda-table-footer-background);
border-top:
var(--mda-border-width)
solid
var(--mda-table-footer-border-color);
}
/* ==========================================================================
MDA DATATABLE / CONTROLES DEL PIE
========================================================================== */
.mda-ui .mda-table-footer .dataTables_length,
.mda-ui .mda-table-footer .dataTables_info,
.mda-ui .mda-table-footer .dataTables_paginate {
float: none;
clear: none;
margin: 0;
padding: 0;
color:
var(--mda-table-footer-color);
font-size:
var(--mda-table-footer-font-size);
}
/* ==========================================================================
MDA DATATABLE / CANTIDAD POR PÁGINA
========================================================================== */
.mda-ui .mda-table-footer .dataTables_length label {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
color:
var(--mda-table-footer-color);
font-size:
var(--mda-table-footer-font-size);
font-weight: 400;
}
.mda-ui .mda-table-footer .dataTables_length select {
width: auto;
min-height:
var(--mda-datatable-length-height);
margin: 0;
padding:
3px
var(--mda-datatable-length-padding-x);
color:
var(--mda-text-primary);
background:
var(--mda-datatable-length-background);
border:
var(--mda-border-width)
solid
var(--mda-datatable-length-border-color);
border-radius:
var(--mda-datatable-length-radius);
outline: none;
font-size:
var(--mda-table-footer-font-size);
}
/* ==========================================================================
MDA DATATABLE / INFORMACIÓN
========================================================================== */
.mda-ui .mda-table-footer .dataTables_info {
text-align: center;
}
/* ==========================================================================
MDA DATATABLE / PAGINACIÓN
========================================================================== */
.mda-ui .mda-table-footer .dataTables_paginate,
.mda-ui .mda-table-footer .dataTables_paginate > span {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap:
var(--mda-datatable-page-gap);
}
/* ==========================================================================
MDA DATATABLE / BOTÓN DE PÁGINA
========================================================================== */
.mda-ui
.mda-table-footer
.dataTables_paginate
.paginate_button {
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width:
var(--mda-datatable-page-min-width);
min-height:
var(--mda-datatable-page-height);
margin: 0 !important;
padding:
0
var(--mda-datatable-page-padding-x) !important;
color:
var(--mda-datatable-page-color) !important;
background:
var(--mda-datatable-page-background) !important;
border:
var(--mda-border-width)
solid
var(--mda-datatable-page-border-color) !important;
border-radius:
var(--mda-datatable-page-radius) !important;
box-shadow: none !important;
text-decoration: none !important;
font-size:
var(--mda-table-footer-font-size);
cursor: pointer;
}
/* ==========================================================================
MDA DATATABLE / HOVER
========================================================================== */
.mda-ui
.mda-table-footer
.dataTables_paginate
.paginate_button:hover {
color:
var(--mda-datatable-page-color) !important;
background:
var(--mda-datatable-page-background-hover) !important;
border-color:
var(--mda-datatable-page-border-hover) !important;
}
/* ==========================================================================
MDA DATATABLE / PÁGINA ACTUAL
========================================================================== */
.mda-ui
.mda-table-footer
.dataTables_paginate
.paginate_button.current,
.mda-ui
.mda-table-footer
.dataTables_paginate
.paginate_button.current:hover {
color:
var(--mda-datatable-page-current-color) !important;
background:
var(--mda-datatable-page-current-background) !important;
border-color:
var(--mda-datatable-page-current-border) !important;
font-weight: 700;
}
/* ==========================================================================
MDA DATATABLE / BOTÓN DESHABILITADO
========================================================================== */
.mda-ui
.mda-table-footer
.dataTables_paginate
.paginate_button.disabled,
.mda-ui
.mda-table-footer
.dataTables_paginate
.paginate_button.disabled:hover,
.mda-ui
.mda-table-footer
.dataTables_paginate
.paginate_button.disabled:active {
color:
var(--mda-datatable-page-disabled-color) !important;
background:
var(--mda-datatable-page-disabled-background) !important;
border-color:
var(--mda-datatable-page-disabled-border) !important;
cursor: default;
box-shadow: none !important;
}
/* ==========================================================================
MDA DATATABLE / FOCUS
========================================================================== */
.mda-ui .mda-table-footer .dataTables_length select:focus,
.mda-ui .mda-table-footer .dataTables_paginate .paginate_button:focus {
outline: none;
border-color:
var(--mda-primary) !important;
box-shadow:
var(--mda-control-focus-shadow) !important;
}
/* ==========================================================================
MDA DATATABLE / RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.mda-ui .mda-table-section-header {
flex-direction: column;
align-items: stretch;
}
.mda-ui .mda-table-section-header .dataTables_filter input {
width: 100%;
}
.mda-ui .mda-table-footer {
grid-template-columns: 1fr;
justify-items: start;
}
.mda-ui .mda-table-footer .dataTables_info {
text-align: left;
}
.mda-ui .mda-table-footer .dataTables_paginate {
justify-content: flex-start;
}
}
/* ==========================================================================
MDA DATATABLE / BARRA SUPERIOR
==========================================================================
Contiene:
- selector de registros
- buscador
IMPORTANTE:
Está fuera de .mda-table-scroll.
========================================================================== */
.mda-ui .mda-datatable-top {
width: 100%;
min-width: 0;
min-height:
var(--mda-datatable-top-min-height);
display: flex;
align-items: center;
justify-content: space-between;
gap:
var(--mda-datatable-top-gap);
padding:
var(--mda-datatable-top-padding-y)
var(--mda-datatable-top-padding-x);
background:
var(--mda-datatable-top-background);
border-bottom:
var(--mda-border-width)
solid
var(--mda-datatable-top-border-color);
}
/* ==========================================================================
MDA DATATABLE / CANTIDAD DE REGISTROS
========================================================================== */
.mda-ui .mda-datatable-length {
flex: 0 0 auto;
min-width: 0;
}
.mda-ui .mda-datatable-length .dataTables_length {
float: none;
margin: 0;
padding: 0;
}
.mda-ui .mda-datatable-length .dataTables_length label {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
color:
var(--mda-datatable-text-color);
font-size:
var(--mda-datatable-font-size);
font-weight: 500;
white-space: nowrap;
}
.mda-ui .mda-datatable-length .dataTables_length select {
min-width:
var(--mda-datatable-length-min-width);
height:
var(--mda-datatable-length-height);
margin: 0;
padding:
0
var(--mda-datatable-length-padding-x);
color:
var(--mda-text-primary);
background:
var(--mda-datatable-control-background);
border:
var(--mda-border-width)
solid
var(--mda-datatable-control-border);
border-radius:
var(--mda-datatable-control-radius);
outline: none;
font-size:
var(--mda-datatable-font-size);
cursor: pointer;
}
/* ==========================================================================
MDA DATATABLE / BUSCADOR
========================================================================== */
.mda-ui .mda-datatable-search {
flex: 0 1
var(--mda-datatable-search-width);
max-width:
var(--mda-datatable-search-width);
min-width: 180px;
}
.mda-ui .mda-datatable-search .dataTables_filter {
width: 100%;
float: none;
margin: 0;
padding: 0;
}
.mda-ui .mda-datatable-search .dataTables_filter label {
display: block;
width: 100%;
margin: 0;
font-size: 0;
}
.mda-ui .mda-datatable-search .dataTables_filter input {
width: 100%;
height:
var(--mda-datatable-search-height);
margin: 0;
padding:
0
var(--mda-datatable-search-padding-x);
color:
var(--mda-text-primary);
background:
var(--mda-datatable-control-background);
border:
var(--mda-border-width)
solid
var(--mda-datatable-control-border);
border-radius:
var(--mda-datatable-control-radius);
outline: none;
font-size:
var(--mda-datatable-font-size);
}
/* ==========================================================================
MDA DATATABLE / HOVER Y FOCUS
========================================================================== */
.mda-ui .mda-datatable-length select:hover,
.mda-ui .mda-datatable-search input:hover {
border-color:
var(--mda-datatable-control-border-hover);
}
.mda-ui .mda-datatable-length select:focus,
.mda-ui .mda-datatable-search input:focus {
border-color:
var(--mda-datatable-control-border-focus);
box-shadow:
var(--mda-control-focus-shadow);
}
/* ==========================================================================
MDA DATATABLE / SCROLL DE LA TABLA
==========================================================================
ÚNICAMENTE este elemento se mueve horizontalmente.
El buscador, selector, información y paginación permanecen fijos.
========================================================================== */
.mda-ui .mda-table-scroll {
width: 100%;
max-width: 100%;
min-width: 0;
max-height:
var(--mda-table-scroll-max-height);
overflow-x: auto;
overflow-y: auto;
background:
var(--mda-table-scroll-background);
-webkit-overflow-scrolling: touch;
scrollbar-gutter: stable;
}
/* ==========================================================================
MDA DATATABLE / BARRA INFERIOR
========================================================================== */
.mda-ui .mda-datatable-bottom {
width: 100%;
min-width: 0;
min-height:
var(--mda-datatable-bottom-min-height);
display: flex;
align-items: center;
justify-content: space-between;
gap:
var(--mda-datatable-bottom-gap);
padding:
var(--mda-datatable-bottom-padding-y)
var(--mda-datatable-bottom-padding-x);
background:
var(--mda-datatable-bottom-background);
border-top:
var(--mda-border-width)
solid
var(--mda-datatable-bottom-border-color);
}
/* ==========================================================================
MDA DATATABLE / INFORMACIÓN
========================================================================== */
.mda-ui .mda-datatable-info {
min-width: 0;
}
.mda-ui .mda-datatable-info .dataTables_info {
float: none;
margin: 0;
padding: 0;
color:
var(--mda-text-muted);
font-size:
var(--mda-datatable-font-size);
white-space: nowrap;
}
/* ==========================================================================
MDA DATATABLE / PAGINACIÓN
========================================================================== */
.mda-ui .mda-datatable-pagination {
flex: 0 0 auto;
}
.mda-ui .mda-datatable-pagination .dataTables_paginate {
float: none;
display: flex;
align-items: center;
gap:
var(--mda-datatable-page-gap);
margin: 0;
padding: 0;
}
.mda-ui
.mda-datatable-pagination
.dataTables_paginate
> span {
display: flex;
align-items: center;
gap:
var(--mda-datatable-page-gap);
}
/* ==========================================================================
MDA DATATABLE / BOTÓN DE PAGINACIÓN
========================================================================== */
.mda-ui
.mda-datatable-pagination
.paginate_button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width:
var(--mda-datatable-page-min-width);
min-height:
var(--mda-datatable-page-height);
margin: 0 !important;
padding:
0
var(--mda-datatable-page-padding-x) !important;
color:
var(--mda-text-primary) !important;
background:
var(--mda-datatable-page-background) !important;
border:
var(--mda-border-width)
solid
var(--mda-datatable-page-border) !important;
border-radius:
var(--mda-radius-sm) !important;
box-shadow: none !important;
font-size:
var(--mda-datatable-font-size);
text-decoration: none !important;
cursor: pointer;
}
/* ==========================================================================
MDA DATATABLE / PAGINACIÓN HOVER
========================================================================== */
.mda-ui
.mda-datatable-pagination
.paginate_button:hover {
color:
var(--mda-text-primary) !important;
background:
var(--mda-datatable-page-background-hover) !important;
border-color:
var(--mda-primary) !important;
}
/* ==========================================================================
MDA DATATABLE / PÁGINA ACTUAL
========================================================================== */
.mda-ui
.mda-datatable-pagination
.paginate_button.current,
.mda-ui
.mda-datatable-pagination
.paginate_button.current:hover {
color:
var(--mda-datatable-page-current-color) !important;
background:
var(--mda-datatable-page-current-background) !important;
border-color:
var(--mda-primary) !important;
font-weight: 700;
}
/* ==========================================================================
MDA DATATABLE / DESHABILITADO
========================================================================== */
.mda-ui
.mda-datatable-pagination
.paginate_button.disabled,
.mda-ui
.mda-datatable-pagination
.paginate_button.disabled:hover {
color:
var(--mda-text-muted) !important;
background:
var(--mda-surface) !important;
border-color:
var(--mda-border-soft) !important;
cursor: default;
}
/* =========================================================
Botones de acción
========================================================= */
.mda-ui .mda-danger-btn,
.mda-ui .mda-primary-btn,
.mda-ui .mda-success-btn,
.mda-ui .mda-warning-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border-radius: 6px;
background-color: #fff;
cursor: pointer;
transition: all 0.2s ease;
}
.mda-ui .mda-danger-btn i,
.mda-ui .mda-primary-btn i,
.mda-ui .mda-success-btn i,
.mda-ui .mda-warning-btn i {
font-size: 14px;
}
/* =========================================================
DANGER
========================================================= */
.mda-ui .mda-danger-btn {
border: 1px solid var(--mc_danger);
color: var(--mc_danger);
}
.mda-ui .mda-danger-btn:hover {
background-color: var(--mc_danger);
color: #fff;
box-shadow: 0 2px 6px rgba(220, 53, 69, 0.3);
}
/* =========================================================
PRIMARY
========================================================= */
.mda-ui .mda-primary-btn {
border: 1px solid var(--mc_primary);
color: var(--mc_primary);
}
.mda-ui .mda-primary-btn:hover {
background-color: var(--mc_primary);
color: #fff;
box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}
.mda-ui .mda-success-btn {
border: 1px solid var(--mc_success);
color: var(--mc_success);
}
.mda-ui .mda-success-btn:hover {
background-color: var(--mc_success);
color: #fff;
box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}
/* =========================================================
WARNING
========================================================= */
.mda-ui .mda-warning-btn {
border: 1px solid var(--mc_warning);
color: var(--mc_warning);
}
.mda-ui .mda-warning-btn:hover {
background-color: var(--mc_warning);
color: #fff;
box-shadow: 0 2px 6px rgba(255, 193, 7, 0.3);
}
/* =========================================================
ACTIVE
========================================================= */
.mda-ui .mda-danger-btn:active,
.mda-ui .mda-primary-btn:active,
.mda-ui .mda-warning-btn:active {
transform: scale(0.95);
}
/* =========================================================
FOCUS
========================================================= */
.mda-ui .mda-danger-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}
.mda-ui .mda-primary-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
.mda-ui .mda-warning-btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
}
/* =========================================================
DISABLED
========================================================= */
.mda-ui .mda-danger-btn:disabled,
.mda-ui .mda-primary-btn:disabled,
.mda-ui .mda-warning-btn:disabled {
border-color: #adb5bd;
background-color: #e9ecef;
color: #6c757d;
cursor: not-allowed;
box-shadow: none;
opacity: 0.7;
}
.mda-ui .mda-danger-btn:disabled:hover,
.mda-ui .mda-primary-btn:disabled:hover,
.mda-ui .mda-warning-btn:disabled:hover {
border-color: #adb5bd;
background-color: #e9ecef;
color: #6c757d;
box-shadow: none;
transform: none;
}
/* ==========================================================================
MDA DATATABLE / RESPONSIVE
========================================================================== */
@media (max-width: 768px) {
.mda-ui .mda-datatable-top {
flex-direction: column;
align-items: stretch;
}
.mda-ui .mda-datatable-search {
width: 100%;
max-width: 100%;
}
.mda-ui .mda-datatable-bottom {
flex-direction: column;
align-items: flex-start;
}
.mda-ui .mda-datatable-pagination {
width: 100%;
}
}
/* ==========================================================================
32. RESPONSIVE
========================================================================== */
/* --------------------------------------------------------------------------
32.1 HEADER DE REPORTES
-------------------------------------------------------------------------- */
@media (max-width: 1350px) {
#main #workspace .mda-ui .mda-report-header {
grid-template-columns: 1fr;
}
#main #workspace .mda-ui .mda-report-header-main {
display: grid;
grid-template-columns:
58px
minmax(0, 1fr);
align-items: center;
gap: 14px;
padding:
16px
18px;
}
#main #workspace .mda-ui .mda-report-header-icon {
width: 58px;
height: 58px;
flex: none;
font-size: 24px;
}
#main #workspace .mda-ui .mda-report-header-content {
width: 100%;
min-width: 0;
}
#main #workspace .mda-ui .mda-report-title {
width: 100%;
font-size: 19px;
word-break: normal;
overflow-wrap: normal;
}
#main #workspace .mda-ui .mda-report-description {
width: 100%;
max-width: 100%;
word-break: normal;
overflow-wrap: normal;
}
#main #workspace .mda-ui .mda-report-meta-row {
flex-wrap: wrap;
}
#main #workspace .mda-ui .mda-report-export-panel {
width: 100%;
min-width: 0;
border-left: 0;
border-top:
var(--mda-border-width)
solid
var(--mda-border-soft);
}
}
/* --------------------------------------------------------------------------
32.2 TABLET / MÓVIL
-------------------------------------------------------------------------- */
@media (max-width: 768px) {
#main #workspace .mda-ui .mda-report-header-icon {
width: 52px;
height: 52px;
flex: none;
font-size: 22px;
}
#main #workspace .mda-ui .mda-report-header-content {
width: 100%;
min-width: 0;
}
#main #workspace .mda-ui .mda-report-title {
font-size: 19px;
word-break: normal;
overflow-wrap: normal;
}
#main #workspace .mda-ui .mda-report-description {
width: 100%;
max-width: 100%;
word-break: normal;
overflow-wrap: normal;
}
#main #workspace .mda-ui .mda-report-meta-row {
flex-wrap: wrap;
}
.mda-ui .mda-filter-grid {
grid-template-columns: 1fr;
}
.mda-ui .mda-option-grid {
grid-template-columns: 1fr;
}
.mda-ui .mda-filter-actions {
justify-content: stretch;
}
.mda-ui .mda-filter-actions .mda-btn {
flex: 1;
}
.mda-ui .mda-export-trigger {
width: 100%;
}
.mda-ui .mda-export-dropdown {
width: 100%;
left: 0;
right: auto;
}
#main #workspace .mda-ui .mda-report-header {
grid-template-columns: 1fr;
}
#main #workspace .mda-ui .mda-report-header-main {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
align-items: start;
column-gap: 14px;
padding:
var(--mda-report-header-main-padding-y)
var(--mda-report-header-main-padding-x);
}
#main #workspace .mda-ui .mda-report-header-icon {
width: 52px;
height: 52px;
flex: none;
font-size: 22px;
margin-top: 2px;
}
#main #workspace .mda-ui .mda-report-header-content {
width: 100%;
min-width: 0;
}
#main #workspace .mda-ui .mda-report-title {
font-size: 19px;
line-height: 1.15;
word-break: normal;
overflow-wrap: normal;
}
#main #workspace .mda-ui .mda-report-description {
width: 100%;
max-width: 100%;
word-break: normal;
overflow-wrap: normal;
}
#main #workspace .mda-ui .mda-report-meta-row {
flex-wrap: wrap;
}
#main #workspace .mda-ui .mda-report-export-panel {
min-width: 0;
border-left: 0;
border-top:
var(--mda-border-width)
solid
var(--mda-border-soft);
}
}
/* --------------------------------------------------------------------------
32.3 MÓVIL PEQUEÑO
-------------------------------------------------------------------------- */
@media (max-width: 576px) {
#main #workspace .mda-ui .mda-report-header {
width: 100%;
max-width: 100%;
}
#main #workspace .mda-ui .mda-report-header-icon {
width:
var(--mda-report-mobile-icon-size);
height:
var(--mda-report-mobile-icon-size);
flex-basis:
var(--mda-report-mobile-icon-size);
font-size:
var(--mda-report-mobile-icon-font-size);
}
#main #workspace .mda-ui .mda-report-title {
font-size:
var(--mda-report-mobile-title-size);
}
#main #workspace .mda-ui .mda-report-export-actions {
flex-wrap: wrap;
}
}
/*ALMACEN*/
.mda-ui .mda-form-sections-v2 {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--mda-panel-gap);
}
.mda-ui .mda-form-panel {
width: 100%;
border: 1px solid var(--mda-panel-border);
border-radius: 14px;
background: var(--mda-color-ffffff);
box-shadow:
0 3px 10px var(--mda-color-rgba-31-66-94-0_07);
overflow: hidden;
}
.mda-ui .mda-form-panel__header {
width: 100%;
min-height: 74px;
display: flex;
align-items: center;
gap: 16px;
padding: 14px 24px;
}
.mda-ui .mda-form-panel__number {
width: var(--mda-panel-number-size);
height: var(--mda-panel-number-size);
flex: 0 0
var(--mda-panel-number-size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
color: var(--mda-color-ffffff);
font-size: 17px;
font-weight: 800;
line-height: 1;
box-shadow: 0 3px 8px var(--mda-color-rgba-32-62-90-0_13);
}
.mda-ui .mda-form-panel__heading {
min-width: 0;
}
.mda-ui .mda-form-panel__title {
margin: 0;
color: var(--mda-color-173752);
font-size: var(--mda-panel-title-size);
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-form-panel__description {
margin: 3px
0
0;
color: var(--mda-color-57748c);
font-size: var(--mda-panel-description-size);
font-weight: 500;
line-height: 1.3;
}
.mda-ui .mda-form-panel__body {
padding: var(--mda-panel-body-padding-y)
var(--mda-panel-body-padding-x);
background: linear-gradient(
180deg,
var(--mda-color-rgba-255-255-255-0_98),
var(--mda-color-rgba-247-251-254-0_94)
);
}
.mda-ui .mda-form-panel__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: 28px;
row-gap: 20px;
}
.mda-ui .mda-form-panel__field {
min-width: 0;
padding: 0;
}
.mda-ui .mda-form-panel__field--wide {
grid-column: 1 / -1;
}
.mda-ui .mda-form-panel .mda-field-icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-size: 17px;
}
.mda-ui .mda-form-panel .mda-field-label {
min-height: 0;
margin-bottom: 7px;
display: flex;
align-items: center;
gap: 10px;
}
.mda-ui .mda-form-panel .mda-field-title {
color: var(--mda-color-243d55);
font-size: 13.5px;
font-weight: 800;
}
.mda-ui .mda-form-panel .mda-field-help {
margin-top: 2px;
color: var(--mda-color-6f879b);
font-size: 12px;
line-height: 1.25;
}
.mda-ui .mda-required {
color: var(--mda-danger);
font-weight: 800;
}
.mda-ui .mda-form-panel .mda-input, .mda-ui .mda-form-panel .mda-select {
width: 100%;
min-height: 42px;
height: 42px;
padding: 0 12px;
border: 1px solid var(--mda-color-c7d9e8);
border-radius: 8px;
background: var(--mda-color-ffffff);
color: var(--mda-color-243d55);
font-size: 13px;
transition:
border-color .15s ease,
box-shadow .15s ease,
background .15s ease;
}
.mda-ui .mda-form-panel textarea.mda-input {
min-height: 90px;
height: auto;
padding: 10px 12px;
resize: vertical;
}
.mda-ui .mda-form-panel .select2-container {
width: 100% !important;
}
.mda-ui .mda-form-panel .select2-container .select2-selection {
min-height: 42px !important;
height: 42px !important;
border: 1px solid var(--mda-color-c7d9e8) !important;
border-radius: 8px !important;
background: var(--mda-color-ffffff) !important;
box-shadow: none !important;
}
.mda-ui .mda-form-panel
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
height: 42px;
line-height: 42px;
padding-left: 12px;
padding-right: 34px;
color: var(--mda-color-243d55);
font-size: 13px;
}
.mda-ui .mda-form-panel
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
height: 42px;
right: 7px;
}
.mda-ui .mda-form-panel--blue {
border-color: var(--mda-panel-blue-border);
}
.mda-ui .mda-form-panel--blue .mda-form-panel__header {
background: linear-gradient(
90deg,
var(--mda-panel-blue-header-start),
var(--mda-panel-blue-header-end)
);
}
.mda-ui .mda-form-panel--blue .mda-form-panel__number {
background: var(--mda-panel-blue-main);
}
.mda-ui .mda-form-panel--purple {
border-color: var(--mda-panel-purple-border);
}
.mda-ui .mda-form-panel--purple .mda-form-panel__header {
background: linear-gradient(
90deg,
var(--mda-panel-purple-header-start),
var(--mda-panel-purple-header-end)
);
}
.mda-ui .mda-form-panel--purple .mda-form-panel__number {
background: var(--mda-panel-purple-main);
}
.mda-ui .mda-form-panel--purple .mda-form-panel__field-icon {
color: var(--mda-panel-purple-main);
background: var(--mda-color-eeeaff);
}
.mda-ui .mda-form-panel--cyan {
border-color: var(--mda-panel-cyan-border);
}
.mda-ui .mda-form-panel--cyan .mda-form-panel__header {
background: linear-gradient(
90deg,
var(--mda-panel-cyan-header-start),
var(--mda-panel-cyan-header-end)
);
}
.mda-ui .mda-form-panel--cyan .mda-form-panel__number {
background: var(--mda-panel-cyan-main);
}
.mda-ui .mda-form-panel--cyan .mda-form-panel__field-icon {
color: var(--mda-panel-cyan-main);
background: var(--mda-color-e3f6fb);
}
@media (max-width: 900px) {
.mda-ui .mda-form-panel__grid {
grid-template-columns: minmax(0, 1fr);
}
.mda-ui .mda-form-panel__field--wide {
grid-column: auto;
}
}
/* ==========================================================================
02. PANEL DE SELECCIÓN
========================================================================== */
.mda-ui .mda-choice-panel {
width: 100%;
min-width: 0;
border: 1px solid var(--mda-color-c9ddea);
border-radius: 16px;
background: var(--mda-color-ffffff);
box-shadow: 0 4px 14px var(--mda-color-rgba-35-58-78-0_08);
overflow: hidden;
}
.mda-ui .mda-choice-panel__header {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 18px;
border-bottom: 1px solid
var(--mda-color-cddfeb);
background: linear-gradient(
90deg,
var(--mda-color-e4f3ff) 0%,
var(--mda-color-edf1ff) 50%,
var(--mda-color-eef9fd) 100%
);
}
.mda-ui .mda-choice-panel__header-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--mda-color-ffffff);
background: linear-gradient(
145deg,
var(--mda-color-42b3ef),
var(--mda-color-277fd5)
);
font-size: 19px;
box-shadow: 0 4px 10px var(--mda-color-rgba-39-127-213-0_18);
}
.mda-ui .mda-choice-panel__heading {
min-width: 0;
}
.mda-ui .mda-choice-panel__title {
margin: 0;
color: var(--mda-color-20394f);
font-size: 18px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-choice-panel__description {
margin: 4px 0 0;
color: var(--mda-color-637e95);
font-size: 13px;
font-weight: 500;
line-height: 1.4;
}
.mda-ui .mda-choice-panel__body {
display: grid;
grid-template-columns:
repeat(
2,
minmax(0, 1fr)
);
gap: 14px;
align-items: stretch;
padding: 14px;
}
.mda-ui .mda-choice-group {
min-width: 0;
padding: 13px;
border: 1px solid var(--mda-color-d5e4ee);
border-radius: 13px;
background: linear-gradient(
180deg,
var(--mda-color-fcfeff) 0%,
var(--mda-color-f7fbfe) 100%
);
}
.mda-ui .mda-choice-group__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.mda-ui .mda-choice-group__icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: var(--mda-color-178fd0);
background: var(--mda-color-dff2fc);
font-size: 17px;
}
.mda-ui .mda-choice-group__heading {
min-width: 0;
}
.mda-ui .mda-choice-group__heading strong {
display: block;
color: var(--mda-color-284158);
font-size: 15px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-choice-group__heading small {
display: block;
margin-top: 3px;
color: var(--mda-color-71879a);
font-size: 14px;
line-height: 1.3;
}
.mda-ui .mda-choice-group__options {
display: grid;
grid-template-columns: repeat(
2,
minmax(0, 1fr)
);
gap: 10px;
}
.mda-ui .mda-choice-card {
position: relative;
min-width: 0;
min-height: 94px;
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid
var(--mda-color-d4e2ec);
border-radius: 12px;
background: var(--mda-color-ffffff);
text-align: left;
cursor: pointer;
transition: transform var(--mda-transition-fast),
border-color var(--mda-transition-fast),
background var(--mda-transition-fast),
box-shadow var(--mda-transition-fast);
}
.mda-ui .mda-choice-card:hover {
transform: translateY(-1px);
border-color: var(--mda-color-a5cde5);
box-shadow: 0 4px 10px var(--mda-color-rgba-33-66-92-0_10);
}
.mda-ui .mda-choice-card__icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
font-size: 20px;
}
.mda-ui .mda-choice-card__content {
min-width: 0;
padding-right: 14px;
}
.mda-ui .mda-choice-card__content strong {
display: block;
color: var(--mda-color-263d53);
font-size: 15px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-choice-card__content small {
display: block;
margin-top: 4px;
color: var(--mda-color-71879a);
font-size: 12px;
line-height: 1.35;
}
.mda-ui .mda-choice-card__check {
position: absolute;
top: 9px;
right: 9px;
width: 21px;
height: 21px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid
var(--mda-color-cadbe6);
border-radius: 50%;
background: var(--mda-color-ffffff);
color: var(--mda-color-transparent);
font-size: 10px;
}
.mda-ui .mda-choice-card--selected {
border-width: 2px;
transform: translateY(-1px);
box-shadow: 0 5px 12px var(--mda-color-rgba-36-70-100-0_12);
}
.mda-ui .mda-choice-card--selected .mda-choice-card__check {
color: var(--mda-color-ffffff);
}
.mda-ui .mda-choice-card--blue .mda-choice-card__icon {
color: var(--mda-color-178fd4);
background: var(--mda-color-e1f2fd);
}
.mda-ui .mda-choice-card--blue.mda-choice-card--selected {
border-color: var(--mda-color-2196dc);
background: var(--mda-color-f0f9ff);
}
.mda-ui .mda-choice-card--blue.mda-choice-card--selected .mda-choice-card__check {
border-color: var(--mda-color-2196dc);
background: var(--mda-color-2196dc);
}
.mda-ui .mda-choice-card--green .mda-choice-card__icon {
color: var(--mda-color-25a66d);
background: var(--mda-color-e5f8ef);
}
.mda-ui .mda-choice-card--green.mda-choice-card--selected {
border-color: var(--mda-color-25a66d);
background: var(--mda-color-f1fbf6);
}
.mda-ui .mda-choice-card--green.mda-choice-card--selected .mda-choice-card__check {
border-color: var(--mda-color-25a66d);
background: var(--mda-color-25a66d);
}
.mda-ui .mda-choice-card--purple .mda-choice-card__icon {
color: var(--mda-color-7355e6);
background: var(--mda-color-ece8ff);
}
.mda-ui .mda-choice-card--purple.mda-choice-card--selected {
border-color: var(--mda-color-7355e6);
background: var(--mda-color-f5f3ff);
}
.mda-ui .mda-choice-card--purple.mda-choice-card--selected .mda-choice-card__check {
border-color: var(--mda-color-7355e6);
background: var(--mda-color-7355e6);
}
.mda-ui .mda-choice-card--cyan .mda-choice-card__icon {
color: var(--mda-color-169fb9);
background: var(--mda-color-e1f7fa);
}
.mda-ui .mda-choice-card--cyan.mda-choice-card--selected {
border-color: var(--mda-color-169fb9);
background: var(--mda-color-f0fbfd);
}
.mda-ui .mda-choice-card--cyan.mda-choice-card--selected .mda-choice-card__check {
border-color: var(--mda-color-169fb9);
background: var(--mda-color-169fb9);
}
.mda-ui .mda-choice-notice {
grid-column: 1 / -1;
min-width: 0;
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border: 1px solid
var(--mda-color-e8d198);
border-radius: 12px;
background: linear-gradient(
145deg,
var(--mda-color-fff9e9),
var(--mda-color-fff2cf)
);
color: var(--mda-color-644f27);
}
.mda-ui .mda-choice-notice__icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: var(--mda-color-ffffff);
background: var(--mda-color-d4a137);
font-size: 17px;
}
.mda-ui .mda-choice-notice__content strong {
display: block;
margin-bottom: 5px;
font-size: 14px;
font-weight: 800;
}
.mda-ui .mda-choice-notice__content span {
display: block;
font-size: 12px;
line-height: 1.45;
}
.mda-ui .mda-choice-native {
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;
opacity: 0 !important;
pointer-events: none !important;
}
.mda-ui .mda-choice-panel .mda-choice-native + .chosen-container {
display: none !important;
}
.mda-ui .mda-choice-panel .mda-choice-native + .select2-container {
display: none !important;
}
@media (max-width: 900px) {
.mda-ui .mda-choice-panel__body {
grid-template-columns: 1fr;
}
.mda-ui .mda-choice-notice {
grid-column: auto;
}
}
@media (max-width: 700px) {
.mda-ui .mda-choice-panel__body {
grid-template-columns: 1fr;
}
.mda-ui .mda-choice-group__options {
grid-template-columns: 1fr;
}
.mda-ui .mda-choice-notice {
grid-column: auto;
}
.mda-ui .mda-choice-card {
min-height: 82px;
}
}
/* ==========================================================================
03. TABLA EDITABLE
========================================================================== */
.mda-ui .mda-editable-table {
width: 100%;
min-width: 0;
overflow: hidden;
border: 1px solid var(--mda-color-cadfea);
border-radius: 16px;
background: var(--mda-color-ffffff);
box-shadow: 0 5px 16px var(--mda-color-rgba-34-59-78-0_07);
}
.mda-ui .mda-editable-table__header {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 13px 17px;
border-bottom: 1px solid var(--mda-color-d7e6ef);
background: linear-gradient(
90deg,
var(--mda-color-ffffff) 0%,
var(--mda-color-fbfdff) 65%,
var(--mda-color-f3f9fd) 100%
);
}
.mda-ui .mda-editable-table__heading {
min-width: 0;
display: flex;
align-items: center;
gap: 12px;
}
.mda-ui .mda-editable-table__icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
color: var(--mda-color-168fd3);
background: var(--mda-color-e7f5fd);
font-size: 19px;
}
.mda-ui .mda-editable-table__title {
margin: 0;
color: var(--mda-color-203b55);
font-size: 17px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-editable-table__description {
margin: 3px 0 0;
color: var(--mda-color-6a8298);
font-size: 16px;
line-height: 1.35;
}
.mda-ui .mda-editable-table__actions {
display: flex;
align-items: center;
gap: 9px;
}
.mda-ui .mda-editable-table__body {
padding: 0 12px 12px;
}
.mda-ui .mda-editable-table__scroll::-webkit-scrollbar {
height: 7px;
}
.mda-ui .mda-editable-table__scroll::-webkit-scrollbar-track {
background: var(--mda-color-eef3f6);
border-radius: 10px;
}
.mda-ui .mda-editable-table__scroll::-webkit-scrollbar-thumb {
background: var(--mda-color-91a7b5);
border-radius: 10px;
}
.mda-ui .mda-editable-table__table tbody td:last-child {
border-right: 1px solid var(--mda-color-e1ebf1) !important;
border-radius: 0 9px 9px 0;
}
.mda-ui .mda-editable-table__th {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
line-height: 1.15;
}
.mda-ui .mda-editable-table__th span {
display: block;
}
.mda-ui .mda-editable-table__th small {
display: block;
margin-top: 2px;
color: var(--mda-color-52758f);
font-size: 9.5px;
font-weight: 700;
}
.mda-ui .mda-editable-table__table tbody tr {
counter-increment: mda-row;
background: var(--mda-color-ffffff);
transition: background var(--mda-transition-fast);
}
.mda-ui .mda-editable-table .select2-container {
width: 100% !important;
max-width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
.mda-ui .mda-editable-table .select2-container .select2-selection--single {
height: 38px !important;
min-height: 38px !important;
border: 1px solid var(--mda-color-c8dce8) !important;
border-radius: 8px !important;
background: var(--mda-color-ffffff) !important;
}
.mda-ui .mda-editable-table .select2-container .select2-selection--single .select2-selection__rendered {
height: 36px !important;
padding-left: 10px !important;
padding-right: 28px !important;
color: var(--mda-color-304b63) !important;
font-size: 15px !important;
line-height: 36px !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mda-ui .mda-editable-table .select2-container .select2-selection--single .select2-selection__arrow {
height: 36px !important;
}
.mda-ui .mda-editable-table .select2-container--disabled .select2-selection {
background: var(--mda-color-edf1f4) !important;
border-color: var(--mda-color-dde4e9) !important;
opacity: 0.58;
}
.mda-ui .mda-editable-table .chosen-disabled .chosen-single, .mda-ui .mda-editable-table .chosen-disabled .chosen-choices {
background: var(--mda-color-edf1f4) !important;
opacity: 0.58;
}
.mda-ui .mda-editable-table__table .moneda {
text-align: right;
font-weight: 700;
}
.mda-ui .mda-editable-table__table .total_iva, .mda-ui .mda-editable-table__table .valor_t {
font-weight: 700;
}
.mda-ui .mda-editable-table .elimina:hover, .mda-ui .mda-editable-table .ver:hover, .mda-ui .mda-editable-table .info-adicional:hover {
transform: translateY(-1px);
}
.mda-ui .mda-editable-table__table th:nth-child(1), .mda-ui .mda-editable-table__table td:nth-child(1) {
width: 260px;
min-width: 260px;
}
.mda-ui .mda-editable-table__table th:nth-child(2), .mda-ui .mda-editable-table__table td:nth-child(2) {
width: 190px;
min-width: 190px;
}
.mda-ui .mda-editable-table__table th:nth-child(3), .mda-ui .mda-editable-table__table td:nth-child(3) {
width: 135px;
min-width: 135px;
}
.mda-ui .mda-editable-table__table th:nth-child(4), .mda-ui .mda-editable-table__table td:nth-child(4) {
width: 100px;
min-width: 100px;
}
.mda-ui .mda-editable-table__table th:nth-child(5), .mda-ui .mda-editable-table__table td:nth-child(5) {
width: 155px;
min-width: 155px;
}
.mda-ui .mda-editable-table__table th:nth-child(6), .mda-ui .mda-editable-table__table td:nth-child(6) {
width: 155px;
min-width: 155px;
}
.mda-ui .mda-editable-table__table th:nth-child(7), .mda-ui .mda-editable-table__table td:nth-child(7) {
width: 100px;
min-width: 100px;
}
.mda-ui .mda-editable-table__table th:nth-child(8), .mda-ui .mda-editable-table__table td:nth-child(8) {
width: 135px;
min-width: 135px;
}
.mda-ui .mda-editable-table__table th:nth-child(9), .mda-ui .mda-editable-table__table td:nth-child(9) {
width: 140px;
min-width: 140px;
}
.mda-ui .mda-editable-table__table th:nth-child(10), .mda-ui .mda-editable-table__table td:nth-child(10) {
width: 190px;
min-width: 190px;
}
.mda-ui .mda-editable-table__table th:nth-child(11), .mda-ui .mda-editable-table__table td:nth-child(11) {
width: 145px;
min-width: 145px;
}
.mda-ui .mda-editable-table__table th:nth-child(12), .mda-ui .mda-editable-table__table td:nth-child(12) {
width: 115px;
min-width: 115px;
}
.mda-ui .mda-editable-table__table th:nth-child(13), .mda-ui .mda-editable-table__table td:nth-child(13) {
width: 130px;
min-width: 130px;
}
.mda-ui .mda-editable-table__footer {
display: grid;
grid-template-columns: minmax(0, 1fr)
minmax(430px, 0.65fr);
gap: 16px;
align-items: start;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--mda-color-e0ebf2);
}
.mda-ui .mda-editable-table__footer-main {
min-width: 0;
}
.mda-ui .mda-editable-table__add-row {
position: relative;
width: 100%;
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 1px dashed var(--mda-color-8fcbea);
border-radius: 11px;
background: var(--mda-color-f8fcff);
color: var(--mda-color-08486d);
cursor: pointer;
transition: border-color var(--mda-transition-fast),
background var(--mda-transition-fast),
box-shadow var(--mda-transition-fast);
}
.mda-ui .mda-editable-table__add-row:hover {
border-color: var(--mda-color-299bd5);
background: var(--mda-color-eef9ff);
box-shadow: 0 3px 8px var(--mda-color-rgba-41-155-213-0_10);
}
.mda-ui .mda-editable-table__add-row-icon {
width: 26px;
height: 26px;
flex: 0 0 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--mda-color-299bd5);
color: var(--mda-color-ffffff);
font-size: 11px;
pointer-events: none;
}
.mda-ui .mda-editable-table__add-row-text {
font-size: 14px;
font-weight: 800;
pointer-events: none;
}
.mda-ui .mda-editable-table__add-row-trigger {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
opacity: 0;
cursor: pointer;
}
.mda-ui .mda-editable-table__add-row-trigger:disabled {
cursor: not-allowed;
}
.mda-ui .mda-editable-table__add-row:has( .mda-editable-table__add-row-trigger:disabled ) {
opacity: 0.55;
cursor: not-allowed;
}
.mda-ui .mda-editable-table__summary {
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.mda-ui .mda-editable-table__summary-item {
min-height: 64px;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--mda-color-d6e5ef);
border-radius: 11px;
background: var(--mda-color-f7fbfe);
}
.mda-ui .mda-editable-table__summary-icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 9px;
font-size: 15px;
}
.mda-ui .mda-editable-table__summary-content {
min-width: 0;
display: flex;
flex-direction: column;
}
.mda-ui .mda-editable-table__summary-label {
color: var(--mda-color-355069);
font-size: 11px;
font-weight: 700;
}
.mda-ui .mda-editable-table__summary-value {
width: 100%;
margin-top: 2px;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: var(--mda-color-transparent) !important;
font-size: 17px;
font-weight: 800;
line-height: 1.2;
box-shadow: none !important;
}
.mda-ui .mda-editable-table__summary-item--info {
border-color: var(--mda-color-cce5f5);
background: linear-gradient(
135deg,
var(--mda-color-f2faff),
var(--mda-color-eaf6fd)
);
}
.mda-ui .mda-editable-table__summary-item--info .mda-editable-table__summary-icon {
color: var(--mda-color-168fd0);
background: var(--mda-color-e1f3fd);
}
.mda-ui .mda-editable-table__summary-item--info .mda-editable-table__summary-value {
color: var(--mda-color-168fd0);
}
.mda-ui .mda-editable-table__summary-item--success {
border-color: var(--mda-color-c4e8dc);
background: linear-gradient(
135deg,
var(--mda-color-f3fcf8),
var(--mda-color-ebf9f4)
);
}
.mda-ui .mda-editable-table__summary-item--success .mda-editable-table__summary-icon {
color: var(--mda-color-15976b);
background: var(--mda-color-def5eb);
}
.mda-ui .mda-editable-table__summary-item--success .mda-editable-table__summary-value {
color: var(--mda-color-148d64);
}
.mda-ui .mda-editable-table__summary-item--warning {
border-color: var(--mda-color-efdbad);
background: linear-gradient(
135deg,
var(--mda-color-fffaf0),
var(--mda-color-fff4dc)
);
}
.mda-ui .mda-editable-table__summary-item--warning .mda-editable-table__summary-icon {
color: var(--mda-color-d28b16);
background: var(--mda-color-fff0cb);
}
.mda-ui .mda-editable-table__summary-item--warning .mda-editable-table__summary-value {
color: var(--mda-color-ce8108);
}
.mda-ui .mda-editable-table__summary-item--primary {
border-color: var(--mda-color-bcdff4);
background: linear-gradient(
135deg,
var(--mda-color-eef8ff),
var(--mda-color-e4f4fe)
);
}
.mda-ui .mda-editable-table__summary-item--primary .mda-editable-table__summary-icon {
color: var(--mda-color-137fc4);
background: var(--mda-color-dceffc);
}
.mda-ui .mda-editable-table__summary-item--primary .mda-editable-table__summary-value {
color: var(--mda-color-0879c0);
}
.mda-ui .mda-editable-table__footer-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
margin-top: 2px;
}
@media (max-width: 1000px) {
.mda-ui .mda-editable-table__footer {
grid-template-columns: 1fr;
}
.mda-ui .mda-editable-table__summary {
max-width: none;
}
}
@media (max-width: 800px) {
.mda-ui .mda-editable-table__header {
align-items: flex-start;
flex-direction: column;
}
.mda-ui .mda-editable-table__actions {
width: 100%;
}
}
@media (max-width: 600px) {
.mda-ui .mda-editable-table__summary {
grid-template-columns: 1fr;
}
}
.mda-ui .mda-editable-table__table input:not([type="hidden"]), .mda-ui .mda-editable-table__table select:not(.select2-hidden-accessible) {
width: 100% !important;
max-width: 100% !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 11px !important;
box-sizing: border-box !important;
border: 1px solid var(--mda-color-c8dbe7) !important;
border-radius: 9px !important;
background: var(--mda-color-ffffff);
color: var(--mda-color-30485e);
font-size: 14px !important;
line-height: 40px;
outline: none;
box-shadow: 0 1px 2px var(--mda-color-rgba-35-62-83-0_03);
transition: border-color 0.15s ease,
box-shadow 0.15s ease,
background 0.15s ease;
}
.mda-ui .mda-editable-table__table input:not([readonly]):not([disabled]):focus, .mda-ui .mda-editable-table__table select:not(.select2-hidden-accessible):not([disabled]):focus {
outline: none;
border-color: var(--mda-color-2798d5) !important;
box-shadow: 0 0 0 3px var(--mda-color-rgba-39-152-213-0_10);
}
.mda-ui .mda-editable-table__table .select2-container .select2-selection--single {
height: 40px !important;
border: 1px solid var(--mda-color-c8dbe7) !important;
border-radius: 9px !important;
background: var(--mda-color-ffffff) !important;
box-shadow: 0 1px 2px var(--mda-color-rgba-35-62-83-0_03);
}
.mda-ui .mda-editable-table__table .select2-container .select2-selection--single .select2-selection__rendered {
height: 38px !important;
padding-left: 11px !important;
padding-right: 30px !important;
line-height: 38px !important;
color: var(--mda-color-30485e) !important;
font-size: 12px !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.mda-ui .mda-editable-table__table .select2-container .select2-selection--single .select2-selection__arrow {
height: 38px !important;
}
.mda-ui .mda-editable-table__table .cantidad {
border-color: var(--mda-color-e8c36d) !important;
background: var(--mda-color-fffdf7) !important;
text-align: right;
font-weight: 700;
}
.mda-ui .mda-editable-table__table tbody td:nth-child(5), .mda-ui .mda-editable-table__table tbody td:nth-child(6), .mda-ui .mda-editable-table__table tbody td:nth-child(8), .mda-ui .mda-editable-table__table tbody td:nth-child(9) {
position: relative;
}
.mda-ui .mda-editable-table__table tbody td:nth-child(5)::after, .mda-ui .mda-editable-table__table tbody td:nth-child(6)::after, .mda-ui .mda-editable-table__table tbody td:nth-child(8)::after, .mda-ui .mda-editable-table__table tbody td:nth-child(9)::after {
content: "$";
position: absolute;
left: 8px;
top: 50%;
width: 34px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
border-right: 1px solid var(--mda-color-d7e3eb);
border-radius: 8px
0
0
8px;
background: var(--mda-color-eef5f9);
color: var(--mda-color-43637b);
font-size: 14px;
font-weight: 800;
line-height: 1;
pointer-events: none;
z-index: 2;
}
.mda-ui .mda-editable-table__table tbody td:nth-child(5) input, .mda-ui .mda-editable-table__table tbody td:nth-child(6) input, .mda-ui .mda-editable-table__table tbody td:nth-child(8) input, .mda-ui .mda-editable-table__table tbody td:nth-child(9) input {
padding-left: 44px !important;
padding-right: 10px !important;
text-align: right;
font-weight: 700;
}
.mda-ui .mda-editable-table__table tbody td:nth-child(7) input {
text-align: right;
padding-right: 12px !important;
}
.mda-ui .mda-editable-table__table input[readonly] {
color: var(--mda-color-000000) !important;
background: var(--mda-color-edf3f6) !important;
border-color: var(--mda-color-d7e2e8) !important;
opacity: 0.70;
cursor: default;
}
.mda-ui .mda-editable-table__table tbody td:nth-child(8):has(input[readonly])::after, .mda-ui .mda-editable-table__table tbody td:nth-child(9):has(input[readonly])::after {
background: var(--mda-color-e4ebef);
color: var(--mda-color-82929d);
opacity: 0.75;
}
.mda-ui .mda-editable-table__table input:disabled, .mda-ui .mda-editable-table__table select:not(.select2-hidden-accessible):disabled {
color: var(--mda-color-8998a3) !important;
background: var(--mda-color-edf1f4) !important;
border-color: var(--mda-color-dce4e9) !important;
opacity: 0.55;
cursor: not-allowed;
}
.mda-ui .mda-editable-table__table tbody td:nth-child(5):has(input:disabled)::after, .mda-ui .mda-editable-table__table tbody td:nth-child(6):has(input:disabled)::after {
background: var(--mda-color-e3e9ed);
color: var(--mda-color-929fa8);
opacity: 0.58;
}
.mda-ui .mda-editable-table .select2-container--disabled .select2-selection--single {
background: var(--mda-color-edf1f4) !important;
border-color: var(--mda-color-dce4e9) !important;
opacity: 0.55;
cursor: not-allowed;
}
.mda-ui .mda-editable-table__table thead th {
height: 58px;
padding: 8px 9px !important;
background: linear-gradient(
180deg,
var(--mda-color-edf7fc),
var(--mda-color-e5f1f8)
) !important;
border: 0 !important;
border-bottom: 1px solid
var(--mda-color-cfe0ea) !important;
color: var(--mda-color-176394);
font-size: 17px;
font-weight: 800;
text-align: center;
vertical-align: middle;
}
.mda-ui .mda-editable-table__th > i {
color: var(--mda-color-1597d5);
font-size: 14px;
margin-right: 3px;
}
.mda-ui .mda-editable-table__table tbody tr:hover td {
background: var(--mda-color-f9fcfe);
}
.mda-ui .mda-editable-table__table tbody td:first-child {
border-left: 1px solid var(--mda-color-e1ebf1) !important;
border-radius: 9px 0 0 9px;
position: relative;
padding-left: 60px !important;
}
.mda-ui .mda-editable-table__table tbody td:first-child::before {
content: counter(mda-row);
position: absolute;
left: 6px;
top: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transform: translateY(-50%);
border-radius: 8px;
background: var(--mda-color-eaf5fb);
color: var(--mda-color-138dce);
font-size: 14px;
font-weight: 800;
z-index: 2;
}
.mda-ui .mda-editable-table__row-actions, .mda-ui .mda-entry-products-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: nowrap;
}
.mda-ui .mda-editable-table .elimina, .mda-ui .mda-editable-table .ver, .mda-ui .mda-editable-table .info-adicional {
width: 34px !important;
height: 34px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 26px !important;
cursor: pointer;
transition: transform var(--mda-transition-fast),
background var(--mda-transition-fast),
border-color var(--mda-transition-fast);
flex: 0 0 34px;
padding: 0 !important;
}
.mda-ui .mda-editable-table .elimina {
border: 1px solid var(--mda-color-ffffff);
color: var(--mda-color-f04455);
background: var(--mda-color-fff8f8);
}
.mda-ui .mda-editable-table .ver {
border: 1px solid var(--mda-color-9dd1eb);
color: var(--mda-color-128fd0);
background: var(--mda-color-f4fbff);
}
.mda-ui .mda-editable-table__table {
width: max-content !important;
min-width: 100% !important;
max-width: none !important;
margin: 0 !important;
border-collapse: separate;
border-spacing: 0 7px;
table-layout: fixed !important;
counter-reset: mda-row;
}
.mda-ui .mda-editable-table__table .select2-container {
width: 100% !important;
display: block !important;
max-width: 100% !important;
position: relative !important;
box-sizing: border-box !important;
}
.mda-ui .mda-editable-table__table .select2-selection--single {
width: 100% !important;
height: 38px !important;
min-height: 38px !important;
display: block !important;
border: 1px solid var(--mda-color-91afbf) !important;
border-radius: 8px !important;
background: var(--mda-color-ffffff) !important;
box-sizing: border-box !important;
}
.mda-ui .mda-editable-table__table .select2-selection__rendered {
width: 100% !important;
height: 36px !important;
padding-left: 10px !important;
padding-right: 28px !important;
line-height: 36px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
.mda-ui .mda-editable-table__table .select2-selection__arrow {
height: 36px !important;
}
.mda-ui .mda-editable-table__table select.select2-hidden-accessible {
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;
}
.mda-ui .mda-editable-table__table tbody td {
background: var(--mda-color-ffffff);
border-top: 1px solid var(--mda-color-e1ebf1) !important;
border-bottom: 1px solid var(--mda-color-e1ebf1) !important;
height: 58px;
padding: 8px 7px !important;
border: 0 !important;
vertical-align: middle;
position: relative;
overflow: visible !important;
}
.mda-ui .mda-editable-table__scroll {
width: 100%;
overflow-x: auto !important;
overflow-y: visible !important;
padding-bottom: 5px;
scrollbar-width: thin;
scrollbar-color: var(--mda-color-91a7b5) var(--mda-color-eef3f6);
}
/* ==========================================================================
04. ANEXOS
========================================================================== */
.mda-ui .mda-attachment-panel {
width: 100%;
overflow: hidden;
border: 1px solid var(--mda-color-cbdfea);
border-radius: 15px;
background: var(--mda-color-ffffff);
box-shadow: 0 4px 14px var(--mda-color-rgba-35-58-78-0_07);
margin-top: 30px;
}
.mda-ui .mda-attachment-panel__header {
min-height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 13px 17px;
border-bottom: 1px solid var(--mda-color-d5e5ef);
background: linear-gradient(
90deg,
var(--mda-color-ffffff),
var(--mda-color-f7fbfe)
);
}
.mda-ui .mda-attachment-panel__heading {
display: flex;
align-items: center;
gap: 12px;
}
.mda-ui .mda-attachment-panel__icon {
width: 43px;
height: 43px;
flex: 0 0 43px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 11px;
color: var(--mda-color-138fd3);
background: var(--mda-color-e7f5fd);
font-size: 20px;
}
.mda-ui .mda-attachment-panel__title {
margin: 0;
color: var(--mda-color-203b55);
font-size: 17px;
font-weight: 800;
line-height: 1.2;
}
.mda-ui .mda-attachment-panel__description {
margin: 3px 0 0;
color: var(--mda-color-6a8398);
font-size: 12px;
}
.mda-ui .mda-attachment-panel__actions {
display: flex;
align-items: center;
gap: 8px;
}
.mda-ui .mda-attachment-panel__body {
padding: 12px;
}
.mda-ui .mda-attachment-panel__table-wrap {
width: 100%;
overflow-x: auto;
border: 1px solid var(--mda-color-d5e5ef);
border-radius: 11px;
background: var(--mda-color-ffffff);
}
.mda-ui .mda-attachment-table {
width: 100% !important;
margin: 0 !important;
border-collapse: collapse !important;
table-layout: fixed;
}
.mda-ui .mda-attachment-table thead th {
height: 48px;
padding: 8px 10px !important;
border: 0 !important;
background: linear-gradient(
180deg,
var(--mda-color-edf7fc),
var(--mda-color-e6f2f8)
) !important;
color: var(--mda-color-176495);
font-size: 17px;
font-weight: 800;
text-align: center;
vertical-align: middle;
}
.mda-ui .mda-attachment-table thead th span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.mda-ui .mda-attachment-table thead th i {
color: var(--mda-color-1597d5);
font-size: 13px;
}
.mda-ui .mda-attachment-table__check {
width: 55px;
}
.mda-ui .mda-attachment-table__date {
width: 160px;
}
.mda-ui .mda-attachment-table__description {
width: 34%;
}
.mda-ui .mda-attachment-table__document {
width: 32%;
}
.mda-ui .mda-attachment-table__actions {
width: 110px;
}
.mda-ui .mda-attachment-table tbody td {
height: 56px;
padding: 8px !important;
border: 0 !important;
border-bottom: 1px solid var(--mda-color-e3edf3) !important;
background: var(--mda-color-ffffff);
vertical-align: middle;
}
.mda-ui .mda-attachment-table tbody tr:hover td {
background: var(--mda-color-f9fcfe);
}
.mda-ui .mda-attachment-table__input {
width: 100% !important;
height: 38px;
padding: 0 10px;
box-sizing: border-box;
border: 1px solid var(--mda-color-c9dce8);
border-radius: 8px;
background: var(--mda-color-ffffff);
color: var(--mda-color-30495f);
font-size: 12px;
outline: none;
}
.mda-ui .mda-attachment-table__input[readonly] {
background: var(--mda-color-edf3f6);
color: var(--mda-color-708492);
opacity: 0.75;
}
.mda-ui .mda-attachment-table input[type="checkbox"] {
width: 17px;
height: 17px;
display: block;
margin: auto;
accent-color: var(--mda-color-2196d4);
}
.mda-ui .mda-attachment-file {
display: flex;
justify-content: center;
}
.mda-ui .mda-attachment-file__link {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 11px;
border: 1px solid var(--mda-color-c7deec);
border-radius: 8px;
background: var(--mda-color-f6fbfe);
color: var(--mda-color-276d99);
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.mda-ui .mda-attachment-file__icon {
color: var(--mda-color-e15361);
font-size: 17px;
}
.mda-ui .mda-attachment-file__link:hover {
border-color: var(--mda-color-70b9df);
background: var(--mda-color-eef9ff);
text-decoration: none;
}
.mda-ui .mda-attachment-table__row-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.mda-ui .mda-attachment-table .elimina {
width: 32px !important;
height: 32px !important;
padding: 6px;
box-sizing: border-box;
border: 1px solid var(--mda-color-ffffff00);
border-radius: 8px;
background: var(--mda-color-fff7f8);
cursor: pointer;
transition: transform 0.15s ease,
background 0.15s ease;
}
.mda-ui .mda-attachment-table .elimina:hover {
transform: translateY(-1px);
background: var(--mda-color-ffedef);
}
@media (max-width: 760px) {
.mda-ui .mda-attachment-panel__header {
align-items: flex-start;
flex-direction: column;
}
.mda-ui .mda-attachment-panel__actions {
width: 100%;
}
.mda-ui .mda-attachment-table {
min-width: 850px;
}
}
/* =========================================================
CARGA DE ARCHIVO EXCEL
========================================================= */
.mda-ui .mda-excel-upload {
width: 100%;
min-height: 132px;
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 22px;
border: 1px solid var(--mda-color-cfe0ee);
border-radius: 12px;
background: var(--mda-color-f4faff);
box-sizing: border-box;
}
.mda-ui .mda-excel-upload__icon {
width: 74px;
height: 74px;
min-width: 74px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 14px;
background: var(--mda-color-ddebfb);
color: var(--mda-color-1778d3);
font-size: 28px;
}
.mda-ui .mda-excel-upload__content {
flex: 1;
min-width: 0;
}
.mda-ui .mda-excel-upload__label {
display: block;
margin: 0 0 4px 0;
color: var(--mda-color-173766);
font-size: 25px;
line-height: 1.25;
font-weight: 700;
}
.mda-ui .mda-excel-upload__help {
display: block;
margin-bottom: 16px;
color: var(--mda-color-6f8498);
font-size: 17px;
line-height: 1.35;
}
.mda-ui .mda-excel-upload__row {
display: flex;
align-items: center;
gap: 18px;
width: 100%;
}
.mda-ui .mda-excel-upload__input {
flex: 1;
min-width: 0;
height: 48px;
padding: 7px 10px;
border: 1px solid var(--mda-color-d3dfea);
border-radius: 10px;
background: var(--mda-color-ffffff);
color: var(--mda-color-354b63);
font-size: 17px;
box-sizing: border-box;
}
.mda-ui .mda-excel-upload__input::file-selector-button {
height: 32px;
margin-right: 14px;
padding: 0 16px;
border: 0;
border-radius: 7px;
background: var(--mda-color-eef3f8);
color: var(--mda-color-546a80);
cursor: pointer;
font-size: 17px;
font-weight: 700;
}
.mda-ui .mda-excel-upload__button {
height: 48px;
min-width: 210px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 24px;
border: none;
border-radius: 10px;
background: linear-gradient(180deg, var(--mda-color-0c7ef2) 0%, var(--mda-color-056fe2) 100%);
color: var(--mda-color-ffffff);
cursor: pointer;
font-size: 15px;
font-weight: 700;
line-height: 1;
box-shadow: 0 6px 16px var(--mda-color-rgba-6-116-232-0_20);
transition: all 0.2s ease;
}
.mda-ui .mda-excel-upload__button i {
font-size: 18px;
}
.mda-ui .mda-excel-upload__button:hover {
background: linear-gradient(180deg, var(--mda-color-0b75e0) 0%, var(--mda-color-055fc2) 100%);
transform: translateY(-1px);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.mda-ui .mda-excel-upload__row {
flex-direction: column;
align-items: stretch;
}
.mda-ui .mda-excel-upload__button {
width: 100%;
min-width: 100%;
}
}
.mda-ui .mda-excel-import__title {
margin: 0 0 6px 0 !important;
color: var(--mda-color-163a68);
font-size: 22px !important;
line-height: 1.2 !important;
font-weight: 700 !important;
}
.mda-ui .mda-excel-import__description {
margin: 0 !important;
color: var(--mda-color-60758e);
font-size: 14px !important;
line-height: 1.45 !important;
}
.mda-ui .mda-excel-import__icon {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: 13px;
font-size: 28px;
}
/* ==========================================================================
07. AJUSTE FINAL DEL FORMULARIO DE ENTRADA DE ALMACÉN
--------------------------------------------------------------------------
PROPÓSITO:
Esta capa conserva ajustes visuales específicos que, por prioridad de
cascada, deben aplicarse después de la definición base del formulario.
IMPORTANTE:
- Se mantiene en esta posición para no alterar el comportamiento existente.
- No modifica IDs, eventos, readonly, disabled, Select2 ni lógica funcional.
- Todos los colores consumen la paleta global definida en .mda-ui.
- No agregar colores directos en este bloque; utilizar variables --mda-*.
========================================================================== */
.mda-ui .mda-form-sections-v2 {
gap: 22px !important;
}
.mda-ui .mda-form-panel {
border-radius: 16px !important;
border-width: 1px !important;
box-shadow: 0 5px 18px var(--mda-color-rgba-31-66-94-0_09) !important;
}
.mda-ui .mda-form-panel__header {
min-height: 78px !important;
padding: 16px 24px !important;
gap: 16px !important;
}
.mda-ui .mda-form-panel__number {
width: 46px !important;
height: 46px !important;
flex: 0 0 46px !important;
border-radius: 12px !important;
font-size: 20px !important;
}
.mda-ui .mda-form-panel__title {
font-size: 18px !important;
}
.mda-ui .mda-form-panel__description {
margin-top: 4px !important;
font-size: 13px !important;
font-weight: 400 !important;
}
.mda-ui .mda-form-panel__body {
padding: 20px 24px 22px !important;
background: var(--mda-color-ffffff) !important;
}
.mda-ui .mda-form-panel__grid {
display: grid !important;
grid-template-columns:
repeat(3, minmax(0, 1fr)) !important;
column-gap: 32px !important;
row-gap: 22px !important;
}
.mda-ui .mda-form-panel__field {
padding: 0 !important;
background: var(--mda-color-transparent) !important;
}
.mda-ui .mda-form-panel__field--wide {
grid-column: 1 / -1 !important;
}
.mda-ui .mda-form-panel .mda-field-label {
min-height: 44px !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 11px !important;
}
.mda-ui .mda-form-panel .mda-field-icon {
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 11px !important;
font-size: 18px !important;
}
.mda-ui .mda-form-panel .mda-field-title {
font-size: 14px !important;
font-weight: 800 !important;
}
.mda-ui .mda-form-panel .mda-field-help {
margin-top: 3px !important;
font-size: 12.5px !important;
line-height: 1.3 !important;
}
.mda-ui .mda-form-panel .mda-input,
.mda-ui .mda-form-panel .mda-select {
width: 100% !important;
min-height: 44px !important;
height: 44px !important;
padding: 0 13px !important;
border: 1px solid var(--mda-color-c7d9e8) !important;
border-radius: 8px !important;
background: var(--mda-color-ffffff) !important;
color: var(--mda-color-243d55) !important;
font-size: 13px !important;
}
.mda-ui .mda-form-panel textarea.mda-input {
min-height: 96px !important;
height: auto !important;
padding: 11px 13px !important;
}
.mda-ui .mda-form-panel .select2-container {
width: 100% !important;
}
.mda-ui .mda-form-panel
.select2-container--default
.select2-selection--single {
height: 44px !important;
min-height: 44px !important;
border: 1px solid var(--mda-color-c7d9e8) !important;
border-radius: 8px !important;
background: var(--mda-color-ffffff) !important;
}
.mda-ui .mda-form-panel
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
height: 44px !important;
line-height: 44px !important;
padding-left: 13px !important;
padding-right: 35px !important;
color: var(--mda-color-243d55) !important;
font-size: 13px !important;
}
.mda-ui .mda-form-panel
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
height: 44px !important;
right: 8px !important;
}
@media (max-width: 1100px) {
.mda-ui .mda-form-panel__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 750px) {
.mda-ui .mda-form-panel__grid {
grid-template-columns:
minmax(0, 1fr) !important;
}
}
/* TEXTO DEL HOVER GLOBAL */
/* ==========================================================================
MODAL - DATOS ADICIONALES
========================================================================== */
#jquery-msg-content:has(.mda-additional-config) {
width: calc(100% - 70px) !important;
max-width: 1180px !important;
height: calc(100dvh - 28px) !important;
max-height: calc(100dvh - 28px) !important;
top: 14px !important;
left: 50% !important;
transform: translateX(-50%) !important;
padding: 0 !important;
background: var(--mda-color-ffffff) !important;
border: 1px solid var(--mda-color-d9e4f3) !important;
border-radius: 16px !important;
box-shadow:
0 24px 70px var(--mda-color-rgba-25-40-78-0_28) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ========================================================================
CONTENIDO INTERNO DEL PLUGIN
======================================================================== */
#jquery-msg-content:has(.mda-additional-config) > div {
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ========================================================================
CONTENEDOR PRINCIPAL
======================================================================== */
.mda-additional-config {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
background: var(--mda-color-ffffff) !important;
font-size: 14px !important;
box-sizing: border-box !important;
}
/* ========================================================================
HEADER
======================================================================== */
.mda-additional-config__header {
flex: 0 0 auto;
padding: 20px 26px 13px !important;
background: var(--mda-color-ffffff) !important;
}
.mda-additional-config__heading {
display: flex;
flex-direction: column;
gap: 5px;
}
.mda-additional-config__title {
margin: 0 !important;
color: var(--mda-color-11245d) !important;
font-size: 24px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
}
.mda-additional-config__description {
margin: 0 !important;
color: var(--mda-color-7485a8) !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* ========================================================================
RESUMEN DEL PRODUCTO
======================================================================== */
.mda-additional-product {
display: flex !important;
align-items: stretch !important;
flex: 0 0 auto;
min-height: 82px !important;
margin: 0 26px 14px !important;
background:
linear-gradient(
90deg,
var(--mda-color-fbfcff) 0%,
var(--mda-color-f7faff) 100%
) !important;
border: 1px solid var(--mda-color-d9e4f3) !important;
border-radius: 13px !important;
overflow: hidden !important;
}
/* ========================================================================
INFORMACIÓN PRODUCTO
======================================================================== */
.mda-additional-product__main {
display: flex !important;
align-items: center !important;
flex: 1 !important;
min-width: 0 !important;
padding: 14px 22px !important;
}
.mda-additional-product__item {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
min-width: 205px !important;
}
.mda-additional-product__item--name {
flex: 1 !important;
}
.mda-additional-product__separator {
width: 1px !important;
height: 44px !important;
margin: 0 24px !important;
background: var(--mda-color-dbe4f1) !important;
}
.mda-additional-product__label {
color: var(--mda-color-7688a9) !important;
font-size: 14px !important;
font-weight: 500 !important;
}
.mda-additional-product__value {
color: var(--mda-color-10245e) !important;
font-size: 16px !important;
font-weight: 800 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ========================================================================
CANTIDAD
======================================================================== */
.mda-additional-product__quantity {
display: flex !important;
align-items: center !important;
min-width: 235px !important;
padding: 14px 22px !important;
gap: 14px !important;
background:
linear-gradient(
135deg,
var(--mda-color-edf5ff) 0%,
var(--mda-color-e5efff) 100%
) !important;
}
.mda-additional-product__quantity-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
color: var(--mda-color-147ff5) !important;
font-size: 28px !important;
}
.mda-additional-product__quantity-content {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.mda-additional-product__quantity-content span {
color: var(--mda-color-65799e) !important;
font-size: 14px !important;
}
.mda-additional-product__quantity-content strong {
color: var(--mda-color-1769e8) !important;
font-size: 18px !important;
font-weight: 800 !important;
}
/* ========================================================================
FORMULARIO
======================================================================== */
.mda-additional-form {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
height: 100% !important;
}
/* ========================================================================
ZONA DE REGISTROS
======================================================================== */
.mda-additional-form__content,
#camposAdicionalesForm .contentPres {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
width: 100% !important;
height: auto !important;
min-height: auto !important;
max-height: auto !important;
margin: 0 !important;
padding: 0 26px 20px !important;
gap: 16px !important;
align-items: stretch !important;
justify-content: flex-start !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: var(--mda-color-ffffff) !important;
box-sizing: border-box !important;
}
/* ========================================================================
REGISTRO / UNIDAD
======================================================================== */
.mda-additional-unit,
#camposAdicionalesForm .contentPres > .mda-additional-unit {
display: block !important;
position: relative !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: auto !important;
flex: 0 0 auto !important;
margin: 0 !important;
background: var(--mda-color-ffffff) !important;
border: 1px solid var(--mda-color-d9e4f2) !important;
border-radius: 13px !important;
box-shadow:
0 3px 10px var(--mda-color-rgba-37-56-91-0_05) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* ========================================================================
HEADER REGISTRO
======================================================================== */
.mda-additional-unit__header {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 60px !important;
padding: 10px 18px !important;
gap: 14px !important;
background:
linear-gradient(
90deg,
var(--mda-color-fbfcff) 0%,
var(--mda-color-f5f8ff) 100%
) !important;
border-bottom: 1px solid var(--mda-color-e3e9f3) !important;
box-sizing: border-box !important;
}
.mda-additional-unit__number {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 42px !important;
height: 42px !important;
flex: 0 0 42px !important;
color: var(--mda-color-3155da) !important;
background:
linear-gradient(
135deg,
var(--mda-color-edf0ff) 0%,
var(--mda-color-dde4ff) 100%
) !important;
border-radius: 50% !important;
font-size: 18px !important;
font-weight: 800 !important;
}
.mda-additional-unit__heading {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.mda-additional-unit__title {
color: var(--mda-color-163a96) !important;
font-size: 14px !important;
font-weight: 800 !important;
}
.mda-additional-unit__description {
color: var(--mda-color-8796b2) !important;
font-size: 14px !important;
line-height: 1.25 !important;
}
/* ========================================================================
GRID DE CAMPOS
======================================================================== */
.mda-additional-unit__fields {
display: grid !important;
grid-template-columns:
repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
height: auto !important;
padding: 14px 18px 18px !important;
column-gap: 24px !important;
row-gap: 12px !important;
box-sizing: border-box !important;
}
/* ========================================================================
CAMPO INDIVIDUAL
======================================================================== */
.mda-additional-field {
display: grid !important;
grid-template-columns:
175px minmax(0, 1fr) !important;
align-items: center !important;
min-width: 0 !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ========================================================================
LABEL + ICONO
======================================================================== */
.mda-additional-field__header {
display: flex !important;
align-items: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.mda-additional-field__icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
flex: 0 0 36px !important;
margin-right: 10px !important;
color: var(--mda-color-2f63ff) !important;
background: var(--mda-color-eef4ff) !important;
border-radius: 9px !important;
font-size: 16px !important;
}
.mda-additional-field__label {
flex: 1 !important;
margin: 0 !important;
color: var(--mda-color-304261) !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
/* ========================================================================
VINCULAR CAMPOS
======================================================================== */
.mda-additional-field__link {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
margin-left: 6px !important;
line-height: 22px !important;
font-size: 11px !important;
}
.mda-additional-field__link.unlinked {
color: var(--mda-color-a4afc1) !important;
}
.mda-additional-field__link.linked {
color: var(--mda-color-315efb) !important;
}
/* ========================================================================
INPUTS
======================================================================== */
.mda-additional-field__input {
width: 100% !important;
height: 42px !important;
margin: 0 !important;
padding: 0 13px !important;
color: var(--mda-color-293c5e) !important;
background: var(--mda-color-ffffff) !important;
border: 1px solid var(--mda-color-cbd8eb) !important;
border-radius: 7px !important;
font-size: 14px !important;
outline: none !important;
box-sizing: border-box !important;
transition:
border-color 0.15s ease,
box-shadow 0.15s ease !important;
}
.mda-additional-field__input::placeholder {
color: var(--mda-color-9ba9bd) !important;
font-size: 14px !important;
}
.mda-additional-field__input:hover {
border-color: var(--mda-color-aabbd8) !important;
}
.mda-additional-field__input:focus {
border-color: var(--mda-color-3974f6) !important;
box-shadow:
0 0 0 3px var(--mda-color-rgba-57-116-246-0_10) !important;
}
/* ========================================================================
FOOTER
======================================================================== */
.mda-additional-form__footer {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
min-height: 78px !important;
padding: 13px 26px !important;
gap: 14px !important;
background: var(--mda-color-ffffff) !important;
border-top: 1px solid var(--mda-color-e0e7f1) !important;
box-shadow:
0 -5px 16px var(--mda-color-rgba-37-54-85-0_04) !important;
box-sizing: border-box !important;
}
/* ========================================================================
BOTÓN CANCELAR
======================================================================== */
.mda-additional-btn--cancel {
min-width: 135px !important;
height: 50px !important;
padding: 0 22px !important;
color: var(--mda-color-20365f) !important;
background: var(--mda-color-ffffff) !important;
border: 1px solid var(--mda-color-bdcce2) !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 700 !important;
}
/* ========================================================================
BOTÓN GUARDAR
======================================================================== */
.mda-additional-btn--save {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 230px !important;
height: 50px !important;
padding: 6px 20px !important;
gap: 11px !important;
color: var(--mda-color-ffffff) !important;
background:
linear-gradient(
135deg,
var(--mda-color-233de8) 0%,
var(--mda-color-0876f5) 100%
) !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow:
0 5px 14px var(--mda-color-rgba-34-78-218-0_24) !important;
}
.mda-additional-btn__icon {
color: var(--mda-color-ffffff) !important;
font-size: 19px !important;
}
.mda-additional-btn__content {
display: flex !important;
flex-direction: column !important;
text-align: left !important;
line-height: 1.15 !important;
}
.mda-additional-btn__content strong {
color: var(--mda-color-ffffff) !important;
font-size: 14px !important;
}
.mda-additional-btn__content small {
margin-top: 2px !important;
color: var(--mda-color-rgba-255-255-255-0_85) !important;
font-size: 12px !important;
}
/* ========================================================================
ESTADO VACÍO
======================================================================== */
.mda-additional-empty {
display: flex !important;
align-items: center !important;
padding: 22px !important;
gap: 14px !important;
color: var(--mda-color-667895) !important;
background: var(--mda-color-f8fbff) !important;
border: 1px dashed var(--mda-color-cbd9ea) !important;
border-radius: 10px !important;
font-size: 14px !important;
}
.mda-additional-empty strong {
font-size: 15px !important;
}
.mda-additional-empty p {
margin: 4px 0 0 !important;
font-size: 14px !important;
}
.mda-additional-empty__icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
flex: 0 0 40px !important;
color: var(--mda-color-315efb) !important;
background: var(--mda-color-edf3ff) !important;
border-radius: 50% !important;
font-size: 16px !important;
}
/* ==========================================================================
SCROLL
========================================================================== */
.mda-additional-form__content::-webkit-scrollbar,
#camposAdicionalesForm .contentPres::-webkit-scrollbar {
width: 9px !important;
}
.mda-additional-form__content::-webkit-scrollbar-track,
#camposAdicionalesForm .contentPres::-webkit-scrollbar-track {
background: var(--mda-color-f0f3f8) !important;
border-radius: 10px !important;
}
.mda-additional-form__content::-webkit-scrollbar-thumb,
#camposAdicionalesForm .contentPres::-webkit-scrollbar-thumb {
background: var(--mda-color-aebbd0) !important;
border: 2px solid var(--mda-color-f0f3f8) !important;
border-radius: 10px !important;
}
/* ==========================================================================
RESPONSIVE TABLET
========================================================================== */
@media (max-width: 900px) {
#jquery-msg-content {
width: calc(100% - 24px) !important;
}
.mda-additional-product {
flex-direction: column !important;
}
.mda-additional-product__quantity {
width: 100% !important;
border-top: 1px solid var(--mda-color-d9e8f8) !important;
}
.mda-additional-unit__fields {
grid-template-columns: 1fr !important;
}
.mda-additional-field {
grid-template-columns:
170px minmax(0, 1fr) !important;
}
}
/* ==========================================================================
RESPONSIVE MÓVIL
======================================================================== */
@media (max-width: 680px) {
.mda-additional-config__header {
padding: 16px !important;
}
.mda-additional-config__title {
font-size: 21px !important;
}
.mda-additional-product {
margin-left: 16px !important;
margin-right: 16px !important;
}
.mda-additional-product__main {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
.mda-additional-product__separator {
display: none !important;
}
.mda-additional-form__content,
#camposAdicionalesForm .contentPres {
padding-left: 16px !important;
padding-right: 16px !important;
}
.mda-additional-field {
grid-template-columns: 1fr !important;
gap: 7px !important;
}
.mda-additional-field__header {
min-height: 36px !important;
}
.mda-additional-form__footer {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ========================================================================
RESPONSIVE MÓVIL PEQUEÑO
======================================================================== */
@media (max-width: 480px) {
#jquery-msg-content {
width: calc(100% - 12px) !important;
height: calc(100vh - 12px) !important;
top: 6px !important;
border-radius: 10px !important;
}
.mda-additional-form__footer {
flex-direction: column-reverse !important;
align-items: stretch !important;
}
.mda-additional-btn--cancel,
.mda-additional-btn--save {
width: 100% !important;
min-width: 0 !important;
}
}
/* ==========================================================================
RESPONSIVE VERTICAL
Mantiene siempre visible el footer y deja scroll únicamente en los campos.
========================================================================== */
@media (max-height: 760px) {
#jquery-msg-content:has(.mda-additional-config) {
top: 8px !important;
height: calc(100dvh - 16px) !important;
max-height: calc(100dvh - 16px) !important;
}
.mda-additional-config__header {
padding: 12px 20px 8px !important;
}
.mda-additional-product {
min-height: 64px !important;
margin-bottom: 8px !important;
}
.mda-additional-form__footer {
min-height: 62px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
.mda-additional-btn--cancel,
.mda-additional-btn--save {
height: 44px !important;
}
}
@media (max-height: 620px) {
.mda-additional-config__header {
padding: 8px 16px 6px !important;
}
.mda-additional-config__description {
display: none !important;
}
.mda-additional-product {
min-height: 54px !important;
margin-bottom: 6px !important;
}
.mda-additional-form__footer {
min-height: 56px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
}
.mda-additional-btn--cancel,
.mda-additional-btn--save {
height: 42px !important;
}
}
/* =========================================================
ESTADO DE VALIDACIÓN EXCEL
========================================================= */
.mda-validation-status {
width: 34px;
height: 34px;
min-width: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border-radius: 6px;
box-sizing: border-box;
font-size: 15px;
line-height: 1;
vertical-align: middle;
}
/* =========================================================
ERROR / INCONSISTENCIA
========================================================= */
.mda-validation-status--error {
color: var(--mda-color-d92d20);
background: var(--mda-color-fff1f0);
border: 1px solid var(--mda-color-f97066);
cursor: pointer;
transition:
background-color .15s ease,
border-color .15s ease,
transform .15s ease;
}
.mda-validation-status--error i {
color: var(--mda-color-d92d20);
}
.mda-validation-status--error:hover {
background: var(--mda-color-fee4e2);
border-color: var(--mda-color-d92d20);
transform: translateY(-1px);
}
/* =========================================================
APROBADO / CORRECTO
========================================================= */
.mda-validation-status--ok {
color: var(--mda-color-067647);
background: var(--mda-color-ecfdf3);
border: 1px solid var(--mda-color-75d1a3);
cursor: default;
}
.mda-validation-status--ok i {
color: var(--mda-color-067647);
}
#sumatotal {
color: var(--mda-color-0879c0) !important;
opacity: 1 !important;
}
/* ============================================================
INPUT READONLY CON INDICADOR DE BLOQUEO
============================================================ */
.mda-control:has(.mda-readonly-lock) {
position: relative;
}
.mda-control:has(.mda-readonly-lock)::after {
content: "\f023";
font-family: FontAwesome;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--mda-danger)!important;;
font-size: 14px;
opacity: 0;
pointer-events: none;
transition:
opacity var(--mda-transition-fast);
}
.mda-control:has(.mda-readonly-lock):hover::after {
opacity: 1;
}
.mda-control:has(.mda-readonly-lock):hover .mda-readonly-lock {
border-color: var(--mda-danger)!important;;
}
.mda-readonly-lock[readonly] {
cursor: not-allowed;
}
/* MODAL DE INDERCAS */
.btn-historial-observaciones {
background: rgb(54,169,224,1);
border: 0;
border-radius: 7px;
color: #ffffff;
padding: 8px 12px;
cursor: pointer;
margin-right: 10px;
margin-top: 8px;
font-size: 14px;
}
.modal-observaciones-backdrop {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.45);
z-index: 9999;
align-items: center;
justify-content: center;
}
.modal-observaciones {
width: 90%;
max-width: 900px;
background: #ffffff;
border-radius: 10px;
border: 1px solid #d9d9d9;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.modal-observaciones-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid #ececec;
}
.modal-observaciones-title {
font-weight: bold;
color: #1f2937;
font-size: 16px;
}
.modal-observaciones-close {
border: 0;
background: transparent;
font-size: 22px;
line-height: 1;
cursor: pointer;
color: #4b5563;
}
.modal-observaciones-body {
padding: 16px;
}
.timeline-observaciones {
max-height: 60vh;
overflow-y: auto;
padding-right: 10px;
}
.timeline-item {
position: relative;
padding-left: 28px;
margin-bottom: 18px;
border-left: 2px solid #4AB9EE;
margin-left: 9px;
}
.timeline-item:last-child {
margin-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -8px;
top: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #36a9e0;
border: 2px solid #ffffff;
box-shadow: 0 0 0 2px #36a9e0;
}
.timeline-meta {
font-size: 12px;
color: #6b7280;
margin-bottom: 4px;
}
.timeline-usuario {
font-weight: bold;
color: #111827;
margin-bottom: 4px;
font-size: 14px;
}
.timeline-observacion {
color: #1f2937;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 10px;
white-space: pre-wrap;
word-break: break-word;
font-size: 14px;
}
/* ==========================================================================
AVISO INFORMATIVO MDA
========================================================================== */
.mda-ui .mda-info-notice {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
padding: 14px 18px;
border: 1px solid #bcdff4;
border-radius: 10px;
background:
linear-gradient(
90deg,
#f4faff,
#eef8ff
);
box-shadow:
0 2px 7px
rgba(36, 55, 70, 0.05);
}
/* ICONO */
.mda-ui .mda-info-notice__icon {
width: 34px;
height: 34px;
flex: 0 0 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #218fdb;
color: #ffffff;
font-size: 16px;
}
/* DIVISOR */
.mda-ui .mda-info-notice__divider {
width: 2px;
height: 34px;
flex: 0 0 2px;
border-radius: 2px;
background: #8fcbea;
}
/* CONTENIDO */
.mda-ui .mda-info-notice__content {
min-width: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 4px;
}
/* MENSAJE PRINCIPAL */
.mda-ui .mda-info-notice__content strong {
color: #176394;
font-size: 15px;
font-weight: 800;
line-height: 1.35;
}
/* MENSAJE COMPLEMENTARIO */
.mda-ui .mda-info-notice__content span {
color: #52758f;
font-size: 14px;
font-weight: 500;
line-height: 1.35;
}
/* RESPONSIVE */
@media (max-width: 600px) {
.mda-ui .mda-info-notice {
align-items: flex-start;
padding: 12px 14px;
}
.mda-ui .mda-info-notice__content {
display: block;
}
.mda-ui .mda-info-notice__content span {
display: block;
margin-top: 3px;
}
}
/* MODAL PARA SELCCIONA DE PLACAS SALIDA ALMACEN */
/* ==========================================================================
MODAL MDA - SELECCIÓN DE PLACAS
--------------------------------------------------------------------------
El scroll se limita únicamente a la lista de placas.
Los botones inferiores permanecen siempre visibles, incluso con zoom.
========================================================================== */
/* MODAL */
.swal2-popup:has(#containerPlacas) {
width: min(560px, calc(100vw - 24px)) !important;
max-height: calc(100vh - 24px);
max-height: calc(100dvh - 24px);
padding: 24px !important;
box-sizing: border-box;
border-radius: 16px !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
background: #ffffff !important;
}
/* ICONO SUPERIOR DE SWEETALERT */
.swal2-popup:has(#containerPlacas) .swal2-icon {
flex: 0 0 auto;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
/* TÍTULO */
.swal2-popup:has(#containerPlacas) .swal2-title {
flex: 0 0 auto;
margin: 0 !important;
padding: 0 10px !important;
color: #173a59 !important;
font-size: 24px !important;
font-weight: 800 !important;
width: 100%;
box-sizing: border-box;
}
/* CONTENEDOR DEL HTML DEL SWEETALERT */
.swal2-popup:has(#containerPlacas) .swal2-html-container,
.swal2-popup:has(#containerPlacas) .swal2-content {
width: 100%;
box-sizing: border-box;
flex: 1 1 auto;
min-height: 0;
margin: 18px 0 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
/* FORM INTERNO */
.swal2-popup:has(#containerPlacas) form {
height: 100%;
margin: 0;
}
/* CONTENEDOR DEL LISTADO */
.swal2-popup:has(#containerPlacas) .container-placas {
width: 100%;
max-height: min(420px, 48vh);
padding: 8px;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid #dce8ef;
border-radius: 12px;
background: #f8fbfd;
scrollbar-width: thin;
}
/* CADA ITEM */
.swal2-popup:has(#containerPlacas) .container-placas_items {
min-height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 8px;
padding: 10px 14px;
box-sizing: border-box;
border: 1px solid #d9e6ef;
border-radius: 10px;
background: #ffffff;
transition:
background 0.15s ease,
border-color 0.15s ease,
box-shadow 0.15s ease;
}
/* ÚLTIMO ITEM */
.swal2-popup:has(#containerPlacas) .container-placas_items:last-child {
margin-bottom: 0;
}
/* HOVER */
.swal2-popup:has(#containerPlacas) .container-placas_items:hover {
background: #f4faff;
border-color: #b8d9ec;
}
/* LABEL / TEXTO */
.swal2-popup:has(#containerPlacas) .container-placas_items label {
flex: 1;
margin: 0 !important;
color: #173a59;
font-size: 14px;
font-weight: 700;
text-align: left;
cursor: pointer;
}
/* CHECKBOX */
.swal2-popup:has(#containerPlacas) .checked-placa {
width: 20px;
height: 20px;
min-width: 20px;
margin: 0;
accent-color: #168fd3;
cursor: pointer;
}
/* ITEM SELECCIONADO */
.swal2-popup:has(#containerPlacas) .container-placas_items:has(.checked-placa:checked) {
background: #eaf6fd;
border-color: #78bfe6;
box-shadow: 0 0 0 1px rgba(22, 143, 211, 0.08);
}
/* TEXTO DEL ITEM SELECCIONADO */
.swal2-popup:has(#containerPlacas) .container-placas_items:has(.checked-placa:checked) label {
color: #0f4c7d;
font-weight: 800;
}
/* ==========================================================================
PANTALLAS PEQUEÑAS / ZOOM ALTO
========================================================================== */
@media (max-height: 650px) {
.swal2-popup:has(#containerPlacas) {
padding: 16px !important;
}
.swal2-popup:has(#containerPlacas) .swal2-icon {
width: 54px !important;
height: 54px !important;
margin-bottom: 8px !important;
}
.swal2-popup:has(#containerPlacas) .swal2-title {
font-size: 20px !important;
}
.swal2-popup:has(#containerPlacas) .container-placas {
max-height: 38vh;
}
.swal2-popup:has(#containerPlacas) .swal2-actions {
margin-top: 10px !important;
}
}
/* QUITAR SCROLL HORIZONTAL DE VISTAS ENTRAS Y SALIDAS DE ALMACEN */
/* #main #workspace:has(#salidaParcial) {
overflow-x: hidden !important;
}
#main #workspace:has(#formEntradaAlmacen) {
overflow-x: hidden !important;
}
#main #workspace:has(#salida) {
overflow-x: hidden !important;
} */