/* inter-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-cyrillic-ext-400-normal.f572b170fbc12b43.woff2') format('woff2'), url('inter-cyrillic-ext-400-normal.2a31c04be1fac271.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-cyrillic-400-normal.372704ff403efaf1.woff2') format('woff2'), url('inter-cyrillic-400-normal.a6b6ef6faf0b7c0c.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-greek-ext-400-normal.4ce1df5d07119d33.woff2') format('woff2'), url('inter-greek-ext-400-normal.88ede1ea0aa95dd1.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-greek-400-normal.d7020e3c6f95df58.woff2') format('woff2'), url('inter-greek-400-normal.cc58c11b20a86345.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-vietnamese-400-normal.de4fc44f89059189.woff2') format('woff2'), url('inter-vietnamese-400-normal.a9dd2faf81c10f4e.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-latin-ext-400-normal.32a254422883c2af.woff2') format('woff2'), url('inter-latin-ext-400-normal.4edcaacee0d25e32.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-400-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('inter-latin-400-normal.ef6d3f52c547a6e3.woff2') format('woff2'), url('inter-latin-400-normal.2c7a775c1cfc0bf6.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('inter-cyrillic-ext-500-normal.fe0d9b14f720f858.woff2') format('woff2'), url('inter-cyrillic-ext-500-normal.5a6bb1da5010f238.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('inter-cyrillic-500-normal.7c15bba8be3c19b5.woff2') format('woff2'), url('inter-cyrillic-500-normal.b9f8c929ada23462.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('inter-greek-ext-500-normal.cbd51e2da92fb3cc.woff2') format('woff2'), url('inter-greek-ext-500-normal.7a4aa726ab43f57f.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('inter-greek-500-normal.f41f43dbd973adba.woff2') format('woff2'), url('inter-greek-500-normal.d9a33207d70fd21f.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('inter-vietnamese-500-normal.7c0a695f6fa5005e.woff2') format('woff2'), url('inter-vietnamese-500-normal.a3a73b952b5b6834.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('inter-latin-ext-500-normal.d9b491decc0ea3af.woff2') format('woff2'), url('inter-latin-ext-500-normal.a19a84a6cbb36183.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-500-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('inter-latin-500-normal.b7b43acee81d05a8.woff2') format('woff2'), url('inter-latin-500-normal.cb4c8ceb0127a511.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-cyrillic-ext-600-normal.f7b3c15b2a7e96ad.woff2') format('woff2'), url('inter-cyrillic-ext-600-normal.ecbdecadef6fbc02.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-cyrillic-600-normal.2f42892af189ad38.woff2') format('woff2'), url('inter-cyrillic-600-normal.c3987adc32ba5dac.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-greek-ext-600-normal.1f33d317c3a3e1b0.woff2') format('woff2'), url('inter-greek-ext-600-normal.089a95ee7c81ee92.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-greek-600-normal.cc532937822d8194.woff2') format('woff2'), url('inter-greek-600-normal.4ec0c1c1a5ca14f2.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-vietnamese-600-normal.9d5185991feb027c.woff2') format('woff2'), url('inter-vietnamese-600-normal.c5ce3fcb6823f788.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-latin-ext-600-normal.38b075d8fe927553.woff2') format('woff2'), url('inter-latin-ext-600-normal.49faa47a23c9c3d6.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-600-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('inter-latin-600-normal.8fb1a96451cec840.woff2') format('woff2'), url('inter-latin-600-normal.ce0f5f4333584aab.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-cyrillic-ext-700-normal.74b516d253777229.woff2') format('woff2'), url('inter-cyrillic-ext-700-normal.4b4022a6b0b1f6e0.woff') format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-cyrillic-700-normal.e9e5b2dce1200b7b.woff2') format('woff2'), url('inter-cyrillic-700-normal.93eba3c390643296.woff') format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-greek-ext-700-normal.827cd61841cdf257.woff2') format('woff2'), url('inter-greek-ext-700-normal.31f1075d7bd4946c.woff') format('woff');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-greek-700-normal.97f0eeeb8150554c.woff2') format('woff2'), url('inter-greek-700-normal.5ec6c758e5e9cbbd.woff') format('woff');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-vietnamese-700-normal.faf12809fe069df4.woff2') format('woff2'), url('inter-vietnamese-700-normal.bc68b1994411c391.woff') format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-latin-ext-700-normal.b63daa1aded44f3c.woff2') format('woff2'), url('inter-latin-ext-700-normal.93534b500390f383.woff') format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-700-normal */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('inter-latin-700-normal.953b7aa585d36a2b.woff2') format('woff2'), url('inter-latin-700-normal.9c21d4dcc3745e44.woff') format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons.59322316b3fd6063.woff2') format("woff2"), url('material-icons.4ad034d2c499d9b6.woff') format("woff");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-outlined.f86cb7b0aa53f0fe.woff2') format("woff2"), url('material-icons-outlined.78a93b2079680a08.woff') format("woff");
}
.material-icons-outlined {
  font-family: "Material Icons Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Round";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-round.b10ec9db5b7fbc74.woff2') format("woff2"), url('material-icons-round.92dc7ca2f4c591e7.woff') format("woff");
}
.material-icons-round {
  font-family: "Material Icons Round";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Sharp";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-sharp.3885863ee4746422.woff2') format("woff2"), url('material-icons-sharp.a71cb2bf66c604de.woff') format("woff");
}
.material-icons-sharp {
  font-family: "Material Icons Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Icons Two Tone";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-icons-two-tone.675bd578bd14533e.woff2') format("woff2"), url('material-icons-two-tone.588d63134de807a7.woff') format("woff");
}
.material-icons-two-tone {
  font-family: "Material Icons Two Tone";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}
@charset "UTF-8";
/* =============================================================================
 * subscriptionManager — Global styles
 *
 * Sistema visual alineado con https://magmma.ar (rediseño 2026-10-26).
 *
 * Los valores de marca salen de los tokens PUBLICADOS por magmma.ar, leídos de
 * su CSS en producción (no estimados de una captura):
 *   crema #e4e0d3 · bordó #710f19 · base #12100f · raised #1b1817 · overlay #241f1e
 *   acento #d06a74 (hover #de8189) · texto secundario #a8a399
 *   success #5fb37a · warning #d9a03f · danger #e0616b
 *   Inter 400/600 · radios 4/8/12/999 · bordes crema al 10% y 22% · SIN sombras
 *
 * Lo que se tomó de la referencia es el LENGUAJE, no la landing:
 *   - Oscuro cálido: el negro es #12100f (no neutro) y el texto crema (no blanco).
 *   - Jerarquía por superficie y borde, nunca por sombra: base → raised → overlay.
 *   - Un solo color de acción: bordó sólido para la acción primaria, que en hover
 *     INVIERTE a rosa con texto oscuro; el secundario es contorno que se enciende
 *     en rosa. El rosa es además el único color de foco y de selección.
 *   - Eyebrows y encabezados de tabla en mayúsculas chicas con tracking abierto.
 *   - Un solo gradiente permitido: el halo radial tenue del hero (sólo en login).
 *
 * Desvíos deliberados respecto de magmma.ar (documentados, no accidentales):
 *   1. `--text-muted` es #908b81, no #7c776e. El de la web da 4.27:1 sobre la
 *      base y falla WCAG AA para texto chico; en una app de uso diario eso es
 *      todo el texto de apoyo. #908b81 da 5.6:1 sobre base, 5.2:1 sobre raised
 *      y 4.8:1 sobre overlay.
 *   2. Botones de 40px y no de 44px: la web los dimensiona como target táctil de
 *      landing; en tablas y toolbars densas 44px rompe el ritmo. En teléfono
 *      vuelven a 44px (ver "Mobile" más abajo).
 *   3. La web no define un color "info". Acá info es NEUTRO (crema), no azul:
 *      meter un azul ajeno a la paleta sería inventar identidad.
 *   4. Texto 14px (el `--text-base` de la web) en lugar de los 16px del cuerpo
 *      de la landing: es una herramienta de lectura densa, no una página.
 * ============================================================================ */
/* Fonts + Material Icons + CDK a11y: cargados desde angular.json `styles`
 * lista en lugar de @import SCSS. Esto es CRÍTICO para que Angular CLI
 * resuelva bien los referenced assets (woff2, ttf) y los bundlee con paths
 * relativos correctos en producción.
 *
 * Listas declaradas en angular.json:
 *   - @fontsource/inter/{400,500,600,700}.css
 *   - material-icons/iconfont/material-icons.css (Angular CLI copia los
 *     font files a dist/browser/material-icons.*.woff2)
 *   - @angular/cdk/a11y-prebuilt.css
 *   - src/styles.scss (este archivo)
 *
 * IMPORTANTE — bug del minifier (2026-05-27 night):
 * El minificador CSS de Angular DROPS las comillas alrededor de
 * "Material Icons" en el bundle prod, dejando `font-family:Material Icons;`.
 * Aunque CSS spec acepta font names sin quotes, en algunos browsers el
 * @font-face declarado sin quotes no matchea consistentemente con el
 * font-family lookup de Angular Material (.material-icons class).
 * Workaround: deshabilitar styles.minify en angular.json (production config).
 * Trade-off: bundle CSS sin minify (~104KB vs ~10KB). Aceptable.
 */
.mat-ripple {
  overflow: hidden;
  position: relative;
}
.mat-ripple:not(:empty) {
  transform: translateZ(0);
}

.mat-ripple.mat-ripple-unbounded {
  overflow: visible;
}

.mat-ripple-element {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
  transform: scale3d(0, 0, 0);
  background-color: var(--mat-ripple-color, rgba(0, 0, 0, 0.1));
}
.cdk-high-contrast-active .mat-ripple-element {
  display: none;
}

.cdk-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  outline: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  left: 0;
}
[dir=rtl] .cdk-visually-hidden {
  left: auto;
  right: 0;
}

.cdk-overlay-container, .cdk-global-overlay-wrapper {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.cdk-overlay-container {
  position: fixed;
  z-index: 1000;
}
.cdk-overlay-container:empty {
  display: none;
}

.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
}

.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;
}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0.6;
}

.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.32);
}

.cdk-overlay-transparent-backdrop {
  transition: visibility 1ms linear, opacity 1ms linear;
  visibility: hidden;
  opacity: 1;
}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
  opacity: 0;
  visibility: visible;
}

.cdk-overlay-backdrop-noop-animation {
  transition: none;
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

.cdk-global-scrollblock {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

textarea.cdk-textarea-autosize {
  resize: none;
}

textarea.cdk-textarea-autosize-measuring {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: auto !important;
  overflow: hidden !important;
}

textarea.cdk-textarea-autosize-measuring-firefox {
  padding: 2px 0 !important;
  box-sizing: content-box !important;
  height: 0 !important;
}

@keyframes cdk-text-field-autofill-start { /*!*/ }
@keyframes cdk-text-field-autofill-end { /*!*/ }
.cdk-text-field-autofill-monitored:-webkit-autofill {
  animation: cdk-text-field-autofill-start 0s 1ms;
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
  animation: cdk-text-field-autofill-end 0s 1ms;
}

.mat-focus-indicator {
  position: relative;
}
.mat-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-focus-indicator-display, none);
  border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
  border-radius: var(--mat-focus-indicator-border-radius, 4px);
}
.mat-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-focus-indicator-display: block;
}

.mat-mdc-focus-indicator {
  position: relative;
}
.mat-mdc-focus-indicator::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  display: var(--mat-mdc-focus-indicator-display, none);
  border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
  border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px);
}
.mat-mdc-focus-indicator:focus::before {
  content: "";
}

.cdk-high-contrast-active {
  --mat-mdc-focus-indicator-display: block;
}

.mat-app-background {
  background-color: var(--mat-app-background-color, transparent);
  color: var(--mat-app-text-color, inherit);
}

/* =============================================================================
 * Tema de Angular Material
 *
 * Las paletas se derivan de los tokens de magmma.ar. `primary` y `accent` son el
 * MISMO rosa (#d06a74): sobre una superficie oscura el bordó #710f19 da 1.6:1 y
 * no se ve, así que lo que Material pinta como color de énfasis (foco, checkbox
 * marcado, tab activa, barra de progreso, toggle) tiene que ser el rosa. El bordó
 * se usa como RELLENO de la acción primaria, que se sobreescribe más abajo.
 * ============================================================================= */
/* `warn` gira en torno al --danger de magmma.ar (#e0616b). */
/* Tipografía de Material = escala de la web (11/12/14/16/20/28), Inter, tracking
 * normal. Sin esto Material imprime su propia escala (cuerpo 16px, botones con
 * `letter-spacing: .0893em`, labels con .03em) y la app termina con texto más
 * grande y más espaciado que el de la referencia. */
/* El tema oscuro de Material trae grises neutros (#303030, #424242, blanco puro).
 * Se reemplazan por las tres superficies y los textos de la marca: sin esto cada
 * componente de Material (paginador, tabla, menú, chips, datepicker…) se pinta
 * con un gris que no existe en ningún otro lado del sistema. */
html {
  --mat-ripple-color: rgba(228, 224, 211, 0.1);
}

html {
  --mat-option-selected-state-label-text-color: #d06a74;
  --mat-option-label-text-color: #e4e0d3;
  --mat-option-hover-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-option-focus-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-option-selected-state-layer-color: rgba(228, 224, 211, 0.08);
}

.mat-accent {
  --mat-option-selected-state-label-text-color: #d06a74;
  --mat-option-label-text-color: #e4e0d3;
  --mat-option-hover-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-option-focus-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-option-selected-state-layer-color: rgba(228, 224, 211, 0.08);
}

.mat-warn {
  --mat-option-selected-state-label-text-color: #e0616b;
  --mat-option-label-text-color: #e4e0d3;
  --mat-option-hover-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-option-focus-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-option-selected-state-layer-color: rgba(228, 224, 211, 0.08);
}

html {
  --mat-optgroup-label-text-color: #e4e0d3;
}

.mat-primary {
  --mat-full-pseudo-checkbox-selected-icon-color: #d06a74;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-unselected-icon-color: #a8a399;
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #d06a74;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868;
}

html {
  --mat-full-pseudo-checkbox-selected-icon-color: #d06a74;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-unselected-icon-color: #a8a399;
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #d06a74;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868;
}

.mat-accent {
  --mat-full-pseudo-checkbox-selected-icon-color: #d06a74;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-unselected-icon-color: #a8a399;
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #d06a74;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868;
}

.mat-warn {
  --mat-full-pseudo-checkbox-selected-icon-color: #e0616b;
  --mat-full-pseudo-checkbox-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-unselected-icon-color: #a8a399;
  --mat-full-pseudo-checkbox-disabled-selected-checkmark-color: #12100f;
  --mat-full-pseudo-checkbox-disabled-unselected-icon-color: #686868;
  --mat-full-pseudo-checkbox-disabled-selected-icon-color: #686868;
  --mat-minimal-pseudo-checkbox-selected-checkmark-color: #e0616b;
  --mat-minimal-pseudo-checkbox-disabled-selected-checkmark-color: #686868;
}

html {
  --mat-app-background-color: #12100f;
  --mat-app-text-color: #e4e0d3;
}

.mat-elevation-z0, .mat-mdc-elevation-specific.mat-elevation-z0 {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z1, .mat-mdc-elevation-specific.mat-elevation-z1 {
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z2, .mat-mdc-elevation-specific.mat-elevation-z2 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z3, .mat-mdc-elevation-specific.mat-elevation-z3 {
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z4, .mat-mdc-elevation-specific.mat-elevation-z4 {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z5, .mat-mdc-elevation-specific.mat-elevation-z5 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z6, .mat-mdc-elevation-specific.mat-elevation-z6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z7, .mat-mdc-elevation-specific.mat-elevation-z7 {
  box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z8, .mat-mdc-elevation-specific.mat-elevation-z8 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z9, .mat-mdc-elevation-specific.mat-elevation-z9 {
  box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z10, .mat-mdc-elevation-specific.mat-elevation-z10 {
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z11, .mat-mdc-elevation-specific.mat-elevation-z11 {
  box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z12, .mat-mdc-elevation-specific.mat-elevation-z12 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z13, .mat-mdc-elevation-specific.mat-elevation-z13 {
  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z14, .mat-mdc-elevation-specific.mat-elevation-z14 {
  box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z15, .mat-mdc-elevation-specific.mat-elevation-z15 {
  box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z16, .mat-mdc-elevation-specific.mat-elevation-z16 {
  box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z17, .mat-mdc-elevation-specific.mat-elevation-z17 {
  box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z18, .mat-mdc-elevation-specific.mat-elevation-z18 {
  box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z19, .mat-mdc-elevation-specific.mat-elevation-z19 {
  box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z20, .mat-mdc-elevation-specific.mat-elevation-z20 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z21, .mat-mdc-elevation-specific.mat-elevation-z21 {
  box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z22, .mat-mdc-elevation-specific.mat-elevation-z22 {
  box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z23, .mat-mdc-elevation-specific.mat-elevation-z23 {
  box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
}

.mat-elevation-z24, .mat-mdc-elevation-specific.mat-elevation-z24 {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.mat-theme-loaded-marker {
  display: none;
}

html {
  --mat-option-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-option-label-text-line-height: 1.5;
  --mat-option-label-text-size: 14px;
  --mat-option-label-text-tracking: normal;
  --mat-option-label-text-weight: 400;
}

html {
  --mat-optgroup-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-optgroup-label-text-line-height: 1.5;
  --mat-optgroup-label-text-size: 14px;
  --mat-optgroup-label-text-tracking: normal;
  --mat-optgroup-label-text-weight: 400;
}

html {
  --mdc-elevated-card-container-shape: 4px;
  --mdc-outlined-card-container-shape: 4px;
  --mdc-outlined-card-outline-width: 1px;
}

html {
  --mdc-elevated-card-container-color: #1b1817;
  --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-outlined-card-container-color: #1b1817;
  --mdc-outlined-card-outline-color: rgba(228, 224, 211, 0.12);
  --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-card-subtitle-text-color: #a8a399;
}

html {
  --mat-card-title-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-card-title-text-line-height: 1.15;
  --mat-card-title-text-size: 20px;
  --mat-card-title-text-tracking: normal;
  --mat-card-title-text-weight: 600;
  --mat-card-subtitle-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-card-subtitle-text-line-height: 1.5;
  --mat-card-subtitle-text-size: 14px;
  --mat-card-subtitle-text-tracking: normal;
  --mat-card-subtitle-text-weight: 600;
}

html {
  --mdc-linear-progress-active-indicator-height: 4px;
  --mdc-linear-progress-track-height: 4px;
  --mdc-linear-progress-track-shape: 0;
}

.mat-mdc-progress-bar {
  --mdc-linear-progress-active-indicator-color: #d06a74;
  --mdc-linear-progress-track-color: rgba(208, 106, 116, 0.25);
}
.mat-mdc-progress-bar.mat-accent {
  --mdc-linear-progress-active-indicator-color: #d06a74;
  --mdc-linear-progress-track-color: rgba(208, 106, 116, 0.25);
}
.mat-mdc-progress-bar.mat-warn {
  --mdc-linear-progress-active-indicator-color: #e0616b;
  --mdc-linear-progress-track-color: rgba(224, 97, 107, 0.25);
}

html {
  --mdc-plain-tooltip-container-shape: 4px;
  --mdc-plain-tooltip-supporting-text-line-height: 16px;
}

html {
  --mdc-plain-tooltip-container-color: #241f1e;
  --mdc-plain-tooltip-supporting-text-color: #fff;
}

html {
  --mdc-plain-tooltip-supporting-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-plain-tooltip-supporting-text-size: 12px;
  --mdc-plain-tooltip-supporting-text-weight: 400;
  --mdc-plain-tooltip-supporting-text-tracking: normal;
}

html {
  --mdc-filled-text-field-active-indicator-height: 1px;
  --mdc-filled-text-field-focus-active-indicator-height: 2px;
  --mdc-filled-text-field-container-shape: 4px;
  --mdc-outlined-text-field-outline-width: 1px;
  --mdc-outlined-text-field-focus-outline-width: 2px;
  --mdc-outlined-text-field-container-shape: 4px;
}

html {
  --mdc-filled-text-field-caret-color: #d06a74;
  --mdc-filled-text-field-focus-active-indicator-color: #d06a74;
  --mdc-filled-text-field-focus-label-text-color: rgba(208, 106, 116, 0.87);
  --mdc-filled-text-field-container-color: #242120;
  --mdc-filled-text-field-disabled-container-color: #201d1c;
  --mdc-filled-text-field-label-text-color: rgba(228, 224, 211, 0.6);
  --mdc-filled-text-field-hover-label-text-color: rgba(228, 224, 211, 0.6);
  --mdc-filled-text-field-disabled-label-text-color: rgba(228, 224, 211, 0.38);
  --mdc-filled-text-field-input-text-color: rgba(228, 224, 211, 0.87);
  --mdc-filled-text-field-disabled-input-text-color: rgba(228, 224, 211, 0.38);
  --mdc-filled-text-field-input-text-placeholder-color: rgba(228, 224, 211, 0.6);
  --mdc-filled-text-field-error-hover-label-text-color: #e0616b;
  --mdc-filled-text-field-error-focus-label-text-color: #e0616b;
  --mdc-filled-text-field-error-label-text-color: #e0616b;
  --mdc-filled-text-field-error-caret-color: #e0616b;
  --mdc-filled-text-field-active-indicator-color: rgba(228, 224, 211, 0.42);
  --mdc-filled-text-field-disabled-active-indicator-color: rgba(228, 224, 211, 0.06);
  --mdc-filled-text-field-hover-active-indicator-color: rgba(228, 224, 211, 0.87);
  --mdc-filled-text-field-error-active-indicator-color: #e0616b;
  --mdc-filled-text-field-error-focus-active-indicator-color: #e0616b;
  --mdc-filled-text-field-error-hover-active-indicator-color: #e0616b;
  --mdc-outlined-text-field-caret-color: #d06a74;
  --mdc-outlined-text-field-focus-outline-color: #d06a74;
  --mdc-outlined-text-field-focus-label-text-color: rgba(208, 106, 116, 0.87);
  --mdc-outlined-text-field-label-text-color: rgba(228, 224, 211, 0.6);
  --mdc-outlined-text-field-hover-label-text-color: rgba(228, 224, 211, 0.6);
  --mdc-outlined-text-field-disabled-label-text-color: rgba(228, 224, 211, 0.38);
  --mdc-outlined-text-field-input-text-color: rgba(228, 224, 211, 0.87);
  --mdc-outlined-text-field-disabled-input-text-color: rgba(228, 224, 211, 0.38);
  --mdc-outlined-text-field-input-text-placeholder-color: rgba(228, 224, 211, 0.6);
  --mdc-outlined-text-field-error-caret-color: #e0616b;
  --mdc-outlined-text-field-error-focus-label-text-color: #e0616b;
  --mdc-outlined-text-field-error-label-text-color: #e0616b;
  --mdc-outlined-text-field-error-hover-label-text-color: #e0616b;
  --mdc-outlined-text-field-outline-color: rgba(228, 224, 211, 0.38);
  --mdc-outlined-text-field-disabled-outline-color: rgba(228, 224, 211, 0.06);
  --mdc-outlined-text-field-hover-outline-color: rgba(228, 224, 211, 0.87);
  --mdc-outlined-text-field-error-focus-outline-color: #e0616b;
  --mdc-outlined-text-field-error-hover-outline-color: #e0616b;
  --mdc-outlined-text-field-error-outline-color: #e0616b;
  --mat-form-field-focus-select-arrow-color: rgba(208, 106, 116, 0.87);
  --mat-form-field-disabled-input-text-placeholder-color: rgba(168, 163, 153, 0.38);
  --mat-form-field-state-layer-color: rgba(228, 224, 211, 0.87);
  --mat-form-field-error-text-color: #e0616b;
  --mat-form-field-select-option-text-color: rgba(0, 0, 0, 0.87);
  --mat-form-field-select-disabled-option-text-color: rgba(0, 0, 0, 0.38);
  --mat-form-field-leading-icon-color: unset;
  --mat-form-field-disabled-leading-icon-color: unset;
  --mat-form-field-trailing-icon-color: unset;
  --mat-form-field-disabled-trailing-icon-color: unset;
  --mat-form-field-error-focus-trailing-icon-color: unset;
  --mat-form-field-error-hover-trailing-icon-color: unset;
  --mat-form-field-error-trailing-icon-color: unset;
  --mat-form-field-enabled-select-arrow-color: rgba(168, 163, 153, 0.54);
  --mat-form-field-disabled-select-arrow-color: rgba(168, 163, 153, 0.38);
  --mat-form-field-hover-state-layer-opacity: 0.08;
  --mat-form-field-focus-state-layer-opacity: 0.24;
}

.mat-mdc-form-field.mat-accent {
  --mdc-filled-text-field-caret-color: #d06a74;
  --mdc-filled-text-field-focus-active-indicator-color: #d06a74;
  --mdc-filled-text-field-focus-label-text-color: rgba(208, 106, 116, 0.87);
  --mdc-outlined-text-field-caret-color: #d06a74;
  --mdc-outlined-text-field-focus-outline-color: #d06a74;
  --mdc-outlined-text-field-focus-label-text-color: rgba(208, 106, 116, 0.87);
  --mat-form-field-focus-select-arrow-color: rgba(208, 106, 116, 0.87);
}

.mat-mdc-form-field.mat-warn {
  --mdc-filled-text-field-caret-color: #e0616b;
  --mdc-filled-text-field-focus-active-indicator-color: #e0616b;
  --mdc-filled-text-field-focus-label-text-color: rgba(224, 97, 107, 0.87);
  --mdc-outlined-text-field-caret-color: #e0616b;
  --mdc-outlined-text-field-focus-outline-color: #e0616b;
  --mdc-outlined-text-field-focus-label-text-color: rgba(224, 97, 107, 0.87);
  --mat-form-field-focus-select-arrow-color: rgba(224, 97, 107, 0.87);
}

html {
  --mat-form-field-container-height: 52px;
  --mat-form-field-filled-label-display: block;
  --mat-form-field-container-vertical-padding: 14px;
  --mat-form-field-filled-with-label-container-padding-top: 22px;
  --mat-form-field-filled-with-label-container-padding-bottom: 6px;
}

html {
  --mdc-filled-text-field-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-filled-text-field-label-text-size: 14px;
  --mdc-filled-text-field-label-text-tracking: normal;
  --mdc-filled-text-field-label-text-weight: 400;
  --mdc-outlined-text-field-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-outlined-text-field-label-text-size: 14px;
  --mdc-outlined-text-field-label-text-tracking: normal;
  --mdc-outlined-text-field-label-text-weight: 400;
  --mat-form-field-container-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-form-field-container-text-line-height: 1.5;
  --mat-form-field-container-text-size: 14px;
  --mat-form-field-container-text-tracking: normal;
  --mat-form-field-container-text-weight: 400;
  --mat-form-field-outlined-label-text-populated-size: 14px;
  --mat-form-field-subscript-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-form-field-subscript-text-line-height: 1.4;
  --mat-form-field-subscript-text-size: 12px;
  --mat-form-field-subscript-text-tracking: normal;
  --mat-form-field-subscript-text-weight: 400;
}

html {
  --mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-select-panel-background-color: #1b1817;
  --mat-select-enabled-trigger-text-color: rgba(228, 224, 211, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(228, 224, 211, 0.38);
  --mat-select-placeholder-text-color: rgba(228, 224, 211, 0.6);
  --mat-select-enabled-arrow-color: rgba(228, 224, 211, 0.54);
  --mat-select-disabled-arrow-color: rgba(228, 224, 211, 0.38);
  --mat-select-focused-arrow-color: rgba(208, 106, 116, 0.87);
  --mat-select-invalid-arrow-color: rgba(224, 97, 107, 0.87);
}
html .mat-mdc-form-field.mat-accent {
  --mat-select-panel-background-color: #1b1817;
  --mat-select-enabled-trigger-text-color: rgba(228, 224, 211, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(228, 224, 211, 0.38);
  --mat-select-placeholder-text-color: rgba(228, 224, 211, 0.6);
  --mat-select-enabled-arrow-color: rgba(228, 224, 211, 0.54);
  --mat-select-disabled-arrow-color: rgba(228, 224, 211, 0.38);
  --mat-select-focused-arrow-color: rgba(208, 106, 116, 0.87);
  --mat-select-invalid-arrow-color: rgba(224, 97, 107, 0.87);
}
html .mat-mdc-form-field.mat-warn {
  --mat-select-panel-background-color: #1b1817;
  --mat-select-enabled-trigger-text-color: rgba(228, 224, 211, 0.87);
  --mat-select-disabled-trigger-text-color: rgba(228, 224, 211, 0.38);
  --mat-select-placeholder-text-color: rgba(228, 224, 211, 0.6);
  --mat-select-enabled-arrow-color: rgba(228, 224, 211, 0.54);
  --mat-select-disabled-arrow-color: rgba(228, 224, 211, 0.38);
  --mat-select-focused-arrow-color: rgba(224, 97, 107, 0.87);
  --mat-select-invalid-arrow-color: rgba(224, 97, 107, 0.87);
}

html {
  --mat-select-arrow-transform: translateY(-8px);
}

html {
  --mat-select-trigger-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-select-trigger-text-line-height: 1.5;
  --mat-select-trigger-text-size: 14px;
  --mat-select-trigger-text-tracking: normal;
  --mat-select-trigger-text-weight: 400;
}

html {
  --mat-autocomplete-container-shape: 4px;
  --mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

html {
  --mat-autocomplete-background-color: #1b1817;
}

html {
  --mdc-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  --mdc-dialog-container-shadow-color: #000;
  --mdc-dialog-container-shape: 4px;
  --mat-dialog-container-max-width: 80vw;
  --mat-dialog-container-small-max-width: 80vw;
  --mat-dialog-container-min-width: 0;
  --mat-dialog-actions-alignment: start;
  --mat-dialog-actions-padding: 8px;
  --mat-dialog-content-padding: 20px 24px;
  --mat-dialog-with-actions-content-padding: 20px 24px;
  --mat-dialog-headline-padding: 0 24px 9px;
}

html {
  --mdc-dialog-container-color: #241f1e;
  --mdc-dialog-subhead-color: rgba(228, 224, 211, 0.87);
  --mdc-dialog-supporting-text-color: rgba(228, 224, 211, 0.6);
}

html {
  --mdc-dialog-subhead-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-dialog-subhead-line-height: 1.15;
  --mdc-dialog-subhead-size: 20px;
  --mdc-dialog-subhead-weight: 600;
  --mdc-dialog-subhead-tracking: normal;
  --mdc-dialog-supporting-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-dialog-supporting-text-line-height: 1.5;
  --mdc-dialog-supporting-text-size: 14px;
  --mdc-dialog-supporting-text-weight: 400;
  --mdc-dialog-supporting-text-tracking: normal;
}

.mat-mdc-standard-chip {
  --mdc-chip-container-shape-family: rounded;
  --mdc-chip-container-shape-radius: 16px 16px 16px 16px;
  --mdc-chip-with-avatar-avatar-shape-family: rounded;
  --mdc-chip-with-avatar-avatar-shape-radius: 14px 14px 14px 14px;
  --mdc-chip-with-avatar-avatar-size: 28px;
  --mdc-chip-with-icon-icon-size: 18px;
  --mdc-chip-outline-width: 0;
  --mdc-chip-outline-color: transparent;
  --mdc-chip-disabled-outline-color: transparent;
  --mdc-chip-focus-outline-color: transparent;
  --mdc-chip-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-avatar-disabled-avatar-opacity: 1;
  --mdc-chip-flat-selected-outline-width: 0;
  --mdc-chip-selected-hover-state-layer-opacity: 0.04;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
  --mdc-chip-with-icon-disabled-icon-opacity: 1;
  --mat-chip-disabled-container-opacity: 0.4;
  --mat-chip-trailing-action-opacity: 0.54;
  --mat-chip-trailing-action-focus-opacity: 1;
  --mat-chip-trailing-action-state-layer-color: transparent;
  --mat-chip-selected-trailing-action-state-layer-color: transparent;
  --mat-chip-trailing-action-hover-state-layer-opacity: 0;
  --mat-chip-trailing-action-focus-state-layer-opacity: 0;
}

.mat-mdc-standard-chip {
  --mdc-chip-disabled-label-text-color: #fafafa;
  --mdc-chip-elevated-container-color: #33302e;
  --mdc-chip-elevated-selected-container-color: #33302e;
  --mdc-chip-elevated-disabled-container-color: #33302e;
  --mdc-chip-flat-disabled-selected-container-color: #33302e;
  --mdc-chip-focus-state-layer-color: #e4e0d3;
  --mdc-chip-hover-state-layer-color: #e4e0d3;
  --mdc-chip-selected-hover-state-layer-color: #e4e0d3;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: #e4e0d3;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: #fafafa;
  --mdc-chip-selected-label-text-color: #fafafa;
  --mdc-chip-with-icon-icon-color: #fafafa;
  --mdc-chip-with-icon-disabled-icon-color: #fafafa;
  --mdc-chip-with-icon-selected-icon-color: #fafafa;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #fafafa;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #fafafa;
  --mat-chip-selected-disabled-trailing-icon-color: #fafafa;
  --mat-chip-selected-trailing-icon-color: #fafafa;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
  --mdc-chip-disabled-label-text-color: #12100f;
  --mdc-chip-elevated-container-color: #d06a74;
  --mdc-chip-elevated-selected-container-color: #d06a74;
  --mdc-chip-elevated-disabled-container-color: #d06a74;
  --mdc-chip-flat-disabled-selected-container-color: #d06a74;
  --mdc-chip-focus-state-layer-color: #e4e0d3;
  --mdc-chip-hover-state-layer-color: #e4e0d3;
  --mdc-chip-selected-hover-state-layer-color: #e4e0d3;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: #e4e0d3;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: #12100f;
  --mdc-chip-selected-label-text-color: #12100f;
  --mdc-chip-with-icon-icon-color: #12100f;
  --mdc-chip-with-icon-disabled-icon-color: #12100f;
  --mdc-chip-with-icon-selected-icon-color: #12100f;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #12100f;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #12100f;
  --mat-chip-selected-disabled-trailing-icon-color: #12100f;
  --mat-chip-selected-trailing-icon-color: #12100f;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
  --mdc-chip-disabled-label-text-color: #12100f;
  --mdc-chip-elevated-container-color: #d06a74;
  --mdc-chip-elevated-selected-container-color: #d06a74;
  --mdc-chip-elevated-disabled-container-color: #d06a74;
  --mdc-chip-flat-disabled-selected-container-color: #d06a74;
  --mdc-chip-focus-state-layer-color: #e4e0d3;
  --mdc-chip-hover-state-layer-color: #e4e0d3;
  --mdc-chip-selected-hover-state-layer-color: #e4e0d3;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: #e4e0d3;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: #12100f;
  --mdc-chip-selected-label-text-color: #12100f;
  --mdc-chip-with-icon-icon-color: #12100f;
  --mdc-chip-with-icon-disabled-icon-color: #12100f;
  --mdc-chip-with-icon-selected-icon-color: #12100f;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #12100f;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #12100f;
  --mat-chip-selected-disabled-trailing-icon-color: #12100f;
  --mat-chip-selected-trailing-icon-color: #12100f;
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
  --mdc-chip-disabled-label-text-color: #12100f;
  --mdc-chip-elevated-container-color: #e0616b;
  --mdc-chip-elevated-selected-container-color: #e0616b;
  --mdc-chip-elevated-disabled-container-color: #e0616b;
  --mdc-chip-flat-disabled-selected-container-color: #e0616b;
  --mdc-chip-focus-state-layer-color: #e4e0d3;
  --mdc-chip-hover-state-layer-color: #e4e0d3;
  --mdc-chip-selected-hover-state-layer-color: #e4e0d3;
  --mdc-chip-focus-state-layer-opacity: 0.12;
  --mdc-chip-selected-focus-state-layer-color: #e4e0d3;
  --mdc-chip-selected-focus-state-layer-opacity: 0.12;
  --mdc-chip-label-text-color: #12100f;
  --mdc-chip-selected-label-text-color: #12100f;
  --mdc-chip-with-icon-icon-color: #12100f;
  --mdc-chip-with-icon-disabled-icon-color: #12100f;
  --mdc-chip-with-icon-selected-icon-color: #12100f;
  --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #12100f;
  --mdc-chip-with-trailing-icon-trailing-icon-color: #12100f;
  --mat-chip-selected-disabled-trailing-icon-color: #12100f;
  --mat-chip-selected-trailing-icon-color: #12100f;
}

.mat-mdc-chip.mat-mdc-standard-chip {
  --mdc-chip-container-height: 28px;
}

.mat-mdc-standard-chip {
  --mdc-chip-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-chip-label-text-line-height: 1.5;
  --mdc-chip-label-text-size: 14px;
  --mdc-chip-label-text-tracking: normal;
  --mdc-chip-label-text-weight: 400;
}

html {
  --mdc-switch-disabled-selected-icon-opacity: 0.38;
  --mdc-switch-disabled-track-opacity: 0.12;
  --mdc-switch-disabled-unselected-icon-opacity: 0.38;
  --mdc-switch-handle-height: 20px;
  --mdc-switch-handle-shape: 10px;
  --mdc-switch-handle-width: 20px;
  --mdc-switch-selected-icon-size: 18px;
  --mdc-switch-track-height: 14px;
  --mdc-switch-track-shape: 7px;
  --mdc-switch-track-width: 36px;
  --mdc-switch-unselected-icon-size: 18px;
  --mdc-switch-selected-focus-state-layer-opacity: 0.12;
  --mdc-switch-selected-hover-state-layer-opacity: 0.04;
  --mdc-switch-selected-pressed-state-layer-opacity: 0.1;
  --mdc-switch-unselected-focus-state-layer-opacity: 0.12;
  --mdc-switch-unselected-hover-state-layer-opacity: 0.04;
  --mdc-switch-unselected-pressed-state-layer-opacity: 0.1;
  --mat-switch-disabled-selected-handle-opacity: 0.38;
  --mat-switch-disabled-unselected-handle-opacity: 0.38;
  --mat-switch-unselected-handle-size: 20px;
  --mat-switch-selected-handle-size: 20px;
  --mat-switch-pressed-handle-size: 20px;
  --mat-switch-with-icon-handle-size: 20px;
  --mat-switch-selected-handle-horizontal-margin: 0;
  --mat-switch-selected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-selected-pressed-handle-horizontal-margin: 0;
  --mat-switch-unselected-handle-horizontal-margin: 0;
  --mat-switch-unselected-with-icon-handle-horizontal-margin: 0;
  --mat-switch-unselected-pressed-handle-horizontal-margin: 0;
  --mat-switch-visible-track-opacity: 1;
  --mat-switch-hidden-track-opacity: 1;
  --mat-switch-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
  --mat-switch-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
  --mat-switch-track-outline-width: 1px;
  --mat-switch-track-outline-color: transparent;
  --mat-switch-selected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-width: 1px;
  --mat-switch-disabled-unselected-track-outline-color: transparent;
}

html {
  --mdc-switch-selected-focus-state-layer-color: #e79ca3;
  --mdc-switch-selected-handle-color: #e79ca3;
  --mdc-switch-selected-hover-state-layer-color: #e79ca3;
  --mdc-switch-selected-pressed-state-layer-color: #e79ca3;
  --mdc-switch-selected-focus-handle-color: #efb7bc;
  --mdc-switch-selected-hover-handle-color: #efb7bc;
  --mdc-switch-selected-pressed-handle-color: #efb7bc;
  --mdc-switch-selected-focus-track-color: #b8525d;
  --mdc-switch-selected-hover-track-color: #b8525d;
  --mdc-switch-selected-pressed-track-color: #b8525d;
  --mdc-switch-selected-track-color: #b8525d;
  --mdc-switch-disabled-selected-handle-color: #000;
  --mdc-switch-disabled-selected-icon-color: #212121;
  --mdc-switch-disabled-selected-track-color: #f5f5f5;
  --mdc-switch-disabled-unselected-handle-color: #000;
  --mdc-switch-disabled-unselected-icon-color: #212121;
  --mdc-switch-disabled-unselected-track-color: #f5f5f5;
  --mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);
  --mdc-switch-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-handle-shadow-color: black;
  --mdc-switch-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-switch-selected-icon-color: #212121;
  --mdc-switch-unselected-focus-handle-color: #fafafa;
  --mdc-switch-unselected-focus-state-layer-color: #f5f5f5;
  --mdc-switch-unselected-focus-track-color: #616161;
  --mdc-switch-unselected-handle-color: #9e9e9e;
  --mdc-switch-unselected-hover-handle-color: #fafafa;
  --mdc-switch-unselected-hover-state-layer-color: #f5f5f5;
  --mdc-switch-unselected-hover-track-color: #616161;
  --mdc-switch-unselected-icon-color: #212121;
  --mdc-switch-unselected-pressed-handle-color: #fafafa;
  --mdc-switch-unselected-pressed-state-layer-color: #f5f5f5;
  --mdc-switch-unselected-pressed-track-color: #616161;
  --mdc-switch-unselected-track-color: #616161;
  --mdc-switch-disabled-label-text-color: rgba(228, 224, 211, 0.38);
}
html .mat-mdc-slide-toggle {
  --mdc-form-field-label-text-color: #e4e0d3;
}
html .mat-mdc-slide-toggle.mat-accent {
  --mdc-switch-selected-focus-state-layer-color: #e79ca3;
  --mdc-switch-selected-handle-color: #e79ca3;
  --mdc-switch-selected-hover-state-layer-color: #e79ca3;
  --mdc-switch-selected-pressed-state-layer-color: #e79ca3;
  --mdc-switch-selected-focus-handle-color: #efb7bc;
  --mdc-switch-selected-hover-handle-color: #efb7bc;
  --mdc-switch-selected-pressed-handle-color: #efb7bc;
  --mdc-switch-selected-focus-track-color: #b8525d;
  --mdc-switch-selected-hover-track-color: #b8525d;
  --mdc-switch-selected-pressed-track-color: #b8525d;
  --mdc-switch-selected-track-color: #b8525d;
}
html .mat-mdc-slide-toggle.mat-warn {
  --mdc-switch-selected-focus-state-layer-color: #ee8a92;
  --mdc-switch-selected-handle-color: #ee8a92;
  --mdc-switch-selected-hover-state-layer-color: #ee8a92;
  --mdc-switch-selected-pressed-state-layer-color: #ee8a92;
  --mdc-switch-selected-focus-handle-color: #f4aeb4;
  --mdc-switch-selected-hover-handle-color: #f4aeb4;
  --mdc-switch-selected-pressed-handle-color: #f4aeb4;
  --mdc-switch-selected-focus-track-color: #c94c57;
  --mdc-switch-selected-hover-track-color: #c94c57;
  --mdc-switch-selected-pressed-track-color: #c94c57;
  --mdc-switch-selected-track-color: #c94c57;
}

html {
  --mdc-switch-state-layer-size: 36px;
}

html .mat-mdc-slide-toggle {
  --mdc-form-field-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-form-field-label-text-line-height: 1.5;
  --mdc-form-field-label-text-size: 14px;
  --mdc-form-field-label-text-tracking: normal;
  --mdc-form-field-label-text-weight: 400;
}

html {
  --mdc-radio-disabled-selected-icon-opacity: 0.38;
  --mdc-radio-disabled-unselected-icon-opacity: 0.38;
  --mdc-radio-state-layer-size: 40px;
}

.mat-mdc-radio-button {
  --mdc-form-field-label-text-color: #e4e0d3;
}
.mat-mdc-radio-button.mat-primary {
  --mdc-radio-disabled-selected-icon-color: #a8a399;
  --mdc-radio-disabled-unselected-icon-color: #a8a399;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-selected-focus-icon-color: #d06a74;
  --mdc-radio-selected-hover-icon-color: #d06a74;
  --mdc-radio-selected-icon-color: #d06a74;
  --mdc-radio-selected-pressed-icon-color: #d06a74;
  --mat-radio-ripple-color: #e4e0d3;
  --mat-radio-checked-ripple-color: #d06a74;
  --mat-radio-disabled-label-color: rgba(228, 224, 211, 0.38);
}
.mat-mdc-radio-button.mat-accent {
  --mdc-radio-disabled-selected-icon-color: #a8a399;
  --mdc-radio-disabled-unselected-icon-color: #a8a399;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-selected-focus-icon-color: #d06a74;
  --mdc-radio-selected-hover-icon-color: #d06a74;
  --mdc-radio-selected-icon-color: #d06a74;
  --mdc-radio-selected-pressed-icon-color: #d06a74;
  --mat-radio-ripple-color: #e4e0d3;
  --mat-radio-checked-ripple-color: #d06a74;
  --mat-radio-disabled-label-color: rgba(228, 224, 211, 0.38);
}
.mat-mdc-radio-button.mat-warn {
  --mdc-radio-disabled-selected-icon-color: #a8a399;
  --mdc-radio-disabled-unselected-icon-color: #a8a399;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-selected-focus-icon-color: #e0616b;
  --mdc-radio-selected-hover-icon-color: #e0616b;
  --mdc-radio-selected-icon-color: #e0616b;
  --mdc-radio-selected-pressed-icon-color: #e0616b;
  --mat-radio-ripple-color: #e4e0d3;
  --mat-radio-checked-ripple-color: #e0616b;
  --mat-radio-disabled-label-color: rgba(228, 224, 211, 0.38);
}

html {
  --mdc-radio-state-layer-size: 36px;
  --mat-radio-touch-target-display: block;
}

.mat-mdc-radio-button {
  --mdc-form-field-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-form-field-label-text-line-height: 1.5;
  --mdc-form-field-label-text-size: 14px;
  --mdc-form-field-label-text-tracking: normal;
  --mdc-form-field-label-text-weight: 400;
}

html {
  --mat-slider-value-indicator-width: auto;
  --mat-slider-value-indicator-height: 32px;
  --mat-slider-value-indicator-caret-display: block;
  --mat-slider-value-indicator-border-radius: 4px;
  --mat-slider-value-indicator-padding: 0 12px;
  --mat-slider-value-indicator-text-transform: none;
  --mat-slider-value-indicator-container-transform: translateX(-50%);
  --mdc-slider-active-track-height: 6px;
  --mdc-slider-active-track-shape: 9999px;
  --mdc-slider-handle-height: 20px;
  --mdc-slider-handle-shape: 50%;
  --mdc-slider-handle-width: 20px;
  --mdc-slider-inactive-track-height: 4px;
  --mdc-slider-inactive-track-shape: 9999px;
  --mdc-slider-with-overlap-handle-outline-width: 1px;
  --mdc-slider-with-tick-marks-active-container-opacity: 0.6;
  --mdc-slider-with-tick-marks-container-shape: 50%;
  --mdc-slider-with-tick-marks-container-size: 2px;
  --mdc-slider-with-tick-marks-inactive-container-opacity: 0.6;
}

html {
  --mdc-slider-handle-color: #d06a74;
  --mdc-slider-focus-handle-color: #d06a74;
  --mdc-slider-hover-handle-color: #d06a74;
  --mdc-slider-active-track-color: #d06a74;
  --mdc-slider-inactive-track-color: #d06a74;
  --mdc-slider-with-tick-marks-inactive-container-color: #d06a74;
  --mdc-slider-with-tick-marks-active-container-color: #12100f;
  --mdc-slider-disabled-active-track-color: #fff;
  --mdc-slider-disabled-handle-color: #fff;
  --mdc-slider-disabled-inactive-track-color: #fff;
  --mdc-slider-label-container-color: #fff;
  --mdc-slider-label-label-text-color: #000;
  --mdc-slider-with-overlap-handle-outline-color: #fff;
  --mdc-slider-with-tick-marks-disabled-container-color: #fff;
  --mdc-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-slider-ripple-color: #d06a74;
  --mat-slider-hover-state-layer-color: rgba(208, 106, 116, 0.05);
  --mat-slider-focus-state-layer-color: rgba(208, 106, 116, 0.2);
  --mat-slider-value-indicator-opacity: 0.9;
}
html .mat-accent {
  --mat-slider-ripple-color: #d06a74;
  --mat-slider-hover-state-layer-color: rgba(208, 106, 116, 0.05);
  --mat-slider-focus-state-layer-color: rgba(208, 106, 116, 0.2);
  --mdc-slider-handle-color: #d06a74;
  --mdc-slider-focus-handle-color: #d06a74;
  --mdc-slider-hover-handle-color: #d06a74;
  --mdc-slider-active-track-color: #d06a74;
  --mdc-slider-inactive-track-color: #d06a74;
  --mdc-slider-with-tick-marks-inactive-container-color: #d06a74;
  --mdc-slider-with-tick-marks-active-container-color: #12100f;
}
html .mat-warn {
  --mat-slider-ripple-color: #e0616b;
  --mat-slider-hover-state-layer-color: rgba(224, 97, 107, 0.05);
  --mat-slider-focus-state-layer-color: rgba(224, 97, 107, 0.2);
  --mdc-slider-handle-color: #e0616b;
  --mdc-slider-focus-handle-color: #e0616b;
  --mdc-slider-hover-handle-color: #e0616b;
  --mdc-slider-active-track-color: #e0616b;
  --mdc-slider-inactive-track-color: #e0616b;
  --mdc-slider-with-tick-marks-inactive-container-color: #e0616b;
  --mdc-slider-with-tick-marks-active-container-color: #12100f;
}

html {
  --mdc-slider-label-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-slider-label-label-text-size: 14px;
  --mdc-slider-label-label-text-line-height: 1.5;
  --mdc-slider-label-label-text-tracking: normal;
  --mdc-slider-label-label-text-weight: 600;
}

html {
  --mat-menu-container-shape: 4px;
  --mat-menu-divider-bottom-spacing: 0;
  --mat-menu-divider-top-spacing: 0;
  --mat-menu-item-spacing: 16px;
  --mat-menu-item-icon-size: 24px;
  --mat-menu-item-leading-spacing: 16px;
  --mat-menu-item-trailing-spacing: 16px;
  --mat-menu-item-with-icon-leading-spacing: 16px;
  --mat-menu-item-with-icon-trailing-spacing: 16px;
}

html {
  --mat-menu-item-label-text-color: #e4e0d3;
  --mat-menu-item-icon-color: #e4e0d3;
  --mat-menu-item-hover-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-menu-item-focus-state-layer-color: rgba(228, 224, 211, 0.08);
  --mat-menu-container-color: #1b1817;
  --mat-menu-divider-color: rgba(228, 224, 211, 0.1);
}

html {
  --mat-menu-item-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-menu-item-label-text-size: 14px;
  --mat-menu-item-label-text-tracking: normal;
  --mat-menu-item-label-text-line-height: 1.5;
  --mat-menu-item-label-text-weight: 400;
}

html {
  --mdc-list-list-item-container-shape: 0;
  --mdc-list-list-item-leading-avatar-shape: 50%;
  --mdc-list-list-item-container-color: transparent;
  --mdc-list-list-item-selected-container-color: transparent;
  --mdc-list-list-item-leading-avatar-color: transparent;
  --mdc-list-list-item-leading-icon-size: 24px;
  --mdc-list-list-item-leading-avatar-size: 40px;
  --mdc-list-list-item-trailing-icon-size: 24px;
  --mdc-list-list-item-disabled-state-layer-color: transparent;
  --mdc-list-list-item-disabled-state-layer-opacity: 0;
  --mdc-list-list-item-disabled-label-text-opacity: 0.38;
  --mdc-list-list-item-disabled-leading-icon-opacity: 0.38;
  --mdc-list-list-item-disabled-trailing-icon-opacity: 0.38;
  --mat-list-active-indicator-color: transparent;
  --mat-list-active-indicator-shape: 4px;
}

html {
  --mdc-list-list-item-label-text-color: #e4e0d3;
  --mdc-list-list-item-supporting-text-color: #a8a399;
  --mdc-list-list-item-leading-icon-color: rgba(228, 224, 211, 0.5);
  --mdc-list-list-item-trailing-supporting-text-color: #908b81;
  --mdc-list-list-item-trailing-icon-color: rgba(228, 224, 211, 0.5);
  --mdc-list-list-item-selected-trailing-icon-color: rgba(228, 224, 211, 0.5);
  --mdc-list-list-item-disabled-label-text-color: #e4e0d3;
  --mdc-list-list-item-disabled-leading-icon-color: #e4e0d3;
  --mdc-list-list-item-disabled-trailing-icon-color: #e4e0d3;
  --mdc-list-list-item-hover-label-text-color: #e4e0d3;
  --mdc-list-list-item-hover-leading-icon-color: rgba(228, 224, 211, 0.5);
  --mdc-list-list-item-hover-trailing-icon-color: rgba(228, 224, 211, 0.5);
  --mdc-list-list-item-focus-label-text-color: #e4e0d3;
  --mdc-list-list-item-hover-state-layer-color: #e4e0d3;
  --mdc-list-list-item-hover-state-layer-opacity: 0.08;
  --mdc-list-list-item-focus-state-layer-color: #e4e0d3;
  --mdc-list-list-item-focus-state-layer-opacity: 0.24;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: #a8a399;
  --mdc-radio-disabled-unselected-icon-color: #a8a399;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-selected-focus-icon-color: #d06a74;
  --mdc-radio-selected-hover-icon-color: #d06a74;
  --mdc-radio-selected-icon-color: #d06a74;
  --mdc-radio-selected-pressed-icon-color: #d06a74;
}

.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: #a8a399;
  --mdc-radio-disabled-unselected-icon-color: #a8a399;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-selected-focus-icon-color: #d06a74;
  --mdc-radio-selected-hover-icon-color: #d06a74;
  --mdc-radio-selected-icon-color: #d06a74;
  --mdc-radio-selected-pressed-icon-color: #d06a74;
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
  --mdc-radio-disabled-selected-icon-color: #a8a399;
  --mdc-radio-disabled-unselected-icon-color: #a8a399;
  --mdc-radio-unselected-hover-icon-color: #eeeeee;
  --mdc-radio-unselected-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-unselected-pressed-icon-color: rgba(168, 163, 153, 0.54);
  --mdc-radio-selected-focus-icon-color: #e0616b;
  --mdc-radio-selected-hover-icon-color: #e0616b;
  --mdc-radio-selected-icon-color: #e0616b;
  --mdc-radio-selected-pressed-icon-color: #e0616b;
}

.mat-mdc-list-option {
  --mdc-checkbox-disabled-selected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-selected-checkmark-color: #12100f;
  --mdc-checkbox-selected-focus-icon-color: #d06a74;
  --mdc-checkbox-selected-hover-icon-color: #d06a74;
  --mdc-checkbox-selected-icon-color: #d06a74;
  --mdc-checkbox-selected-pressed-icon-color: #d06a74;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #d06a74;
  --mdc-checkbox-selected-hover-state-layer-color: #d06a74;
  --mdc-checkbox-selected-pressed-state-layer-color: #d06a74;
  --mdc-checkbox-unselected-focus-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-hover-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-pressed-state-layer-color: #e4e0d3;
}

.mat-mdc-list-option.mat-accent {
  --mdc-checkbox-disabled-selected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-selected-checkmark-color: #12100f;
  --mdc-checkbox-selected-focus-icon-color: #d06a74;
  --mdc-checkbox-selected-hover-icon-color: #d06a74;
  --mdc-checkbox-selected-icon-color: #d06a74;
  --mdc-checkbox-selected-pressed-icon-color: #d06a74;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #d06a74;
  --mdc-checkbox-selected-hover-state-layer-color: #d06a74;
  --mdc-checkbox-selected-pressed-state-layer-color: #d06a74;
  --mdc-checkbox-unselected-focus-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-hover-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-pressed-state-layer-color: #e4e0d3;
}

.mat-mdc-list-option.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-selected-checkmark-color: #12100f;
  --mdc-checkbox-selected-focus-icon-color: #e0616b;
  --mdc-checkbox-selected-hover-icon-color: #e0616b;
  --mdc-checkbox-selected-icon-color: #e0616b;
  --mdc-checkbox-selected-pressed-icon-color: #e0616b;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #e0616b;
  --mdc-checkbox-selected-hover-state-layer-color: #e0616b;
  --mdc-checkbox-selected-pressed-state-layer-color: #e0616b;
  --mdc-checkbox-unselected-focus-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-hover-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-pressed-state-layer-color: #e4e0d3;
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text {
  color: #d06a74;
}
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected.mdc-list-item--with-leading-icon .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated.mdc-list-item--with-leading-icon .mdc-list-item__start {
  color: #d06a74;
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
  opacity: 1;
}

html {
  --mdc-list-list-item-one-line-container-height: 44px;
  --mdc-list-list-item-two-line-container-height: 60px;
  --mdc-list-list-item-three-line-container-height: 84px;
  --mat-list-list-item-leading-icon-start-space: 16px;
  --mat-list-list-item-leading-icon-end-space: 32px;
}

.mdc-list-item__start,
.mdc-list-item__end {
  --mdc-radio-state-layer-size: 36px;
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
  height: 52px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
  height: 68px;
}

html {
  --mdc-list-list-item-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-list-list-item-label-text-line-height: 1.5;
  --mdc-list-list-item-label-text-size: 14px;
  --mdc-list-list-item-label-text-tracking: normal;
  --mdc-list-list-item-label-text-weight: 400;
  --mdc-list-list-item-supporting-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-list-list-item-supporting-text-line-height: 1.5;
  --mdc-list-list-item-supporting-text-size: 14px;
  --mdc-list-list-item-supporting-text-tracking: normal;
  --mdc-list-list-item-supporting-text-weight: 400;
  --mdc-list-list-item-trailing-supporting-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-list-list-item-trailing-supporting-text-line-height: 1.4;
  --mdc-list-list-item-trailing-supporting-text-size: 12px;
  --mdc-list-list-item-trailing-supporting-text-tracking: normal;
  --mdc-list-list-item-trailing-supporting-text-weight: 400;
}

.mdc-list-group__subheader {
  font: 600 16px / 1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: normal;
}

html {
  --mat-paginator-container-text-color: rgba(228, 224, 211, 0.87);
  --mat-paginator-container-background-color: #1b1817;
  --mat-paginator-enabled-icon-color: rgba(228, 224, 211, 0.54);
  --mat-paginator-disabled-icon-color: rgba(228, 224, 211, 0.12);
}

html {
  --mat-paginator-container-size: 52px;
  --mat-paginator-form-field-container-height: 40px;
  --mat-paginator-form-field-container-vertical-padding: 8px;
}

html {
  --mat-paginator-container-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-paginator-container-text-line-height: 1.4;
  --mat-paginator-container-text-size: 12px;
  --mat-paginator-container-text-tracking: normal;
  --mat-paginator-container-text-weight: 400;
  --mat-paginator-select-trigger-text-size: 12px;
}

html {
  --mdc-tab-indicator-active-indicator-height: 2px;
  --mdc-tab-indicator-active-indicator-shape: 0;
  --mdc-secondary-navigation-tab-container-height: 48px;
  --mat-tab-header-divider-color: transparent;
  --mat-tab-header-divider-height: 0;
}

.mat-mdc-tab-group, .mat-mdc-tab-nav-bar {
  --mdc-tab-indicator-active-indicator-color: #d06a74;
  --mat-tab-header-disabled-ripple-color: rgba(228, 224, 211, 0.38);
  --mat-tab-header-pagination-icon-color: #a8a399;
  --mat-tab-header-inactive-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-active-label-text-color: #d06a74;
  --mat-tab-header-active-ripple-color: #d06a74;
  --mat-tab-header-inactive-ripple-color: #d06a74;
  --mat-tab-header-inactive-focus-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-active-focus-label-text-color: #d06a74;
  --mat-tab-header-active-hover-label-text-color: #d06a74;
  --mat-tab-header-active-focus-indicator-color: #d06a74;
  --mat-tab-header-active-hover-indicator-color: #d06a74;
}
.mat-mdc-tab-group.mat-accent, .mat-mdc-tab-nav-bar.mat-accent {
  --mdc-tab-indicator-active-indicator-color: #d06a74;
  --mat-tab-header-disabled-ripple-color: rgba(228, 224, 211, 0.38);
  --mat-tab-header-pagination-icon-color: #a8a399;
  --mat-tab-header-inactive-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-active-label-text-color: #d06a74;
  --mat-tab-header-active-ripple-color: #d06a74;
  --mat-tab-header-inactive-ripple-color: #d06a74;
  --mat-tab-header-inactive-focus-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-active-focus-label-text-color: #d06a74;
  --mat-tab-header-active-hover-label-text-color: #d06a74;
  --mat-tab-header-active-focus-indicator-color: #d06a74;
  --mat-tab-header-active-hover-indicator-color: #d06a74;
}
.mat-mdc-tab-group.mat-warn, .mat-mdc-tab-nav-bar.mat-warn {
  --mdc-tab-indicator-active-indicator-color: #e0616b;
  --mat-tab-header-disabled-ripple-color: rgba(228, 224, 211, 0.38);
  --mat-tab-header-pagination-icon-color: #a8a399;
  --mat-tab-header-inactive-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-active-label-text-color: #e0616b;
  --mat-tab-header-active-ripple-color: #e0616b;
  --mat-tab-header-inactive-ripple-color: #e0616b;
  --mat-tab-header-inactive-focus-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-inactive-hover-label-text-color: rgba(228, 224, 211, 0.6);
  --mat-tab-header-active-focus-label-text-color: #e0616b;
  --mat-tab-header-active-hover-label-text-color: #e0616b;
  --mat-tab-header-active-focus-indicator-color: #e0616b;
  --mat-tab-header-active-hover-indicator-color: #e0616b;
}
.mat-mdc-tab-group.mat-background-primary, .mat-mdc-tab-nav-bar.mat-background-primary {
  --mat-tab-header-with-background-background-color: #d06a74;
  --mat-tab-header-with-background-foreground-color: #12100f;
}
.mat-mdc-tab-group.mat-background-accent, .mat-mdc-tab-nav-bar.mat-background-accent {
  --mat-tab-header-with-background-background-color: #d06a74;
  --mat-tab-header-with-background-foreground-color: #12100f;
}
.mat-mdc-tab-group.mat-background-warn, .mat-mdc-tab-nav-bar.mat-background-warn {
  --mat-tab-header-with-background-background-color: #e0616b;
  --mat-tab-header-with-background-foreground-color: #12100f;
}

.mat-mdc-tab-header {
  --mdc-secondary-navigation-tab-container-height: 44px;
}

.mat-mdc-tab-header {
  --mat-tab-header-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-tab-header-label-text-size: 14px;
  --mat-tab-header-label-text-tracking: normal;
  --mat-tab-header-label-text-line-height: 1;
  --mat-tab-header-label-text-weight: 600;
}

html {
  --mdc-checkbox-disabled-selected-checkmark-color: #fff;
  --mdc-checkbox-selected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-selected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-selected-pressed-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-focus-state-layer-opacity: 0.16;
  --mdc-checkbox-unselected-hover-state-layer-opacity: 0.04;
  --mdc-checkbox-unselected-pressed-state-layer-opacity: 0.16;
}

html {
  --mdc-checkbox-disabled-selected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-selected-checkmark-color: #12100f;
  --mdc-checkbox-selected-focus-icon-color: #d06a74;
  --mdc-checkbox-selected-hover-icon-color: #d06a74;
  --mdc-checkbox-selected-icon-color: #d06a74;
  --mdc-checkbox-selected-pressed-icon-color: #d06a74;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #d06a74;
  --mdc-checkbox-selected-hover-state-layer-color: #d06a74;
  --mdc-checkbox-selected-pressed-state-layer-color: #d06a74;
  --mdc-checkbox-unselected-focus-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-hover-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-pressed-state-layer-color: #e4e0d3;
  --mat-checkbox-disabled-label-color: rgba(228, 224, 211, 0.38);
}

.mat-mdc-checkbox {
  --mdc-form-field-label-text-color: #e4e0d3;
}
.mat-mdc-checkbox.mat-primary {
  --mdc-checkbox-disabled-selected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-selected-checkmark-color: #12100f;
  --mdc-checkbox-selected-focus-icon-color: #d06a74;
  --mdc-checkbox-selected-hover-icon-color: #d06a74;
  --mdc-checkbox-selected-icon-color: #d06a74;
  --mdc-checkbox-selected-pressed-icon-color: #d06a74;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #d06a74;
  --mdc-checkbox-selected-hover-state-layer-color: #d06a74;
  --mdc-checkbox-selected-pressed-state-layer-color: #d06a74;
  --mdc-checkbox-unselected-focus-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-hover-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-pressed-state-layer-color: #e4e0d3;
}
.mat-mdc-checkbox.mat-warn {
  --mdc-checkbox-disabled-selected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-disabled-unselected-icon-color: rgba(228, 224, 211, 0.38);
  --mdc-checkbox-selected-checkmark-color: #12100f;
  --mdc-checkbox-selected-focus-icon-color: #e0616b;
  --mdc-checkbox-selected-hover-icon-color: #e0616b;
  --mdc-checkbox-selected-icon-color: #e0616b;
  --mdc-checkbox-selected-pressed-icon-color: #e0616b;
  --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
  --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
  --mdc-checkbox-unselected-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-unselected-pressed-icon-color: rgba(228, 224, 211, 0.54);
  --mdc-checkbox-selected-focus-state-layer-color: #e0616b;
  --mdc-checkbox-selected-hover-state-layer-color: #e0616b;
  --mdc-checkbox-selected-pressed-state-layer-color: #e0616b;
  --mdc-checkbox-unselected-focus-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-hover-state-layer-color: #e4e0d3;
  --mdc-checkbox-unselected-pressed-state-layer-color: #e4e0d3;
}

html {
  --mdc-checkbox-state-layer-size: 36px;
  --mat-checkbox-touch-target-display: block;
}

.mat-mdc-checkbox {
  --mdc-form-field-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-form-field-label-text-line-height: 1.5;
  --mdc-form-field-label-text-size: 14px;
  --mdc-form-field-label-text-tracking: normal;
  --mdc-form-field-label-text-weight: 400;
}

html {
  --mdc-text-button-container-shape: 4px;
  --mdc-text-button-keep-touch-target: false;
  --mdc-filled-button-container-shape: 4px;
  --mdc-filled-button-keep-touch-target: false;
  --mdc-protected-button-container-shape: 4px;
  --mdc-protected-button-keep-touch-target: false;
  --mdc-outlined-button-keep-touch-target: false;
  --mdc-outlined-button-outline-width: 1px;
  --mdc-outlined-button-container-shape: 4px;
  --mat-text-button-horizontal-padding: 8px;
  --mat-text-button-with-icon-horizontal-padding: 8px;
  --mat-text-button-icon-spacing: 8px;
  --mat-text-button-icon-offset: 0;
  --mat-filled-button-horizontal-padding: 16px;
  --mat-filled-button-icon-spacing: 8px;
  --mat-filled-button-icon-offset: -4px;
  --mat-protected-button-horizontal-padding: 16px;
  --mat-protected-button-icon-spacing: 8px;
  --mat-protected-button-icon-offset: -4px;
  --mat-outlined-button-horizontal-padding: 15px;
  --mat-outlined-button-icon-spacing: 8px;
  --mat-outlined-button-icon-offset: -4px;
}

html {
  --mdc-text-button-label-text-color: #e4e0d3;
  --mdc-text-button-disabled-label-text-color: rgba(228, 224, 211, 0.5);
  --mat-text-button-state-layer-color: #e4e0d3;
  --mat-text-button-disabled-state-layer-color: #e4e0d3;
  --mat-text-button-ripple-color: rgba(228, 224, 211, 0.1);
  --mat-text-button-hover-state-layer-opacity: 0.08;
  --mat-text-button-focus-state-layer-opacity: 0.24;
  --mat-text-button-pressed-state-layer-opacity: 0.24;
  --mdc-filled-button-container-color: #1b1817;
  --mdc-filled-button-label-text-color: #e4e0d3;
  --mdc-filled-button-disabled-container-color: rgba(228, 224, 211, 0.12);
  --mdc-filled-button-disabled-label-text-color: rgba(228, 224, 211, 0.5);
  --mat-filled-button-state-layer-color: #e4e0d3;
  --mat-filled-button-disabled-state-layer-color: #e4e0d3;
  --mat-filled-button-ripple-color: rgba(228, 224, 211, 0.1);
  --mat-filled-button-hover-state-layer-opacity: 0.08;
  --mat-filled-button-focus-state-layer-opacity: 0.24;
  --mat-filled-button-pressed-state-layer-opacity: 0.24;
  --mdc-protected-button-container-color: #1b1817;
  --mdc-protected-button-label-text-color: #e4e0d3;
  --mdc-protected-button-disabled-container-color: rgba(228, 224, 211, 0.12);
  --mdc-protected-button-disabled-label-text-color: rgba(228, 224, 211, 0.5);
  --mdc-protected-button-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-protected-button-container-shadow-color: #000;
  --mat-protected-button-state-layer-color: #e4e0d3;
  --mat-protected-button-disabled-state-layer-color: #e4e0d3;
  --mat-protected-button-ripple-color: rgba(228, 224, 211, 0.1);
  --mat-protected-button-hover-state-layer-opacity: 0.08;
  --mat-protected-button-focus-state-layer-opacity: 0.24;
  --mat-protected-button-pressed-state-layer-opacity: 0.24;
  --mdc-outlined-button-disabled-outline-color: rgba(228, 224, 211, 0.1);
  --mdc-outlined-button-disabled-label-text-color: rgba(228, 224, 211, 0.5);
  --mdc-outlined-button-label-text-color: #e4e0d3;
  --mdc-outlined-button-outline-color: rgba(228, 224, 211, 0.1);
  --mat-outlined-button-state-layer-color: #e4e0d3;
  --mat-outlined-button-disabled-state-layer-color: #e4e0d3;
  --mat-outlined-button-ripple-color: rgba(228, 224, 211, 0.1);
  --mat-outlined-button-hover-state-layer-opacity: 0.08;
  --mat-outlined-button-focus-state-layer-opacity: 0.24;
  --mat-outlined-button-pressed-state-layer-opacity: 0.24;
}

.mat-mdc-button.mat-primary {
  --mdc-text-button-label-text-color: #d06a74;
  --mat-text-button-state-layer-color: #d06a74;
  --mat-text-button-ripple-color: rgba(208, 106, 116, 0.1);
}
.mat-mdc-button.mat-accent {
  --mdc-text-button-label-text-color: #d06a74;
  --mat-text-button-state-layer-color: #d06a74;
  --mat-text-button-ripple-color: rgba(208, 106, 116, 0.1);
}
.mat-mdc-button.mat-warn {
  --mdc-text-button-label-text-color: #e0616b;
  --mat-text-button-state-layer-color: #e0616b;
  --mat-text-button-ripple-color: rgba(224, 97, 107, 0.1);
}

.mat-mdc-unelevated-button.mat-primary {
  --mdc-filled-button-container-color: #d06a74;
  --mdc-filled-button-label-text-color: #12100f;
  --mat-filled-button-state-layer-color: #12100f;
  --mat-filled-button-ripple-color: rgba(18, 16, 15, 0.1);
}
.mat-mdc-unelevated-button.mat-accent {
  --mdc-filled-button-container-color: #d06a74;
  --mdc-filled-button-label-text-color: #12100f;
  --mat-filled-button-state-layer-color: #12100f;
  --mat-filled-button-ripple-color: rgba(18, 16, 15, 0.1);
}
.mat-mdc-unelevated-button.mat-warn {
  --mdc-filled-button-container-color: #e0616b;
  --mdc-filled-button-label-text-color: #12100f;
  --mat-filled-button-state-layer-color: #12100f;
  --mat-filled-button-ripple-color: rgba(18, 16, 15, 0.1);
}

.mat-mdc-raised-button.mat-primary {
  --mdc-protected-button-container-color: #d06a74;
  --mdc-protected-button-label-text-color: #12100f;
  --mat-protected-button-state-layer-color: #12100f;
  --mat-protected-button-ripple-color: rgba(18, 16, 15, 0.1);
}
.mat-mdc-raised-button.mat-accent {
  --mdc-protected-button-container-color: #d06a74;
  --mdc-protected-button-label-text-color: #12100f;
  --mat-protected-button-state-layer-color: #12100f;
  --mat-protected-button-ripple-color: rgba(18, 16, 15, 0.1);
}
.mat-mdc-raised-button.mat-warn {
  --mdc-protected-button-container-color: #e0616b;
  --mdc-protected-button-label-text-color: #12100f;
  --mat-protected-button-state-layer-color: #12100f;
  --mat-protected-button-ripple-color: rgba(18, 16, 15, 0.1);
}

.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-label-text-color: #d06a74;
  --mdc-outlined-button-outline-color: rgba(228, 224, 211, 0.1);
  --mat-outlined-button-state-layer-color: #d06a74;
  --mat-outlined-button-ripple-color: rgba(208, 106, 116, 0.1);
}
.mat-mdc-outlined-button.mat-accent {
  --mdc-outlined-button-label-text-color: #d06a74;
  --mdc-outlined-button-outline-color: rgba(228, 224, 211, 0.1);
  --mat-outlined-button-state-layer-color: #d06a74;
  --mat-outlined-button-ripple-color: rgba(208, 106, 116, 0.1);
}
.mat-mdc-outlined-button.mat-warn {
  --mdc-outlined-button-label-text-color: #e0616b;
  --mdc-outlined-button-outline-color: rgba(228, 224, 211, 0.1);
  --mat-outlined-button-state-layer-color: #e0616b;
  --mat-outlined-button-ripple-color: rgba(224, 97, 107, 0.1);
}

html {
  --mdc-text-button-container-height: 32px;
  --mdc-filled-button-container-height: 32px;
  --mdc-outlined-button-container-height: 32px;
  --mdc-protected-button-container-height: 32px;
  --mat-text-button-touch-target-display: block;
  --mat-filled-button-touch-target-display: block;
  --mat-protected-button-touch-target-display: block;
  --mat-outlined-button-touch-target-display: block;
}

html {
  --mdc-text-button-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-text-button-label-text-size: 14px;
  --mdc-text-button-label-text-tracking: normal;
  --mdc-text-button-label-text-weight: 600;
  --mdc-text-button-label-text-transform: none;
  --mdc-filled-button-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-filled-button-label-text-size: 14px;
  --mdc-filled-button-label-text-tracking: normal;
  --mdc-filled-button-label-text-weight: 600;
  --mdc-filled-button-label-text-transform: none;
  --mdc-outlined-button-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-outlined-button-label-text-size: 14px;
  --mdc-outlined-button-label-text-tracking: normal;
  --mdc-outlined-button-label-text-weight: 600;
  --mdc-outlined-button-label-text-transform: none;
  --mdc-protected-button-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-protected-button-label-text-size: 14px;
  --mdc-protected-button-label-text-tracking: normal;
  --mdc-protected-button-label-text-weight: 600;
  --mdc-protected-button-label-text-transform: none;
}

html {
  --mdc-icon-button-icon-size: 24px;
}

html {
  --mdc-icon-button-icon-color: inherit;
  --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, 0.5);
  --mat-icon-button-state-layer-color: #e4e0d3;
  --mat-icon-button-disabled-state-layer-color: #e4e0d3;
  --mat-icon-button-ripple-color: rgba(228, 224, 211, 0.1);
  --mat-icon-button-hover-state-layer-opacity: 0.08;
  --mat-icon-button-focus-state-layer-opacity: 0.24;
  --mat-icon-button-pressed-state-layer-opacity: 0.24;
}
html .mat-mdc-icon-button.mat-primary {
  --mdc-icon-button-icon-color: #d06a74;
  --mat-icon-button-state-layer-color: #d06a74;
  --mat-icon-button-ripple-color: rgba(208, 106, 116, 0.1);
}
html .mat-mdc-icon-button.mat-accent {
  --mdc-icon-button-icon-color: #d06a74;
  --mat-icon-button-state-layer-color: #d06a74;
  --mat-icon-button-ripple-color: rgba(208, 106, 116, 0.1);
}
html .mat-mdc-icon-button.mat-warn {
  --mdc-icon-button-icon-color: #e0616b;
  --mat-icon-button-state-layer-color: #e0616b;
  --mat-icon-button-ripple-color: rgba(224, 97, 107, 0.1);
}

html {
  --mat-icon-button-touch-target-display: block;
}

.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 44px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 10px;
}

html {
  --mdc-fab-container-shape: 50%;
  --mdc-fab-icon-size: 24px;
  --mdc-fab-small-container-shape: 50%;
  --mdc-fab-small-icon-size: 24px;
  --mdc-extended-fab-container-height: 48px;
  --mdc-extended-fab-container-shape: 24px;
}

html {
  --mdc-fab-container-color: #1b1817;
  --mdc-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-container-shadow-color: #000;
  --mat-fab-foreground-color: #e4e0d3;
  --mat-fab-state-layer-color: #e4e0d3;
  --mat-fab-disabled-state-layer-color: #e4e0d3;
  --mat-fab-ripple-color: rgba(228, 224, 211, 0.1);
  --mat-fab-hover-state-layer-opacity: 0.08;
  --mat-fab-focus-state-layer-opacity: 0.24;
  --mat-fab-pressed-state-layer-opacity: 0.24;
  --mat-fab-disabled-state-container-color: rgba(228, 224, 211, 0.12);
  --mat-fab-disabled-state-foreground-color: rgba(228, 224, 211, 0.5);
  --mdc-fab-small-container-color: #1b1817;
  --mdc-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-fab-small-container-shadow-color: #000;
  --mat-fab-small-foreground-color: #e4e0d3;
  --mat-fab-small-state-layer-color: #e4e0d3;
  --mat-fab-small-disabled-state-layer-color: #e4e0d3;
  --mat-fab-small-ripple-color: rgba(228, 224, 211, 0.1);
  --mat-fab-small-hover-state-layer-opacity: 0.08;
  --mat-fab-small-focus-state-layer-opacity: 0.24;
  --mat-fab-small-pressed-state-layer-opacity: 0.24;
  --mat-fab-small-disabled-state-container-color: rgba(228, 224, 211, 0.12);
  --mat-fab-small-disabled-state-foreground-color: rgba(228, 224, 211, 0.5);
  --mdc-extended-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mdc-extended-fab-container-shadow-color: #000;
}
html .mat-mdc-fab.mat-primary {
  --mdc-fab-container-color: #d06a74;
  --mat-fab-foreground-color: #12100f;
  --mat-fab-state-layer-color: #12100f;
  --mat-fab-ripple-color: rgba(18, 16, 15, 0.1);
}
html .mat-mdc-fab.mat-accent {
  --mdc-fab-container-color: #d06a74;
  --mat-fab-foreground-color: #12100f;
  --mat-fab-state-layer-color: #12100f;
  --mat-fab-ripple-color: rgba(18, 16, 15, 0.1);
}
html .mat-mdc-fab.mat-warn {
  --mdc-fab-container-color: #e0616b;
  --mat-fab-foreground-color: #12100f;
  --mat-fab-state-layer-color: #12100f;
  --mat-fab-ripple-color: rgba(18, 16, 15, 0.1);
}
html .mat-mdc-mini-fab.mat-primary {
  --mdc-fab-small-container-color: #d06a74;
  --mat-fab-small-foreground-color: #12100f;
  --mat-fab-small-state-layer-color: #12100f;
  --mat-fab-small-ripple-color: rgba(18, 16, 15, 0.1);
}
html .mat-mdc-mini-fab.mat-accent {
  --mdc-fab-small-container-color: #d06a74;
  --mat-fab-small-foreground-color: #12100f;
  --mat-fab-small-state-layer-color: #12100f;
  --mat-fab-small-ripple-color: rgba(18, 16, 15, 0.1);
}
html .mat-mdc-mini-fab.mat-warn {
  --mdc-fab-small-container-color: #e0616b;
  --mat-fab-small-foreground-color: #12100f;
  --mat-fab-small-state-layer-color: #12100f;
  --mat-fab-small-ripple-color: rgba(18, 16, 15, 0.1);
}

html {
  --mat-fab-touch-target-display: block;
  --mat-fab-small-touch-target-display: block;
}

html {
  --mdc-extended-fab-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-extended-fab-label-text-size: 14px;
  --mdc-extended-fab-label-text-tracking: normal;
  --mdc-extended-fab-label-text-weight: 600;
}

html {
  --mdc-snackbar-container-shape: 4px;
}

html {
  --mdc-snackbar-container-color: #d1d1d1;
  --mdc-snackbar-supporting-text-color: rgba(27, 24, 23, 0.87);
  --mat-snack-bar-button-color: rgba(0, 0, 0, 0.87);
}

html {
  --mdc-snackbar-supporting-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mdc-snackbar-supporting-text-line-height: 1.5;
  --mdc-snackbar-supporting-text-size: 14px;
  --mdc-snackbar-supporting-text-weight: 400;
}

html {
  --mat-table-row-item-outline-width: 1px;
}

html {
  --mat-table-background-color: #1b1817;
  --mat-table-header-headline-color: #e4e0d3;
  --mat-table-row-item-label-text-color: #e4e0d3;
  --mat-table-row-item-outline-color: rgba(228, 224, 211, 0.1);
}

html {
  --mat-table-header-container-height: 52px;
  --mat-table-footer-container-height: 48px;
  --mat-table-row-item-container-height: 48px;
}

html {
  --mat-table-header-headline-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-table-header-headline-line-height: 1.5;
  --mat-table-header-headline-size: 14px;
  --mat-table-header-headline-weight: 600;
  --mat-table-header-headline-tracking: normal;
  --mat-table-row-item-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-table-row-item-label-text-line-height: 1.5;
  --mat-table-row-item-label-text-size: 14px;
  --mat-table-row-item-label-text-weight: 400;
  --mat-table-row-item-label-text-tracking: normal;
  --mat-table-footer-supporting-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-table-footer-supporting-text-line-height: 1.5;
  --mat-table-footer-supporting-text-size: 14px;
  --mat-table-footer-supporting-text-weight: 400;
  --mat-table-footer-supporting-text-tracking: normal;
}

html {
  --mdc-circular-progress-active-indicator-width: 4px;
  --mdc-circular-progress-size: 48px;
}

html {
  --mdc-circular-progress-active-indicator-color: #d06a74;
}
html .mat-accent {
  --mdc-circular-progress-active-indicator-color: #d06a74;
}
html .mat-warn {
  --mdc-circular-progress-active-indicator-color: #e0616b;
}

html {
  --mat-badge-container-shape: 50%;
  --mat-badge-container-size: unset;
  --mat-badge-small-size-container-size: unset;
  --mat-badge-large-size-container-size: unset;
  --mat-badge-legacy-container-size: 22px;
  --mat-badge-legacy-small-size-container-size: 16px;
  --mat-badge-legacy-large-size-container-size: 28px;
  --mat-badge-container-offset: -11px 0;
  --mat-badge-small-size-container-offset: -8px 0;
  --mat-badge-large-size-container-offset: -14px 0;
  --mat-badge-container-overlap-offset: -11px;
  --mat-badge-small-size-container-overlap-offset: -8px;
  --mat-badge-large-size-container-overlap-offset: -14px;
  --mat-badge-container-padding: 0;
  --mat-badge-small-size-container-padding: 0;
  --mat-badge-large-size-container-padding: 0;
}

html {
  --mat-badge-background-color: #d06a74;
  --mat-badge-text-color: #12100f;
  --mat-badge-disabled-state-background-color: #514e4a;
  --mat-badge-disabled-state-text-color: rgba(228, 224, 211, 0.38);
}

.mat-badge-accent {
  --mat-badge-background-color: #d06a74;
  --mat-badge-text-color: #12100f;
}

.mat-badge-warn {
  --mat-badge-background-color: #e0616b;
  --mat-badge-text-color: #12100f;
}

html {
  --mat-badge-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-badge-text-size: 12px;
  --mat-badge-text-weight: 600;
  --mat-badge-small-size-text-size: 9px;
  --mat-badge-large-size-text-size: 24px;
}

html {
  --mat-bottom-sheet-container-shape: 4px;
}

html {
  --mat-bottom-sheet-container-text-color: #e4e0d3;
  --mat-bottom-sheet-container-background-color: #241f1e;
}

html {
  --mat-bottom-sheet-container-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-bottom-sheet-container-text-line-height: 1.5;
  --mat-bottom-sheet-container-text-size: 14px;
  --mat-bottom-sheet-container-text-tracking: normal;
  --mat-bottom-sheet-container-text-weight: 400;
}

html {
  --mat-legacy-button-toggle-height: 36px;
  --mat-legacy-button-toggle-shape: 2px;
  --mat-legacy-button-toggle-focus-state-layer-opacity: 1;
  --mat-standard-button-toggle-shape: 4px;
  --mat-standard-button-toggle-hover-state-layer-opacity: 0.04;
  --mat-standard-button-toggle-focus-state-layer-opacity: 0.12;
}

html {
  --mat-legacy-button-toggle-text-color: #908b81;
  --mat-legacy-button-toggle-state-layer-color: rgba(228, 224, 211, 0.1);
  --mat-legacy-button-toggle-selected-state-text-color: #a8a399;
  --mat-legacy-button-toggle-selected-state-background-color: #241f1e;
  --mat-legacy-button-toggle-disabled-state-text-color: rgba(228, 224, 211, 0.3);
  --mat-legacy-button-toggle-disabled-state-background-color: #12100f;
  --mat-legacy-button-toggle-disabled-selected-state-background-color: #1b1817;
  --mat-standard-button-toggle-text-color: #e4e0d3;
  --mat-standard-button-toggle-background-color: #1b1817;
  --mat-standard-button-toggle-state-layer-color: #e4e0d3;
  --mat-standard-button-toggle-selected-state-background-color: #241f1e;
  --mat-standard-button-toggle-selected-state-text-color: #e4e0d3;
  --mat-standard-button-toggle-disabled-state-text-color: rgba(228, 224, 211, 0.3);
  --mat-standard-button-toggle-disabled-state-background-color: #1b1817;
  --mat-standard-button-toggle-disabled-selected-state-text-color: #e4e0d3;
  --mat-standard-button-toggle-disabled-selected-state-background-color: #1b1817;
  --mat-standard-button-toggle-divider-color: #2f2c2a;
}

html {
  --mat-standard-button-toggle-height: 44px;
}

html {
  --mat-legacy-button-toggle-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-legacy-button-toggle-label-text-line-height: 1.5;
  --mat-legacy-button-toggle-label-text-size: 14px;
  --mat-legacy-button-toggle-label-text-tracking: normal;
  --mat-legacy-button-toggle-label-text-weight: 400;
  --mat-standard-button-toggle-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-standard-button-toggle-label-text-line-height: 1.5;
  --mat-standard-button-toggle-label-text-size: 14px;
  --mat-standard-button-toggle-label-text-tracking: normal;
  --mat-standard-button-toggle-label-text-weight: 400;
}

html {
  --mat-datepicker-calendar-container-shape: 4px;
  --mat-datepicker-calendar-container-touch-shape: 4px;
  --mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  --mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

html {
  --mat-datepicker-calendar-date-selected-state-text-color: #12100f;
  --mat-datepicker-calendar-date-selected-state-background-color: #d06a74;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(208, 106, 116, 0.4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #12100f;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(208, 106, 116, 0.3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(208, 106, 116, 0.3);
  --mat-datepicker-toggle-active-state-icon-color: #d06a74;
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(208, 106, 116, 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
  --mat-datepicker-toggle-icon-color: #a8a399;
  --mat-datepicker-calendar-body-label-text-color: #a8a399;
  --mat-datepicker-calendar-period-button-text-color: #e4e0d3;
  --mat-datepicker-calendar-period-button-icon-color: #a8a399;
  --mat-datepicker-calendar-navigation-button-icon-color: #a8a399;
  --mat-datepicker-calendar-header-divider-color: rgba(228, 224, 211, 0.1);
  --mat-datepicker-calendar-header-text-color: #a8a399;
  --mat-datepicker-calendar-date-today-outline-color: #908b81;
  --mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(144, 139, 129, 0.8);
  --mat-datepicker-calendar-date-text-color: #e4e0d3;
  --mat-datepicker-calendar-date-outline-color: transparent;
  --mat-datepicker-calendar-date-disabled-state-text-color: rgba(228, 224, 211, 0.38);
  --mat-datepicker-calendar-date-preview-state-outline-color: rgba(228, 224, 211, 0.2);
  --mat-datepicker-range-input-separator-color: #e4e0d3;
  --mat-datepicker-range-input-disabled-state-separator-color: rgba(228, 224, 211, 0.38);
  --mat-datepicker-range-input-disabled-state-text-color: rgba(228, 224, 211, 0.38);
  --mat-datepicker-calendar-container-background-color: #1b1817;
  --mat-datepicker-calendar-container-text-color: #e4e0d3;
}

.mat-datepicker-content.mat-accent {
  --mat-datepicker-calendar-date-selected-state-text-color: #12100f;
  --mat-datepicker-calendar-date-selected-state-background-color: #d06a74;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(208, 106, 116, 0.4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #12100f;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(208, 106, 116, 0.3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(208, 106, 116, 0.3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(208, 106, 116, 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}
.mat-datepicker-content.mat-warn {
  --mat-datepicker-calendar-date-selected-state-text-color: #12100f;
  --mat-datepicker-calendar-date-selected-state-background-color: #e0616b;
  --mat-datepicker-calendar-date-selected-disabled-state-background-color: rgba(224, 97, 107, 0.4);
  --mat-datepicker-calendar-date-today-selected-state-outline-color: #12100f;
  --mat-datepicker-calendar-date-focus-state-background-color: rgba(224, 97, 107, 0.3);
  --mat-datepicker-calendar-date-hover-state-background-color: rgba(224, 97, 107, 0.3);
  --mat-datepicker-calendar-date-in-range-state-background-color: rgba(224, 97, 107, 0.2);
  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}

.mat-datepicker-toggle-active.mat-accent {
  --mat-datepicker-toggle-active-state-icon-color: #d06a74;
}
.mat-datepicker-toggle-active.mat-warn {
  --mat-datepicker-toggle-active-state-icon-color: #e0616b;
}

.mat-calendar-controls {
  --mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  width: var(--mdc-icon-button-state-layer-size);
  height: var(--mdc-icon-button-state-layer-size);
  padding: 8px;
}

html {
  --mat-datepicker-calendar-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-datepicker-calendar-text-size: 13px;
  --mat-datepicker-calendar-body-label-text-size: 14px;
  --mat-datepicker-calendar-body-label-text-weight: 600;
  --mat-datepicker-calendar-period-button-text-size: 14px;
  --mat-datepicker-calendar-period-button-text-weight: 600;
  --mat-datepicker-calendar-header-text-size: 11px;
  --mat-datepicker-calendar-header-text-weight: 400;
}

html {
  --mat-divider-width: 1px;
}

html {
  --mat-divider-color: rgba(228, 224, 211, 0.1);
}

html {
  --mat-expansion-container-shape: 4px;
  --mat-expansion-legacy-header-indicator-display: inline-block;
  --mat-expansion-header-indicator-display: none;
}

html {
  --mat-expansion-container-background-color: #1b1817;
  --mat-expansion-container-text-color: #e4e0d3;
  --mat-expansion-actions-divider-color: rgba(228, 224, 211, 0.1);
  --mat-expansion-header-hover-state-layer-color: rgba(228, 224, 211, 0.05);
  --mat-expansion-header-focus-state-layer-color: rgba(228, 224, 211, 0.05);
  --mat-expansion-header-disabled-state-text-color: rgba(228, 224, 211, 0.3);
  --mat-expansion-header-text-color: #e4e0d3;
  --mat-expansion-header-description-color: #a8a399;
  --mat-expansion-header-indicator-color: #a8a399;
}

html {
  --mat-expansion-header-collapsed-state-height: 44px;
  --mat-expansion-header-expanded-state-height: 60px;
}

html {
  --mat-expansion-header-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-expansion-header-text-size: 14px;
  --mat-expansion-header-text-weight: 600;
  --mat-expansion-header-text-line-height: inherit;
  --mat-expansion-header-text-tracking: inherit;
  --mat-expansion-container-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-expansion-container-text-line-height: 1.5;
  --mat-expansion-container-text-size: 14px;
  --mat-expansion-container-text-tracking: normal;
  --mat-expansion-container-text-weight: 400;
}

html {
  --mat-grid-list-tile-header-primary-text-size: 14px;
  --mat-grid-list-tile-header-secondary-text-size: 12px;
  --mat-grid-list-tile-footer-primary-text-size: 14px;
  --mat-grid-list-tile-footer-secondary-text-size: 12px;
}

html {
  --mat-icon-color: inherit;
}

.mat-icon.mat-primary {
  --mat-icon-color: #d06a74;
}
.mat-icon.mat-accent {
  --mat-icon-color: #d06a74;
}
.mat-icon.mat-warn {
  --mat-icon-color: #e0616b;
}

html {
  --mat-sidenav-container-shape: 0;
  --mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
  --mat-sidenav-container-width: auto;
}

html {
  --mat-sidenav-container-divider-color: rgba(228, 224, 211, 0.1);
  --mat-sidenav-container-background-color: #241f1e;
  --mat-sidenav-container-text-color: #e4e0d3;
  --mat-sidenav-content-background-color: #12100f;
  --mat-sidenav-content-text-color: #e4e0d3;
  --mat-sidenav-scrim-color: rgba(228, 231, 232, 0.6);
}

html {
  --mat-stepper-header-icon-foreground-color: #12100f;
  --mat-stepper-header-selected-state-icon-background-color: #d06a74;
  --mat-stepper-header-selected-state-icon-foreground-color: #12100f;
  --mat-stepper-header-done-state-icon-background-color: #d06a74;
  --mat-stepper-header-done-state-icon-foreground-color: #12100f;
  --mat-stepper-header-edit-state-icon-background-color: #d06a74;
  --mat-stepper-header-edit-state-icon-foreground-color: #12100f;
  --mat-stepper-container-color: #1b1817;
  --mat-stepper-line-color: rgba(228, 224, 211, 0.1);
  --mat-stepper-header-hover-state-layer-color: rgba(228, 224, 211, 0.05);
  --mat-stepper-header-focus-state-layer-color: rgba(228, 224, 211, 0.05);
  --mat-stepper-header-label-text-color: #a8a399;
  --mat-stepper-header-optional-label-text-color: #a8a399;
  --mat-stepper-header-selected-state-label-text-color: #e4e0d3;
  --mat-stepper-header-error-state-label-text-color: #e0616b;
  --mat-stepper-header-icon-background-color: #a8a399;
  --mat-stepper-header-error-state-icon-foreground-color: #e0616b;
  --mat-stepper-header-error-state-icon-background-color: transparent;
}
html .mat-step-header.mat-accent {
  --mat-stepper-header-icon-foreground-color: #12100f;
  --mat-stepper-header-selected-state-icon-background-color: #d06a74;
  --mat-stepper-header-selected-state-icon-foreground-color: #12100f;
  --mat-stepper-header-done-state-icon-background-color: #d06a74;
  --mat-stepper-header-done-state-icon-foreground-color: #12100f;
  --mat-stepper-header-edit-state-icon-background-color: #d06a74;
  --mat-stepper-header-edit-state-icon-foreground-color: #12100f;
}
html .mat-step-header.mat-warn {
  --mat-stepper-header-icon-foreground-color: #12100f;
  --mat-stepper-header-selected-state-icon-background-color: #e0616b;
  --mat-stepper-header-selected-state-icon-foreground-color: #12100f;
  --mat-stepper-header-done-state-icon-background-color: #e0616b;
  --mat-stepper-header-done-state-icon-foreground-color: #12100f;
  --mat-stepper-header-edit-state-icon-background-color: #e0616b;
  --mat-stepper-header-edit-state-icon-foreground-color: #12100f;
}

html {
  --mat-stepper-header-height: 68px;
}

html {
  --mat-stepper-container-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-stepper-header-label-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-stepper-header-label-text-size: 14px;
  --mat-stepper-header-label-text-weight: 400;
  --mat-stepper-header-error-state-label-text-size: 14px;
  --mat-stepper-header-selected-state-label-text-size: 14px;
  --mat-stepper-header-selected-state-label-text-weight: 400;
}

html {
  --mat-sort-arrow-color: #a8a399;
}

html {
  --mat-toolbar-container-background-color: #12100f;
  --mat-toolbar-container-text-color: #e4e0d3;
}

.mat-toolbar.mat-primary {
  --mat-toolbar-container-background-color: #d06a74;
  --mat-toolbar-container-text-color: #12100f;
}
.mat-toolbar.mat-accent {
  --mat-toolbar-container-background-color: #d06a74;
  --mat-toolbar-container-text-color: #12100f;
}
.mat-toolbar.mat-warn {
  --mat-toolbar-container-background-color: #e0616b;
  --mat-toolbar-container-text-color: #12100f;
}

html {
  --mat-toolbar-standard-height: 60px;
  --mat-toolbar-mobile-height: 52px;
}

html {
  --mat-toolbar-title-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-toolbar-title-text-line-height: 1.15;
  --mat-toolbar-title-text-size: 20px;
  --mat-toolbar-title-text-tracking: normal;
  --mat-toolbar-title-text-weight: 600;
}

html {
  --mat-tree-container-background-color: #1b1817;
  --mat-tree-node-text-color: #e4e0d3;
}

html {
  --mat-tree-node-min-height: 44px;
}

html {
  --mat-tree-node-text-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mat-tree-node-text-size: 14px;
  --mat-tree-node-text-weight: 400;
}

/* Campos de formulario a 48px (Material por default usa 56 y con density -1, 52):
 * un campo de 52px al lado de un botón de 40px desalinea toda fila de filtros. */
html {
  --mat-form-field-container-height: 48px;
  --mat-form-field-filled-label-display: none;
  --mat-form-field-container-vertical-padding: 12px;
  --mat-form-field-filled-with-label-container-padding-top: 12px;
  --mat-form-field-filled-with-label-container-padding-bottom: 12px;
}

/* Foco por teclado en los componentes de Material: aro de 2px en el color de
 * foco de la marca (rosa), el mismo `:focus-visible` que usa magmma.ar. */
html {
  --mat-focus-indicator-border-style: solid;
  --mat-focus-indicator-border-width: 2px;
  --mat-focus-indicator-border-radius: 8px;
  --mat-focus-indicator-border-color: black;
  --mat-focus-indicator-display: block;
}

html {
  --mat-mdc-focus-indicator-border-style: solid;
  --mat-mdc-focus-indicator-border-width: 2px;
  --mat-mdc-focus-indicator-border-radius: 8px;
  --mat-mdc-focus-indicator-border-color: black;
  --mat-mdc-focus-indicator-display: block;
}

html {
  --mat-focus-indicator-border-color: #d06a74;
}

html {
  --mat-mdc-focus-indicator-border-color: #d06a74;
}

:root {
  /* ───────────────────────────────────────────────────────────────────────
   * Spacing — grilla de 8px (4px sólo para ajustes ópticos).
   *
   * La escala numérica se conserva con los MISMOS valores porque hay ~40
   * componentes que la usan. Los alias SEMÁNTICOS son los que hay que usar de
   * acá en adelante: nombrar el rol evita que cada pantalla elija su padding.
   * ─────────────────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  /* página 32 → sección 24 → card 24 → contenido 16 → inline 8.
   * El padding de card sube de 20 a 24: es el `padding` de las cards de
   * magmma.ar (`--space-6`) y es lo que más cambia la sensación de aire. */
  --space-inline: 8px; /* entre elementos de una misma línea */
  --space-content: 16px; /* entre elementos apilados dentro de una card */
  --space-card: 24px; /* padding interno de una card */
  --space-section: 24px; /* entre secciones */
  --space-page: 32px; /* padding del contenedor de página */
  /* ───────────────────────────────────────────────────────────────────────
   * Typography — escala fija en píxeles, alineada con la de magmma.ar
   * (11 / 12 / 14 / 16 / 20 / 28 / 40). Los tokens `--fs-*` conservan su nombre
   * porque ~50 componentes ya los usan.
   * ─────────────────────────────────────────────────────────────────────── */
  --fs-xs: 11px; /* overline, badges, metadatos densos  (web: --text-xs) */
  --fs-meta: 12px; /* slugs, timestamps, ayudas, th, eyebrow (web: --text-sm) */
  --fs-sm: 13px; /* texto secundario — paso intermedio propio de la app */
  --fs-md: 14px; /* cuerpo, botones, tablas (web: --text-base) */
  --fs-lg: 16px; /* título de sección (web: --text-md) */
  --fs-xl: 20px; /* título de card destacada (web: --text-lg / h3) */
  --fs-2xl: 28px; /* H1 de página (web: --text-xl) */
  --fs-3xl: 32px; /* número protagonista de KPI */
  --fs-4xl: 40px; /* número hero del dashboard (web: --text-2xl / h2) */
  --lh-tight: 1.15; /* títulos (web: --leading-tight) */
  --lh-snug: 1.3;
  --lh-body: 1.5;
  --tracking-tight: 0; /* la web no aprieta los títulos: letter-spacing normal */
  --tracking-overline: 0.04em; /* th y labels de KPI (web: th .04em) */
  --tracking-eyebrow: 0.08em; /* eyebrows y subheaders (web: .08em) */
  /* Alias que ~12 estilos de la feature de socios ya referenciaban SIN que
   * existieran: caían al valor heredado. Se definen para que apunten a la escala. */
  --font-size-sm: var(--fs-sm);
  --font-size-base: var(--fs-md);
  --font-size-lg: var(--fs-lg);
  /* Motion — la web usa 120ms/200ms con cubic-bezier(.2, 0, .2, 1) y sólo
   * transiciona color, fondo y borde. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  /* Elevation — magmma.ar no usa sombras en ningún elemento (medido: cero
   * `box-shadow` en todo el DOM). La jerarquía la dan la superficie y el borde.
   * Los tokens se conservan, todos en `none`, para no romper a quien los use. */
  --elev-0: none;
  --elev-1: none;
  --elev-2: none;
  --elev-3: none;
  --elev-4: none;
  /* Z-index */
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 9000;
  /* Radios de la web: 4 / 8 / 12 / pill. Regla: controles 8 · cards 12 ·
   * detalles mínimos (kbd, code, foco) 4 · pills 999. Nada más. */
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-control: 8px;
  --radius-md: 8px;
  --radius-card: 12px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  /* Foco — el mismo `:focus-visible` de la web: 2px sólidos, offset de 3px. */
  --focus-ring: #d06a74;
  --focus-ring-color: var(--focus-ring);
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --border-width-thin: 1px;
  --border-width-thick: 2px;
  /* Superficies (web: surface-base / -raised / -overlay).
   *   --bg-base      fondo de página y de las barras (el plano de atrás)
   *   --bg-surface   cards y paneles (el plano de contenido)
   *   --bg-elevated  sólo lo que FLOTA o reacciona: menús, dialogs, hover de fila */
  --bg-base: #12100f;
  --bg-surface: #1b1817;
  --bg-elevated: #241f1e;
  --bg-burgundy: #710f19;
  --hover-bg: var(--bg-elevated);
  /* Bordes (web: border-subtle 10% / border-strong 22%, ambos crema). */
  --border-subtle: rgb(228 224 211 / 10%);
  --border-default: var(--border-subtle);
  --border-strong: rgb(228 224 211 / 22%);
  --border-focus: #d06a74;
  /* Texto (web: text-primary / -secondary; ver desvío #1 para el muted). */
  --text-primary: #e4e0d3;
  --text-secondary: #a8a399;
  --text-muted: #908b81;
  --text-tertiary: var(--text-muted);
  /* "Sin dato" ("Sin descripción", "—", "sin módulos") sigue siendo CONTENIDO que hay
   * que poder leer, así que no baja de AA: 5.2:1 sobre raised. Los controles
   * realmente deshabilitados, que están exentos, los atenúa Material con opacidad. */
  --text-disabled: #908b81;
  --text-on-burgundy: #e4e0d3;
  /* Acento (web: --accent #d06a74, --accent-hover #de8189, --accent-muted).
   * Es color de TEXTO, de borde, de foco y de selección. Da 5.4:1 sobre la base,
   * 5.0:1 sobre raised y 4.7:1 sobre overlay: pasa AA en las tres superficies. */
  --accent-primary: #d06a74;
  --accent-primary-hover: #de8189;
  --accent-primary-active: #b8525d;
  --accent-muted: rgb(208 106 116 / 14%);
  --selected-bg: var(--accent-muted);
  /* Acción primaria SÓLIDA (web: .boton.primary).
   * Reposo: fondo bordó + texto crema (8.9:1). Hover: INVIERTE a fondo rosa +
   * texto oscuro (5.4:1). Es el gesto más reconocible de la web y por eso se
   * replica tal cual. */
  --accent-solid-bg: #710f19;
  --accent-solid-bg-hover: #d06a74;
  --accent-solid-text: #e4e0d3;
  --accent-solid-text-hover: #12100f;
  /* Estados (web: success / warning / danger). `info` es neutro: ver desvío #3. */
  --color-success: #5fb37a;
  --color-warning: #d9a03f;
  --color-danger: #e0616b;
  --color-error: var(--color-danger);
  --color-info: #a8a399;
  --text-error: #ee8a92;
  /* Fondos translúcidos de aviso (banners, notices, callouts). Antes cada
   * componente repetía su propio rgba(…, .08) con los colores VIEJOS. */
  --success-bg: rgb(95 179 122 / 10%);
  --warning-bg: rgb(217 160 63 / 10%);
  --danger-bg: rgb(224 97 107 / 10%);
  --info-bg: rgb(228 224 211 / 6%);
  --warning-border: rgb(217 160 63 / 50%);
  /* Chips por estado. El texto es una versión ACLARADA del color de estado para
   * sostener 4.5:1 también sobre el fondo teñido y sobre el hover de fila. */
  --chip-active-bg: rgb(95 179 122 / 14%);
  --chip-active-text: #7fcb97;
  --chip-trial-bg: transparent; /* info = contorno, no relleno: ver .pill */
  --chip-trial-text: #e4e0d3;
  --chip-past-due-bg: rgb(217 160 63 / 16%);
  --chip-past-due-text: #e8b565;
  --chip-suspended-bg: rgb(224 97 107 / 16%);
  --chip-suspended-text: #ee8a92;
  --chip-canceled-bg: rgb(228 224 211 / 10%);
  --chip-canceled-text: #a8a399;
}

/* color-scheme: dark hace que el UA renderice scrollbars, form controls
 * nativos (date pickers, selects no-Material, file inputs) y el caret de
 * inputs con el modo oscuro del sistema, evitando el "flash light" típico
 * del scrollbar default sobre paneles oscuros. Audit 2026-05-30 Q-7.
 * magmma.ar es oscuro-únicamente y esta app también: no hay modo claro que
 * adaptar ni preferencia que persistir. */
:root {
  color-scheme: dark;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

/* Links planos: rosa de hover de la web (#de8189, 6.9:1 sobre la base) y
 * subrayado sólo al pasar el mouse. El color no es la única señal: el cursor y
 * el subrayado en hover/foco lo acompañan. */
a {
  color: var(--accent-primary-hover);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

/* Foco por teclado (web: `:focus-visible { outline: 2px solid var(--focus-ring);
 * outline-offset: 3px; border-radius: var(--radius-sm) }`). Un solo sistema para
 * todo elemento nativo; los componentes de Material usan su propio indicador, que
 * se alinea arriba con `strong-focus-indicators`. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.mat-mdc-button-base:focus-visible,
.mat-mdc-form-field :focus-visible,
.mat-mdc-select:focus-visible,
.mat-mdc-checkbox :focus-visible,
.mat-mdc-radio-button :focus-visible,
.mat-mdc-slide-toggle :focus-visible,
.mat-mdc-tab:focus-visible,
.mat-mdc-menu-item:focus-visible,
.mat-mdc-list-item:focus-visible {
  outline: none; /* los cubre el indicador propio de Material */
}

/* Lockup tipográfico de la marca: el nombre en crema y el segundo término en rosa
 * con tracking abierto — la relación del wordmark de magmma.ar (marca en crema +
 * línea chica en rosa debajo). No se reproduce el logo de MAGMMA: este es otro
 * producto del mismo equipo. Lo usan el sidebar y las pantallas de acceso. */
.brand-lockup {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  line-height: 1;
}

.brand-lockup .brand-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}

.brand-lockup .brand-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-primary);
  white-space: nowrap;
}

/* =============================================================================
 * Pantallas de acceso (login, recuperar contraseña).
 *
 * Replican el hero de la web: la base de la marca con el halo radial tenue en
 * rosa (`radial-gradient(80% 60% at 20% 0%, accent 14%, transparent 70%)`). Es el
 * ÚNICO gradiente del sistema y vive sólo acá, donde hace de portada.
 * ============================================================================= */
.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--space-6) var(--space-4);
  background: radial-gradient(80% 60% at 20% 0%, var(--accent-muted), transparent 70%), var(--bg-base);
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: var(--space-8);
}

.login-card .auth-brand {
  margin-bottom: var(--space-8);
}

.login-card h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
}

.login-card .auth-lede {
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
  font-size: var(--fs-md);
  color: var(--text-secondary);
}

.login-card form mat-form-field {
  width: 100%;
}

.login-card form button[type=submit] {
  width: 100%;
}

.login-card .auth-links {
  margin: var(--space-5) 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}

/* Eyebrow (web: `.eyebrow`): 12px · 600 · mayúsculas · tracking .08em · rosa.
 * Una por sección como máximo: es el único lugar donde el acento se usa como
 * color de TEXTO decorativo. */
.eyebrow {
  margin: 0;
  color: var(--accent-primary);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* =============================================================================
 * Planos de superficie.
 *
 *   --bg-base      fondo de página, barra superior, sidebar y header de página
 *   --bg-surface   cards y paneles
 *   --bg-elevated  sólo lo que FLOTA de verdad: menús, dialogs, hover
 *
 * Como en magmma.ar, las secciones se separan con un borde de 1px y un cambio de
 * superficie, nunca con sombra. `min-width: 0` en los contenedores de layout no
 * es cosmético: sin eso, un hijo de grid/flex nunca encoge por debajo de su
 * contenido, que es la causa raíz del desborde medido en tablet.
 * ============================================================================= */
/* Page header: sobre la base y separado del contenido por una línea, igual que
 * el `header` de la web (base + borde inferior subtle). */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-section);
  padding: var(--space-section) var(--space-page);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-base);
  min-width: 0;
}

.page-header h1 {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

/* Bajada opcional del header: contexto de la pantalla en una línea. */
.page-header .page-subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.page-header .header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-inline);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .page-header {
    padding: var(--space-content) var(--space-section);
  }
}
@media (max-width: 600px) {
  .page-header {
    padding: var(--space-content);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .page-header .header-actions,
  .page-header .spacer {
    width: 100%;
  }
}
/* Card (web: `.canal` — raised + 1px border-subtle + radius 12 + padding 24). */
.card-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-card);
  min-width: 0;
}

/* Título de sección dentro de una card (web: h3 — 20px/600/1.15). */
.section-title {
  margin: 0 0 var(--space-content);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.section-hint {
  margin: calc(var(--space-content) * -1 + var(--space-1)) 0 var(--space-content);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 72ch; /* medida de línea legible (web: --prose-max 68ch) */
}

/* =============================================================================
 * Toolbar de filtros — `.filters-row` computaba `display: block` con
 * `gap: normal`, así que el gap declarado nunca se aplicaba. Los campos tenían
 * anchos FIJOS que no encogían, la otra mitad del desborde en tablet.
 * ============================================================================= */
.filters-row,
.subm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-content);
  min-width: 0;
}

/* La acción primaria se separa de los filtros: crear y filtrar no son la misma
 * familia de acción y no deberían leerse como un mismo bloque. */
.filters-row > .toolbar-primary,
.subm-toolbar > .toolbar-primary {
  margin-left: auto;
}

/* Campos de filtro: fluidos con tope, nunca fijos. */
.filters-row mat-form-field,
.subm-toolbar mat-form-field {
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 0;
}

.filters-row mat-form-field.filter-narrow,
.subm-toolbar mat-form-field.filter-narrow {
  flex: 0 1 180px;
}

.filters-row mat-form-field.filter-wide,
.subm-toolbar mat-form-field.filter-wide {
  flex: 2 1 280px;
  max-width: 420px;
}

/* Material reserva ~20px debajo de cada campo para un mensaje de error que en
 * un filtro no aparece nunca. Colapsarlo baja el campo de 74px a ~48px y lo
 * alinea con los botones de la misma fila. */
.filters-row .mat-mdc-form-field-subscript-wrapper,
.subm-toolbar .mat-mdc-form-field-subscript-wrapper {
  display: none;
}

@media (max-width: 599px) {
  .filters-row mat-form-field,
  .subm-toolbar mat-form-field {
    flex: 1 1 100%;
    max-width: none;
  }
  .filters-row > .toolbar-primary,
  .subm-toolbar > .toolbar-primary {
    margin-left: 0;
    width: 100%;
  }
}
/* Status pill (legacy: el sistema vigente es <subm-pill>). Mismos pares de
 * color que los chips para que nada quede con la paleta vieja. */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}

.status-pill.active {
  background: var(--chip-active-bg);
  color: var(--chip-active-text);
}

.status-pill.trialing,
.status-pill.pending_activation {
  background: var(--chip-trial-bg);
  color: var(--chip-trial-text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.status-pill.past_due {
  background: var(--chip-past-due-bg);
  color: var(--chip-past-due-text);
}

.status-pill.suspended {
  background: var(--chip-suspended-bg);
  color: var(--chip-suspended-text);
}

.status-pill.canceled,
.status-pill.expired {
  background: var(--chip-canceled-bg);
  color: var(--chip-canceled-text);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-12);
  color: var(--text-muted);
}

/* =============================================================================
 * Ficha de datos: `<dl class="facts">` es el patrón único para las pantallas de
 * detalle — etiqueta apagada a la izquierda, valor legible a la derecha,
 * alineados en columna para que el ojo baje derecho.
 * ============================================================================= */
.facts {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: var(--space-3) var(--space-section);
  margin: 0;
  align-items: baseline;
}

.facts dt {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.facts dd {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-primary);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Dos pares por fila cuando hay espacio: las fichas largas se vuelven columnas
 * interminables si cada dato ocupa una fila entera. */
.facts.facts-2col {
  grid-template-columns: repeat(2, minmax(120px, auto) minmax(0, 1fr));
}

@media (max-width: 900px) {
  .facts.facts-2col {
    grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  }
}
@media (max-width: 599px) {
  .facts,
  .facts.facts-2col {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1) 0;
  }
  .facts dt {
    margin-top: var(--space-3);
  }
}
/* =============================================================================
 * Barra de uso contra un límite (locales, usuarios, movimientos). El color
 * cambia con la proximidad al tope porque un número solo no comunica urgencia:
 * "8 de 10" y "2 de 10" se leen igual de rápido pero significan cosas distintas.
 * El estado además está en el texto ("8 de 10"), no sólo en el color.
 * ============================================================================= */
.usage-meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.usage-meter .usage-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-inline);
  font-size: var(--fs-sm);
}

.usage-meter .usage-label {
  color: var(--text-secondary);
}

.usage-meter .usage-value {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.usage-meter .usage-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  overflow: hidden;
}

.usage-meter .usage-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--accent-primary);
  transition: width var(--motion-base) var(--ease-out);
}

.usage-meter.is-warning .usage-fill {
  background: var(--color-warning);
}

.usage-meter.is-over .usage-fill {
  background: var(--color-danger);
}

/* Sin cupo configurado no se dibuja una barra vacía, que se leería como "0 de 0". */
.usage-meter.is-unlimited .usage-track {
  background: repeating-linear-gradient(90deg, var(--bg-elevated) 0 6px, transparent 6px 12px);
}

.usage-meter.is-unlimited .usage-fill {
  display: none;
}

/* Loading */
.loading-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
}

/* Contenedor de contenido de página. `min-width: 0` + `grid-template-columns:
 * minmax(0, 1fr)` es lo que permite que las cards encojan en vez de desbordar:
 * un grid item, por default, no baja de su contenido mínimo. */
.page-content {
  padding: var(--space-page);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-section);
  min-width: 0;
}

@media (max-width: 900px) {
  .page-content {
    padding: var(--space-section);
  }
}
@media (max-width: 599px) {
  .page-content {
    padding: var(--space-content);
    gap: var(--space-content);
  }
}
/* =============================================================================
 * KPI. El número es el protagonista: 32px/600 con `tabular-nums` para que no baile
 * al actualizarse. El label va ARRIBA y chico, con el tratamiento de los `th` de
 * la web (12px · 600 · mayúsculas · text-secondary): se lee primero el qué y
 * después el cuánto. No hay sombra: un KPI es una card más.
 * ============================================================================= */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-content);
  min-width: 0;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-card);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  min-width: 0;
  transition: border-color var(--motion-base) var(--ease-out);
}

/* Sólo reacciona lo que es navegable (web: `.secondary:hover` enciende el borde
 * en rosa). Un borde que cambia en algo que no se puede clickear enseña al ojo a
 * ignorar los bordes. */
a.kpi-card:hover,
.kpi-card.is-clickable:hover {
  border-color: var(--accent-primary);
}

.kpi-label {
  font-size: var(--fs-meta);
  font-weight: 600;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--text-secondary);
}

/* Los tiles de una banda reservan dos líneas de label: así el número cae en la
 * misma altura en todos aunque un label ("SUSCRIPCIONES ACTIVAS") envuelva y otro
 * ("EN TRIAL") no. Sólo dentro de la grilla; el KPI del hero va solo. */
.kpi-grid .kpi-label {
  min-height: calc(var(--fs-meta) * var(--lh-snug) * 2);
}

.kpi-value {
  font-size: var(--fs-3xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.kpi-value.is-text {
  font-size: var(--fs-xl);
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.kpi-delta.is-up {
  color: var(--color-success);
}

.kpi-delta.is-down {
  color: var(--color-danger);
}

.kpi-delta.is-flat {
  color: var(--text-secondary);
}

.kpi-sub {
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

/* Un KPI en cero y un KPI sin datos no son lo mismo, y hoy se veían igual. */
.kpi-card.is-empty .kpi-value {
  color: var(--text-muted);
}

/* =============================================================================
 * Avisos (banners, callouts de diálogos). Una sola receta: fondo teñido al 10%,
 * borde del color de estado y el MENSAJE en texto primario. El color acompaña, no
 * transmite solo: cada aviso lleva su propio ícono y título.
 * ============================================================================= */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--info-bg);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.notice.is-success {
  border-color: var(--color-success);
  background: var(--success-bg);
}

.notice.is-warning {
  border-color: var(--color-warning);
  background: var(--warning-bg);
}

.notice.is-danger {
  border-color: var(--color-danger);
  background: var(--danger-bg);
}

/* =============================================================================
 * Overlays. En la web no hay elementos flotantes con sombra: acá lo que flota se
 * distingue por estar en la superficie `overlay`, con borde fuerte y el fondo de
 * la página atenuado detrás.
 * ============================================================================= */
/* Snackbar: superficie overlay con texto primario; success y error invierten a
 * relleno de color con texto oscuro (7.4:1 y 5.5:1). */
.mat-mdc-snack-bar-container {
  --mdc-snackbar-container-color: var(--bg-elevated);
  --mdc-snackbar-supporting-text-color: var(--text-primary);
  --mat-snack-bar-button-color: var(--accent-primary-hover);
}

.mat-mdc-snack-bar-container .mdc-snackbar__surface {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  box-shadow: none;
}

.mat-mdc-snack-bar-container.success {
  --mdc-snackbar-container-color: var(--color-success);
  --mdc-snackbar-supporting-text-color: var(--bg-base);
  --mat-snack-bar-button-color: var(--bg-base);
}

.mat-mdc-snack-bar-container.error {
  --mdc-snackbar-container-color: var(--color-danger);
  --mdc-snackbar-supporting-text-color: var(--bg-base);
  --mat-snack-bar-button-color: var(--bg-base);
}

.mat-mdc-snack-bar-container.success .mdc-snackbar__surface {
  background: var(--color-success);
  border-color: transparent;
}

.mat-mdc-snack-bar-container.error .mdc-snackbar__surface {
  background: var(--color-danger);
  border-color: transparent;
}

/* CDK overlay backdrop — Material 17 + tema oscuro dejaba el backdrop con
 * opacity 0 (no se veía el oscurecimiento detrás de los dialogs). Se fuerza la
 * base de la marca al 72%. Sin blur: la web no usa `backdrop-filter`. */
.cdk-overlay-backdrop.cdk-overlay-dark-backdrop {
  background: rgba(18, 16, 15, 0.72);
}

.cdk-overlay-backdrop-showing {
  opacity: 1 !important;
}

/* Dialog y menús: superficie overlay + borde fuerte, sin sombra. */
.mat-mdc-dialog-surface,
.mat-mdc-dialog-container .mdc-dialog__surface {
  border: 1px solid var(--border-strong) !important;
  box-shadow: none !important;
  background: var(--bg-elevated) !important;
}

.mat-mdc-menu-panel,
.mat-mdc-select-panel,
.mat-mdc-autocomplete-panel {
  border: 1px solid var(--border-strong) !important;
  background: var(--bg-elevated) !important;
  box-shadow: none !important;
}

/* Subm dialog responsive — audit 2026-05-30 M-12.
 * Antes los dialogs tenían min-width:480px hardcoded que rompían en mobile
 * <480px (scroll horizontal forzado). Esta panelClass se aplica via
 * MatDialogConfig y reemplaza ese min-width por un width fluido. En mobile
 * (<600px) el dialog ocupa casi todo el viewport con margen mínimo. */
.cdk-overlay-pane.subm-dialog {
  max-width: min(640px, 100vw - 32px) !important;
}

@media (max-width: 599px) {
  .cdk-overlay-pane.subm-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0 !important;
  }
  .cdk-overlay-pane.subm-dialog .mat-mdc-dialog-surface {
    border-radius: 0 !important;
    min-height: 100vh;
  }
  .cdk-overlay-pane.subm-dialog mat-dialog-content {
    min-width: 0 !important;
    max-width: none !important;
  }
}
/* =============================================================================
 * Tablas (web: `th` 12px/600/mayúsculas/.04em/text-secondary, celdas con borde
 * inferior subtle; la tabla comparativa no lleva zebra ni sombras).
 *
 * Hallazgo que motiva la altura fija: en `/plans` las alturas de fila medidas eran
 * 65, 104, 87, 154, 154, 154px. Una tabla con filas parejas se ESCANEA; una con
 * filas desparejas se lee de a una. Por eso la altura se fija y el contenido largo
 * se resuelve truncando o resumiendo (chips + "+N"), nunca estirando la fila.
 * ============================================================================= */
.subm-table {
  width: 100%;
  border-collapse: collapse;
}

.subm-table th,
.subm-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.subm-table th {
  font-size: var(--fs-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--text-secondary);
  white-space: nowrap;
}

.subm-table td {
  color: var(--text-primary);
}

/* Header pegado al scrollear listas largas: perder los encabezados a la
 * tercera pantalla obliga a volver a subir para saber qué columna es cuál. */
.subm-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-surface);
  border-bottom-color: var(--border-strong);
}

.subm-table tbody tr {
  transition: background var(--motion-fast) var(--ease-out);
}

/* Sólo con puntero real: en una pantalla táctil `:hover` queda pegado a la última
 * fila tocada y la deja resaltada hasta el próximo toque. */
@media (hover: hover) {
  .subm-table tbody tr:hover td {
    background: var(--bg-elevated);
  }
}
.subm-table tbody tr:last-child td {
  border-bottom: none;
}

/* Altura de fila uniforme por densidad. Es lo que hace que la tabla se lea
 * como una grilla y no como una lista de bloques de alto variable. */
.subm-table tbody td {
  height: var(--density-row-height, 56px);
}

/* Columnas que no deben ganar ancho: numéricas, de estado y de acciones se
 * quedan con lo mínimo y le ceden el resto a la columna de identidad. */
.subm-table .num-col,
.subm-table .money-col,
.subm-table .fit-col {
  width: 1%;
  white-space: nowrap;
}

.subm-table .num-col {
  text-align: center;
}

/* Celda de acciones fija a la derecha: al scrollear horizontalmente, perder
 * los botones de acción es perder la única forma de operar sobre la fila. */
.subm-table .actions-col {
  width: 1%;
  white-space: nowrap;
  position: sticky;
  right: 0;
  background: var(--bg-surface);
}

@media (hover: hover) {
  .subm-table tbody tr:hover .actions-col {
    background: var(--bg-elevated);
  }
}
.subm-table thead .actions-col {
  z-index: 3;
}

/* Patrón "identidad": nombre + slug/metadato debajo. El slug es metadato y tiene
 * que verse como metadato: más chico y en text-muted, nunca compitiendo con el
 * nombre. */
.cell-identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.cell-identity .identity-name {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-primary);
  line-height: var(--lh-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-identity .identity-meta {
  font-size: var(--fs-meta);
  font-weight: 400;
  color: var(--text-muted);
  line-height: var(--lh-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Los slugs van en mono: son identificadores técnicos, no prosa. */
.cell-identity code.identity-meta,
.subm-table code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}

/* Texto largo en una celda: truncar con tooltip, nunca estirar la fila. */
.subm-table .cell-truncate {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Lista de chips dentro de una celda (módulos, features, tags). */
.cell-chips {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Responsive table wrapper (audit 2026-05-30 H-5).
 * Antes sólo audit-log wrapeaba su tabla con overflow-x; las otras listas se
 * desbordaban en mobile/tablet sin scroll horizontal. El wrapper restablece el
 * escape y reserva un min-width para preservar la legibilidad de columnas.
 *
 * Uso: <div class="subm-table-responsive"><table class="subm-table">…
 *
 * El padding/margin negativo "salta" el padding de .card-section para que el
 * scroll horizontal alcance los bordes de la card (lectura natural). */
.subm-table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 calc(var(--space-card) * -1);
  padding: 0 var(--space-card);
  min-width: 0;
  /* Indicadores de scroll horizontal (web: el wrapper `.scroll` de su tabla
   * comparativa). Una tabla más ancha que la card recortaba columnas sin avisar y
   * se leía como un bug de layout; ahora el borde con contenido oculto proyecta
   * un halo crema. Técnica de `background-attachment: local`: los dos primeros
   * degradados (del color de la card) TAPAN el halo cuando se llegó al extremo. */
  background: linear-gradient(to right, var(--bg-surface) 30%, transparent) 0 0/40px 100% no-repeat local, linear-gradient(to left, var(--bg-surface) 30%, transparent) 100% 0/40px 100% no-repeat local, radial-gradient(farthest-side at 0 50%, rgba(228, 224, 211, 0.22), transparent) 0 0/14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(228, 224, 211, 0.22), transparent) 100% 0/14px 100% no-repeat scroll;
}

.subm-table-responsive .subm-table {
  min-width: 760px;
}

/* =============================================================================
 * Tabla → tarjetas en mobile.
 *
 * En un teléfono, una tabla de 760px de ancho mínimo se puede scrollear pero no
 * se puede leer: hay que ir y volver para cruzar un valor con su columna. El
 * patrón de tarjetas apila cada fila y le pone a cada celda su etiqueta al lado,
 * tomada del `data-label` de la celda.
 *
 * Se activa agregando `.stack-on-mobile` a la tabla, y poniendo `data-label` en
 * cada `<td>`. Es opt-in a propósito: no todas las tablas ganan con esto.
 * ============================================================================= */
@media (max-width: 599px) {
  .subm-table-responsive:has(.subm-table.stack-on-mobile) {
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }
  .subm-table.stack-on-mobile {
    min-width: 0;
    display: block;
  }
  .subm-table.stack-on-mobile thead {
    /* Oculto visualmente pero legible por lectores de pantalla. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  /* Con selección múltiple, la casilla "seleccionar todas" no puede desaparecer
   * junto con el thead: se conserva como una barra sobre las tarjetas. */
  .subm-table.stack-on-mobile:has(th.select-col) thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    display: block;
    margin-bottom: var(--space-3);
  }
  .subm-table.stack-on-mobile:has(th.select-col) thead tr,
  .subm-table.stack-on-mobile:has(th.select-col) thead th.select-col {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: auto;
    border: none;
    padding: 0;
  }
  .subm-table.stack-on-mobile:has(th.select-col) thead th:not(.select-col) {
    display: none;
  }
  .subm-table.stack-on-mobile thead th.select-col::after {
    content: "Seleccionar todas";
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-secondary);
  }
  .subm-table.stack-on-mobile tbody,
  .subm-table.stack-on-mobile tr,
  .subm-table.stack-on-mobile td {
    display: block;
    width: auto;
  }
  .subm-table.stack-on-mobile tbody tr {
    position: relative;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    background: var(--bg-surface);
    padding: var(--space-3) var(--space-content);
    margin-bottom: var(--space-3);
  }
  .subm-table.stack-on-mobile tbody td {
    height: auto;
    padding: var(--space-2) 0;
    border-bottom: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-content);
    text-align: right;
    white-space: normal;
  }
  .subm-table.stack-on-mobile tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--fs-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-overline);
    color: var(--text-secondary);
    text-align: left;
  }
  .subm-table.stack-on-mobile tbody td[data-label=""]::before {
    display: none;
  }
  /* La celda de identidad ocupa el ancho entero y hace de título de la tarjeta.
   * Si la primera celda es la casilla de selección, el título es la siguiente. */
  .subm-table.stack-on-mobile tbody td:first-child:not(.select-col),
  .subm-table.stack-on-mobile tbody td.select-col + td {
    display: block;
    text-align: left;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
  }
  .subm-table.stack-on-mobile tbody td:first-child:not(.select-col)::before,
  .subm-table.stack-on-mobile tbody td.select-col + td::before {
    display: none;
  }
  /* La casilla de selección flota en la esquina de la tarjeta; ocupa el alto del
   * target táctil sin empujar el contenido. */
  .subm-table.stack-on-mobile tbody td.select-col {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 1;
    display: block;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
  }
  .subm-table.stack-on-mobile tbody td.select-col + td {
    padding-right: var(--space-10);
  }
  /* Las acciones dejan de estar pegadas a la derecha y pasan al pie. */
  .subm-table.stack-on-mobile tbody td.actions-col {
    position: static;
    justify-content: flex-end;
    padding-top: var(--space-3);
  }
  .subm-table.stack-on-mobile tbody td.actions-col::before {
    display: none;
  }
  .subm-table.stack-on-mobile tbody td:empty {
    display: none;
  }
}
/* Filas navegables por teclado (audit 2026-05-30 H-3): `tabindex="0"
 * role="link"` + keydown.enter/space. Cursor y foco visibles. */
tr.row-link {
  cursor: pointer;
}

tr.row-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: -2px;
  border-radius: 0;
}

tr.row-link:focus-visible td {
  background: var(--bg-elevated);
}

/* =============================================================================
 * Altura de fila. Hubo un selector de densidad (compacta / confortable /
 * espaciada) que se quitó: queda una sola, que cae en la grilla de 8 y fija una
 * ALTURA de fila, que es lo que empareja las filas entre sí. Los tokens conservan
 * el nombre `--density-*` porque la tabla y el skeleton comparten el mismo valor.
 * ============================================================================= */
:root {
  --density-row-pad-y: 12px;
  --density-row-height: 56px;
}

.subm-table tbody td {
  padding-top: var(--density-row-pad-y, 10px);
  padding-bottom: var(--density-row-pad-y, 10px);
}

.subm-table thead th {
  padding-top: calc(var(--density-row-pad-y, 10px) - 2px);
  padding-bottom: calc(var(--density-row-pad-y, 10px) - 2px);
}

/* Utility */
.flex-1 {
  flex: 1;
}

.spacer {
  flex: 1 1 auto;
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

/* Money columns — audit 2026-05-30 COS-5.
 * tabular-nums alinea los dígitos en columnas para que los miles no bailen. */
.money-col,
.subm-table td.money-col,
.subm-table th.money-col {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* =============================================================================
 * Botones (web: `.boton`).
 *
 *   primary    fondo bordó + texto crema; hover → fondo rosa + texto oscuro
 *   secondary  transparente + borde fuerte; hover → borde rosa + texto rosa
 *   ghost      sin borde (mat-button); hover → texto rosa
 *   disabled   opacity .6 y cursor not-allowed
 *
 * 14px/600, radio 8, padding 0 24px. Alto 40px (desvío #2). Material mezcla una
 * capa de estado sobre el relleno en hover; se anula (`state-layer-opacity: 0`)
 * porque el hover de la web es un CAMBIO DE COLOR, no una capa translúcida.
 * ============================================================================= */
.mat-mdc-button,
.mat-mdc-unelevated-button,
.mat-mdc-raised-button,
.mat-mdc-outlined-button {
  --mdc-text-button-container-shape: var(--radius-control);
  --mdc-filled-button-container-shape: var(--radius-control);
  --mdc-protected-button-container-shape: var(--radius-control);
  --mdc-outlined-button-container-shape: var(--radius-control);
  --mdc-text-button-container-height: 40px;
  --mdc-filled-button-container-height: 40px;
  --mdc-protected-button-container-height: 40px;
  --mdc-outlined-button-container-height: 40px;
  --mdc-text-button-label-text-weight: 600;
  --mdc-filled-button-label-text-weight: 600;
  --mdc-protected-button-label-text-weight: 600;
  --mdc-outlined-button-label-text-weight: 600;
  --mdc-text-button-label-text-size: var(--fs-md);
  --mdc-filled-button-label-text-size: var(--fs-md);
  --mdc-protected-button-label-text-size: var(--fs-md);
  --mdc-outlined-button-label-text-size: var(--fs-md);
  --mat-text-button-hover-state-layer-opacity: 0;
  --mat-filled-button-hover-state-layer-opacity: 0;
  --mat-protected-button-hover-state-layer-opacity: 0;
  --mat-outlined-button-hover-state-layer-opacity: 0;
  letter-spacing: 0;
  font-weight: 600;
  transition: background-color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

/* Primario sólido (mat-flat-button / mat-raised-button, color="primary"). */
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.mat-primary {
  --mdc-filled-button-container-color: var(--accent-solid-bg);
  --mdc-filled-button-label-text-color: var(--accent-solid-text);
  --mdc-protected-button-container-color: var(--accent-solid-bg);
  --mdc-protected-button-label-text-color: var(--accent-solid-text);
  --mdc-protected-button-container-elevation-shadow: none;
  --mdc-protected-button-hover-container-elevation-shadow: none;
  --mdc-protected-button-focus-container-elevation-shadow: none;
  --mdc-protected-button-pressed-container-elevation-shadow: none;
  box-shadow: none;
}

.mat-mdc-unelevated-button.mat-primary:hover:not([disabled]),
.mat-mdc-raised-button.mat-primary:hover:not([disabled]) {
  --mdc-filled-button-container-color: var(--accent-solid-bg-hover);
  --mdc-filled-button-label-text-color: var(--accent-solid-text-hover);
  --mdc-protected-button-container-color: var(--accent-solid-bg-hover);
  --mdc-protected-button-label-text-color: var(--accent-solid-text-hover);
  background-color: var(--accent-solid-bg-hover);
}

.mat-mdc-unelevated-button.mat-primary:active:not([disabled]),
.mat-mdc-raised-button.mat-primary:active:not([disabled]) {
  --mdc-filled-button-container-color: var(--accent-primary-active);
  --mdc-protected-button-container-color: var(--accent-primary-active);
  background-color: var(--accent-primary-active);
}

.mat-mdc-unelevated-button[disabled],
.mat-mdc-raised-button[disabled] {
  --mdc-filled-button-disabled-container-color: var(--accent-solid-bg);
  --mdc-filled-button-disabled-label-text-color: var(--accent-solid-text);
  --mdc-protected-button-disabled-container-color: var(--accent-solid-bg);
  --mdc-protected-button-disabled-label-text-color: var(--accent-solid-text);
  opacity: 0.6;
  cursor: not-allowed;
}

/* Destructivo (color="warn"): la web no tiene botón destructivo, así que se
 * compone con sus propios tokens — mismo gesto que el primario (relleno de
 * estado + texto oscuro, 5.5:1) con el danger en lugar del bordó. */
.mat-mdc-unelevated-button.mat-warn,
.mat-mdc-raised-button.mat-warn {
  --mdc-filled-button-container-color: var(--color-danger);
  --mdc-filled-button-label-text-color: var(--bg-base);
  --mdc-protected-button-container-color: var(--color-danger);
  --mdc-protected-button-label-text-color: var(--bg-base);
  box-shadow: none;
}

.mat-mdc-unelevated-button.mat-warn:hover:not([disabled]),
.mat-mdc-raised-button.mat-warn:hover:not([disabled]) {
  --mdc-filled-button-container-color: var(--text-error);
  --mdc-protected-button-container-color: var(--text-error);
  background-color: var(--text-error);
}

/* Secundario (mat-stroked-button): transparente + borde fuerte. La web tiene dos
 * variantes de botón con relleno/contorno, no tres: un contorno `color="primary"`
 * y uno sin color son el MISMO botón secundario (el tema de Material pintaba el
 * primero con texto y borde en el color primario, y quedaba un tercer estilo). */
.mat-mdc-outlined-button,
.mat-mdc-outlined-button.mat-primary {
  --mdc-outlined-button-outline-color: var(--border-strong);
  --mdc-outlined-button-label-text-color: var(--text-primary);
  --mdc-outlined-button-disabled-outline-color: var(--border-strong);
  --mdc-outlined-button-disabled-label-text-color: var(--text-primary);
  --mat-outlined-button-state-layer-color: transparent;
  --mat-outlined-button-ripple-color: var(--accent-muted);
  --mdc-outlined-button-outline-width: 1px;
}

.mat-mdc-outlined-button:hover:not([disabled]),
.mat-mdc-outlined-button.mat-primary:hover:not([disabled]) {
  --mdc-outlined-button-outline-color: var(--accent-primary);
  --mdc-outlined-button-label-text-color: var(--accent-primary-hover);
}

.mat-mdc-outlined-button.mat-warn {
  --mdc-outlined-button-outline-color: var(--color-danger);
  --mdc-outlined-button-label-text-color: var(--text-error);
}

.mat-mdc-outlined-button.mat-warn:hover:not([disabled]) {
  --mdc-outlined-button-outline-color: var(--text-error);
  --mdc-outlined-button-label-text-color: var(--text-error);
  background: var(--danger-bg);
}

.mat-mdc-outlined-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ghost (mat-button): sin borde ni relleno; hover → texto rosa. */
.mat-mdc-button {
  --mdc-text-button-label-text-color: var(--text-primary);
  --mdc-text-button-disabled-label-text-color: var(--text-primary);
  --mat-text-button-state-layer-color: transparent;
  --mat-text-button-ripple-color: var(--accent-muted);
}

.mat-mdc-button:hover:not([disabled]) {
  --mdc-text-button-label-text-color: var(--accent-primary-hover);
}

.mat-mdc-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Ghost con color="primary": rosa de hover (6.9:1 sobre la base) ya en reposo,
 * para que una acción textual se lea como acción y no como etiqueta. */
.mat-mdc-button.mat-primary {
  --mdc-text-button-label-text-color: var(--accent-primary-hover);
}

.mat-mdc-button.mat-primary:hover:not([disabled]) {
  --mdc-text-button-label-text-color: var(--text-primary);
}

.mat-mdc-button.mat-warn {
  --mdc-text-button-label-text-color: var(--text-error);
}

/* El ícono de un botón de texto hereda `currentColor` en Material sólo a veces;
 * forzarlo evita un ícono de otro color al lado de su label. */
.mat-mdc-button .mat-icon,
.mat-mdc-outlined-button .mat-icon {
  color: currentColor;
}

/* Botón de ícono: target táctil de 40px sin el relleno extra de Material. */
.mat-mdc-icon-button.mat-mdc-button-base {
  --mdc-icon-button-state-layer-size: 40px;
  --mdc-icon-button-icon-color: var(--text-secondary);
  --mat-icon-button-state-layer-color: transparent;
  --mat-icon-button-ripple-color: var(--accent-muted);
  --mat-icon-button-hover-state-layer-opacity: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  transition: color var(--motion-fast) var(--ease-out);
}

.mat-mdc-icon-button.mat-mdc-button-base:hover:not([disabled]) {
  --mdc-icon-button-icon-color: var(--accent-primary-hover);
}

.mat-mdc-icon-button.mat-warn:not([disabled]) {
  --mdc-icon-button-icon-color: var(--text-error);
}

/* Teléfono: los targets táctiles vuelven a 44px (`--tap-min` de la web). */
@media (max-width: 599px) {
  .mat-mdc-button,
  .mat-mdc-unelevated-button,
  .mat-mdc-raised-button,
  .mat-mdc-outlined-button {
    --mdc-text-button-container-height: 44px;
    --mdc-filled-button-container-height: 44px;
    --mdc-protected-button-container-height: 44px;
    --mdc-outlined-button-container-height: 44px;
  }
  .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 44px;
    width: 44px;
    height: 44px;
  }
}
/* =============================================================================
 * Campos de formulario. Contorno de 1px en borde fuerte → hover en text-secondary
 * → foco en rosa. Transparentes: heredan la superficie de la card o del dialog.
 * ============================================================================= */
.mat-mdc-form-field {
  --mdc-outlined-text-field-container-shape: var(--radius-control);
  --mdc-outlined-text-field-outline-color: var(--border-strong);
  --mdc-outlined-text-field-hover-outline-color: var(--text-secondary);
  --mdc-outlined-text-field-focus-outline-color: var(--accent-primary);
  --mdc-outlined-text-field-disabled-outline-color: var(--border-subtle);
  --mdc-outlined-text-field-outline-width: 1px;
  --mdc-outlined-text-field-focus-outline-width: 2px;
  --mdc-outlined-text-field-input-text-color: var(--text-primary);
  --mdc-outlined-text-field-input-text-placeholder-color: var(--text-muted);
  --mdc-outlined-text-field-caret-color: var(--accent-primary);
  --mdc-outlined-text-field-label-text-color: var(--text-secondary);
  --mdc-outlined-text-field-hover-label-text-color: var(--text-primary);
  --mdc-outlined-text-field-focus-label-text-color: var(--accent-primary-hover);
  --mdc-outlined-text-field-disabled-label-text-color: var(--text-disabled);
  --mdc-outlined-text-field-error-label-text-color: var(--text-error);
  --mdc-outlined-text-field-error-focus-label-text-color: var(--text-error);
  --mdc-outlined-text-field-error-hover-label-text-color: var(--text-error);
  --mdc-outlined-text-field-error-outline-color: var(--color-danger);
  --mdc-outlined-text-field-error-hover-outline-color: var(--text-error);
  --mdc-outlined-text-field-error-focus-outline-color: var(--color-danger);
  --mdc-outlined-text-field-caret-color-error: var(--color-danger);
  --mat-form-field-error-text-color: var(--text-error);
  --mat-form-field-subscript-text-color: var(--text-muted);
  --mat-select-enabled-trigger-text-color: var(--text-primary);
  --mat-select-placeholder-text-color: var(--text-muted);
  --mat-select-enabled-arrow-color: var(--text-secondary);
  --mat-select-focused-arrow-color: var(--accent-primary-hover);
}

/* =============================================================================
 * Normalización de Angular Material.
 *
 * Material trae sus propios radios, alturas y escala tipográfica. Sin estos
 * overrides conviven dos sistemas. Los tokens `--mdc-*` son la API pública de
 * theming de Material 17: tocarlos es la forma soportada de hacer esto.
 * ============================================================================= */
/* — Radios: los de la web, nada más — */
.mat-mdc-menu-panel,
.mat-mdc-select-panel,
.mat-mdc-autocomplete-panel {
  border-radius: var(--radius-control) !important;
}

.mat-mdc-dialog-surface,
.mat-mdc-dialog-container .mdc-dialog__surface {
  border-radius: var(--radius-card) !important;
}

.mat-mdc-card {
  --mdc-elevated-card-container-shape: var(--radius-card);
  --mdc-outlined-card-container-shape: var(--radius-card);
}

.mat-mdc-tooltip {
  --mdc-plain-tooltip-container-shape: var(--radius-control);
}

/* — Tipografía: cortar la herencia en `em` que produce tamaños fraccionarios — */
.mat-mdc-form-field,
.mat-mdc-select,
.mat-mdc-option,
.mat-mdc-menu-item,
.mat-mdc-list-item,
.mat-mdc-tab,
.mat-mdc-table {
  font-size: var(--fs-md);
  letter-spacing: 0;
}

.mat-mdc-form-field .mdc-floating-label,
.mat-mdc-form-field .mat-mdc-form-field-hint,
.mat-mdc-form-field .mat-mdc-form-field-error {
  font-size: var(--fs-sm);
  letter-spacing: 0;
}

/* — Hints de una sola línea: red de seguridad contra el texto superpuesto —
 *
 * Material reserva una caja FIJA de 18px debajo del campo para el subscript y la
 * deja con `overflow: visible`. Un hint de más de ~40 caracteres envuelve a 2 o 3
 * líneas, se sale de esa caja y PINTA ENCIMA del campo de abajo. Se lo fuerza a
 * una línea con ellipsis: peor caso, un hint se ve cortado — que además es la
 * señal de que hay que resolverlo con una de las dos salidas de abajo.
 *
 * Las TRES herramientas, por orden de preferencia:
 *   1. Hint corto (menos de ~40 caracteres). Se lee sin interacción.
 *   2. `subscriptSizing="dynamic"` en el campo, cuando el texto DEBE verse sin
 *      interacción —una advertencia sobre una acción destructiva, por ejemplo—.
 *   3. `<subm-field-help matSuffix text="…">`, el ⓘ con tooltip, cuando la ayuda
 *      es secundaria y el layout es apretado (grillas de dos columnas).
 *
 * Los ERRORES quedan afuera de esta regla a propósito: un mensaje de validación
 * truncado es peor que uno que empuje el layout. */
.mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper:not(.mat-mdc-form-field-subscript-dynamic-size) .mat-mdc-form-field-hint {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Con sizing dinámico el texto envuelve y la caja crece: no hay desborde. */
.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-subscript-dynamic-size .mat-mdc-form-field-hint {
  white-space: normal;
  line-height: var(--lh-body);
}

.mat-mdc-dialog-container .mat-mdc-dialog-title {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  padding-bottom: var(--space-3);
}

.mat-mdc-dialog-container .mat-mdc-dialog-actions {
  padding: var(--space-content) var(--space-card);
  gap: var(--space-inline);
}

/* — Aire arriba del contenido del diálogo: corrige el label flotante recortado —
 *
 * Material anula el padding superior del contenido cuando sigue a un título.
 * Funciona si lo primero es texto, pero NO si es un campo `appearance="outline"`:
 * su label flotante se dibuja montado sobre el borde, ~6px POR ENCIMA del campo, y
 * con el contenido en `overflow-y: auto` esos 6px se recortan (medido en el
 * diálogo de planes: media palabra cortada). Afecta al PRIMER campo de todos los
 * diálogos, así que va acá y no en cada uno.
 *
 * La clase final va REPETIDA a propósito: Material inyecta los estilos del
 * diálogo en runtime, DESPUÉS de esta hoja, y con la misma especificidad ganaba
 * por orden de aparición. Duplicar la clase sube la especificidad lo justo para
 * ganar, sin escalar a `!important`. */
.mat-mdc-dialog-container .mat-mdc-dialog-title + .mat-mdc-dialog-content.mat-mdc-dialog-content {
  padding-top: var(--space-2);
}

/* — Íconos: escala propia y FIJA —
 *
 * Material dimensiona los íconos dentro de un botón en `em`, heredando del
 * font-size del botón: glifos de 15.75px al lado de otros de 18px y 24px en la
 * misma barra de acciones. Los íconos tienen su propia escala. Una sola familia
 * (Material Icons, trazo relleno) en toda la app: no se mezcla con otra. */
.mat-icon {
  --mat-icon-size: 20px;
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

/* Dentro de un botón con texto, el ícono baja un escalón para no competir. */
.mat-mdc-button .mat-icon,
.mat-mdc-unelevated-button .mat-icon,
.mat-mdc-outlined-button .mat-icon,
.mat-mdc-raised-button .mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
}

/* El badge de 9px de Material es ilegible; 10px con peso lo hace leíble sin
 * agrandar el círculo. */
.mat-badge-content {
  font-size: 10px;
  font-weight: 600;
}

/* — Tooltips legibles: el default de Material queda muy chico en pantallas
 *   densas. Superficie overlay + borde fuerte, sin sombra — */
.mat-mdc-tooltip .mdc-tooltip__surface {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  max-width: 320px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

/* — Tabs: 14px/600 como los links de navegación de la web; el indicador y la
 *   pestaña activa quedan en rosa (el único color de selección) — */
.mat-mdc-tab-header,
.mat-mdc-tab-nav-bar {
  --mat-tab-header-label-text-size: var(--fs-md);
  --mat-tab-header-label-text-weight: 600;
  --mat-tab-header-label-text-tracking: 0;
  --mat-tab-header-divider-color: var(--border-subtle);
  --mat-tab-header-divider-height: 1px;
  --mat-tab-header-inactive-label-text-color: var(--text-secondary);
  --mat-tab-header-inactive-hover-label-text-color: var(--text-primary);
  --mat-tab-header-inactive-focus-label-text-color: var(--text-primary);
}

.mat-mdc-tab .mdc-tab__text-label,
.mat-mdc-tab-link .mdc-tab__text-label {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0;
}

/* — Selección y paginador: el rosa es el único color de selección — */
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
  color: var(--accent-primary-hover);
}

.mat-mdc-paginator {
  --mat-paginator-container-background-color: transparent;
  --mat-paginator-container-text-color: var(--text-secondary);
  --mat-paginator-container-text-size: var(--fs-sm);
}

.mat-mdc-progress-bar {
  --mdc-linear-progress-track-height: 3px;
  --mdc-linear-progress-active-indicator-height: 3px;
}