/* primary */
:root {
    --ion-color-primary-step-50: #0d5dea;
    --ion-color-primary-step-100: #1a65eb;
    --ion-color-primary-step-150: #266eec;
    --ion-color-primary-step-200: #3376ed;
    --ion-color-primary-step-250: #407fef;
    --ion-color-primary-step-300: #4d87f0;
    --ion-color-primary-step-350: #5990f1;
    --ion-color-primary-step-400: #6698f2;
    --ion-color-primary-step-450: #73a1f3;
    --ion-color-primary-step-500: #80aaf4;
    --ion-color-primary-step-550: #8cb2f5;
    --ion-color-primary-step-600: #99bbf6;
    --ion-color-primary-step-650: #a6c3f7;
    --ion-color-primary-step-700: #b3ccf8;
    --ion-color-primary-step-750: #bfd4fa;
    --ion-color-primary-step-800: #ccddfb;
    --ion-color-primary-step-850: #d9e5fc;
    --ion-color-primary-step-900: #e6eefd;
    --ion-color-primary-step-950: #f2f6fe;


    --ion-color-primary-light-step-50: #f3f6fe;
    --ion-color-primary-light-step-100: #f3f7fe;
    --ion-color-primary-light-step-150: #f4f7fe;
    --ion-color-primary-light-step-200: #f5f8fe;
    --ion-color-primary-light-step-250: #f5f8fe;
    --ion-color-primary-light-step-300: #f6f9fe;
    --ion-color-primary-light-step-350: #f7f9fe;
    --ion-color-primary-light-step-400: #f7fafe;
    --ion-color-primary-light-step-450: #f8fafe;
    --ion-color-primary-light-step-500: #f9fbff;
    --ion-color-primary-light-step-550: #f9fbff;
    --ion-color-primary-light-step-600: #fafbff;
    --ion-color-primary-light-step-650: #fafcff;
    --ion-color-primary-light-step-700: #fbfcff;
    --ion-color-primary-light-step-750: #fcfdff;
    --ion-color-primary-light-step-800: #fcfdff;
    --ion-color-primary-light-step-850: #fdfeff;
    --ion-color-primary-light-step-900: #fefeff;
    --ion-color-primary-light-step-950: #feffff;
}

:root {
    --ion-color-primary2: #0d6efd;
}

/* black */
:root {
    --ion-color-black: #000000;
    --ion-color-black-rgb: 0, 0, 0;
    --ion-color-black-contrast: #ffffff;
    --ion-color-black-contrast-rgb: 255, 255, 255;
    --ion-color-black-shade: #000000;
    --ion-color-black-tint: #1a1a1a;

    --ion-color-black-step-50: #0d0d0d;
    --ion-color-black-step-100: #1a1a1a;
    --ion-color-black-step-150: #262626;
    --ion-color-black-step-200: #333333;
    --ion-color-black-step-250: #404040;
    --ion-color-black-step-300: #4d4d4d;
    --ion-color-black-step-350: #595959;
    --ion-color-black-step-400: #666666;
    --ion-color-black-step-450: #737373;
    --ion-color-black-step-500: #808080;
    --ion-color-black-step-550: #8c8c8c;
    --ion-color-black-step-600: #999999;
    --ion-color-black-step-650: #a6a6a6;
    --ion-color-black-step-700: #b3b3b3;
    --ion-color-black-step-750: #bfbfbf;
    --ion-color-black-step-800: #cccccc;
    --ion-color-black-step-850: #d9d9d9;
    --ion-color-black-step-900: #e6e6e6;
    --ion-color-black-step-950: #f2f2f2;
}

.ion-color-black {
    --ion-color-base: var(--ion-color-black);
    --ion-color-base-rgb: var(--ion-color-black-rgb);
    --ion-color-contrast: var(--ion-color-black-contrast);
    --ion-color-contrast-rgb: var(--ion-color-black-contrast-rgb);
    --ion-color-shade: var(--ion-color-black-shade);
    --ion-color-tint: var(--ion-color-black-tint);
}

/* gray */
:root {
    --ion-color-gray: #a0a0a0;
    --ion-color-gray-rgb: 160, 160, 160;
    --ion-color-gray-contrast: #000000;
    --ion-color-gray-contrast-rgb: 0, 0, 0;
    --ion-color-gray-shade: #8d8d8d;
    --ion-color-gray-tint: #aaaaaa;

    --ion-color-gray-step-50: #a5a5a5;
    --ion-color-gray-step-100: #aaaaaa;
    --ion-color-gray-step-150: #aeaeae;
    --ion-color-gray-step-200: #b3b3b3;
    --ion-color-gray-step-250: #b8b8b8;
    --ion-color-gray-step-300: #bdbdbd;
    --ion-color-gray-step-350: #c1c1c1;
    --ion-color-gray-step-400: #c6c6c6;
    --ion-color-gray-step-450: #cbcbcb;
    --ion-color-gray-step-500: #d0d0d0;
    --ion-color-gray-step-550: #d4d4d4;
    --ion-color-gray-step-600: #d9d9d9;
    --ion-color-gray-step-650: #dedede;
    --ion-color-gray-step-700: #e3e3e3;
    --ion-color-gray-step-750: #e7e7e7;
    --ion-color-gray-step-800: #ececec;
    --ion-color-gray-step-850: #f1f1f1;
    --ion-color-gray-step-900: #f6f6f6;
    --ion-color-gray-step-950: #fafafa;
}

.ion-color-gray {
    --ion-color-base: var(--ion-color-gray);
    --ion-color-base-rgb: var(--ion-color-gray-rgb);
    --ion-color-contrast: var(--ion-color-gray-contrast);
    --ion-color-contrast-rgb: var(--ion-color-gray-contrast-rgb);
    --ion-color-shade: var(--ion-color-gray-shade);
    --ion-color-tint: var(--ion-color-gray-tint);
}

/* red */
:root {
    --ion-color-red: #ff0000;
    --ion-color-red-rgb: 255, 0, 0;
    --ion-color-red-contrast: #ffffff;
    --ion-color-red-contrast-rgb: 255, 255, 255;
    --ion-color-red-shade: #e00000;
    --ion-color-red-tint: #ff1a1a;
    --ion-color-red-empty: #ffcccc;
}

.ion-color-red {
    --ion-color-base: var(--ion-color-red);
    --ion-color-base-rgb: var(--ion-color-red-rgb);
    --ion-color-contrast: var(--ion-color-red-contrast);
    --ion-color-contrast-rgb: var(--ion-color-red-contrast-rgb);
    --ion-color-shade: var(--ion-color-red-shade);
    --ion-color-tint: var(--ion-color-red-tint);
}

/* white */
:root {
    --ion-color-white: #ffffff;
    --ion-color-white-rgb: 255, 255, 255;
    --ion-color-white-contrast: #000000;
    --ion-color-white-contrast-rgb: 0, 0, 0;
    --ion-color-white-shade: #e0e0e0;
    --ion-color-white-tint: #ffffff;
}

.ion-color-white {
    --ion-color-base: var(--ion-color-white);
    --ion-color-base-rgb: var(--ion-color-white-rgb);
    --ion-color-contrast: var(--ion-color-white-contrast);
    --ion-color-contrast-rgb: var(--ion-color-white-contrast-rgb);
    --ion-color-shade: var(--ion-color-white-shade);
    --ion-color-tint: var(--ion-color-white-tint);
}

/* gray-light */
:root {
    --ion-color-gray-light: #eeeeee;
    --ion-color-gray-light-rgb: 238, 238, 238;
    --ion-color-gray-light-contrast: #000000;
    --ion-color-gray-light-contrast-rgb: 0, 0, 0;
    --ion-color-gray-light-shade: #d1d1d1;
    --ion-color-gray-light-tint: #f0f0f0;
}

.ion-color-gray-light {
    --ion-color-base: var(--ion-color-gray-light);
    --ion-color-base-rgb: var(--ion-color-gray-light-rgb);
    --ion-color-contrast: var(--ion-color-gray-light-contrast);
    --ion-color-contrast-rgb: var(--ion-color-gray-light-contrast-rgb);
    --ion-color-shade: var(--ion-color-gray-light-shade);
    --ion-color-tint: var(--ion-color-gray-light-tint);
}

/* olive */
:root {
    --ion-color-olive: #198754;
    --ion-color-olive-rgb: 25, 135, 84;
    --ion-color-olive-contrast: #ffffff;
    --ion-color-olive-contrast-rgb: 255, 255, 255;
    --ion-color-olive-shade: #16774a;
    --ion-color-olive-tint: #309365;
}

.ion-color-olive {
    --ion-color-base: var(--ion-color-olive);
    --ion-color-base-rgb: var(--ion-color-olive-rgb);
    --ion-color-contrast: var(--ion-color-olive-contrast);
    --ion-color-contrast-rgb: var(--ion-color-olive-contrast-rgb);
    --ion-color-shade: var(--ion-color-olive-shade);
    --ion-color-tint: var(--ion-color-olive-tint);
}

/* info */
:root {
    --ion-color-info: #0dcaf0;
    --ion-color-info-rgb: 13, 202, 240;
    --ion-color-info-contrast: #000000;
    --ion-color-info-contrast-rgb: 0, 0, 0;
    --ion-color-info-shade: #0bb2d3;
    --ion-color-info-tint: #25cff2;
}

.ion-color-info {
    --ion-color-base: var(--ion-color-info);
    --ion-color-base-rgb: var(--ion-color-info-rgb);
    --ion-color-contrast: var(--ion-color-info-contrast);
    --ion-color-contrast-rgb: var(--ion-color-info-contrast-rgb);
    --ion-color-shade: var(--ion-color-info-shade);
    --ion-color-tint: var(--ion-color-info-tint);
}

/* warning step */
:root {
    --ion-color-warning-step-50: #ffc715;
    --ion-color-warning-step-100: #ffca22;
    --ion-color-warning-step-150: #ffcd2e;
    --ion-color-warning-step-200: #ffd03a;
    --ion-color-warning-step-250: #ffd347;
    --ion-color-warning-step-300: #ffd653;
    --ion-color-warning-step-350: #ffd95f;
    --ion-color-warning-step-400: #ffdc6b;
    --ion-color-warning-step-450: #ffdf78;
    --ion-color-warning-step-500: #ffe284;
    --ion-color-warning-step-550: #ffe490;
    --ion-color-warning-step-600: #ffe79d;
    --ion-color-warning-step-650: #ffeaa9;
    --ion-color-warning-step-700: #ffedb5;
    --ion-color-warning-step-750: #fff0c2;
    --ion-color-warning-step-800: #fff3ce;
    --ion-color-warning-step-850: #fff6da;
    --ion-color-warning-step-900: #fff9e6;
    --ion-color-warning-step-950: #fffcf3;
}

/* naranja */
:root {
    --ion-color-naranja: #ff8624;
    --ion-color-naranja-rgb: 255, 134, 36;
    --ion-color-naranja-contrast: #000000;
    --ion-color-naranja-contrast-rgb: 0, 0, 0;
    --ion-color-naranja-shade: #e07620;
    --ion-color-naranja-tint: #ff923a;
}

.ion-color-naranja {
    --ion-color-base: var(--ion-color-naranja);
    --ion-color-base-rgb: var(--ion-color-naranja-rgb);
    --ion-color-contrast: var(--ion-color-naranja-contrast);
    --ion-color-contrast-rgb: var(--ion-color-naranja-contrast-rgb);
    --ion-color-shade: var(--ion-color-naranja-shade);
    --ion-color-tint: var(--ion-color-naranja-tint);
}

/* purpura */
:root {
    --ion-color-purpura: #d2328a;
    --ion-color-purpura-rgb: 210, 50, 138;
    --ion-color-purpura-contrast: #ffffff;
    --ion-color-purpura-contrast-rgb: 255, 255, 255;
    --ion-color-purpura-shade: #b92c79;
    --ion-color-purpura-tint: #d74796;
}

.ion-color-purpura {
    --ion-color-base: var(--ion-color-purpura);
    --ion-color-base-rgb: var(--ion-color-purpura-rgb);
    --ion-color-contrast: var(--ion-color-purpura-contrast);
    --ion-color-contrast-rgb: var(--ion-color-purpura-contrast-rgb);
    --ion-color-shade: var(--ion-color-purpura-shade);
    --ion-color-tint: var(--ion-color-purpura-tint);
}


/* naranja */
:root {
    --ion-color-naranja-step-50: #ff8c2f;
    --ion-color-naranja-step-100: #ff923a;
    --ion-color-naranja-step-150: #ff9845;
    --ion-color-naranja-step-200: #ff9e50;
    --ion-color-naranja-step-250: #ffa45b;
    --ion-color-naranja-step-300: #ffaa66;
    --ion-color-naranja-step-350: #ffb071;
    --ion-color-naranja-step-400: #ffb67c;
    --ion-color-naranja-step-450: #ffbc87;
    --ion-color-naranja-step-500: #ffc392;
    --ion-color-naranja-step-550: #ffc99c;
    --ion-color-naranja-step-600: #ffcfa7;
    --ion-color-naranja-step-650: #ffd5b2;
    --ion-color-naranja-step-700: #ffdbbd;
    --ion-color-naranja-step-750: #ffe1c8;
    --ion-color-naranja-step-800: #ffe7d3;
    --ion-color-naranja-step-850: #ffedde;
    --ion-color-naranja-step-900: #fff3e9;
    --ion-color-naranja-step-950: #fff9f4;
}

/* success */
:root {
    --ion-color-success-step-50: #38d763;
    --ion-color-success-step-100: #42d96b;
    --ion-color-success-step-150: #4ddb74;
    --ion-color-success-step-200: #57dd7c;
    --ion-color-success-step-250: #62e084;
    --ion-color-success-step-300: #6ce28c;
    --ion-color-success-step-350: #77e494;
    --ion-color-success-step-400: #81e69d;
    --ion-color-success-step-450: #8ce8a5;
    --ion-color-success-step-500: #96eaad;
    --ion-color-success-step-550: #a1ecb5;
    --ion-color-success-step-600: #abeebd;
    --ion-color-success-step-650: #b6f0c6;
    --ion-color-success-step-700: #c0f2ce;
    --ion-color-success-step-750: #cbf5d6;
    --ion-color-success-step-800: #d5f7de;
    --ion-color-success-step-850: #e0f9e6;
    --ion-color-success-step-900: #eafbef;
    --ion-color-success-step-950: #f5fdf7;
}


/* danger */
:root {
    --ion-color-danger-step-50: #c80d1b;
    --ion-color-danger-step-100: #cb1a27;
    --ion-color-danger-step-150: #ce2633;
    --ion-color-danger-step-200: #d1333f;
    --ion-color-danger-step-250: #d4404b;
    --ion-color-danger-step-300: #d64d57;
    --ion-color-danger-step-350: #d95963;
    --ion-color-danger-step-400: #dc666f;
    --ion-color-danger-step-450: #df737b;
    --ion-color-danger-step-500: #e28087;
    --ion-color-danger-step-550: #e58c93;
    --ion-color-danger-step-600: #e8999f;
    --ion-color-danger-step-650: #eba6ab;
    --ion-color-danger-step-700: #eeb3b7;
    --ion-color-danger-step-750: #f1bfc3;
    --ion-color-danger-step-800: #f3cccf;
    --ion-color-danger-step-850: #f6d9db;
    --ion-color-danger-step-900: #f9e6e7;
    --ion-color-danger-step-950: #fcf2f3;
}

/* medium */
:root {
    --ion-color-medium-step-50: #6b6c71;
    --ion-color-medium-step-100: #737478;
    --ion-color-medium-step-150: #7a7b80;
    --ion-color-medium-step-200: #828387;
    --ion-color-medium-step-250: #8a8b8f;
    --ion-color-medium-step-300: #929396;
    --ion-color-medium-step-350: #9a9a9e;
    --ion-color-medium-step-400: #a1a2a5;
    --ion-color-medium-step-450: #a9aaad;
    --ion-color-medium-step-500: #b1b2b4;
    --ion-color-medium-step-550: #b9b9bc;
    --ion-color-medium-step-600: #c1c1c3;
    --ion-color-medium-step-650: #c8c9cb;
    --ion-color-medium-step-700: #d0d1d2;
    --ion-color-medium-step-750: #d8d8da;
    --ion-color-medium-step-800: #e0e0e1;
    --ion-color-medium-step-850: #e8e8e9;
    --ion-color-medium-step-900: #eff0f0;
    --ion-color-medium-step-950: #f7f7f8;
}








/* h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: revert !important;
    font-weight: revert !important;
} */













/* ion-toolbar */
ion-toolbar {
    /* --background: var(--ion-color-red) !important;
    --color: var(--ion-color-white) !important; */

    /* --background: var(--ion-color-white) !important;
    --color: var(--ion-color-black) !important; */

    --background: var(--ion-color-primary) !important;
    --color: var(--ion-color-white) !important;

    /* --background: var(--ion-color-danger) !important;
    --color: var(--ion-color-white) !important; */
}


/* #menu_ion__menu */
ion-button#menu_ion__menu {
    --border-radius: 50% !important;
    --padding-start: 6px !important;
    --padding-top: 6px !important;
    --padding-end: 6px !important;
    --padding-bottom: 6px !important;

    /* --ripple-color: var(--ion-color-black) !important; */
}

ion-button#menu_ion__menu ion-avatar {
    height: 38px !important;
    width: 38px !important;

    background: var(--ion-color-black) !important;
}


/* ion-menu */
ion-menu ion-icon {
    /* color: var(--ion-color-red) !important; */
    color: var(--ion-color-black) !important;
}

ion-menu ion-icon[name="open-outline"] {
    font-size: 18px !important;
}


/* ion-popover */
ion-popover ion-icon {
    /* color: var(--ion-color-red) !important; */
    /* color: var(--ion-color-black) !important; */
    color: var(--ion-color-medium) !important;
}


/* ion-alert */
ion-alert .alert-button span {
    color: var(--ion-color-medium) !important;
    color: var(--ion-color-medium) !important;
}

ion-alert .alert-button-role-destructive span {
    color: var(--ion-color-danger) !important;
}

ion-alert .alert-button-role-confirm span {
    color: var(--ion-color-primary) !important;
}

ion-alert ion-ripple-effect {
    color: var(--ion-color-black) !important;
}


/* ion-action-sheet */
ion-action-sheet {
    --color: var(--ion-color-primary) !important;
}

.action-sheet-title {
    color: var(--ion-color-black) !important;
    font-weight: bold !important;
}

/* ion-progress-bar */
ion-progress-bar:not([data-role="stepbar"]) {
    --background: var(--ion-color-red-empty);
    --progress-background: var(--ion-color-red);
    position: absolute !important;
    /* z-index: 100; */
}

/* ion-progress-bar no se ve:
- si está en un contenedor display flex esto es necesario, sino su altura será 0px */
ion-progress-bar[data-role="stepbar"] {
    min-height: 4px;
}


/* ion-tab-button */
ion-tab-button {
    --color: var(--ion-color-medium) !important;

    --color-selected: var(--ion-color-primary) !important;
    /* --color-selected: var(--ion-color-red) !important; */
}

ion-tab-button ion-badge {
    /* --background: var(--ion-color-red) !important; */
    --background: var(--ion-color-danger) !important;
}

@media (min-width: 578px) {
    .csi-fullscreen-modal {
        --width: 100vw;
        --height: 100vh;
        --max-width: none;
        --max-height: none;
        --border-radius: 0;
        --box-shadow: none;
        inset: 0 !important;
    }
}

/* ion-searchbar {
    --border-radius: 0.5rem !important;
} */

/* ion-skeleton-text {
    --border-radius: 9999px;
    --background: rgba(188, 0, 255, 0.065);
    --background-rgb: 188, 0, 255;
} */



/* clases */

.cs-d-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-d-flex-align-center {
    display: flex;
    align-items: center;
}

.cs-d-flex-justify-between {
    display: flex;
    justify-content: space-between;
}

.cs-d-flex-justify-end {
    display: flex;
    justify-content: end;
}

.cs-d-flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cs-no-margin-vertical {
    margin-top: 0px;
    margin-bottom: 0px;
}

.cs-no-margin-top {
    margin-top: 0px;
}

.cs-margin-vertical-sm {
    margin-top: 4px;
    margin-bottom: 4px;
}

.cs-flex-gap {
    gap: .5rem;
}

.cs-flex-gap-sm {
    gap: 4px;
}

/* Sacado del ionic.bundle.css */
.text-h1 {
    /* margin-top: 20px; */
    font-size: 1.625rem
}

.text-h2 {
    /* margin-top: 18px; */
    font-size: 1.5rem
}

.text-h3 {
    font-size: 1.375rem
}

.text-h4 {
    font-size: 1.25rem
}

.text-h5 {
    font-size: 1.125rem
}

.text-h6 {
    font-size: 1rem
}


.cs-seleccion-alerta .alert-button-group {
    justify-content: space-between;
}

/* .cs-margin-end {
    margin-right: 8px;
} */

.cs-margin-bottom {
    margin-bottom: 8px;
}

.cs-margin-horizontal {
    margin-right: 8px;
    margin-left: 8px;
}


.sticky-top-content {
    position: sticky;
    top: 0;
    z-index: 10;
}

.toolbar-collapsed {
    --min-height: 0 !important;
}

.banner-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* background: var(--ion-background-color); */
    color: var(--ion-color-primary-step-250);
    /* opacity: 0.20; */
    user-select: none;
    z-index: 1;
    padding: 1rem;
}

.cs-d-none {
    display: none;
}

.cs-h-100 {
    height: 100% !important;
}

/* .cs-second-toolbar {
    --background: var(--ion-color-gray-light) !important;
    --color: var(--ion-color-dark) !important;
} */

.cs-detail-icon-black {
    --detail-icon-color: var(--ion-color-black) !important;
    /* --detail-icon-opacity: 1 !important; */
}

.cs-icon-black {
    color: var(--ion-color-black) !important;
}

.csi-color-black {
    --color: var(--ion-color-black) !important;
}

.cs-color-white {
    --color: var(--ion-color-white) !important;
}

/* .cs-text-bold {
    font-weight: bold !important;
} */

.cs-color-danger {
    color: var(--ion-color-danger) !important;
}

.cs-bg-success {
    background-color: var(--ion-color-success) !important;
    color: var(--ion-color-dark) !important;
}

.cs-bg-primary {
    background-color: var(--ion-color-primary) !important;
    color: var(--ion-color-light) !important;
}

.cs-bg-danger {
    background-color: var(--ion-color-danger) !important;
    color: var(--ion-color-light) !important;
}

.cs-bg-warning {
    background-color: var(--ion-color-warning);
    color: var(--ion-color-dark);
}

.cs-bg-warning-i {
    background-color: var(--ion-color-warning) !important;
    color: var(--ion-color-dark) !important;
}

.cs-bg-light {
    background-color: var(--ion-color-light) !important;
    color: var(--ion-color-dark) !important;
}


.csi-bg-success {
    --background: var(--ion-color-success) !important;
    --color: var(--ion-color-dark) !important;
}


.csi-bg-danger {
    --background: var(--ion-color-danger) !important;
    --color: var(--ion-color-light) !important;
}

.csi-bg-primary {
    --background: var(--ion-color-primary) !important;
    --color: var(--ion-color-light) !important;
}

.cs-bg-olive {
    --background: var(--ion-color-olive) !important;
}

/* .cs-btn-danger {
    --background: var(--ion-color-danger) !important;
    --color: var(--ion-color-white) !important;
} */

.cs-searchbar-clean {
    --box-shadow: none !important;
    --background: transparent !important;
    --border-width: 0 !important;
    --border-style: none !important;
}

.cs-icon-white {
    --icon-color: var(--ion-color-white) !important;
}

.cs-border-bottom-circle {
    border-bottom-left-radius: 50% 200px;
    border-bottom-right-radius: 50% 200px;
}

/* .btn-rounded {
    --border-radius: 24px !important;
} */

/* ion-tab-button */
ion-tab-button {
    --color: var(--ion-color-medium) !important;

    --color-selected: var(--ion-color-primary) !important;
    /* --color-selected: var(--ion-color-red) !important; */
}

ion-tab-button ion-badge {
    /* --background: var(--ion-color-red) !important; */
    --background: var(--ion-color-danger) !important;
}

ion-searchbar {
    --border-radius: 999rem !important;

    /* background: var(--ion-color-primary-step-850) !important;
    --background: var(--ion-color-primary-step-950) !important; */

    /* background: var(--ion-color-primary-step-900) !important;
    --background: var(--ion-color-white) !important; */

    /* --background: var(--ion-color-primary-step-950) !important; */

    --background: var(--ion-color-primary-step-900) !important;

    /* --background: var(--ion-color-primary-step-850) !important; */

    /* border-top: 1px solid var(--ion-color-primary-step-850); */
    --box-shadow: 0 !important;
}

/* ion-searchbar input {
    border: 1px solid var(--ion-color-primary-step-800) !important;
} */




/* ion-skeleton-text {
    --border-radius: 9999px;
    --background: rgba(188, 0, 255, 0.065);
    --background-rgb: 188, 0, 255;
} */










/* clases */
.cs-cursor-pointer {
    cursor: pointer;
}


.cs-margin-end {
    margin-right: 8px;
}

.cs-margin-end-sm {
    margin-right: 4px;
}

.cs-margin-bottom-sm {
    margin-bottom: 4px;
}

.cs-margin-top {
    margin-top: 8px;
}

.cs-margin-top-sm {
    margin-top: 4px;
}

.cs-margin-top-xl {
    margin-top: 32px;
}

.cs-margin-bottom-xl {
    margin-bottom: 32px;
}

.cs-margin-bottom-xll {
    margin-bottom: 48px;
}

.cs-margin-bottom-xxl {
    margin-bottom: 64px;
}

.cs-margin-start-xl {
    margin-left: 32px;
}

.cs-margin-end-xl {
    margin-right: 32px;
}

/* .cs-margin-top-sm {
    margin-right: 4px;
} */

/* .cs-margin-bottom {
    margin-bottom: 8px;
} */

.cs-margin-horizontal {
    margin-right: 8px;
    margin-left: 8px;
}


.sticky-top-content {
    position: sticky;
    top: 0;
    z-index: 10;
}

.toolbar-collapsed {
    --min-height: 0 !important;
}

.banner-empty {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* background: var(--ion-background-color); */
    color: var(--ion-color-primary-step-250);
    /* opacity: 0.20; */
    user-select: none;
    z-index: 1;
    padding: 1rem;
}

.cs-d-none {
    display: none;
}

/* .cs-h-100 {
    height: 100% !important;
} */

.cs-second-toolbar {
    --background: var(--ion-color-gray-light) !important;
    --color: var(--ion-color-dark) !important;
}

.csh-second-toolbar {
    background: var(--ion-color-gray-light) !important;
    color: var(--ion-color-dark) !important;
}



.cs-detail-icon-black {
    --detail-icon-color: var(--ion-color-black) !important;
    /* --detail-icon-opacity: 1 !important; */
}

.cs-icon-black {
    color: var(--ion-color-black) !important;
}

.cs-color-black {
    color: var(--ion-color-black) !important;
}

.css-color-black {
    color: var(--ion-color-black) !important;
}

.cs-color-white {
    --color: var(--ion-color-white) !important;
}

.cs-text-bold {
    font-weight: bold !important;
}

.cs-text-normal {
    font-weight: 400 !important;
}

.cs-color-danger {
    color: var(--ion-color-danger) !important;
}

.cs-color-primary {
    color: var(--ion-color-primary) !important;
}

.cs-color-secondary {
    color: var(--ion-color-secondary) !important;
}

.cs-bg-medium {
    --background: var(--ion-color-medium) !important;
    background: var(--ion-color-medium) !important;
}

.css-bg-success {
    background: var(--ion-color-success) !important;
}

.cs-bg-olive {
    --background: var(--ion-color-olive) !important;
}

.cs-btn-danger {
    --background: var(--ion-color-danger) !important;
    --color: var(--ion-color-white) !important;
}

.cs-btn-success {
    --background: var(--ion-color-success) !important;
    --color: var(--ion-color-black) !important;
}

.cs-btn-primary {
    --background: var(--ion-color-primary) !important;
    --color: var(--ion-color-white) !important;
}

.cs-searchbar-clean {
    --box-shadow: none !important;
    --background: transparent !important;
    --border-width: 0 !important;
    --border-style: none !important;
}

.cs-icon-white {
    --icon-color: var(--ion-color-white) !important;
}

.cs-border-bottom-circle {
    border-bottom-left-radius: 50% 200px;
    border-bottom-right-radius: 50% 200px;
}

.csi-btn-rounded {
    --border-radius: 24px !important;
}

.cs-d-flex {
    display: flex;
}

.cs-d-flex-i {
    display: flex !important;
}

.cs-padding-horizontal {
    padding-left: 8px;
    padding-right: 8px;
}

.cs-padding-horizontal-sm {
    padding-left: 4px;
    padding-right: 4px;
}

.cs-margin-horizontal-sm {
    margin-left: 4px;
    margin-right: 4px;
}

.cs-margin-vertical-i {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.cs-margin-vertical {
    margin-top: 8px;
    margin-bottom: 8px;
}

.cs-padding-vertical {
    padding-top: 8px;
    padding-bottom: 8px;
}

.cs-padding-vertical-i {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.cs-padding-vertical-sm {
    padding-top: 4px;
    padding-bottom: 4px;
}

.csi-inner-padding-vertical {
    --inner-padding-top: 8px;
    --inner-padding-bottom: 8px;
}

.csi-inner-padding-vertical-sm {
    --inner-padding-top: 4px;
    --inner-padding-bottom: 4px;
}

.cs-padding-bottom {
    padding-bottom: 8px;
}

.cs-padding-top {
    padding-top: 8px;
}

.cs-padding-none {
    padding: 0;
}

.csi-padding {
    --padding-top: 8px;
    --padding-end: 8px;
    --padding-bottom: 8px;
    --padding-start: 8px;
}

.csi-padding-top {
    --padding-top: 8px;
}

.cs-padding-top-i {
    padding-top: 8px !important;
}

.cs-padding-bottom-sm {
    padding-bottom: 4px;
}

.cs-bg-olive {
    --background: var(--ion-color-olive) !important;
    --color: var(--ion-color-white) !important;
}

.cs-text-center {
    text-align: center;
}

.cs-pointer-died {
    pointer-events: none;
}

.cs-margin {
    margin: 8px;
}

.cs-padding {
    padding: 8px;
}

.cs-padding-sm {
    padding: 4px;
}

.cs-padding-top-sm {
    padding-top: 4px;
}

.cs-padding-end-sm {
    padding-right: 4px;
}

.cs-padding-start-sm {
    padding-left: 4px;
}

.cs-padding-horizontal-lg {
    padding-left: 16px;
    padding-right: 16px;
}

.cs-border-2 {
    border-width: 2px;
}

.cs-color-medium {
    color: var(--ion-color-medium);
}

.cs-color-warning {
    color: var(--ion-color-warning);
}

.cs-color-success {
    color: var(--ion-color-success);
}

.cs-border-warning {
    border-color: var(--ion-color-warning);
}

.cs-w-100 {
    width: 100%;
}

.cs-ion-no-padding {
    --padding-start: 0;
    --padding-end: 0;
    --padding-top: 0;
    --padding-bottom: 0;
}

.cs-ion-no-padding-horizontal {
    --padding-start: 0;
    --padding-end: 0;
}

.cs-mb-0 {
    margin-bottom: 0;
}

.cs-padding-bottom-0 {
    padding-bottom: 0;
}

.cs-padding-start {
    padding-left: 8px;
}

.cs-text-uppercase {
    text-transform: uppercase;
}

.cs-margin-start {
    margin-left: 8px;
}

.cs-margin-start-sm {
    margin-left: 4px;
}

.cs-flex-column {
    flex-direction: column;
}

.cs-flex-row {
    flex-direction: row;
}

.cs-flex-no-shrink {
    flex-shrink: 0;
}


.cs-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-text-truncate-i {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.cs-text-nowrap {
    white-space: nowrap !important;
}

.cs-no-wrap {
    white-space: nowrap;
}

.cs-imagen {
    object-fit: fill;
    width: 100%;
    height: 100%;
}

.cs-imagen-i {
    object-fit: fill !important;
    width: 100%;
    height: 100%;
}



.avatar-preview {
    display: block;
    margin: 0 auto 1rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}




.cs-table {
    width: 100%;
    border-collapse: collapse;
}

.cs-table-warning thead {
    background-color: var(--ion-color-warning);
    color: var(--ion-color-dark);
}

.cs-table-success thead {
    background-color: var(--ion-color-success);
    color: var(--ion-color-dark);
}

.cs-table-dark thead {
    background-color: var(--ion-color-dark);
    color: var(--ion-color-light);
}

.cs-table-primary thead {
    background-color: var(--ion-color-primary);
    color: var(--ion-color-light);
}

.cs-table tr {
    font-weight: bold !important;
}

.cs-table td,
.cs-table th {
    padding: 8px;
    border: 1px solid #ccc;
}

.cs-table td:first-child,
.cs-table th:first-child {
    text-align: left;
}

.cs-table td:last-child,
.cs-table th:last-child {
    text-align: right;
}


.cs-table-color-black-i {
    --color: var(--ion-color-black) !important;
}



.cs-border-clasic {
    border: 1px solid #ccc;
}

.cs-border {
    border-width: 1px;
}

.cs-rounded {
    border-radius: 0.25rem;
}


.csi-no-padding-horizontal {
    --padding-start: 0;
    --padding-end: 0;
}

.csi-no-inner-padding-horizontal {
    --inner-padding-start: 0;
    --inner-padding-end: 0;
}

.csi-inner-padding-horizontal {
    --inner-padding-start: 8px;
    --inner-padding-end: 8px;
}

.csi-no-padding-horizontal {
    --padding-start: 0px;
    --padding-end: 0px;
}

.csi-padding-vertical-sm {
    --padding-top: 4px;
    --padding-bottom: 4px;
}

.csi-padding-vertical {
    --padding-top: 8px;
    --padding-bottom: 8px;
}


.cs-ion-textarea-readonly-i textarea {
    font-weight: bold !important;
}

.cs-ion-input-readonly-i input {
    font-weight: bold !important;
}


.cs-margin-start-auto {
    margin-left: auto;
}


html,
body {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */
    user-select: none;
    /* Standard */
}

/* Permitir selección y edición en campos de formulario */
input,
textarea,
select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}





ion-radio-group[readonly] {
    pointer-events: none;
    /* No permite interacción */
    opacity: 0.7;
    /* Visualmente atenuado */
}



.cs-margin-slotted {
    margin-left: 0;
    margin-right: 0;
    margin-top: 13px;
    margin-bottom: 10px;
}

.cs-padding-slotted {
    padding-left: 0;
    padding-right: 0;
    padding-top: 13px;
    padding-bottom: 10px;
}







/* COMPONENTES WEB CREADOS POR MI */

/* *********** CUSTOM STEPS *********** */
:root {
    --step-dot: var(--ion-color-naranja);
}

.cs-steps {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: .5rem;
    padding: .5rem .75rem
}

.cs-step {
    display: flex;
    align-items: center;
    gap: .5rem
}

.cs-step-label {
    font-size: .9rem
}

.cs-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: var(--ion-color-medium);
    color: var(--ion-color-light);
    font-size: .8rem
}

.cs-step-dot[aria-current="true"] {
    background: var(--step-dot);
    color: var(--ion-color-dark);
    font-weight: bold;
}

.cs-step .cs-step-dot[aria-current="true"]+.cs-step-label {
    font-weight: bold;
}


.cs-step-dot[aria-disabled="true"] {
    opacity: .45
}

/* *********** CUSTOM STEPS *********** */





.cs-text-muted {
    color: var(--ion-color-medium);
}




@media (max-width: 578px) {
    .mob-cs-hide {
        display: none !important;
    }
}











/* theme.css *-/
/* Archivo principal de theming para Ionic Core.
   Define variables globales y estilos base para todos los componentes Ionic. *-/

:root {
    /* ---------------------------
       PALETA PRINCIPAL DE COLORES
       Define aquí tus colores base (HEX).
    --------------------------- *-/
    --ion-color-primary: #1e88e5;
    --ion-color-primary-rgb: 30, 136, 229;
    --ion-color-primary-contrast: #ffffff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #1976d2;
    --ion-color-primary-tint: #42a5f5;

    --ion-color-secondary: #ffca28;
    --ion-color-secondary-rgb: 255, 202, 40;
    --ion-color-secondary-contrast: #000000;
    --ion-color-secondary-contrast-rgb: 0, 0, 0;
    --ion-color-secondary-shade: #ffb300;
    --ion-color-secondary-tint: #ffd54f;

    --ion-color-tertiary: #8e24aa;
    --ion-color-tertiary-rgb: 142, 36, 170;
    --ion-color-tertiary-contrast: #ffffff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #7b1fa2;
    --ion-color-tertiary-tint: #9c4dcc;

    --ion-color-success: #43a047;
    --ion-color-success-rgb: 67, 160, 71;
    --ion-color-success-contrast: #ffffff;
    --ion-color-success-contrast-rgb: 255, 255, 255;
    --ion-color-success-shade: #388e3c;
    --ion-color-success-tint: #66bb6a;

    --ion-color-warning: #fdd835;
    --ion-color-warning-rgb: 253, 216, 53;
    --ion-color-warning-contrast: #000000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #fbc02d;
    --ion-color-warning-tint: #ffeb3b;

    --ion-color-danger: #e53935;
    --ion-color-danger-rgb: 229, 57, 53;
    --ion-color-danger-contrast: #ffffff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #d32f2f;
    --ion-color-danger-tint: #ef5350;

    --ion-color-dark: #222428;
    --ion-color-dark-rgb: 34, 36, 40;
    --ion-color-dark-contrast: #ffffff;
    --ion-color-dark-contrast-rgb: 255, 255, 255;
    --ion-color-dark-shade: #1e2023;
    --ion-color-dark-tint: #383a3e;

    --ion-color-medium: #92949c;
    --ion-color-medium-rgb: 146, 148, 156;
    --ion-color-medium-contrast: #ffffff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #808289;
    --ion-color-medium-tint: #9d9fa6;

    --ion-color-light: #f4f5f8;
    --ion-color-light-rgb: 244, 245, 248;
    --ion-color-light-contrast: #000000;
    --ion-color-light-contrast-rgb: 0, 0, 0;
    --ion-color-light-shade: #d7d8da;
    --ion-color-light-tint: #f5f6f9;

    /* ---------------------------
       VARIABLES DE FONDO Y TEXTO
    --------------------------- *-/
    --ion-background-color: #ffffff;
    --ion-text-color: #000000;
    --ion-font-family: 'Helvetica Neue', Arial, sans-serif;

    /* ---------------------------
       TIPOGRAFÍA GLOBAL
    --------------------------- *-/
    --ion-font-size-base: 16px;
    --ion-font-size-sm: 14px;
    --ion-font-size-lg: 18px;
    --ion-line-height-base: 1.5;

    /* ---------------------------
       BORDES Y SOMBRAS GENERALES
    --------------------------- *-/
    --ion-border-radius: 8px;
    --ion-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --ion-box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);

    /* ---------------------------
       COMPONENETES: VARIABLES SPECÍFICAS
       Ajustes para que cada componente adopte el tema.
    --------------------------- *-/

    /* --- ion-toolbar (header/footer) --- *-/
    --ion-toolbar-background: var(--ion-color-primary);
    --ion-toolbar-color: var(--ion-color-primary-contrast);
    --ion-toolbar-border-color: rgba(0, 0, 0, 0.1);

    /* --- ion-tab-bar --- *-/
    --ion-tab-bar-background: var(--ion-color-light);
    --ion-tab-bar-color: var(--ion-color-medium);
    --ion-tab-bar-color-selected: var(--ion-color-primary);
    --ion-tab-bar-box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);

    /* --- ion-button (botones) --- *-/
    --ion-button-border-radius: var(--ion-border-radius);
    --ion-button-font-size: var(--ion-font-size-base);
    --ion-button-padding-top: 0.5rem;
    --ion-button-padding-bottom: 0.5rem;
    --ion-button-padding-start: 1rem;
    --ion-button-padding-end: 1rem;
    --ion-button-background: var(--ion-color-primary);
    --ion-button-color: var(--ion-color-primary-contrast);
    --ion-button-border-width: 0;
    --ion-button-box-shadow: var(--ion-box-shadow);

    /* Botón secundario (ion-button[color="secondary"]) *-/
    --ion-button-secondary-background: var(--ion-color-secondary);
    --ion-button-secondary-color: var(--ion-color-secondary-contrast);

    /* Botón success (ion-button[color="success"]) *-/
    --ion-button-success-background: var(--ion-color-success);
    --ion-button-success-color: var(--ion-color-success-contrast);

    /* Botón danger (ion-button[color="danger"]) *-/
    --ion-button-danger-background: var(--ion-color-danger);
    --ion-button-danger-color: var(--ion-color-danger-contrast);

    /* Botón warning (ion-button[color="warning"]) *-/
    --ion-button-warning-background: var(--ion-color-warning);
    --ion-button-warning-color: var(--ion-color-warning-contrast);

    /* --- ion-card --- *-/
    --ion-card-background: var(--ion-color-light);
    --ion-card-color: var(--ion-color-dark);
    --ion-card-border-radius: var(--ion-border-radius);
    --ion-card-box-shadow: var(--ion-box-shadow);

    /* --- ion-list y ion-item --- *-/
    --ion-item-background: var(--ion-color-light);
    --ion-item-color: var(--ion-color-dark);
    --ion-item-border-color: rgba(0, 0, 0, 0.05);
    --ion-item-inner-border-width: 1px;
    --ion-item-border-radius: var(--ion-border-radius);

    /* --- ion-input, ion-textarea, ion-select --- *-/
    --ion-input-background: #ffffff;
    --ion-input-color: var(--ion-color-dark);
    --ion-input-border-color: rgba(0, 0, 0, 0.15);
    --ion-input-border-width: 1px;
    --ion-input-border-radius: var(--ion-border-radius);
    --ion-input-padding-start: 0.75rem;
    --ion-input-padding-end: 0.75rem;

    /* --- ion-checkbox, ion-radio, ion-toggle --- *-/
    --ion-toggle-active-background: var(--ion-color-primary);
    --ion-toggle-inactive-background: var(--ion-color-medium);
    --ion-toggle-disabled-opacity: 0.4;

    --ion-checkbox-checkmark-color: var(--ion-color-primary);
    --ion-checkbox-border-color: var(--ion-color-medium);
    --ion-checkbox-disabled-opacity: 0.4;

    --ion-radio-inner-color: var(--ion-color-primary);
    --ion-radio-border-color: var(--ion-color-medium);
    --ion-radio-disabled-opacity: 0.4;

    /* --- ion-badge --- *-/
    --ion-badge-background: var(--ion-color-danger);
    --ion-badge-color: var(--ion-color-danger-contrast);
    --ion-badge-border-radius: 10px;
    --ion-badge-font-size: var(--ion-font-size-sm);

    /* --- ion-chip --- *-/
    --ion-chip-background: var(--ion-color-secondary);
    --ion-chip-color: var(--ion-color-secondary-contrast);
    --ion-chip-border-radius: var(--ion-border-radius);
    --ion-chip-padding-start: 0.5rem;
    --ion-chip-padding-end: 0.5rem;

    /* --- ion-toolbar botones en popover/menu --- *-/
    --ion-toolbar-button-color: var(--ion-color-light);
    --ion-toolbar-button-hover-background: rgba(255, 255, 255, 0.1);

    /* --- ion-modal --- *-/
    --ion-modal-background: var(--ion-color-light);
    --ion-modal-border-radius: var(--ion-border-radius);
    --ion-modal-shadow: var(--ion-box-shadow-md);

    /* --- ion-popover --- *-/
    --ion-popover-background: var(--ion-color-light);
    --ion-popover-border-radius: var(--ion-border-radius);
    --ion-popover-shadow: var(--ion-box-shadow-md);

    /* --- ion-toast --- *-/
    --ion-toast-background: var(--ion-color-dark);
    --ion-toast-color: var(--ion-color-light);
    --ion-toast-border-radius: var(--ion-border-radius);
    --ion-toast-box-shadow: var(--ion-box-shadow-md);

    /* --- ion-loading --- *-/
    --ion-loading-spinner-color: var(--ion-color-primary);

    /* --- ion-progress-bar (primario) --- *-/
    --ion-progress-bar-height: 4px;
    --ion-progress-bar-color: var(--ion-color-primary);

    /* --- ion-range (slider) --- *-/
    --ion-range-knob-background: var(--ion-color-primary);
    --ion-range-bar-background-active: var(--ion-color-primary);
    --ion-range-bar-background: var(--ion-color-medium);

    /* --- ion-segment --- *-/
    --ion-segment-background: var(--ion-color-light);
    --ion-segment-button-background: transparent;
    --ion-segment-button-color: var(--ion-color-medium);
    --ion-segment-button-color-checked: var(--ion-color-primary);
    --ion-segment-button-background-checked: var(--ion-color-light);

    /* --- ion-slides (bullet indicadores) --- *-/
    --ion-slides-bullet-color: var(--ion-color-medium);
    --ion-slides-bullet-active-color: var(--ion-color-primary);

    /* --- ion-tabs --- *-/
    --ion-tabs-background: var(--ion-color-light);
    --ion-tabs-highlight-color: var(--ion-color-primary);

    /* --- ion-toast --- *-/
    --ion-toast-button-color: var(--ion-color-primary);

    /* --- ion-alert --- *-/
    --ion-alert-heading-color: var(--ion-color-primary);
    --ion-alert-button-color: var(--ion-color-primary);
    --ion-alert-button-background: transparent;

    /* --- ion-card-subtitle, ion-card-title --- *-/
    --ion-font-family-heading: 'Roboto Slab', serif;
    --ion-font-weight-heading: 600;

    /* --- ion-title (en toolbar) --- *-/
    --ion-toolbar-title-font-size: var(--ion-font-size-lg);
    --ion-toolbar-title-color: var(--ion-color-light);

    /* --- ion-textarea placeholder --- *-/
    --ion-input-placeholder-color: var(--ion-color-medium);
}

/* ---------------------------------------
     ESTILOS ADICIONALES PARA COMPONENTES ESPECÍFICOS
     (Ajustes menores de padding, márgenes y sombras)
  -----------------------------------------*-/

/* ion-header *-/
ion-header {
    --background: var(--ion-toolbar-background);
}

/* ion-footer (p. ej.: si lo usas) *-/
ion-footer {
    --background: var(--ion-toolbar-background);
    --color: var(--ion-toolbar-color);
}

/* ion-content *-/
ion-content {
    --background: var(--ion-background-color);
    color: var(--ion-text-color);
    font-family: var(--ion-font-family);
    font-size: var(--ion-font-size-base);
    line-height: var(--ion-line-height-base);
}

/* ion-toolbar dentro de ion-modal *-/
ion-modal ion-header ion-toolbar {
    --background: var(--ion-modal-background);
    --color: var(--ion-toolbar-color);
}

/* ion-button tamaño grande (klase) *-/
ion-button.ion-large {
    --padding-top: 0.75rem;
    --padding-bottom: 0.75rem;
    --font-size: var(--ion-font-size-lg);
}

/* ion-card <– sombra más pronunciada *-/
ion-card {
    box-shadow: var(--ion-box-shadow-md);
}

/* ion-item con borde inferior *-/
ion-item {
    --inner-border-width: 1px;
    --inner-border-style: solid;
    --inner-border-color: var(--ion-item-border-color);
}

/* ion-checkbox, ion-radio espaciado *-/
ion-checkbox,
ion-radio {
    margin-right: 0.5rem;
}

/* ion-chip: separación entre chips *-/
ion-chip {
    margin: 0.25rem 0.25rem 0 0;
}

/* ----------------------------------------------------------
     End of theme.css
     Incluye este archivo en tu menu_ion.html justo después de ionic.bundle.css:
     <link rel="stylesheet" href="{% static 'app/css/theme.css' %}">
  ----------------------------------------------------------- *-/