/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme/variables.scss?ngGlobalStyle ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/** Ionic CSS Variables **/
:root {
  /** success **/
  --ion-color-success: #10dc60;
  --ion-color-success-rgb: 16, 220, 96;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #0ec254;
  --ion-color-success-tint: #28e070;
  /** warning **/
  --ion-color-warning: #ffce00;
  --ion-color-warning-rgb: 255, 206, 0;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #e0b500;
  --ion-color-warning-tint: #ffd31a;
  /** danger **/
  --ion-color-danger: #f04141;
  --ion-color-danger-rgb: 245, 61, 61;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #d33939;
  --ion-color-danger-tint: #f25454;
  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 34, 34;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #000000;
  --ion-color-dark-tint: #000000;
  /** medium **/
  --ion-color-medium: #737373;
  --ion-color-medium-rgb: 115, 115, 115;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #656565;
  --ion-color-medium-tint: #818181;
  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 244, 244;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #dfdfdf;
  --ion-color-light-tint: #dfdfdf;
  /** Blanco RepartEat (Principal) **/
  --ion-color-colorPrincipal: rgb(255, 255, 255);
  --ion-color-colorPrincipal-rgb: 255, 255, 255;
  --ion-color-colorPrincipal-contrast: rgb(36, 36, 36);
  --ion-color-colorPrincipal-contrast-rgb: 36, 36, 36;
  --ion-color-colorPrincipal-shade: rgb(246, 246, 246);
  --ion-color-colorPrincipal-tint: rgb(237, 237, 237);
  /** Verde RepartEat (Secundario) **/
  --ion-color-colorSecundario: rgb(0, 153, 117);
  --ion-color-colorSecundario-rgb: 0, 153, 117;
  --ion-color-colorSecundario-contrast: #ffffff;
  --ion-color-colorSecundario-contrast-rgb: 0, 0, 0;
  --ion-color-colorSecundario-shade: rgb(0, 111, 85);
  --ion-color-colorSecundario-tint: rgb(0, 240, 184);
  /** Amarillo RepartEat (Terciario) **/
  --ion-color-colorTerciario: rgb(232, 180, 0);
  --ion-color-colorTerciario-rgb: 232, 180, 0;
  --ion-color-colorTerciario-contrast: #000000;
  --ion-color-colorTerciario-contrast-rgb: 0, 0, 0;
  --ion-color-colorTerciario-shade: rgb(176, 138, 0);
  --ion-color-colorTerciario-tint: rgb(255, 208, 40);
  /** Rojo Corporativo (Ajustado) **/
  --ion-color-colorRojo: #db0404;
  --ion-color-colorRojo-rgb: 219, 4, 4;
  --ion-color-colorRojo-contrast: #ffffff;
  --ion-color-colorRojo-contrast-rgb: 255, 255, 255;
  --ion-color-colorRojo-shade: #c10404;
  --ion-color-colorRojo-tint: #df1d1d;
}

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

.ion-color-colorPrincipalContrast {
  --ion-color-base: var(--ion-color-colorPrincipal-contrast) !important;
  --ion-color-base-rgb: var(--ion-color-colorPrincipal-rgb) !important;
  --ion-color-contrast: var(--ion-color-colorPrincipal-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-colorPrincipal-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-colorPrincipal-shade) !important;
  --ion-color-tint: var(--ion-color-colorPrincipal-tint) !important;
}

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

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

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

:root {
  /* Set the background of the entire app */
  /* Set the font family of the entire app */
  -–ion-font-family: "Raleway", sans-serif !important;
}
/*!**********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/core.css ***!
  \**********************************************************************************************************************************************************************************************************************************/
html.ios {
  --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}

html.md {
  --ion-default-font: "Roboto", "Helvetica Neue", sans-serif;
}

html {
  --ion-font-family: var(--ion-default-font);
}

body {
  background: var(--ion-background-color);
}

body.backdrop-no-scroll {
  overflow: hidden;
}

/**
 * Card style modal needs additional padding on the
 * top of the header. We accomplish this by targeting
 * the first toolbar in the header.
 * Footer also needs this. We do not adjust the bottom
 * padding though because of the safe area.
 */
html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
html.ios ion-modal ion-footer ion-toolbar:first-of-type {
  padding-top: 6px;
}

/**
* Card style modal needs additional padding on the
* bottom of the header. We accomplish this by targeting
* the last toolbar in the header.
*/
html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
  padding-bottom: 6px;
}

/**
* Add padding on the left and right
* of toolbars while accounting for
* safe area values when in landscape.
*/
html.ios ion-modal ion-toolbar {
  padding-right: calc(var(--ion-safe-area-right) + 8px);
  padding-left: calc(var(--ion-safe-area-left) + 8px);
}

/**
 * Card style modal on iPadOS
 * should only have backdrop on first instance.
 */
@media screen and (min-width: 768px) {
  html.ios ion-modal.modal-card:first-of-type {
    --backdrop-opacity: 0.18;
  }
}
/**
 * Subsequent modals should not have a backdrop/box shadow
 * as it will cause the screen to appear to get progressively
 * darker. With Ionic 6, declarative modals made it
 * possible to have multiple non-presented modals in the DOM,
 * so we could no longer rely on ion-modal:first-of-type.
 * Here we disable the opacity/box-shadow for every modal
 * that comes after the first presented modal.
 *
 * Note: ion-modal:not(.overlay-hidden):first-of-type
 * does not match the first modal to not have
 * the .overlay-hidden class, it will match the
 * first modal in general only if it does not
 * have the .overlay-hidden class.
 * The :nth-child() pseudo-class has support
 * for selectors which would help us here. At the
 * time of writing it does not have great cross browser
 * support.
 *
 * Note 2: This should only apply to non-card and
 * non-sheet modals. Card and sheet modals have their
 * own criteria for displaying backdrops/box shadows.
 *
 * Do not use :not(.overlay-hidden) in place of
 * .show-modal because that triggers a memory
 * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768
 */
ion-modal.modal-default.show-modal ~ ion-modal.modal-default {
  --backdrop-opacity: 0;
  --box-shadow: none;
}

/**
 * This works around a bug in WebKit where the
 * content will overflow outside of the bottom border
 * radius when re-painting. As long as a single
 * border radius value is set on .ion-page, this
 * issue does not happen. We set the top left radius
 * here because the top left corner will always have a
 * radius no matter the platform.
 * This behavior only applies to card modals.
 */
html.ios ion-modal.modal-card .ion-page {
  border-top-left-radius: var(--border-radius);
}

.ion-color-primary {
  --ion-color-base: var(--ion-color-primary, #3880ff) !important;
  --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important;
  --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important;
  --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important;
}

.ion-color-secondary {
  --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
  --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important;
  --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important;
  --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important;
}

.ion-color-tertiary {
  --ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
  --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important;
  --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important;
  --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important;
}

.ion-color-success {
  --ion-color-base: var(--ion-color-success, #2dd36f) !important;
  --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important;
  --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important;
  --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important;
}

.ion-color-warning {
  --ion-color-base: var(--ion-color-warning, #ffc409) !important;
  --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important;
  --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important;
  --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important;
}

.ion-color-danger {
  --ion-color-base: var(--ion-color-danger, #eb445a) !important;
  --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important;
  --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important;
  --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important;
}

.ion-color-light {
  --ion-color-base: var(--ion-color-light, #f4f5f8) !important;
  --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important;
  --ion-color-contrast: var(--ion-color-light-contrast, #000) !important;
  --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important;
  --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important;
  --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important;
}

.ion-color-medium {
  --ion-color-base: var(--ion-color-medium, #92949c) !important;
  --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important;
  --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-medium-shade, #808289) !important;
  --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important;
}

.ion-color-dark {
  --ion-color-base: var(--ion-color-dark, #222428) !important;
  --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important;
  --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important;
  --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important;
  --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important;
}

.ion-page {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: space-between;
  contain: layout size style;
  overflow: hidden;
  z-index: 0;
}

/**
 * When making custom dialogs, using
 * ion-content is not required. As a result,
 * some developers may wish to have dialogs
 * that are automatically sized by the browser.
 * These changes allow certain dimension values
 * such as fit-content to work correctly.
 */
ion-modal > .ion-page {
  position: relative;
  contain: layout style;
  height: 100%;
}

.split-pane-visible > .ion-page.split-pane-main {
  position: relative;
}

ion-route,
ion-route-redirect,
ion-router,
ion-select-option,
ion-nav-controller,
ion-menu-controller,
ion-action-sheet-controller,
ion-alert-controller,
ion-loading-controller,
ion-modal-controller,
ion-picker-controller,
ion-popover-controller,
ion-toast-controller,
.ion-page-hidden,
[hidden] {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.ion-page-invisible {
  opacity: 0;
}

.can-go-back > ion-header ion-back-button {
  display: block;
}

html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
  --ion-statusbar-padding: 20px;
}

@supports (padding-top: 20px) {
  html {
    --ion-safe-area-top: var(--ion-statusbar-padding);
  }
}
@supports (padding-top: constant(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: constant(safe-area-inset-top);
    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
    --ion-safe-area-left: constant(safe-area-inset-left);
    --ion-safe-area-right: constant(safe-area-inset-right);
  }
}
@supports (padding-top: env(safe-area-inset-top)) {
  html {
    --ion-safe-area-top: env(safe-area-inset-top);
    --ion-safe-area-bottom: env(safe-area-inset-bottom);
    --ion-safe-area-left: env(safe-area-inset-left);
    --ion-safe-area-right: env(safe-area-inset-right);
  }
}
ion-card.ion-color .ion-inherit-color,
ion-card-header.ion-color .ion-inherit-color {
  color: inherit;
}

.menu-content {
  transform: translate3d(0,  0,  0);
}

.menu-content-open {
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: none;
}

.ios .menu-content-reveal {
  box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08);
}

[dir=rtl].ios .menu-content-reveal {
  box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08);
}

.md .menu-content-reveal {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

.md .menu-content-push {
  box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18);
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] {
  --border-width: 0px;
}

ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon {
  transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1);
}

@media (prefers-reduced-motion: reduce) {
  ion-accordion .ion-accordion-toggle-icon {
    /* stylelint-disable declaration-no-important */
    transition: none !important;
  }
}
/**
 * The > [slot="header"] selector ensures that we do
 * not modify toggle icons for any nested accordions. The state
 * of one accordion should not affect any accordions inside
 * of a nested accordion group.
 */
ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon,
ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon {
  transform: rotate(180deg);
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] {
  --border-width: 0px;
  --inner-border-width: 0px;
}

ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type,
ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type {
  margin-top: 0;
}

ion-input input::-webkit-date-and-time-value {
  text-align: start;
}

/**
 * The .ion-datetime-button-overlay class contains
 * styles that allow any modal/popover to be
 * sized according to the dimensions of the datetime
 * when used with ion-datetime-button.
 */
.ion-datetime-button-overlay {
  --width: fit-content;
  --height: fit-content;
}

/**
 * The grid variant can scale down when inline.
 * When used in a `fit-content` overlay, this causes
 * the overlay to shrink when the month/year picker is open.
 * Explicitly setting the dimensions lets us have a consistently
 * sized grid interface.
 */
.ion-datetime-button-overlay ion-datetime.datetime-grid {
  width: 320px;
  min-height: 320px;
}

/*# sourceMappingURL=core.css.map */

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/normalize.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
audio,
canvas,
progress,
video {
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

b,
strong {
  font-weight: bold;
}

img {
  max-width: 100%;
}

hr {
  height: 1px;
  border-width: 0;
  box-sizing: content-box;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

label,
input,
select,
textarea {
  font-family: inherit;
  line-height: normal;
}

textarea {
  overflow: auto;
  height: auto;
  font: inherit;
  color: inherit;
}

textarea::placeholder {
  padding-left: 2px;
}

form,
input,
optgroup,
select {
  margin: 0;
  font: inherit;
  color: inherit;
}

html input[type=button],
input[type=reset],
input[type=submit] {
  cursor: pointer;
  -webkit-appearance: button;
}

a,
a div,
a span,
a ion-icon,
a ion-label,
button,
button div,
button span,
button ion-icon,
button ion-label,
.ion-tappable,
[tappable],
[tappable] div,
[tappable] span,
[tappable] ion-icon,
[tappable] ion-label,
input,
textarea {
  touch-action: manipulation;
}

a ion-label,
button ion-label {
  pointer-events: none;
}

button {
  padding: 0;
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-style: inherit;
  font-variant: inherit;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  -webkit-appearance: button;
}

[tappable] {
  cursor: pointer;
}

a[disabled],
button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*# sourceMappingURL=normalize.css.map */

/*!***************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/structure.css ***!
  \***************************************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

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

html:not(.hydrated) body {
  display: none;
}

html.ion-ce body {
  display: block;
}

html.plt-pwa {
  height: 100vh;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: fixed;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  /**
   * Because body has position: fixed,
   * it should be promoted to its own
   * layer.
   *
   * WebKit does not always promote
   * the body to its own layer on page
   * load in Ionic apps. Once scrolling on
   * ion-content starts, WebKit will promote
   * body. Unfortunately, this causes a re-paint
   * which results in scrolling being halted
   * until the next user gesture.
   *
   * This impacts the Custom Elements build.
   * The lazy loaded build causes the browser to
   * re-paint during hydration which causes WebKit
   * to promote body to its own layer.
   * In the CE Build, this hydration does not
   * happen, so the additional re-paint does not occur.
   */
  transform: translateZ(0);
  text-rendering: optimizeLegibility;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-drag: none;
  -ms-content-zooming: none;
  word-wrap: break-word;
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
}

/*# sourceMappingURL=structure.css.map */

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/typography.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
html {
  font-family: var(--ion-font-family);
}

a {
  background-color: transparent;
  color: var(--ion-color-primary, #3880ff);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 16px;
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.2;
}
h1 {
  margin-top: 20px;
  font-size: 26px;
}
h2 {
  margin-top: 18px;
  font-size: 24px;
}
h3 {
  font-size: 22px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

small {
  font-size: 75%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/*# sourceMappingURL=typography.css.map */

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/display.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
.ion-hide {
  display: none !important;
}

.ion-hide-up {
  display: none !important;
}

.ion-hide-down {
  display: none !important;
}

@media (min-width: 576px) {
  .ion-hide-sm-up {
    display: none !important;
  }
}
@media (max-width: 575.98px) {
  .ion-hide-sm-down {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .ion-hide-md-up {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .ion-hide-md-down {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .ion-hide-lg-up {
    display: none !important;
  }
}
@media (max-width: 991.98px) {
  .ion-hide-lg-down {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .ion-hide-xl-up {
    display: none !important;
  }
}
@media (max-width: 1199.98px) {
  .ion-hide-xl-down {
    display: none !important;
  }
}

/*# sourceMappingURL=display.css.map */

/*!*************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/padding.css ***!
  \*************************************************************************************************************************************************************************************************************************************/
.ion-no-padding {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 0;
  --padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.ion-padding {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding {
    padding-left: unset;
    padding-right: unset;
    padding-inline-start: var(--ion-padding, 16px);
    padding-inline-end: var(--ion-padding, 16px);
  }
}

.ion-padding-top {
  --padding-top: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
}
.ion-padding-start {
  --padding-start: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-start {
    padding-left: unset;
    padding-inline-start: var(--ion-padding, 16px);
  }
}

.ion-padding-end {
  --padding-end: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-end {
    padding-right: unset;
    padding-inline-end: var(--ion-padding, 16px);
  }
}

.ion-padding-bottom {
  --padding-bottom: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-vertical {
  --padding-top: var(--ion-padding, 16px);
  --padding-bottom: var(--ion-padding, 16px);
  padding-top: var(--ion-padding, 16px);
  padding-bottom: var(--ion-padding, 16px);
}
.ion-padding-horizontal {
  --padding-start: var(--ion-padding, 16px);
  --padding-end: var(--ion-padding, 16px);
  padding-left: var(--ion-padding, 16px);
  padding-right: var(--ion-padding, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-padding-horizontal {
    padding-left: unset;
    padding-right: unset;
    padding-inline-start: var(--ion-padding, 16px);
    padding-inline-end: var(--ion-padding, 16px);
  }
}

.ion-no-margin {
  --margin-start: 0;
  --margin-end: 0;
  --margin-top: 0;
  --margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.ion-margin {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin {
    margin-left: unset;
    margin-right: unset;
    margin-inline-start: var(--ion-margin, 16px);
    margin-inline-end: var(--ion-margin, 16px);
  }
}

.ion-margin-top {
  --margin-top: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
}
.ion-margin-start {
  --margin-start: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-start {
    margin-left: unset;
    margin-inline-start: var(--ion-margin, 16px);
  }
}

.ion-margin-end {
  --margin-end: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-end {
    margin-right: unset;
    margin-inline-end: var(--ion-margin, 16px);
  }
}

.ion-margin-bottom {
  --margin-bottom: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-vertical {
  --margin-top: var(--ion-margin, 16px);
  --margin-bottom: var(--ion-margin, 16px);
  margin-top: var(--ion-margin, 16px);
  margin-bottom: var(--ion-margin, 16px);
}
.ion-margin-horizontal {
  --margin-start: var(--ion-margin, 16px);
  --margin-end: var(--ion-margin, 16px);
  margin-left: var(--ion-margin, 16px);
  margin-right: var(--ion-margin, 16px);
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  .ion-margin-horizontal {
    margin-left: unset;
    margin-right: unset;
    margin-inline-start: var(--ion-margin, 16px);
    margin-inline-end: var(--ion-margin, 16px);
  }
}

/*# sourceMappingURL=padding.css.map */

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/float-elements.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
.ion-float-left {
  float: left !important;
}

.ion-float-right {
  float: right !important;
}

.ion-float-start {
  float: left !important;
}
[dir=rtl] .ion-float-start, :host-context([dir=rtl]) .ion-float-start {
  float: right !important;
}

.ion-float-end {
  float: right !important;
}
[dir=rtl] .ion-float-end, :host-context([dir=rtl]) .ion-float-end {
  float: left !important;
}

@media (min-width: 576px) {
  .ion-float-sm-left {
    float: left !important;
  }

  .ion-float-sm-right {
    float: right !important;
  }

  .ion-float-sm-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-sm-start, :host-context([dir=rtl]) .ion-float-sm-start {
    float: right !important;
  }

  .ion-float-sm-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-sm-end, :host-context([dir=rtl]) .ion-float-sm-end {
    float: left !important;
  }
}
@media (min-width: 768px) {
  .ion-float-md-left {
    float: left !important;
  }

  .ion-float-md-right {
    float: right !important;
  }

  .ion-float-md-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-md-start, :host-context([dir=rtl]) .ion-float-md-start {
    float: right !important;
  }

  .ion-float-md-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-md-end, :host-context([dir=rtl]) .ion-float-md-end {
    float: left !important;
  }
}
@media (min-width: 992px) {
  .ion-float-lg-left {
    float: left !important;
  }

  .ion-float-lg-right {
    float: right !important;
  }

  .ion-float-lg-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-lg-start, :host-context([dir=rtl]) .ion-float-lg-start {
    float: right !important;
  }

  .ion-float-lg-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-lg-end, :host-context([dir=rtl]) .ion-float-lg-end {
    float: left !important;
  }
}
@media (min-width: 1200px) {
  .ion-float-xl-left {
    float: left !important;
  }

  .ion-float-xl-right {
    float: right !important;
  }

  .ion-float-xl-start {
    float: left !important;
  }
  [dir=rtl] .ion-float-xl-start, :host-context([dir=rtl]) .ion-float-xl-start {
    float: right !important;
  }

  .ion-float-xl-end {
    float: right !important;
  }
  [dir=rtl] .ion-float-xl-end, :host-context([dir=rtl]) .ion-float-xl-end {
    float: left !important;
  }
}

/*# sourceMappingURL=float-elements.css.map */

/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/text-alignment.css ***!
  \********************************************************************************************************************************************************************************************************************************************/
.ion-text-center {
  text-align: center !important;
}

.ion-text-justify {
  text-align: justify !important;
}

.ion-text-start {
  text-align: start !important;
}

.ion-text-end {
  text-align: end !important;
}

.ion-text-left {
  text-align: left !important;
}

.ion-text-right {
  text-align: right !important;
}

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

.ion-text-wrap {
  white-space: normal !important;
}

@media (min-width: 576px) {
  .ion-text-sm-center {
    text-align: center !important;
  }

  .ion-text-sm-justify {
    text-align: justify !important;
  }

  .ion-text-sm-start {
    text-align: start !important;
  }

  .ion-text-sm-end {
    text-align: end !important;
  }

  .ion-text-sm-left {
    text-align: left !important;
  }

  .ion-text-sm-right {
    text-align: right !important;
  }

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

  .ion-text-sm-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-center {
    text-align: center !important;
  }

  .ion-text-md-justify {
    text-align: justify !important;
  }

  .ion-text-md-start {
    text-align: start !important;
  }

  .ion-text-md-end {
    text-align: end !important;
  }

  .ion-text-md-left {
    text-align: left !important;
  }

  .ion-text-md-right {
    text-align: right !important;
  }

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

  .ion-text-md-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-center {
    text-align: center !important;
  }

  .ion-text-lg-justify {
    text-align: justify !important;
  }

  .ion-text-lg-start {
    text-align: start !important;
  }

  .ion-text-lg-end {
    text-align: end !important;
  }

  .ion-text-lg-left {
    text-align: left !important;
  }

  .ion-text-lg-right {
    text-align: right !important;
  }

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

  .ion-text-lg-wrap {
    white-space: normal !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-center {
    text-align: center !important;
  }

  .ion-text-xl-justify {
    text-align: justify !important;
  }

  .ion-text-xl-start {
    text-align: start !important;
  }

  .ion-text-xl-end {
    text-align: end !important;
  }

  .ion-text-xl-left {
    text-align: left !important;
  }

  .ion-text-xl-right {
    text-align: right !important;
  }

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

  .ion-text-xl-wrap {
    white-space: normal !important;
  }
}

/*# sourceMappingURL=text-alignment.css.map */

/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/text-transformation.css ***!
  \*************************************************************************************************************************************************************************************************************************************************/
.ion-text-uppercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: uppercase !important;
}

.ion-text-lowercase {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: lowercase !important;
}

.ion-text-capitalize {
  /* stylelint-disable-next-line declaration-no-important */
  text-transform: capitalize !important;
}

@media (min-width: 576px) {
  .ion-text-sm-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-sm-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-sm-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 768px) {
  .ion-text-md-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-md-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-md-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 992px) {
  .ion-text-lg-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-lg-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-lg-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}
@media (min-width: 1200px) {
  .ion-text-xl-uppercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: uppercase !important;
  }

  .ion-text-xl-lowercase {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: lowercase !important;
  }

  .ion-text-xl-capitalize {
    /* stylelint-disable-next-line declaration-no-important */
    text-transform: capitalize !important;
  }
}

/*# sourceMappingURL=text-transformation.css.map */

/*!****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@ionic/angular/css/flex-utils.css ***!
  \****************************************************************************************************************************************************************************************************************************************/
.ion-align-self-start {
  align-self: flex-start !important;
}

.ion-align-self-end {
  align-self: flex-end !important;
}

.ion-align-self-center {
  align-self: center !important;
}

.ion-align-self-stretch {
  align-self: stretch !important;
}

.ion-align-self-baseline {
  align-self: baseline !important;
}

.ion-align-self-auto {
  align-self: auto !important;
}

.ion-wrap {
  flex-wrap: wrap !important;
}

.ion-nowrap {
  flex-wrap: nowrap !important;
}

.ion-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.ion-justify-content-start {
  justify-content: flex-start !important;
}

.ion-justify-content-center {
  justify-content: center !important;
}

.ion-justify-content-end {
  justify-content: flex-end !important;
}

.ion-justify-content-around {
  justify-content: space-around !important;
}

.ion-justify-content-between {
  justify-content: space-between !important;
}

.ion-justify-content-evenly {
  justify-content: space-evenly !important;
}

.ion-align-items-start {
  align-items: flex-start !important;
}

.ion-align-items-center {
  align-items: center !important;
}

.ion-align-items-end {
  align-items: flex-end !important;
}

.ion-align-items-stretch {
  align-items: stretch !important;
}

.ion-align-items-baseline {
  align-items: baseline !important;
}

/*# sourceMappingURL=flex-utils.css.map */

/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/swiper/swiper-bundle.min.css ***!
  \***********************************************************************************************************************************************************************************************************************************/
/**
 * Swiper 8.4.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 21, 2022
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;backface-visibility:hidden}.swiper-creative .swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;backface-visibility:hidden;overflow:hidden}
/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/swiper/swiper.min.css ***!
  \****************************************************************************************************************************************************************************************************************************/
/**
 * Swiper 8.4.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2022 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 21, 2022
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}
/*!***********************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/mapbox-gl/dist/mapbox-gl.css ***!
  \***********************************************************************************************************************************************************************************************************************************/
.mapboxgl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mapboxgl-canvas{position:absolute;left:0;top:0}.mapboxgl-map:-webkit-full-screen{width:100%;height:100%}.mapboxgl-canary{background-color:salmon}.mapboxgl-canvas-container.mapboxgl-interactive,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass{cursor:grab;-webkit-user-select:none;user-select:none}.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer{cursor:pointer}.mapboxgl-canvas-container.mapboxgl-interactive:active,.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active{cursor:grabbing}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas{touch-action:pan-x pan-y}.mapboxgl-canvas-container.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:pinch-zoom}.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas{touch-action:none}.mapboxgl-ctrl-bottom-left,.mapboxgl-ctrl-bottom-right,.mapboxgl-ctrl-top-left,.mapboxgl-ctrl-top-right{position:absolute;pointer-events:none;z-index:2}.mapboxgl-ctrl-top-left{top:0;left:0}.mapboxgl-ctrl-top-right{top:0;right:0}.mapboxgl-ctrl-bottom-left{bottom:0;left:0}.mapboxgl-ctrl-bottom-right{right:0;bottom:0}.mapboxgl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.mapboxgl-ctrl-top-left .mapboxgl-ctrl{margin:10px 0 0 10px;float:left}.mapboxgl-ctrl-top-right .mapboxgl-ctrl{margin:10px 10px 0 0;float:right}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl{margin:0 0 10px 10px;float:left}.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl{margin:0 10px 10px 0;float:right}.mapboxgl-ctrl-group{border-radius:4px;background:#fff}.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (-ms-high-contrast:active){.mapboxgl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.mapboxgl-ctrl-group button{width:29px;height:29px;display:block;padding:0;outline:none;border:0;box-sizing:border-box;background-color:transparent;cursor:pointer}.mapboxgl-ctrl-group button+button{border-top:1px solid #ddd}.mapboxgl-ctrl button .mapboxgl-ctrl-icon{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:50%}@media (-ms-high-contrast:active){.mapboxgl-ctrl-icon{background-color:transparent}.mapboxgl-ctrl-group button+button{border-top:1px solid ButtonText}}.mapboxgl-ctrl button::-moz-focus-inner{border:0;padding:0}.mapboxgl-ctrl-attrib-button:focus,.mapboxgl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl button:disabled{cursor:not-allowed}.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon{opacity:.25}.mapboxgl-ctrl button:not(:disabled):hover{background-color:rgba(0,0,0,.05)}.mapboxgl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.mapboxgl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.mapboxgl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.mapboxgl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.mapboxgl-ctrl-group button:focus:only-child{border-radius:inherit}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3h1zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16h1zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5H13zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1V7.5z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1h-5.5zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1v-5.5zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1v5.5zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1h5.5z'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23999'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")}}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23aaa'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon{animation:mapboxgl-spin 2s linear infinite}@media (-ms-high-contrast:active){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e58978'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333b5e5'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23e54e33'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath d='M14 5l1 1-9 9-1-1 9-9z' fill='red'/%3E%3C/svg%3E")}}@keyframes mapboxgl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.mapboxgl-ctrl-logo{width:88px;height:23px;margin:0 0 -4px -4px;display:block;background-repeat:no-repeat;cursor:pointer;overflow:hidden;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E%3Cdefs%3E%3Cpath id='a' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='b' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='c'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23b'/%3E%3C/mask%3E%3Cg opacity='.3' stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23c)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23b' mask='url(%23c)'/%3E%3C/g%3E%3Cg opacity='.9' fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E")}a.mapboxgl-ctrl-logo.mapboxgl-compact{width:23px}@media (-ms-high-contrast:active){a.mapboxgl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E%3Cdefs%3E%3Cpath id='a' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='b' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='c'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23b'/%3E%3C/mask%3E%3Cg stroke='%23000' stroke-width='3'%3E%3Ccircle mask='url(%23c)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23b' mask='url(%23c)'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23b'/%3E%3C/g%3E%3C/svg%3E")}}@media (-ms-high-contrast:black-on-white){a.mapboxgl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E%3Cdefs%3E%3Cpath id='a' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E%3Cpath id='b' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E%3C/defs%3E%3Cmask id='c'%3E%3Crect width='100%25' height='100%25' fill='%23fff'/%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23b'/%3E%3C/mask%3E%3Cg stroke='%23fff' stroke-width='3' fill='%23fff'%3E%3Ccircle mask='url(%23c)' cx='11.5' cy='11.5' r='9.25'/%3E%3Cuse xlink:href='%23b' mask='url(%23c)'/%3E%3C/g%3E%3Cuse xlink:href='%23a'/%3E%3Cuse xlink:href='%23b'/%3E%3C/svg%3E")}}.mapboxgl-ctrl.mapboxgl-ctrl-attrib{padding:0 5px;background-color:hsla(0,0%,100%,.5);margin:0}@media screen{.mapboxgl-ctrl-attrib.mapboxgl-compact{min-height:20px;padding:2px 24px 2px 0;margin:10px;position:relative;background-color:#fff;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show,.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact-show{padding:2px 8px 2px 28px;border-radius:12px}.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner{display:none}.mapboxgl-ctrl-attrib-button{display:none;cursor:pointer;position:absolute;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1012 0 6 6 0 10-12 0m5-3a1 1 0 102 0 1 1 0 10-2 0m0 3a1 1 0 112 0v3a1 1 0 11-2 0'/%3E%3C/svg%3E");background-color:hsla(0,0%,100%,.5);width:24px;height:24px;box-sizing:border-box;border-radius:12px;outline:none;top:0;right:0;border:0}.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button{left:0}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner,.mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button{display:block}.mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button{background-color:rgba(0,0,0,.05)}.mapboxgl-ctrl-bottom-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;right:0}.mapboxgl-ctrl-top-right>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;right:0}.mapboxgl-ctrl-top-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{top:0;left:0}.mapboxgl-ctrl-bottom-left>.mapboxgl-ctrl-attrib.mapboxgl-compact:after{bottom:0;left:0}}@media screen and (-ms-high-contrast:active){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' fill='%23fff'%3E%3Cpath d='M4 10a6 6 0 1012 0 6 6 0 10-12 0m5-3a1 1 0 102 0 1 1 0 10-2 0m0 3a1 1 0 112 0v3a1 1 0 11-2 0'/%3E%3C/svg%3E")}}@media screen and (-ms-high-contrast:black-on-white){.mapboxgl-ctrl-attrib.mapboxgl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd'%3E%3Cpath d='M4 10a6 6 0 1012 0 6 6 0 10-12 0m5-3a1 1 0 102 0 1 1 0 10-2 0m0 3a1 1 0 112 0v3a1 1 0 11-2 0'/%3E%3C/svg%3E")}}.mapboxgl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.mapboxgl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.mapboxgl-ctrl-attrib .mapbox-improve-map{font-weight:700;margin-left:2px}.mapboxgl-attrib-empty{display:none}.mapboxgl-ctrl-scale{background-color:hsla(0,0%,100%,.75);font-size:10px;border:2px solid #333;border-top:#333;padding:0 5px;color:#333;box-sizing:border-box}.mapboxgl-popup{position:absolute;top:0;left:0;display:flex;will-change:transform;pointer-events:none}.mapboxgl-popup-anchor-top,.mapboxgl-popup-anchor-top-left,.mapboxgl-popup-anchor-top-right{flex-direction:column}.mapboxgl-popup-anchor-bottom,.mapboxgl-popup-anchor-bottom-left,.mapboxgl-popup-anchor-bottom-right{flex-direction:column-reverse}.mapboxgl-popup-anchor-left{flex-direction:row}.mapboxgl-popup-anchor-right{flex-direction:row-reverse}.mapboxgl-popup-tip{width:0;height:0;border:10px solid transparent;z-index:1}.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{align-self:center;border-top:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{align-self:flex-start;border-top:none;border-left:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{align-self:flex-end;border-top:none;border-right:none;border-bottom-color:#fff}.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{align-self:center;border-right:none;border-left-color:#fff}.mapboxgl-popup-close-button{position:absolute;right:0;top:0;border:0;border-radius:0 3px 0 0;cursor:pointer;background-color:transparent}.mapboxgl-popup-close-button:hover{background-color:rgba(0,0,0,.05)}.mapboxgl-popup-content{position:relative;background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:10px 10px 15px;pointer-events:auto}.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content{border-top-left-radius:0}.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content{border-top-right-radius:0}.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content{border-bottom-left-radius:0}.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content{border-bottom-right-radius:0}.mapboxgl-popup-track-pointer{display:none}.mapboxgl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;user-select:none}.mapboxgl-map:hover .mapboxgl-popup-track-pointer{display:flex}.mapboxgl-map:active .mapboxgl-popup-track-pointer{display:none}.mapboxgl-marker{position:absolute;top:0;left:0;will-change:transform}.mapboxgl-user-location-dot,.mapboxgl-user-location-dot:before{background-color:#1da1f2;width:15px;height:15px;border-radius:50%}.mapboxgl-user-location-dot:before{content:"";position:absolute;animation:mapboxgl-user-location-dot-pulse 2s infinite}.mapboxgl-user-location-dot:after{border-radius:50%;border:2px solid #fff;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px;box-sizing:border-box;box-shadow:0 0 3px rgba(0,0,0,.35)}@keyframes mapboxgl-user-location-dot-pulse{0%{transform:scale(1);opacity:1}70%{transform:scale(3);opacity:0}to{transform:scale(1);opacity:0}}.mapboxgl-user-location-dot-stale{background-color:#aaa}.mapboxgl-user-location-dot-stale:after{display:none}.mapboxgl-user-location-accuracy-circle{background-color:rgba(29,161,242,.2);width:1px;height:1px;border-radius:100%}.mapboxgl-crosshair,.mapboxgl-crosshair .mapboxgl-interactive,.mapboxgl-crosshair .mapboxgl-interactive:active{cursor:crosshair}.mapboxgl-boxzoom{position:absolute;top:0;left:0;width:0;height:0;background:#fff;border:2px dotted #202020;opacity:.5}@media print{.mapbox-improve-map{display:none}}
/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */
/* Core CSS required for Ionic components to work properly */
/* Basic CSS for apps built with Ionic */
/* Optional CSS utils that can be commented out */
/* swiper */
.swiper {
  --bullet-background: var(--ion-color-step-200, #cccccc);
  --bullet-background-active: var(--ion-color-primary, #3880ff);
  --progress-bar-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
  --progress-bar-background-active: var(--ion-color-primary-shade, #3171e0);
  --scroll-bar-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
  --scroll-bar-background-active: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
  /**
   * @prop --bullet-background: Background of the pagination bullets
   * @prop --bullet-background-active: Background of the active pagination bullet
   *
   * @prop --progress-bar-background: Background of the pagination progress-bar
   * @prop --progress-bar-background-active: Background of the active pagination progress-bar
   *
   * @prop --scroll-bar-background: Background of the pagination scroll-bar
   * @prop --scroll-bar-background-active: Background of the active pagination scroll-bar
   */
  display: block;
  -webkit-user-select: none;
          user-select: none;
}

.swiper .swiper-pagination-bullet {
  background: var(--bullet-background);
}

.swiper .swiper-pagination-bullet-active {
  background: var(--bullet-background-active);
}

.swiper .swiper-pagination-progressbar {
  background: var(--progress-bar-background);
}

.swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--progress-bar-background-active);
}

.swiper .swiper-scrollbar {
  background: var(--scroll-bar-background);
}

.swiper .swiper-scrollbar-drag {
  background: var(--scroll-bar-background-active);
}

.swiper .slide-zoom {
  display: block;
  width: 100%;
  text-align: center;
}

.swiper .swiper-slide {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 18px;
  text-align: center;
  box-sizing: border-box;
}

.swiper .swiper-slide img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}


/* mapbpx-gl */
/*****************************************************/
/* LAS FOTOS RECORTAN, NO SE DEFORMAN NI DEJAN HUECO */
/*****************************************************/
/*  El valor por defecto de un <img> es object-fit: fill, que ESTIRA la foto hasta llenar su caja. Por
    eso las clases con ancho y alto fijos y sin object-fit ( class-imagen-completa, class-avatar-pequeño,
    class-imagen-completa-esquinas-redondeadas… ) venían deformando lo que pintaban. Con cover, la foto
    cubre la caja entera recortando lo que sobra, que es lo que se quiere en toda la app.

    NO AFECTA A LOS <ion-img>: son shadow DOM, así que esta regla no entra en ellos, y su <img> interno
    se queda con el object-fit: contain que Ionic pone en el host. Es justo lo que interesa, porque en
    esta app todos los ion-img son gifs de carga, el logo o el visor de imagen a pantalla completa. Si
    algún día hace falta que uno recorte, se le pone object-fit: cover al propio ion-img: el img de
    dentro lo hereda ( su CSS es object-fit: inherit ).

    Las clases que SÍ necesitan contain — class-re-producto-alergeno, class-re-menu-patrocinador y
    class-re-promo-foto-img — ya lo declaran y ganan por especificidad. Si aparece alguna más ( un logo
    sobre fondo transparente en una caja fija ), la corrección es darle contain a ESA clase, no quitar
    esta regla.

    DÓNDE NO BASTA ESTA REGLA: dentro de un <swiper>. ionic-swiper.css trae
        .swiper .swiper-slide img { width: auto; max-width: 100%; height: auto; max-height: 100% }
    con especificidad 0-2-1, así que la foto se queda en su proporción natural y el cover no tiene
    caja que recortar. Para que una galería llene su hueco hay que ganarle con un selector más
    específico; el ejemplo está en class-re-producto-foto, en el bloque de la ficha de producto.  */
img {
  object-fit: cover;
}

/*****************************************************/
/* IMAGEN NUEVA DE REPARTEAT — tipografías y tokens  */
/*****************************************************/
/*  Las dos fuentes van SERVIDAS DESDE EL PROPIO PROYECTO, no desde Google Fonts: la app se empaqueta
    también como nativa, y con un @import remoto los textos se pintan con la fuente del sistema hasta que
    llega la descarga (o para siempre, si el móvil está sin cobertura).
    De cada familia hay dos ficheros porque Google las sirve troceadas por alfabeto: "latin" cubre el
    castellano y "latin-ext" el resto de acentos europeos. El navegador solo se descarga el trozo que
    necesita, gracias al unicode-range.
    Figtree es una fuente VARIABLE: un único fichero cubre de 300 a 900, así que no hay que descargar un
    .woff2 por grosor.  */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-variable-latin.woff2") format("woff2");
  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: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/assets/fonts/figtree-variable-latin-ext.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Caprasimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/caprasimo-400-latin.woff2") format("woff2");
  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: "Caprasimo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/caprasimo-400-latin-ext.woff2") format("woff2");
  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;
}
/*  LA APP ES SOLO DE TEMA CLARO ( no hay un solo prefers-color-scheme en todo el proyecto ), y hay
    que decírselo al navegador: si no, con el móvil en modo oscuro el WebView da por hecho que la
    página también lo es y pinta con apariencia oscura todo lo que dibuja ÉL y no esta hoja. Lo más
    visible era el CURSOR de los campos de texto, que lo ponía BLANCO sobre el fondo claro del campo
    y desaparecía: se escribía a ciegas. De paso arregla los tiradores de selección de texto, el
    relleno automático y los desplegables nativos, y en Android apaga el oscurecido automático del
    WebView, que el tema nativo es DayNight. La misma declaración va como <meta> en index.html, para
    que valga desde el primer pintado, antes de que cargue este CSS.  */
:root {
  color-scheme: light;
}

/*  Y EL CURSOR, con su color escrito en vez de a criterio del WebView. Es el arreglo que se hizo en
    gestionPyme, donde tampoco se veía en el iPhone, con el negro de marca en vez de un #000 suelto.
    Todos los campos de la app son oscuros sobre fondo claro, así que no hay caso en el que se pierda,
    y las dos propiedades se heredan hasta el input/textarea nativo de dentro.
    EL -webkit-text-fill-color NO SOBRA aunque ya esté el color: en iOS es ÉL quien decide con qué se
    rellena el texto, y de ahí saca WebKit el cursor cuando el caret-color no le basta. Sin esta línea
    el arreglo de gestionPyme está a medias, que es como estuvo aquí un rato.  */
ion-input,
ion-textarea,
ion-searchbar {
  caret-color: var(--re-negro);
  -webkit-text-fill-color: var(--re-negro);
}

/*  El relleno de arriba se hereda al placeholder y le comería su gris, así que se le devuelve el
    suyo. Se puede entrar al elemento nativo porque en Ionic 6 estos tres son scoped, no shadow DOM. */
ion-input .native-input::placeholder,
ion-textarea .native-textarea::placeholder,
ion-searchbar .searchbar-input::placeholder {
  -webkit-text-fill-color: var(--re-gris-texto);
}

/*  Tokens de la imagen nueva. El verde y el ámbar NO se redefinen aquí: son exactamente los
    colorSecundario (#009975) y colorTerciario (#e8b400) que ya están en theme/variables.scss, y se
    apuntan a ellos para que la paleta siga viviendo en un único sitio. Lo que sí es nuevo son los
    tonos claros y oscuros de cada uno, que el diseño usa para chips y degradados.  */
:root {
  --re-verde: var(--ion-color-colorSecundario);
  --re-verde-oscuro: #00694f;
  --re-verde-claro: #d9f0ea;
  --re-ambar: var(--ion-color-colorTerciario);
  --re-ambar-oscuro: #a97f00;
  --re-ambar-claro: #fbecc0;
  --re-negro: #1c1c1c;
  --re-fondo: #f6f4ee;
  --re-campo-fondo: #f4f2ec;
  --re-gris-texto: #9a9a90;
  --re-linea: #f1efe8;
  /*  Fondo un punto más oscuro que --re-fondo, para cuando lo que va ENCIMA es blanco y con
      --re-fondo no se despegaría: es el gris cálido sobre el que el diseño del popover apoya sus
      pastillas.  */
  --re-fondo-hundido: #e7e5df;
  /*  Rojo de lo destructivo ( eliminar, cancelar ). No es el --ion-color-colorRojo (#db0404) de
      toda la vida: el diseño usa un rojo más apagado, que no grita al lado del verde.  */
  --re-rojo: #c0392b;
  --re-radio-tarjeta: 28px;
  --re-sombra-suave: 0 1px 2px rgba(46, 43, 37, .14);
  --re-sombra-media: 0 3px 10px rgba(46, 43, 37, .16);
  /*  EL AIRE QUE NECESITA UNA SOMBRA PARA NO RECORTARSE. Todo lo que lleve sombra y viva dentro de
      un contenedor con overflow distinto de visible ( los carriles, los tableros, las listas que
      scrollean ) se recorta contra el borde de ese contenedor, porque la mancha se sale de la caja
      del hijo. La cura es rellenar el CONTENEDOR con esto, no poner margen en el hijo: en un carril
      el margen ensancharía además la separación entre píldoras.
      La cuenta: el desenfoque se reparte a mitades a cada lado del borde de la sombra, así que de la
      caja se sale ( desplazamiento ± desenfoque/2 ). Con la suave ( 0 1px 2px ) son 0px arriba, 2px
      abajo y 1px a los lados; con la media ( 0 3px 10px ), 2px arriba, 8px abajo y 5px a los lados.
      Estos dos valores redondean al alza para no ir al milímetro.  */
  --re-aire-sombra: 4px;
  --re-aire-sombra-media: 12px;
  --re-fuente-titulo: "Caprasimo", Georgia, serif;
  --re-fuente-texto: "Figtree", system-ui, sans-serif;
  /*  El ancho del menú de escritorio va en variable porque no solo lo usa el propio menú: los
      modales a pantalla completa reservan ese mismo hueco para no taparlo ( ver .full-screen-modal ).
      Si se toca aquí, el modal se ajusta solo.  */
  --ancho-menu-lateral: 250px;
  /*  Lo que ocupa el panel del pedido ( app-panel-pedido ) en el ordenador. En variable por lo
      mismo: lo reservan las rejillas de las TRES páginas que lo llevan ( portada, carta y ficha de
      producto ), y el fab de la ficha se aparta ese hueco para no quedar debajo. Estuvo a 340 en
      dos sitios y a 400 en el otro, y el panel se veía más ancho en la ficha que en el resto.  */
  --re-ancho-panel-pedido: 340px;
}

/*****************************************************/
/* Estilos específicos de la aplicación **************/
/*****************************************************/
/*****************************************************/
/* Estilos globales                                  */
/*****************************************************/
.custom-loading {
  --background: none;
}
.custom-loading .loading-wrapper {
  box-shadow: none !important;
  --webkit-box-shadow: !important;
}

/*  LA ESPERA BLOQUEANTE de utilidades2.abrirEspera(). Va aquí arriba, con los estilos globales y no
    en la zona class-re-* de las pantallas, porque no es de ninguna pantalla: es un overlay de app
    entera, y su sitio es al lado del .custom-loading al que sustituye.

    .custom-loading se queda donde está: lo usa utilidades.presentLoading() de Common, y Common no se
    toca. Lo que pasa es que aquel esconde la caja ( --background: none, sin sombra ) para dejar solo
    un gif flotando, y aquí hace falta lo contrario: una tarjeta que se lea. */
.class-re-espera {
  /*  El backdrop del modo iOS es tímido y aquí el fondo TIENE que notarse: media pantalla de ticket
      detrás compitiendo con el mensaje es justo lo que hace que la espera pase desapercibida.  */
  --backdrop-opacity: .6;
  --background: #fff;
  --spinner-color: var(--re-verde);
  --max-width: 300px;
}

/*  Se puede llegar al .loading-wrapper desde global porque ion-loading usa encapsulación `scoped` y
    no shadow DOM — es lo mismo que hace .custom-loading justo arriba.  */
.class-re-espera .loading-wrapper {
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: var(--re-sombra-media);
  text-align: center;
}

.class-re-espera-titulo {
  font-family: var(--re-fuente-texto);
  font-weight: 700;
  font-size: 15px;
  color: var(--re-negro);
}

.class-re-espera-detalle {
  margin-top: 6px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
  white-space: pre-line;
}

ion-searchbar {
  color: var(--ion-color-colorPrincipal-contrast) !important;
  margin: 2px !important;
  width: auto !important;
}
ion-searchbar .searchbar-input-container .searchbar-input {
  border-radius: 20px 20px 20px 20px !important;
}

.popover-pequeño {
  --max-height: 60vh !important;
  --max-width: 300px !important;
  --min-width: 250px !important;
}
.popover-pequeño::part(content) {
  margin-top: -5vh !important;
  border-radius: 20px 20px 20px 20px !important;
}

.popover-mediano {
  --max-height: 60vh !important;
  --min-width: 80vw !important;
}
.popover-mediano::part(content) {
  margin-top: -5vh !important;
  border-radius: 20px 20px 20px 20px !important;
}

.popover-confirmacion {
  --align-content: center;
  margin: 0%;
  padding: 0%;
}
.popover-confirmacion::part(content) {
  max-height: 80vh !important;
  min-width: 97vw !important;
  border-radius: 20px 20px 20px 20px !important;
}

.modal-completo {
  --height: 100% !important;
  --width: 100% !important;
}

.modal-ticket {
  --height: 100% !important;
  --width: 100% !important;
  --max-width: 250px !important;
}

.full-modal {
  --height: 100% !important;
  --width: 100% !important;
  --max-width: 700px !important;
}

.popover-CP {
  float: unset !important;
  --max-height: 70% !important;
  --min-height: 400px !important;
  --min-width: 80% !important;
}
.popover-CP::part(content) {
  border-radius: 20px 20px 20px 20px !important;
}

.class-grafica-queso {
  width: 300px !important;
  height: 300px !important;
  margin-bottom: -100px !important;
  margin: auto;
}

.class-grafica-queso-flujo {
  margin-bottom: -100px !important;
  margin-left: -72px !important;
  width: 300px !important;
  height: 300px !important;
  margin: auto;
}

ion-picker picker-opts[disabled] {
  color: gray;
}

.class-picker {
  --height: 40% !important;
  --width: 95% !important;
  --background: white !important;
  background-color: transparent;
  --border-radius: 30px 30px 30px 0px !important;
  --margin-bottom: 20px !important;
}
.class-picker .picker-button {
  color: var(--ion-color-colorPrincipal) !important;
  --text-align: end !important;
}
.class-picker .picker-opts[disabled] {
  text-decoration: line-through !important;
}

.no-margin-no-padding {
  margin: 0% !important;
  padding: 0% !important;
}

.class-margin-left-10px {
  margin-left: 10px !important;
}

.class-margin-10px {
  margin: 10px !important;
}

.class-margin-20px {
  margin: 20px !important;
}

.class-margin-top-bottom-10px {
  margin: 0% !important;
  padding: 0% !important;
  margin-top: -10px !important;
  margin-bottom: -10px !important;
}

.class-max-whidth-250 {
  max-width: 250px !important;
}

.class-max-whidth-150 {
  max-width: 250px !important;
}

.segment {
  color: var(--ion-color-colorPrincipal-contrast) !important;
  font-size: 12px !important;
  padding: 0% !important;
  margin: 0% !important;
}

.animated.fast {
  animation-duration: 400ms;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.slow {
  animation-duration: 2s;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.img-carga {
  width: 100px !important;
  height: 100px !important;
}

.position-load {
  z-index: 2 !important;
  position: sticky;
  transition: 0.5s ease;
  top: 20vh !important;
  width: auto !important;
  margin: 0% !important;
  padding: 0% !important;
}

.class-popup-app {
  position: fixed;
  z-index: 2000 !important;
}

.class-popup-register {
  position: fixed;
  z-index: 1000 !important;
}

.alert-anuncios {
  --height: 100% !important;
  --width: 100% !important;
  --margin: 0% !important;
  --padding: 0% !important;
  --background: white !important;
  background-color: transparent;
  --border-radius: 30px !important;
  --margin-bottom: 20px !important;
}
.alert-anuncios .content {
  background: lightpink !important;
}

/*  .popover-publicidad y .popover-publicidad-completa ( una para el teléfono y otra para el
    ordenador ) las sustituye una sola clase, .class-re-modal-promo, al final de este archivo: la
    ventana de publicidad pasó a ser un modal, que es lo que Ionic centra de verdad, y el tamaño lo
    decide un @media sin que la página tenga que elegir.  */
.slides-producto {
  display: block !important;
  position: relative !important;
  padding: 0px;
  margin: 0px;
}

.slide-producto {
  width: 100% !important;
  padding: 0px;
  margin: 0px;
}

.avatar-publicacion {
  width: 100% !important;
  height: 100vh !important;
  padding: 0px;
  margin: 0px;
}

.position-fab-call {
  margin-left: 20px !important;
}

.layout-wrapper {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/*  El borde derecho era un #ccc que cortaba mucho al lado del fondo crema de la imagen nueva: se cambia
    por la misma divisoria suave que usan las tarjetas. El ancho se queda en 250px ( el diseño dibuja 240,
    pero no compensa mover el layout por 10px ).  */
.sidebar {
  width: var(--ancho-menu-lateral);
  min-width: var(--ancho-menu-lateral);
  max-width: var(--ancho-menu-lateral);
  background-color: #fff;
  border-right: 1px solid rgba(32, 30, 29, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.menu-lateral {
  width: var(--ancho-menu-lateral);
  min-width: var(--ancho-menu-lateral);
  max-width: var(--ancho-menu-lateral);
  background: #fff;
  border-right: 1px solid rgba(32, 30, 29, 0.1);
  height: 100%;
  z-index: 10;
}

.main-content {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  background-color: var(--re-fondo);
  position: relative;
  z-index: 1;
}

/*  La misma pieza que .full-modal pero de verdad a pantalla completa. Los modales de esta app son
    páginas enteras ( ficha de producto, pedido, cliente, chat... ) y con el tope de 700px se
    quedaban en una columna en mitad de la pantalla en escritorio.
    Hay que anular las cuatro variables: ion-modal trae
    @media (min-width:768px) and (min-height:600px) { :host { --width:600px; --height:500px } }
    y en modo ios además --border-radius:10px, así que sin esto el modal sale como un cuadro
    redondeado y centrado en vez de ocupar la pantalla.  */
.full-screen-modal {
  --width: 100% !important;
  --height: 100% !important;
  --max-width: none !important;
  --max-height: none !important;
  --border-radius: 0 !important;
}

/*  En escritorio el menú lateral es un div siempre visible dentro del layout, y el modal, que Ionic
    cuelga de <ion-app>, lo tapaba entero: para llegar a otro módulo había que cerrar la ficha. Aquí
    el modal arranca donde acaba el menú.
    Se desplaza el ion-modal entero, no su contenido: el fondo oscuro ( ion-backdrop ) vive dentro
    del modal con position:absolute e inset 0, así que se estrecha con él y deja de oscurecer el menú
    y de tragarse sus clics. Va con !important porque hay que ganarle al left:0 del :host del shadow
    DOM de ion-modal, igual que las cuatro variables de arriba.
    html.plt-desktop la pone Ionic con el mismo criterio que el platform.is('desktop') de
    app.component.html, así que el hueco solo se reserva cuando ese menú de escritorio existe.  */
html.plt-desktop {
  /*  .full-modal es la clase por defecto de presentModal: no llega a tapar el menú porque se queda
      en 700px centrado, pero su fondo oscuro sí lo cubre, así que entra en la misma regla.
      Se filtra por ion-modal porque hay un popover ( la confirmación de pedido ) que también usa
      full-modal, y ese sí se coloca donde se ha pulsado: moverlo lo descuadraría.  */
}
html.plt-desktop ion-modal.full-screen-modal,
html.plt-desktop ion-modal.full-modal {
  left: var(--ancho-menu-lateral) !important;
}

.class-slides-negocios {
  width: 90px !important;
}

.class-slides-logo-negocios {
  margin: 0% !important;
  padding: 0% !important;
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  display: flex;
}

ion-datetime-button::part(native) {
  background: var(--ion-color-colorPrincipal) !important;
  margin: 3px !important;
  color: var(--ion-color-colorPrincipal-contrast) !important;
}

ion-datetime-button {
  color: var(--ion-color-colorPrincipal-contrast) !important;
  --background-color: var(--ion-color-colorPrincipal) !important;
  background-color: var(--ion-color-colorPrincipal) !important;
  margin: 3px !important;
}

.class-swiper-slides .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
}
.class-swiper-slides .swiper-slide-prev {
  width: auto !important;
}
.pagination-swiper {
  margin: 0% !important;
  padding: 0% !important;
  position: relative !important;
  font-size: 15px !important;
  float: center !important;
  text-align: center !important;
  z-index: 5 !important;
  margin-top: -40px !important;
}

.class-swiper {
  display: flex;
}
.class-swiper .swiper-slide {
  margin: 0%;
  padding: 0%;
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
  font-size: 18px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.swiper-slide {
  display: flex;
  position: relative;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
  font-size: 18px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.badge-notification {
  position: absolute !important;
  display: flex;
  float: right !important;
  z-index: 2 !important;
  padding: 2px;
  border-radius: 1em;
  margin-top: -20px;
  margin-right: -20px;
}

.class-alerta-icono {
  position: absolute !important;
  display: flex;
  float: right !important;
  margin: 0% !important;
  margin-right: -15px !important;
  margin-top: -10px !important;
  padding: 2px !important;
  font-size: 11px !important;
  font-weight: bold !important;
  border-radius: 20px 20px 20px 20px !important;
  color: black;
}

.class-parrafo-margen {
  color: black;
  margin-left: 12% !important;
  margin-right: 12% !important;
  padding-top: 0% !important;
  margin-top: 0%;
  white-space: pre-line !important;
}

.class-parrafo-descripcion {
  color: black;
  padding-top: 0% !important;
  margin-top: 0%;
  margin: 0% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  white-space: pre-line !important;
}

.class-titulo-descripcion {
  margin-top: 0% !important;
  padding: 0% !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-size: 20px !important;
  font-weight: bold !important;
}

.class-nombre-negocio {
  font-size: 20px !important;
  font-weight: bold !important;
}

.class-titulo {
  font-size: 20px !important;
  font-weight: bold !important;
  white-space: pre-line !important;
}

.class-titulo-tachado {
  font-size: 20px !important;
  font-weight: bold !important;
  text-decoration: line-through !important;
  white-space: pre-line !important;
}

.class-subtitulo {
  font-size: 15px !important;
  font-weight: bold !important;
  white-space: pre-line !important;
}

.class-subtitulo-tachado {
  font-size: 15px !important;
  font-weight: bold !important;
  text-decoration: line-through !important;
  white-space: pre-line !important;
}

.class-subtitulo-light {
  color: rgb(255, 255, 255) !important;
  font-size: 15px !important;
  font-weight: bold !important;
}

.class-subtitulo-grey {
  color: rgb(177, 177, 177) !important;
  font-size: 15px !important;
  font-weight: bold !important;
}

.class-texto {
  font-size: 15px !important;
  white-space: pre-line !important;
}

.class-texto-gigante {
  font-size: 45px !important;
  white-space: pre-line !important;
}

.class-texto-grande {
  font-size: 20px !important;
  white-space: pre-line !important;
}

.class-texto-gigante-negrita {
  font-size: 45px !important;
  white-space: pre-line !important;
  font-weight: bold !important;
}

.class-texto-negrita {
  font-size: 15px !important;
  white-space: pre-line !important;
  font-weight: bold !important;
}

.class-texto-pequeño {
  font-size: 10px !important;
  white-space: pre-line !important;
}

.class-texto-pequeño-negrita {
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
}

.class-texto-cabecera-pagina {
  color: var(--ion-color-colorTerciario);
  font-size: 15px !important;
  font-weight: bold !important;
  white-space: pre-line !important;
}

.class-texto-ticket {
  font-size: 9px !important;
  white-space: pre-line !important;
}

.class-texto-ticket-negrita {
  font-size: 9px !important;
  font-weight: bold !important;
  white-space: pre-line !important;
}

.class-texto-ticket-encasillado {
  font-size: 9px !important;
  font-weight: bold !important;
  white-space: pre-line !important;
  border: 1px solid #000000;
  border-radius: 5px 5px 5px 5px !important;
}

.class-titulo-pequeño-color-terciario {
  font-size: 12px !important;
  color: var(--ion-color-colorTerciario);
  font-weight: bold !important;
}

.class-titulo-color-primario {
  color: var(--ion-color-colorPrincipal);
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
}

.class-titulo-color-secundario {
  color: var(--ion-color-colorSecundario);
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
}

.class-titulo-color-terciario {
  color: var(--ion-color-colorTerciario);
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
}

.class-titulo-grafica {
  color: var(--ion-color-colorTerciario);
  font-size: 18px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
  margin-left: 5px !important;
}

.class-titulo-card {
  color: var(--ion-color-colorTerciario);
  font-size: 20px !important;
  font-weight: bold !important;
  margin-bottom: 20px !important;
}

.class-items-primario {
  color: var(--ion-color-colorPrincipal);
  font-size: 15px !important;
  font-weight: bold !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-items-secundario {
  color: var(--ion-color-colorSecundario);
  font-size: 15px !important;
  font-weight: bold !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-items-terciario {
  color: var(--ion-color-colorTerciario);
  font-size: 15px !important;
  font-weight: bold !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-horario {
  font-size: 12px !important;
  margin: 0% !important;
  padding: 0% !important;
}

.class-estado {
  color: var(--ion-color-colorSecundario);
  font-size: 12px !important;
  margin: 0% !important;
  padding: 0% !important;
}

.class-text-expres {
  font-size: 15px !important;
  font-weight: bold !important;
  margin: 0% !important;
  padding: 0% !important;
}

.class-text-info-expres {
  font-size: 15px !important;
  margin: 0% !important;
  padding: 0% !important;
  margin-left: 5px !important;
}

.class-tick-expres {
  font-size: 20px !important;
  font-weight: bold !important;
  margin: 0% !important;
  padding: 0% !important;
  margin-bottom: -5px !important;
}

.class-texto-precio-rebajado {
  font-size: 11px !important;
  color: gray !important;
  text-decoration: line-through !important;
  padding: 0% !important;
  margin: 0% !important;
}

.class-texto-precio {
  font-size: 15px;
  color: #c70000;
  padding: 0%;
  margin: 0%;
}

.class-texto-dentro-avatar {
  /* POSICIONAMIENTO: Centra el texto */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Z-INDEX: Asegura que el texto esté delante del filtro */
  z-index: 20;
  /* ALINEACIÓN: Centrado total */
  display: flex;
  align-items: center;
  /* Centrado vertical */
  justify-content: center;
  /* Centrado horizontal */
  /* TIPOGRAFÍA: Estilo similar a la imagen */
  color: white;
  /* Color blanco para contraste */
  font-size: 20px;
  /* Tamaño de fuente grande (ajusta según tu necesidad) */
  font-weight: 1000;
  /* Negrita para destacar */
  text-shadow: 0px 0px 10px rgb(0, 0, 0);
  /* Sombra para que destaque sobre el fondo */
}

.class-padding-top-terciario-shade {
  background: var(--ion-color-colorTerciario-shade) !important;
}

.class-background-terciario-shade {
  background: var(--ion-color-colorTerciario-shade) !important;
}

.class-label-cantidad-color-principal {
  z-index: 2 !important;
  font-weight: bold !important;
  font-size: 15px !important;
  width: 100% !important;
  padding: 5px !important;
  background-color: var(--ion-color-colorPrincipal) !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-label-cantidad-color-secundario {
  z-index: 2 !important;
  font-weight: bold !important;
  font-size: 15px !important;
  width: 100% !important;
  padding: 5px !important;
  background-color: var(--ion-color-colorSecundario) !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-label-cantidad-color-terciario {
  z-index: 2 !important;
  font-weight: bold !important;
  font-size: 15px !important;
  width: 100% !important;
  padding: 5px !important;
  background-color: var(--ion-color-colorTerciario) !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-position-margin-bottom-30px {
  margin-bottom: -30px !important;
}

.class-position-margin-top-30px {
  margin-top: -30px !important;
}

.class-filtro-color-principal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(var(--ion-color-colorPrincipal-rgb), 0.4);
  z-index: 10;
}

/*  Deja una foto en monocromo con un tinte hacia el verde de marca ( --re-verde, #009975 ). Se creó
    para la rejilla de la portada: las fotos las sube cada negocio, mezclan temperaturas y
    saturaciones muy distintas y la rejilla no se leía como una pieza nuestra. Así el color lo ponen
    la nota, el nombre y los botones, no las fotos. Es genérica a propósito: sirve para cualquier
    <img> al que se le quiera dar el mismo trato.
    El orden de la cadena importa y no es caprichoso: grayscale(1) la pasa a gris de verdad;
    sepia(1) devuelve a ese gris un tono uniforme ( hue ≈ 38° ), porque sobre un gris puro no habría
    nada que rotar; hue-rotate(130deg) lo lleva hasta el hue del verde ( 166° ), y saturate gradúa
    cuánto se nota. Un saturate + hue-rotate a secas NO valdría: hue-rotate es relativo, así que
    rota lo que cada foto ya traía y cada una acabaría en un verde distinto.
    Si el tinte se ve pasado o soso, el número a tocar es el saturate. Y como el hue-rotate de CSS
    es una aproximación lineal y no una rotación HSL exacta, si el tono tira a turquesa o a oliva se
    mueve el hue-rotate de diez en diez grados.  */
.class-icono-boton {
  height: 20px !important;
  width: 20px !important;
  margin: 5px !important;
  padding: 0% !important;
}

.class-icono-mediano-derecha {
  font-size: 15px !important;
  text-align: end !important;
  margin: 0% !important;
  padding: 0% !important;
  margin-left: 10px !important;
  margin-bottom: -5px !important;
}

.class-icono-barcode {
  width: 30px !important;
  height: 30px !important;
  margin-right: -40px !important;
  margin-left: 10px !important;
  z-index: 1 !important;
}

.class-icono-mediano {
  width: 50px !important;
  height: 50px !important;
}

.class-icono-30px {
  width: 30px !important;
  height: 30px !important;
}

.class-icono-40px {
  width: 40px !important;
  height: 40px !important;
}

.class-icono-50px {
  width: 50px !important;
  height: 50px !important;
}

.class-icono-margin-derecha {
  margin-right: 5px !important;
}

.class-icono-pagination {
  width: 40px !important;
  height: 40px !important;
  z-index: 2 !important;
  margin-top: -30px !important;
  float: center !important;
  position: relative !important;
}

.class-justificar-centro {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
}

.class-justificar-centro-ancho-completo {
  width: 100% !important;
  margin: auto !important;
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
}

.class-max-width-400px {
  max-width: 400px !important;
  margin: auto !important;
}

.class-width-300px {
  width: 300px !important;
  margin: auto !important;
}

.class-width-250px {
  width: 250px !important;
  margin: auto !important;
}

.class-width-200px {
  width: 200px !important;
  margin: auto !important;
}

.class-width-150px {
  width: 150px !important;
  margin: auto !important;
}

.class-justificar-derecha {
  text-align: right !important;
}

.class-justificar-izquierda {
  text-align: left !important;
}

.class-no-margin-no-padding {
  margin: 0% !important;
  padding: 0% !important;
}

.class-padding-top {
  padding-top: 20px !important;
}

.class-padding-top-terciario-shade {
  background: var(--ion-color-colorTerciario-shade);
  padding-top: 20px !important;
}

.class-no-margin-no-padding-item {
  margin: 0% !important;
  padding: 0% !important;
  --margin: 0% !important;
  --padding: 0% !important;
}

.class-padding-10px {
  padding-top: 10px !important;
}

.class-separado-top-100px {
  margin-bottom: -100px !important;
}

.class-checkbox-normal {
  --background-checked: var(--ion-color-colorSecundario);
  --background: lightgray;
  --border-width: 0px !important;
  --border-radius: 20px !important;
  margin: 0px !important;
  padding: 0px !important;
  vertical-align: auto !important;
  margin-top: 7px !important;
}

.class-toggle-alerta {
  --background: var(--ion-color-colorSecundario);
  --background-checked: red;
  margin: 0%;
  padding: 0%;
}

.class-toggle-normal {
  --background-checked: var(--ion-color-colorSecundario);
  --background: lightgray;
  margin: 0%;
  padding: 0%;
}

.class-toggle-reposo {
  --background-checked: lightgray;
  --background: var(--ion-color-colorSecundario);
  margin: 0%;
  padding: 0%;
}

.class-card-standar {
  color: var(--ion-color-colorPrincipal-contrast) !important;
  background: var(--ion-color-colorPrincipal-shade);
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-standar-terciario {
  color: black !important;
  background: var(--ion-color-colorTerciario);
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-standar-terciario {
  color: black !important;
  background: var(--ion-color-colorTerciario);
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-standar-large {
  color: black !important;
  background: var(--ion-color-colorPrincipal);
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  width: auto !important;
}

.class-card-standar-white {
  color: black !important;
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-standar-white-sin-padding {
  color: black !important;
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  padding: 0% !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-tipo-chip {
  border-radius: 20px 20px 20px 20px !important;
  font-size: 12px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-tipo-chip-warning {
  color: black !important;
  background-color: goldenrod !important;
  border-radius: 20px 20px 20px 20px !important;
  font-size: 12px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-tipo-chip-color-secundario {
  border-radius: 20px 20px 20px 20px !important;
  background-color: var(--ion-color-colorSecundario) !important;
  color: var(--ion-color-colorSecundario-contrast) !important;
  font-size: 12px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin: 0% !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-tipo-chip-color-terciario {
  color: black !important;
  border-radius: 20px 20px 20px 20px !important;
  background-color: var(--ion-color-colorTerciario) !important;
  color: var(--ion-color-colorTerciario-contrast) !important;
  font-size: 12px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin: 0% !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-tipo-chip-color-terciario-sin-padding {
  color: black !important;
  border-radius: 20px 20px 20px 20px !important;
  background-color: var(--ion-color-colorTerciario) !important;
  color: var(--ion-color-colorTerciario-contrast) !important;
  font-size: 12px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin: 0% !important;
  padding: 0% !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-bocadillo-escritura-derecha {
  color: var(--ion-color-colorSecundario-tint) !important;
  background: var(--ion-color-colorPrincipal-shade);
  width: 90% !important;
  padding: 0% !important;
  margin: 0% !important;
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 8% !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  padding-top: 5px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
}

.class-card-bocadillo-escritura-derecha-colorPrincipal {
  color: var(--ion-color-colorSecundario-tint) !important;
  background: var(--ion-color-colorPrincipal);
  width: 90% !important;
  padding: 0% !important;
  margin: 0% !important;
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 8% !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  padding-top: 5px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
}

.class-card-bocadillo-escritura-izquierda {
  color: var(--ion-color-colorSecundario-tint) !important;
  background: var(--ion-color-colorPrincipal-shade);
  width: 90% !important;
  padding: 0% !important;
  margin: 0% !important;
  border-radius: 20px 20px 20px 20px !important;
  margin-left: 2% !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  padding-top: 5px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
}

.class-card-bocadillo-izquierda {
  background: var(--ion-color-colorPrincipal-shade);
  color: var(--ion-color-colorSecundario-tint) !important;
  width: 95% !important;
  padding: 0% !important;
  margin: 0% !important;
  border-radius: 20px 20px 20px 20px !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  padding-top: 5px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
}

.class-card-bocadillo-izquierda-colorPrincipal {
  background: var(--ion-color-colorPrincipal);
  color: var(--ion-color-colorSecundario-tint) !important;
  width: 95% !important;
  padding: 0% !important;
  margin: 0% !important;
  border-radius: 20px 20px 20px 20px !important;
  padding-left: 5% !important;
  padding-right: 5% !important;
  padding-top: 5px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
}

.class-card-producto {
  background-color: white;
  width: auto !important;
  margin: 0% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0% !important;
  border-radius: 20px 20px 20px 20px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.class-card-swiper-2 {
  color: black !important;
  background-color: #ffffff !important;
  border-radius: 20px 20px 20px 20px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  padding: 0% !important;
  margin: 5% !important;
  width: 90% !important;
  z-index: 2 !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-card-swiper-4 {
  color: black !important;
  background-color: #ffffff !important;
  border-radius: 20px 20px 20px 20px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  padding: 0% !important;
  margin: 5% !important;
  width: 90% !important;
  z-index: 2 !important;
}

.class-card-header-producto {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  margin: 0% !important;
  padding: 0% !important;
  height: 200px !important;
  --border-radius: 20px 20px 0px 0px !important;
}

.class-card-header-modelos {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  margin: 0% !important;
  padding: 0% !important;
  height: 120px !important;
  --border-radius: 20px 20px 0px 0px !important;
}

.class-card-tipo-button {
  color: black !important;
  font-weight: bold !important;
  background-color: var(--ion-color-colorSecundario) !important;
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  margin: 0% !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  width: auto !important;
  border-radius: 30px 30px 30px 30px !important;
  box-shadow: none;
}

.class-lista-color-principal {
  background-color: var(--ion-color-colorPrincipal) !important;
  margin: 0% !important;
  padding: 0% !important;
}

.class-lista-color-principal-shade {
  background-color: var(--ion-color-colorPrincipal-shade) !important;
  margin: 0% !important;
  padding: 0% !important;
  border-radius: 20px 20px 20px 20px !important;
}

ion-chip {
  background-color: var(--ion-color-colorPrincipal-shade) !important;
  color: var(--ion-color-colorPrincipal-contrast) !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  margin: 2px !important;
}

.class-chip-color-primario {
  background-color: var(--ion-color-colorPrincipal) !important;
  font-size: 15px !important;
}

.class-chip-color-secundario {
  background-color: var(--ion-color-colorSecundario) !important;
  font-size: 15px !important;
}

.class-chip-color-terciario {
  background-color: var(--ion-color-colorTerciario) !important;
  font-size: 15px !important;
}

.class-chip-color-red {
  background-color: rgb(211, 43, 43) !important;
  font-size: 15px !important;
}

.class-chip-informacion {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
  width: 90% !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
}

.class-chip-ajustado {
  --align-content: center !important;
  text-align: center !important;
  --align-items: center !important;
  float: center !important;
  margin: auto !important;
  padding-left: 0px !important;
  padding-right: 11px !important;
}

.class-chip-comentario {
  background-color: var(--ion-color-colorSecundario) !important;
  border-radius: 20px 20px 20px 20px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
}

.class-chip-pequeño {
  font-size: 10px !important;
  padding: 0% !important;
  margin: 0% !important;
  padding: 2px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  height: 14px !important;
}

.class-chip-width-100 {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
  width: auto !important;
  height: 14px !important;
}

.class-chip-width-100-pequeño-colorSecundario {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
  width: auto !important;
  padding: auto !important;
  height: 16px !important;
  background-color: var(--ion-color-colorSecundario) !important;
  box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.0941176471);
}

.class-chip-width-100-pequeño-colorTerciario {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
  width: auto !important;
  padding: auto !important;
  height: 16px !important;
  background-color: var(--ion-color-colorTerciario) !important;
  box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.0941176471);
}

.class-chip-width-100-pequeño-colorTerciario-shade {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
  width: auto !important;
  padding: auto !important;
  height: 16px !important;
  background-color: var(--ion-color-colorTerciario-shade) !important;
  box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.0941176471);
}

.class-chip-width-100-pequeño-colorPrincipal {
  align-content: center !important;
  text-align: center !important;
  align-items: center !important;
  float: center !important;
  margin-left: 5% !important;
  margin-right: 5% !important;
  width: auto !important;
  padding: auto !important;
  height: 16px !important;
  background-color: var(--ion-color-colorPrincipal) !important;
  box-shadow: 0 0px 4px 2px rgba(0, 0, 0, 0.0941176471);
}

/* 1. Contenedor del Ancho: Define cuán ancho será el avatar */
.class-avatar-proporcion-container {
  /* Aquí defines el ancho que debe ocupar el avatar en tu diseño. 
     Ejemplo: un ancho fijo, o un porcentaje dentro de un layout flexible. */
  width: 200px;
  /* Ejemplo de ancho fijo */
  /* O: width: 30%; */
}

/* 2. El Contenedor de Proporción: Crea el cuadrado 1:1 */
.class-avatar-proporcion {
  position: relative;
  height: 0;
  overflow: hidden;
  /* Oculta cualquier desbordamiento y ayuda con el border-radius */
  /* LA LÍNEA CRUCIAL: 100% del ancho del contenedor crea una altura igual al ancho (1:1) */
  padding-bottom: 100%;
  /* Para hacerlo circular (opcional) */
  border-radius: 50%;
}

/* 3. El Contenido: Posiciona la imagen dentro del espacio creado por el padding */
.class-avatar-contenido {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.class-avatar-contenido img {
  /* Asegura que la imagen llene el cuadrado sin distorsionarse */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.class-avatar-cuadrado {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  --border-radius: 20px 20px 20px 20px !important;
}

.class-avatar-ajustado-alto {
  width: 100%;
  height: 100%;
  /* La altura se ajusta al tamaño de la card */
  display: flex;
  justify-content: center;
  /* Centra el contenido horizontalmente */
  align-items: center;
  /* Centra el contenido verticalmente */
  position: relative;
  /* Asegura que el contenedor puede adaptarse al tamaño */
}

.class-avatar-enano {
  width: 30px !important;
  height: 30px !important;
  margin: 0 auto !important;
  z-index: 1 !important;
}

.class-avatar-pequeño {
  width: 50px !important;
  height: 50px !important;
  margin: 0 auto !important;
  z-index: 1 !important;
}

.class-avatar-mediano {
  width: 100px !important;
  height: 100px !important;
  margin: 0 auto;
  z-index: 1 !important;
}

.class-avatar-cuadrado-pequeño {
  width: 50px !important;
  height: 50px !important;
  z-index: 1 !important;
  margin: 0 auto;
  --border-radius: 20px 20px 20px 20px !important;
}

.class-avatar-cuadrado-mediano {
  width: 80px !important;
  height: 80px !important;
  z-index: 1 !important;
  margin: 0 auto;
  --border-radius: 20px 20px 20px 20px !important;
}

.class-avatar-cuadrado-150px {
  width: 150px !important;
  height: 150px !important;
  z-index: 1 !important;
  margin: 0 auto;
  --border-radius: 20px 20px 20px 20px !important;
}

.class-avatar-cuadrado-mediano-sin-esquinas {
  width: 80px !important;
  height: 80px !important;
  z-index: 1 !important;
  margin: 0 auto;
  --border-radius: 0px 0px 0px 0px !important;
}

.class-avatar-cuadrado-110px {
  width: 110px !important;
  height: 110px !important;
  z-index: 1 !important;
  margin: 0 auto;
  --border-radius: 20px 20px 20px 20px !important;
}

.class-avatar-slides {
  margin-top: 10px !important;
  padding: 0% !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 35px 35px 35px 35px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  background-color: white !important;
  margin: 0 auto;
}

.class-avatar-borde {
  margin-top: 10px !important;
  padding: 0% !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 35px 35px 35px 35px !important;
  box-shadow: 0 0px 7px 5px var(--ion-color-colorSecundario);
  background-color: var(--ion-color-colorPrincipal) !important;
  margin: 0 auto;
}

.class-avatar-header-card {
  height: 100% !important;
  width: 100% !important;
  --border-radius: 20px 20px 0px 0px !important;
  padding: 0% !important;
}

.class-avatar-completo {
  width: 100% !important;
  height: 100% !important;
  --border-radius: 20px 20px 20px 20px !important;
  margin: 0 auto;
}

.class-avatar-ajustado-ancho {
  height: 100% !important;
  width: 100% !important;
  --border-radius: 0px 0px 0px 0px !important;
  margin: 0 auto;
}

.class-imagen-completa-ancho-alto {
  height: 100%;
  /* La imagen ocupará el 100% de la altura disponible */
  object-fit: cover;
  /* Asegura que la imagen se estire para llenar el área sin deformarse */
  border-radius: 10px;
  /* Puedes redondear las esquinas si lo deseas */
}

.class-img-class-card-header-producto {
  width: 100% !important;
  height: 100% !important;
  border-radius: 20px 20px 0px 0px !important;
  margin: 0% !important;
  padding: 0% !important;
}

.class-img-refresh {
  width: 200px !important;
  height: 200px !important;
  width: auto;
  margin: auto;
  display: block;
  margin-top: 10vh !important;
  margin-bottom: 200vh !important;
}

.class-imagen-completa-cuadrada {
  width: 100% !important;
  height: 50vh !important;
}

.class-imagen-completa {
  height: 100% !important;
  width: 100% !important;
}

.class-imagen-completa-esquinas-redondeadas {
  height: 100% !important;
  width: 100% !important;
  border-radius: 10px 10px 10px 10px !important;
}

.class-imagen-con-margen {
  height: 80% !important;
  width: 80% !important;
  margin: 10% !important;
}

.class-imagen-pequeña {
  width: 80px !important;
  margin: auto !important;
}

.class-badge-busqueda {
  font-size: 10px !important;
  font-weight: bold !important;
  padding: 0% !important;
  padding-bottom: 13px !important;
  padding-top: 13px !important;
  padding-right: 19px !important;
  padding-left: 10px !important;
  margin: 0% !important;
  margin-right: 10px !important;
  background-color: var(--ion-color-colorSecundario) !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-badge-tipo-chip-color-secundario {
  border-radius: 20px 20px 20px 20px !important;
  background-color: var(--ion-color-colorSecundario) !important;
  color: var(--ion-color-colorSecundario-contrast) !important;
  font-size: 12px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-badge-tipo-chip-color-secundario-shade {
  border-radius: 20px 20px 20px 20px !important;
  background-color: var(--ion-color-colorSecundario-shade) !important;
  color: var(--ion-color-colorSecundario-contrast) !important;
  font-size: 12px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-badge-tipo-chip-color-terciario {
  border-radius: 20px 20px 20px 20px !important;
  background-color: var(--ion-color-colorTerciario) !important;
  color: var(--ion-color-colorTerciario-contrast) !important;
  font-size: 12px !important;
  padding: 10px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.class-badge-into-chip-secundario {
  background-color: var(--ion-color-colorSecundario) !important;
  border-radius: 20px 20px 20px 20px !important;
  padding-right: 10px !important;
  font-weight: bold !important;
  color: black !important;
}

.class-badge-into-chip-terciario {
  background-color: var(--ion-color-colorTerciario) !important;
  border-radius: 20px 20px 20px 20px !important;
  padding-right: 10px !important;
  font-weight: bold !important;
  color: black !important;
}

.class-badge-into-chip-warning {
  background-color: goldenrod !important;
  border-radius: 20px 20px 20px 20px !important;
  padding-right: 10px !important;
  font-weight: bold !important;
  color: black !important;
}

.class-badge-avatar-pequeño {
  float: right !important;
  position: relative !important;
  font-size: 18px !important;
  margin: 0% !important;
  padding: 0% !important;
  padding: 5px !important;
  margin-bottom: -20px !important;
  margin-right: -12px !important;
  z-index: 2 !important;
  border-radius: 10px 10px 10px 10px !important;
}

.class-badge-activo {
  background-color: var(--ion-color-colorSecundario) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 0px !important;
  padding-top: 5px !important;
  margin: 4px !important;
  border-radius: 12px 12px 12px 12px !important;
  width: 95% !important;
  height: 95% !important;
}

.class-badge-desactivo {
  background-color: var(--ion-color-colorTerciario) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 0px !important;
  padding-top: 5px !important;
  margin: 4px !important;
  border-radius: 12px 12px 12px 12px !important;
  width: 95% !important;
  height: 95% !important;
}

.class-badge-no-disponible {
  background-color: var(--ion-color-colorPrincipal) !important;
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 0px !important;
  padding-top: 5px !important;
  margin: 4px !important;
  border-radius: 12px 12px 12px 12px !important;
  width: 95% !important;
  height: 95% !important;
}

.class-badge-descuento {
  z-index: 1 !important;
  position: sticky;
  bottom: -10px;
  margin-bottom: -31px !important;
  float: left !important;
  background-color: var(--ion-color-colorSecundario) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: bold !important;
  margin-top: 7px !important;
  margin-left: 7px !important;
  padding: 5px !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-badge-descuento-ticket {
  z-index: 1 !important;
  position: sticky;
  bottom: -10px;
  margin-bottom: -31px !important;
  float: left !important;
  background-color: var(--ion-color-colorSecundario) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: bold !important;
  margin-top: 7px !important;
  margin-left: 7px !important;
  padding: 5px !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-badge-profesional-asociado {
  z-index: 1 !important;
  position: sticky;
  bottom: -10px;
  margin-bottom: -50px !important;
  float: right !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: bold !important;
  margin-top: 2px !important;
  margin-right: 2px !important;
  padding: 0px !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-badge-avatar-cuadrado-secundario {
  z-index: 1 !important;
  padding: 3px !important;
  border-radius: 20px 20px 20px 20px !important;
  background-color: var(--ion-color-colorSecundario) !important;
  font-size: 10px !important;
  font-weight: bold !important;
  margin-left: 5px !important;
}

.class-badge-notificacion {
  float: right !important;
  position: relative !important;
  font-size: 9px !important;
  margin: 0% !important;
  padding: 5px !important;
  margin-bottom: -20px !important;
  margin-left: 50px !important;
  z-index: 2 !important;
  border-radius: 10px 10px 10px 10px !important;
}

.class-badge-pequeño-arriba {
  margin: 0% !important;
  z-index: 1 !important;
  margin-top: -10px !important;
  padding: 2px !important;
  font-size: 11px !important;
  font-weight: bold !important;
  border-radius: 20px 20px 20px 20px !important;
  color: black;
}

.class-badge-pequeño-footer {
  margin: 0% !important;
  z-index: 1 !important;
  margin-right: -15px !important;
  margin-top: -47px !important;
  padding: 2px !important;
  font-size: 11px !important;
  font-weight: bold !important;
  border-radius: 20px 20px 20px 20px !important;
  color: black;
}

.class-margin-bottom-23px {
  margin-bottom: -23px !important;
}

.grafica-queso-sin-margin {
  padding: 0% !important;
  margin: 0% !important;
  margin-left: -30% !important;
  width: 160% !important;
  height: auto !important;
}

.class-centro-donuts {
  padding: 0% !important;
  margin: 0% !important;
  margin-top: -250px !important;
  margin-bottom: 150px !important;
}

.class-centro-donuts-flujo {
  padding: 0% !important;
  margin: 0% !important;
  margin-top: -240px !important;
  margin-bottom: 50px !important;
}

.class-centro-donuts-miniatura {
  padding: 0% !important;
  margin: 0% !important;
  margin-top: -45% !important;
  margin-bottom: 40% !important;
}

.img-infinit-scroll {
  width: 100px !important;
  height: 100px !important;
  width: auto;
  margin: auto;
  display: block;
}

.class-imagen-infinit-scroll {
  width: 100px !important;
  height: 100px !important;
  width: auto;
  margin: auto;
  display: block;
}

.class-toggle-right {
  --background-color: var(--ion-color-colorSecundario) !important;
  float: right !important;
  margin-right: 5% !important;
}

.class-button-card {
  color: black !important;
  --background: var(--ion-color-colorPrincipal) !important;
  --padding: 12px !important;
  --border-radius: 15px 15px 15px 15px !important;
  width: 100%;
  --box-shadow: 0 0px 0px 0px #00000018;
}

::-webkit-file-upload-button {
  text-align: center !important;
  background-color: var(--ion-color-colorSecundario) !important;
  background: linear-gradient(var(--ion-color-colorSecundario), var(--ion-color-colorSecundario));
  border: none !important;
  border-radius: 20px 20px 20px 20px !important;
  padding: 7px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  cursor: pointer !important;
  display: inline-block;
  font-size: 13px;
  font-weight: bold !important;
  outline: none !important;
  width: 100% !important;
  filter: none !important;
}

.class-boton-subida-fichero {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  font-size: 0px !important;
  outline: none !important;
  border: none !important;
  width: auto !important;
}

.class-input-subida-fichero {
  height: 50px !important;
  margin-top: 3px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  font-size: 0px !important;
  outline: none !important;
  border: none !important;
  width: 100% !important;
}

.class-fab-boton-standar {
  position: fixed;
  margin: 0% !important;
  padding: 0% !important;
  margin: 20px !important;
}

.class-fijar-arriba-separado-200px {
  z-index: 2 !important;
  position: sticky;
  transition: 0.5s ease;
  top: 10px;
  width: 100% !important;
  margin: 0% !important;
  padding: 0% !important;
  padding-left: 2% !important;
  padding-right: 2% !important;
  margin-bottom: -300px !important;
}

.class-fijar-arriba {
  z-index: 2 !important;
  position: sticky;
  transition: 0.5s ease;
  top: 10px;
  width: 100% !important;
  margin: 0% !important;
  padding: 0% !important;
  padding-left: 2% !important;
  padding-right: 2% !important;
}

.class-footer {
  z-index: 2 !important;
  position: sticky;
  transition: 0.5s ease;
  bottom: 0px;
  width: 100% !important;
  margin: 0% !important;
  padding: 0% !important;
  padding-left: 2% !important;
  padding-right: 2% !important;
  background: var(--ion-color-colorPrincipal) !important;
}

/* Footer fijo */
.class-footer {
  --background: var(--ion-color-colorPrincipal) !important;
  background: var(--ion-color-colorPrincipal) !important;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
  border-top: none;
  padding-bottom: env(safe-area-inset-bottom);
  /* safe area iPhone */
}
.class-footer .nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 72px;
  align-items: center;
  justify-items: center;
}
.class-footer .nav a {
  text-decoration: none;
  color: #8a8a8a;
  min-width: 56px;
  height: 52px;
  padding: 6px 0 2px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.class-footer .nav a ion-icon {
  font-size: 22px;
  line-height: 22px;
  color: inherit;
  /* el icono hereda el color del enlace */
}
.class-footer .nav a span {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  /* el icono hereda el color del enlace */
}

.class-fijar-abajo {
  z-index: 2 !important;
  position: sticky;
  transition: 0.5s ease;
  bottom: 30px;
  width: 100% !important;
  margin: 0% !important;
  padding: 0% !important;
  padding-left: 2% !important;
  padding-right: 2% !important;
}

.class-input-card {
  background: var(--ion-color-colorPrincipal) !important;
  border-radius: 15px 15px 15px 15px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-top: 3px !important;
  width: auto !important;
  box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.0941176471);
}

.class-input-card-shade {
  background: var(--ion-color-colorPrincipal-shade) !important;
  border-radius: 15px 15px 15px 15px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-top: 3px !important;
  color: black !important;
}

.class-input-card-terciary-shade {
  background: var(--ion-color-colorTerciario-shade) !important;
  border-radius: 15px 15px 15px 15px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-top: 3px !important;
  color: black !important;
}

.class-input-gray {
  background: rgb(245, 245, 245) !important;
  border-radius: 15px 15px 15px 15px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  margin-top: 3px !important;
  color: black !important;
}

.class-input-date-time {
  --background: var(--ion-color-colorPrincipal) !important;
  border-radius: 15px 15px 15px 15px !important;
  padding-left: -15px !important;
  padding-right: -15px !important;
  margin-top: 3px !important;
  width: auto !important;
  box-shadow: 0 0px 5px 0.5px rgba(0, 0, 0, 0.0941176471);
  height: 37px !important;
}

.class-separador-150px {
  height: 150px !important;
}

.class-separador-100px {
  height: 100px !important;
}

.class-separador-50px {
  height: 50px !important;
}

.class-progress-bar {
  height: 7px !important;
  border-radius: 20px 20px 20px 20px !important;
}

.class-logo-negocio {
  margin-top: -50px !important;
  position: sticky !important;
  z-index: 1 !important;
}

.class-estrellas-valoraciones {
  width: 17px !important;
  height: 17px !important;
  margin: 5px !important;
  margin-top: 0% !important;
  padding: 0% !important;
}

/*  Las del chip de la rejilla de negocios. Van más pequeñas y casi sin margen porque las cinco más el
    número tienen que caber en una tarjeta que es un cuarto del ancho de la pantalla.  */
.class-estrellas-valoraciones-pequenas {
  width: 11px !important;
  height: 11px !important;
  margin: 0px !important;
  padding: 0% !important;
}

/*  Las estrellas y su número van siempre en la misma línea, sin que el número se caiga debajo.  */
.class-estrellas {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
}

/*  EL COLOR DE LAS ESTRELLAS. La imagen nueva las pinta de ÁMBAR, no del verde de marca: así están en
    todos los diseños ( la pastilla "★ 4.8" del catálogo y de la portada, y las cinco de "Reparteat -
    Reseñas" ). El componente ya no las tiñe él con un color="colorSecundario", precisamente para poder
    apagar aquí las que sobran.
    El gris de la apagada es el #e0ddd5 del diseño y no --re-gris-texto: este es un gris de RELLENO y
    no de texto, y el de texto se vería casi negro al lado del ámbar.  */
.class-estrellas ion-icon {
  color: var(--re-ambar);
}

.class-estrellas ion-icon.class-estrellas-apagada {
  color: #e0ddd5;
}

/*  El número de reseñas que el componente pinta al lado, cuando le pasan [total].  */
.class-estrellas ion-label {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-gris-texto);
}

/*  Las estrellas con las que se puntúa, no las que solo enseñan una nota. Se marcan aparte para que
    se vea que son pulsables: las de la ficha de un negocio no lo son.  */
.class-estrellas-pulsables ion-icon {
  cursor: pointer !important;
  width: 28px !important;
  height: 28px !important;
}

.class-header-standar {
  background-color: var(--ion-color-colorPrincipal) !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  border: none !important;
}

.class-header-menu-pc {
  height: 45px !important;
  box-shadow: 0 0px 15px 5px rgba(0, 0, 0, 0.0941176471);
  border: none !important;
}

.class-header-liso {
  box-shadow: none !important;
  border-bottom: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

.class-espacio-20px {
  height: 10px !important;
  margin-top: 20px !important;
}

.contenedor-asientos-horizontal {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

.fila-asiento {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.asiento {
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  background-color: #4caf50;
  color: white;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.asiento.ocupado {
  background-color: #e53935;
  cursor: not-allowed;
}

.asiento.disponible {
  background-color: var(--ion-color-colorSecundario) !important;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  color: black;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.asiento.ocupado {
  background-color: var(--ion-color-colorTerciario) !important;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  color: black;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.asiento.seleccionado {
  background-color: var(--ion-color-colorSecundario) !important;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  color: black;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.asiento.deshabilitado {
  background-color: var(--ion-color-colorPrincipal-shade) !important;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  color: var(--ion-color-colorPrincipal-shade) !important;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

/*****************************************************/
/* IMAGEN NUEVA — HOME DE NEGOCIOS                   */
/*****************************************************/
/*  Piel nueva de RepartEat, sacada del diseño "Reparteat - Home Escritorio".
    Todas las clases llevan el prefijo class-re- para que de un vistazo se distinga lo nuevo de lo
    heredado de localidApp, y todas se apoyan en los tokens --re-* de arriba: aquí no hay ni un color
    ni una tipografía escritos a pelo.
    Viven en global.scss y no en home-negocios.page.scss porque los .scss de página no se tocan
    ( regla de oro nº3 ) y porque las siguientes pantallas que se restilicen van a reutilizarlas.
    El diseño está pensado a 1440px: las medidas que se ven aquí son las de escritorio, y al final del
    bloque hay un único @media que las encoge para el teléfono.  */
.class-re-content {
  --background: var(--re-fondo);
  font-family: var(--re-fuente-texto);
}

.class-re-cuerpo {
  padding: 32px 44px;
}

/*  ESCRITORIO: la portada son DOS columnas, igual que la carta y la ficha de producto. Los
    restaurantes a la izquierda y el panel del pedido a la derecha ( app-panel-pedido, que se
    coloca solo: los dos cuerpos de la página son excluyentes por tiempoCarga, así que a la fila 1
    solo llega uno ).  */
.class-re-home-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--re-ancho-panel-pedido);
  align-items: start;
  min-height: 100vh;
}

.class-re-home-pc > .class-re-cuerpo {
  min-width: 0;
}

.class-re-home-pc > .class-re-panel-pedido {
  grid-column: 2;
  grid-row: 1;
}

/*  TRES tarjetas de negocio por línea y no cuatro: con el panel del pedido al lado, la rejilla
    comparte el ancho y a cuatro las tarjetas se quedan estrechas. Mismo criterio que en la carta
    ( ver class-re-catalogo-cuerpo ).  */
.class-re-home-pc .class-re-rejilla {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/*  Hueco al final para que la barra del carrito, que va fija abajo, no tape las últimas tarjetas.
    En el ordenador no hay barra ( su sitio lo ocupa el panel ), así que el hueco sobra.  */
.class-re-home-cuerpo {
  padding-bottom: 110px;
}

.class-re-home-pc .class-re-home-cuerpo {
  padding-bottom: 40px;
}

.class-re-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.class-re-saludo {
  font-family: var(--re-fuente-titulo);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--re-negro);
  margin: 0;
}

.class-re-subsaludo {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
  margin: 2px 0 0;
}

/*  El buscador sigue siendo el ion-searchbar de siempre ( con su debounce, su Enter y su lector de
    códigos de barras ): lo único que cambia es que se le da forma de pastilla blanca.  */
/*  TODO lleva !important, y no es por vicio. ion-searchbar trae un :host propio que ya define
    --background ( un gris rgba(0,0,0,.07) ), --border-radius: 10px, --box-shadow: none, --color y
    --icon-color. En modo scoped Stencil compila ese :host a UNA CLASE, así que empata en especificidad
    con .class-re-buscador, y los estilos del componente se inyectan en el <head> DESPUÉS de este
    fichero: a igualdad de peso gana el último, o sea Ionic. Sin !important la pastilla sale gris, con
    esquinas de 10px y sin sombra.  */
.class-re-buscador {
  --background: #fff !important;
  --border-radius: 999px !important;
  /*  LA SOMBRA VA EN EL HOST, NO DENTRO. --box-shadow la consume .searchbar-input, que es un
      DESCENDIENTE, y el contain: strict del :host incluye paint containment: recorta a sus
      descendientes contra su caja de relleno. Como aquí abajo le ponemos padding: 0 y una altura de
      44px, la misma que el contenedor interno, no queda ni un píxel de holgura y la sombra se
      recortaba ENTERA — en los catorce buscadores de la app.
      La contención no toca las decoraciones del PROPIO elemento, así que pintándola aquí sí se ve.
      El border-radius es para que siga la forma de la pastilla, que la redondea el input de dentro. */
  --box-shadow: none !important;
  box-shadow: var(--re-sombra-suave);
  border-radius: 999px;
  --color: var(--re-negro) !important;
  --placeholder-color: var(--re-gris-texto) !important;
  --placeholder-opacity: 1 !important;
  /* Ionic lo deja en .5 y el gris del diseño ya es suave */
  --icon-color: var(--re-gris-texto) !important;
  --clear-button-color: var(--re-gris-texto) !important;
  font-family: var(--re-fuente-texto);
  /*  Ancho FIJO de 380px, como el diseño: la fila es un space-between de tres piezas ( saludo,
      buscador y campana ) y es ese ancho fijo el que deja el buscador en medio. Si creciera, se
      pegaría al saludo. El 0 1 deja que encoja en pantallas estrechas, pero nunca que se estire. */
  flex: 0 1 380px;
  min-width: 0;
  /*  OJO: la altura del host es OBLIGATORIA y tiene que ir en píxeles.
      El :host de ion-searchbar lleva contain: strict, que incluye size containment: el elemento se
      dimensiona COMO SI ESTUVIERA VACÍO, así que no hereda el alto de lo que tiene dentro. Con
      height:auto se queda en 0px y, como strict también trae paint containment, recorta el
      contenedor y el input aunque estos midan bien. El buscador desaparece sin dejar rastro.
      44px es el alto de la pastilla del diseño, y coincide con el de .searchbar-input-container.  */
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*  Las medidas de dentro del searchbar hay que ponerlas a mano: en modo ios Ionic lo pinta de 36px de
    alto, con la fuente a 17px y — lo más llamativo — con el icono y el placeholder CENTRADOS mientras
    no tiene el foco, que es el gesto clásico de iOS. El diseño lo quiere de 44px, a 14px y con la lupa
    pegada a la izquierda.
    Se puede llegar a estas clases porque ion-searchbar es "scoped" y no shadow DOM. Llevan !important
    porque Ionic inyecta los estilos del componente en el head DESPUÉS de este fichero y empatan en
    especificidad: sin él, gana el suyo por orden.  */
.class-re-buscador .searchbar-input-container {
  height: 44px !important;
}

.class-re-buscador .searchbar-input {
  font-family: var(--re-fuente-texto) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding-inline-start: 46px !important;
  padding-inline-end: 20px !important;
  text-align: start !important;
}

/*  El margin-inline-start de Ionic es un calc(50% - 60px): es LO QUE CENTRA la lupa. Sin ponerlo a 0
    no hay left que valga.  */
.class-re-buscador .searchbar-search-icon {
  margin-inline-start: 0 !important;
  inset-inline-start: 18px !important;
  left: 18px !important;
  width: 18px !important;
}

.class-re-campana {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 14px;
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}

.class-re-campana ion-icon {
  font-size: 20px;
}

/*  EL DESENFOQUE NO SE PONE AQUÍ, y esto es lo menos evidente de todo el bloque.
    ion-toolbar NO tiene ninguna variable --backdrop-filter: declarársela no hace absolutamente nada.
    El desenfoque de Ionic vive en .header-background, un div que el ion-header solo pinta si lleva
    translucent="true" ( ver header.ios.css ). Por eso el desenfoque se ajusta en
    class-re-cabecera-header, unas líneas más abajo, y aquí solo va el color del cristal.

    Lo que sí es de aquí, y tampoco se ve a simple vista:
    1) El fondo va por VARIABLE CSS. ion-toolbar no pinta su fondo en sí mismo sino en
       .toolbar-background, dentro de su shadow DOM, así que un background: normal no le llega.
    2) El ion-toolbar NO puede llevar color=. Ese atributo pinta un fondo opaco por encima y anula el
       cristal.
    3) El ion-content de la página tiene que llevar fullscreen="true". Si el contenido no pasa por
       debajo de la barra, el desenfoque no tiene nada que desenfocar y se ve un gris plano.

    Sobre la opacidad: .toolbar-background pinta background: var(--background) y encima le aplica
    opacity: calc(var(--opacity) * var(--opacity-scale)). Con translucent, Ionic pone --opacity: .8, así
    que el alfa que se ve de verdad es el de aquí multiplicado por 0,8 ( .62 * .8 = .5 ). Ese medio
    cristal es el que deja que se lea el desenfoque; subirlo lo tapa.  */
ion-toolbar.class-re-cabecera-glass {
  --background: rgba(246, 244, 238, .62);
  --border-width: 0;
  /*  El aire va en el padding del propio ion-toolbar y NO en --padding-top / --padding-bottom: en
      cuanto la cabecera lleva un ion-searchbar dentro, Ionic marca el toolbar con .toolbar-searchbar,
      y en modo ios eso trae un padding-top:0 / padding-bottom:0 declarado directamente sobre
      .toolbar-container dentro del shadow DOM, que deja las dos variables sin efecto justo en las
      barras que tienen buscador.
      El vidrio sigue cubriendo la barra entera porque .toolbar-background va absolute con inset 0, o
      sea contra la caja de PADDING del host.  */
  padding-top: 5px;
  padding-bottom: 5px;
  padding-inline: 20px;
  /*  El primer toolbar de la cabecera tiene que dejar libre la barra de estado: en un teléfono con
      notch, sin sumar el safe-area, la fila se mete debajo.  */
}
ion-header ion-toolbar.class-re-cabecera-glass:first-of-type {
  padding-top: calc(var(--ion-safe-area-top, 0px) + 10px);
}

/*  LA SOMBRA DEL BUSCADOR DENTRO DE LA BARRA. El hueco se pide con MARGEN y no con el padding del
    toolbar de aquí arriba, porque quien recorta es .toolbar-container — un hijo del host, dentro de su
    shadow DOM, con overflow: hidden y contain: content — y ese padding queda por FUERA de él. Además,
    como explica el comentario de arriba, en cuanto la barra lleva un buscador Ionic le clava a ese
    contenedor un padding-top/bottom: 0, así que la pastilla queda a ras del borde que recorta y la
    sombra se corta en plano por abajo. El margen del hijo sí vive dentro de la caja que se recorta.
    Solo abajo: la sombra suave no se sale nada por arriba ( ver --re-aire-sombra ).
    Con !important porque class-re-buscador nace con margin: 0 !important, y en propiedad suelta para
    no llevarse por delante el margin-top que le pone el @media del teléfono.  */
ion-toolbar.class-re-cabecera-glass .class-re-buscador {
  margin-bottom: var(--re-aire-sombra) !important;
}

/*  El desenfoque. Ionic ya pone saturate(180%) blur(20px) en .header-background cuando el header es
    translucent; aquí se sube el radio y se baja la saturación, que a 180% tira los verdes y los ámbares
    de las tarjetas hacia el chillón justo cuando pasan por debajo.
    Va acotado a esta clase y no suelto sobre .header-background para no cambiar el resto de cabeceras
    de la app, que siguen siendo las de siempre.  */
ion-header.class-re-cabecera-header .header-background {
  backdrop-filter: saturate(140%) blur(24px);
  -webkit-backdrop-filter: saturate(140%) blur(24px);
}

/*  La fila de tres piezas: a la izquierda volver o el menú, en medio el título ( o la ciudad, en la
    portada ) y a la derecha las acciones.

    El flex-wrap: nowrap es por el ion-row: la fila se escribe con rejilla en casi todas las páginas
    y ion-row trae flex-wrap: wrap de serie, así que un título largo mandaría las acciones a una
    segunda línea. Quien recorta es el título, con el min-width:0 de class-re-cabecera-titulo.  */
.class-re-fila-cabecera {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/*  La columna del CENTRO de la cabecera, la del título. El min-width:0 es lo que le permite recortar:
    sin él la columna crece con el texto y empuja las pastillas fuera de la barra, que es lo que pasa
    con los títulos que llevan dentro el nombre del negocio o del producto.  */
.class-re-cabecera-titulo {
  min-width: 0;
  text-align: center;
}

.class-re-cabecera-titulo .class-re-titulo-pagina {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-ubicacion {
  text-align: center;
  cursor: pointer;
  min-width: 0;
}

.class-re-ubicacion-etiqueta {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-ubicacion-ciudad {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*  El hueco que ocupa la campana cuando no hay notificaciones. Sin él la ciudad deja de estar centrada,
    porque el space-between reparte con dos piezas en vez de con tres.  */
.class-re-boton-chip-hueco {
  background: none;
  pointer-events: none;
}

/*  La pastilla puede envolver un ion-menu-button para no perder el cableado del menú de Ionic. Al botón
    de dentro hay que quitarle su fondo y su tamaño para que se vea la pastilla y no él.  */
.class-re-boton-chip ion-menu-button,
.class-re-boton-chip ion-button {
  --background: transparent;
  --background-hover: transparent;
  --background-activated: transparent;
  --background-focused: transparent;
  --box-shadow: none;
  --color: inherit;
  --padding-start: 0;
  --padding-end: 0;
  --border-radius: 12px;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 18px;
}

.class-re-banner {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
  padding: 36px 44px;
  color: #fff;
  margin-bottom: 28px;
  cursor: pointer;
}

/*  Los dos círculos son decoración del degradado, no contenido: van detrás del texto y no reciben el
    clic, que es del banner entero.  */
.class-re-banner-circulo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.class-re-banner-circulo-grande {
  width: 220px;
  height: 220px;
  background: rgba(255, 255, 255, 0.1);
  top: -70px;
  right: 60px;
}

.class-re-banner-circulo-pequeno {
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.08);
  bottom: -50px;
  right: 220px;
}

.class-re-banner-titulo {
  position: relative;
  font-family: var(--re-fuente-titulo);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  max-width: 420px;
  margin: 0;
}

.class-re-banner-texto {
  position: relative;
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  opacity: 0.9;
  margin: 8px 0 0;
}

.class-re-banner-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--re-verde-oscuro);
  padding: 11px 26px;
  border-radius: 999px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  margin-top: 18px;
}

/*  Fila de chips con scroll horizontal. No lleva Swiper: una fila de pastillas no necesita un
    carrusel, y el overflow-x del navegador ya arrastra con el dedo igual de bien.

    El flex-wrap: nowrap NO es redundante. El carril se usa sobre un div ( que no envuelve por
    defecto ) pero también sobre un ion-row, y ion-row trae flex-wrap: wrap de serie: sin esto, en
    las cabeceras con muchas píldoras ( los ~20 filtros de productos ) las pastillas se apilarían en
    cinco líneas en vez de deslizarse, y la barra se comería media pantalla.  */
/*  El padding-block es para la SOMBRA de lo que va dentro ( las pestañas la llevan ): un eje en auto
    convierte el otro en auto también, así que el carril recorta arriba y abajo, y sin este aire la
    sombra de las pastillas se corta contra el borde. Va en la clase base a propósito, para que lo
    hereden todos los carriles de la app y no haya que acordarse en cada página.  */
.class-re-carril,
.class-re-carril-platos {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding-block: var(--re-aire-sombra);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.class-re-carril::-webkit-scrollbar,
.class-re-carril-platos::-webkit-scrollbar {
  display: none;
}

.class-re-chip {
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  cursor: pointer;
}

.class-re-chip-activo {
  background: var(--re-verde);
  color: #fff;
}

.class-re-seccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 14px;
}

.class-re-seccion-titulo {
  font-family: var(--re-fuente-titulo);
  font-size: 19px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

.class-re-seccion-enlace {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 600;
  color: var(--re-verde-oscuro);
  cursor: pointer;
}

.class-re-rejilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/*  El position: relative es para poder colgar de ella la pastilla de "Cerrado hoy", que va en absolute
    sobre la foto. No cambia la caja ni cómo se coloca la tarjeta en la rejilla.  */
.class-re-tarjeta {
  position: relative;
  border-radius: var(--re-radio-tarjeta);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--re-sombra-suave);
  cursor: pointer;
}

/*  LA PASTILLA DE "CERRADO HOY" sobre la foto de la tarjeta de negocio. Va AHÍ y no en el cuerpo blanco
    porque la rejilla se lee de un vistazo y el cuerpo ya está ocupado por el nombre, la nota y la
    dirección. El color y la forma los pone class-re-comanda-etiqueta con su modificador rojo, que es la
    misma pastilla de estado que se usa en las comandas y en las fichas de usuario: aquí solo se la
    coloca. Mismo truco que class-re-plato-badge sobre la foto de un producto.  */
.class-re-tarjeta-etiqueta {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

/*  LA FOTO APAGADA es la otra mitad del mensaje, y la que se lee antes que el texto: dice "hoy aquí no
    hay nada que pedir" de un vistazo. Se aplica igual a la foto de verdad y al hueco de marca de los
    negocios sin foto, y gana por especificidad al verde de class-re-foto-monocroma.
    Apagar la foto y NO la tarjeta entera es deliberado: el nombre, la nota y la dirección se tienen que
    poder leer perfectamente, que es justo lo que el cliente viene a ver de un negocio cerrado.  */
.class-re-tarjeta-foto.class-re-foto-cerrada {
  filter: grayscale(1) opacity(0.65);
}

.class-re-tarjeta-foto {
  height: 230px;
  width: 100%;
  object-fit: cover;
  display: block;
  /* Mientras la foto carga se ve el degradado de marca en vez de un hueco blanco */
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
}

/*  El hueco de los negocios que no tienen ni foto ni logo. Es el mismo degradado que ya hacía de fondo
    mientras carga la foto, así que la tarjeta no cambia de forma: solo se le pone el rótulo encima.
    El filtro es el .washed del diseño: deja el color lavado para que el hueco se lea como lo que es, un
    sitio donde todavía no hay foto, y no como una foto de verdad.  */
.class-re-tarjeta-foto-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}

.class-re-tarjeta-foto-vacia-ambar {
  background: linear-gradient(135deg, var(--re-ambar), var(--re-ambar-oscuro));
}

.class-re-tarjeta-cuerpo {
  padding: 14px;
}

/* El logo y los textos a la izquierda, y la nota a la derecha */
.class-re-tarjeta-linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/*  EL LOGO DEL NEGOCIO DENTRO DE LA TARJETA. Cuadrado y pequeño, que es su formato: la foto grande de
    arriba es la imagen de portada, apaisada.
    El degradado de marca es el fondo del hueco, y se ve tal cual en los negocios que todavía no han
    subido logo; el <img> va dentro con un *ngIf, así que no hay imagen rota que enseñar.  */
.class-re-tarjeta-logo {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
}

.class-re-tarjeta-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*  El nombre y la meta, apilados entre el logo y la nota. El min-width: 0 es imprescindible: sin él
    este bloque no baja de su ancho de contenido dentro del flex y los puntos suspensivos del nombre y
    de la meta no llegarían a aparecer nunca ( se saldría la nota de la tarjeta ).  */
.class-re-tarjeta-textos {
  flex: 1;
  min-width: 0;
}

.class-re-tarjeta-nombre {
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
  /* Los nombres largos se cortan con puntos suspensivos para que todas las tarjetas de la fila
     midan lo mismo. El min-width: 0 no sobra: dentro de class-re-tarjeta-linea, que es un flex, un
     hijo no baja de su ancho de contenido si no se le dice, y los puntos suspensivos no llegarían a
     aparecer nunca: sería la nota la que se saldría de la tarjeta. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  La NOTA del diseño: una estrella y la media, en una pastilla ámbar.
    No usa app-estrellas a propósito: ese componente pinta las cinco estrellas y el número de reseñas,
    que es lo que hace falta en la pantalla de reseñas y en la tarjeta de plato, pero al lado del
    nombre de un restaurante no cabe y encima se lee peor que un número.  */
.class-re-tarjeta-nota {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.class-re-tarjeta-nota ion-icon {
  font-size: 11px;
}

.class-re-tarjeta-meta {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  Chip de valoración de la tarjeta: la media del negocio y cuánta gente lo ha reseñado. Abre sus
    reseñas. No encoge nunca (flex-shrink: 0) porque el nombre del negocio, que va a su izquierda, ya
    se recorta solo con puntos suspensivos y si no se lo comería.  */
.class-re-tarjeta-chip-valoracion {
  flex-shrink: 0;
  height: auto;
  margin: 0;
  padding: 4px 8px;
  cursor: pointer;
}

.class-re-tarjeta-plato-precio {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: var(--re-verde-oscuro);
  margin: 6px 0 0;
}

/*  La rejilla de productos de la home ( los resultados de una búsqueda y el escaparate de dentro de
    un negocio ). A diferencia de las tarjetas de negocio, que son verticales, el producto va en FILA:
    foto cuadrada a la izquierda, el texto en medio y el botón de añadir a la derecha. Así caben dos
    por línea sin que la página se convierta en un muro de fotos, que es lo que pide el diseño: aquí
    lo que se compara de un vistazo es el nombre y el precio, no la foto.  */
.class-re-rejilla-platos {
  display: grid;
  /*  minmax( 0, 1fr ) y no 1fr a secas: el mínimo por defecto de una columna es su contenido, así que
      un título largo ensancha la columna y la rejilla se sale de la pantalla en vez de partir el
      texto. Con el mínimo a 0 la columna manda y es el texto el que se adapta.  */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/*  La MISMA lista de productos, pero en el teléfono: ahí no es una rejilla, es un carril que se
    arrastra con el dedo y va ENCIMA de los restaurantes ( home-negocios la pinta con una clase o con
    la otra según datalocal.esEscritorio ). Así los productos se alcanzan de un vistazo y la rejilla de
    negocios sigue viéndose sin bajar.
    Hereda de class-re-carril el flex, el overflow y la barra oculta; aquí solo va lo que cambia por
    llevar tarjetas en vez de pastillas.
    Las medidas de aquí son las de la TABLET: esEscritorio también es false en un iPad, y allí
    class-re-cuerpo sigue con sus 44px de padding. El teléfono se ajusta en el @media del final.  */
.class-re-carril-platos {
  /*  overflow-y hidden y aire arriba y abajo: overflow-x auto vuelve 'auto' el otro eje, y sin este
      padding el navegador recortaría la sombra de las tarjetas. Al carril de chips no le pasaba
      porque las pastillas no llevan sombra.  */
  overflow-y: hidden;
  padding-block: 4px 10px;
  align-items: stretch;
  /*  Que arrastre de canto a canto de la pantalla: los márgenes negativos lo sacan del padding del
      cuerpo y el padding se lo devuelve por dentro, el mismo truco que class-re-tablero.  */
  margin-inline: -44px;
  padding-inline: 44px;
  /*  Sin encaje, con tarjetas tan anchas el carril se queda siempre parado a media tarjeta.  */
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 44px;
}

.class-re-carril-platos > .class-re-plato {
  flex: 0 0 320px;
  scroll-snap-align: start;
}

/*  El "ver más" del teléfono es la última tarjeta del carril, no un botón debajo: dentro de un carril
    no hay "debajo". Se queda con su ancho natural en vez de estirarse como una tarjeta más.  */
.class-re-plato-ver-mas {
  flex: 0 0 auto;
  align-self: center;
  scroll-snap-align: start;
}

.class-re-plato {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--re-radio-tarjeta);
  background: #fff;
  box-shadow: var(--re-sombra-suave);
  cursor: pointer;
}

/*  Solo existe para colgar de ella el badge del descuento, que va en absolute sobre la foto.  */
.class-re-plato-foto-caja {
  position: relative;
  flex-shrink: 0;
}

.class-re-plato-foto {
  height: 72px;
  width: 72px;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  /* Mientras la foto carga se ve el degradado de marca en vez de un hueco blanco */
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
}

/*  El hueco de los productos que no tienen foto. No lleva nada dentro: en un cuadrado de 72px no cabe
    un rótulo como el de las tarjetas de negocio. El degradado verde ya lo pone class-re-plato-foto,
    que es el mismo que se ve mientras carga una foto de verdad; aquí solo se lava el color, para que
    el hueco se lea como lo que es y no como una foto.  */
.class-re-plato-foto-vacia {
  filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94);
}

.class-re-plato-foto-vacia-ambar {
  background: linear-gradient(135deg, var(--re-ambar), var(--re-ambar-oscuro));
}

.class-re-plato-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--re-ambar);
  color: #fff;
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
}

/*  El min-width: 0 no sobra: sin él un hijo de un flex no baja de su ancho de contenido y los puntos
    suspensivos del nombre y de las líneas grises no llegarían a aparecer nunca; sería el botón de
    añadir el que se saldría de la tarjeta.  */
.class-re-plato-cuerpo {
  flex: 1;
  min-width: 0;
}

/*  El nombre del producto se lee ENTERO, en tantas líneas como haga falta: aquí no es una etiqueta al
    lado de una nota como en la tarjeta de negocio, es lo que se está comprando, y muchos productos
    llevan los ingredientes en el propio título. Por eso se le quita el nowrap con puntos suspensivos
    que trae class-re-tarjeta-nombre. El break-word es para el título que viene sin espacios.  */
.class-re-plato-cuerpo .class-re-tarjeta-nombre {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  line-height: 1.3;
}

/*  La descripción del producto dentro de su tarjeta. Se corta a DOS LÍNEAS: son los ingredientes o
    el detalle, y muchos negocios escriben un párrafo entero, que desbordaría la tarjeta y dejaría
    todas las filas de la rejilla de un alto distinto. Quien quiera leerla completa abre la ficha.
    El recorte es de CSS y no de una función: así corta por donde de verdad se acaba el hueco, sea
    cual sea el ancho de la pantalla, en vez de por un número fijo de letras.  */
.class-re-plato-descripcion {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  line-height: 1.4;
  margin: 3px 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.class-re-plato-linea-precio {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}

/*  El precio ya trae su propio margen de arriba porque en la tarjeta de "Vuelve a pedir" va suelto;
    aquí lo pone la línea, así que se lo quitamos.  */
.class-re-plato-linea-precio .class-re-tarjeta-plato-precio {
  margin: 0;
}

.class-re-plato-precio-tachado {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  text-decoration: line-through;
}

.class-re-plato-consultar {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-verde-oscuro);
  margin: 6px 0 0;
}

.class-re-plato-boton {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
  border-radius: 999px;
  background: var(--re-ambar);
  color: #fff;
  font-size: 18px;
}

.class-re-plato-boton-inactivo {
  opacity: 0.5;
  pointer-events: none;
}

.class-re-skeleton-foto {
  height: 130px;
  width: 100%;
  margin: 0;
  border-radius: 0;
}

.class-re-skeleton-linea {
  height: 13px;
  border-radius: 6px;
}

.class-re-skeleton-plato-foto {
  height: 72px;
  width: 72px;
  margin: 0;
  border-radius: 18px;
}

.class-re-sin-negocios {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  color: var(--re-gris-texto);
  text-align: center;
  max-width: 520px;
  margin: 40px auto;
  line-height: 1.6;
}

/*  El diseño de móvil ( "Reparteat - Home" ) es el mismo con menos aire, una sola columna de tarjetas
    y el saludo encima del buscador en vez de al lado.  */
@media (max-width: 767px) {
  .class-re-cuerpo {
    padding: 16px 20px 30px;
  }
  .class-re-cabecera {
    margin-bottom: 14px;
  }
  .class-re-saludo {
    font-size: 20px;
  }
  /*  En el teléfono el buscador va en SU PROPIA LÍNEA y a todo lo ancho, como en "Reparteat - Home":
      arriba el saludo y la campana, y debajo el buscador.
      El flex-basis del 100% es lo que lo empuja a la línea siguiente ( por eso la fila NO puede
      llevar flex-wrap:nowrap ), y el order lo manda al final para que la campana no se quede sola en
      una tercera línea, ya que en el marcado el buscador va antes que ella.  */
  .class-re-buscador {
    flex: 1 1 100%;
    order: 1;
    margin-top: 14px !important;
  }
  .class-re-banner {
    border-radius: var(--re-radio-tarjeta);
    padding: 24px 22px;
  }
  .class-re-banner-titulo {
    font-size: 22px;
  }
  .class-re-banner-circulo-pequeno {
    display: none;
  }
  .class-re-rejilla {
    grid-template-columns: 1fr;
  }
  /*  Los productos también bajan a una columna: en el teléfono dos filas por línea dejarían el
      nombre en dos letras y unos puntos suspensivos.
      OJO: esta rejilla ya casi no se ve en el teléfono, porque allí los productos se pintan en el
      carril de abajo. Se queda por si alguna vez se navega con la ventana estrecha en un equipo que
      SÍ es escritorio, que es el único caso en el que se juntan las dos cosas.  */
  .class-re-rejilla-platos {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /*  El sangrado del carril se ajusta al padding que tiene aquí class-re-cuerpo ( 20px, no 44px ), y
      la tarjeta ocupa casi toda la pantalla dejando asomar la siguiente: así se entiende que hay más
      y que se arrastra.  */
  .class-re-carril-platos {
    margin-inline: -20px;
    padding-inline: 20px;
    scroll-padding-inline-start: 20px;
  }
  .class-re-carril-platos > .class-re-plato {
    flex: 0 0 78vw;
  }
  .class-re-tarjeta-foto {
    height: 150px;
  }
  /*  En móvil la tarjeta ocupa el ancho entero y la foto baja a 150px: el logo baja con ella para
      que no se coma el sitio del nombre.  */
  .class-re-tarjeta-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
}
/*  Tablet: dos columnas. El diseño no la dibuja, pero sin este escalón se pasa de cuatro columnas a
    una de golpe y las tarjetas quedan gigantes.  */
@media (min-width: 768px) and (max-width: 1199px) {
  .class-re-rejilla {
    grid-template-columns: repeat(2, 1fr);
  }
  .class-re-rejilla-platos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/*  ESCRITORIO: dos columnas, igual que la ficha de producto ( ver class-re-producto-pc ). La carta a
    la izquierda y el panel del pedido a la derecha ( el componente app-panel-pedido, que se coloca
    solo en la segunda columna por ser el segundo hijo: lo de quedarse fijo al bajar lo pone ya su
    propia clase, class-re-panel-pedido ).
    minmax(0, 1fr) y no 1fr a secas: un 1fr pelado es minmax(auto, 1fr), así que un carril de chips
    largo estiraría la columna y sacaría scroll horizontal a toda la página.  */
.class-re-catalogo-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--re-ancho-panel-pedido);
  align-items: start;
  min-height: 100vh;
}

.class-re-catalogo-columna {
  min-width: 0;
}

/*  En el ordenador no hay barra de carrito abajo ( su sitio lo ocupa el panel de la derecha ), así
    que el hueco que se le deja al final de la carta sobra.  */
.class-re-catalogo-pc .class-re-catalogo-cuerpo {
  padding-bottom: 40px;
}

/*  El HERO ocupa el sitio de la cabecera: esta página no tiene ion-header, así que la foto sube
    hasta arriba del todo y pasa por debajo de la barra de estado ( de ahí el padding de seguridad,
    que es lo que deja los botones por debajo del reloj y de la muesca ).
    El degradado de fondo es el mismo que el de las tarjetas de negocio: se ve mientras carga la
    foto, y se queda si el negocio no tiene ninguna.  */
.class-re-catalogo-hero {
  position: relative;
  height: 220px;
  padding-top: var(--ion-safe-area-top, 0);
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
  overflow: hidden;
}

.class-re-catalogo-hero-foto {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  /*  Lavado, para que el texto blanco de los botones y del anuncio se lea encima de cualquier
      foto, por clara que sea  */
  filter: saturate(0.9) brightness(0.85);
}

.class-re-catalogo-hero-acciones {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
}

/*  Pastillas de vidrio: el fondo blanco translúcido y el desenfoque las separan de la foto sin
    taparla, que es lo que dibuja el diseño.  */
.class-re-catalogo-hero-boton {
  background: rgba(255, 255, 255, 0.9);
  color: var(--re-negro);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/*  El anuncio de entrada del negocio, abajo del hero y encima de la foto. Sale además como alerta
    al entrar; esta es la copia que se queda a la vista.  */
.class-re-catalogo-anuncio {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--re-sombra-suave);
}

.class-re-catalogo-anuncio-imagen {
  height: 40px;
  width: 40px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.class-re-catalogo-anuncio-texto {
  min-width: 0;
}

.class-re-catalogo-anuncio-titulo {
  font-family: var(--re-fuente-titulo);
  font-size: 14px;
  color: var(--re-negro);
  margin: 0;
}

.class-re-catalogo-anuncio-mensaje {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 2px 0 0;
  line-height: 1.4;
}

/*  Hueco abajo para que la barra del carrito no tape la última fila de productos  */
.class-re-catalogo-cuerpo {
  padding-top: 20px;
  padding-bottom: 110px;
}

/*  El nombre y la dirección a la izquierda, las estrellas a la derecha. min-width: 0 en el texto
    para que un nombre largo se parta en vez de empujar las estrellas fuera.  */
.class-re-catalogo-ficha {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

/*  Sin cursor: pointer. Pulsar el nombre abría la pantalla de información del negocio, que ya no
    existe: sus datos están ahora aquí mismo, en class-re-catalogo-info.  */
.class-re-catalogo-ficha-texto {
  min-width: 0;
}

/*  El logo del restaurante en la ficha, al lado del nombre. Igual que el de la tarjeta de la pantalla
    de inicio pero más grande, porque aquí es la cabecera del negocio y no una tarjeta de una rejilla.
    Va dentro del blanco, sin pisar el hero: ahí arriba manda la imagen de portada.  */
.class-re-catalogo-ficha-logo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
}

.class-re-catalogo-ficha-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*  Las estrellas de la ficha van a la mitad de tamaño que las de la pantalla de opiniones: aquí no se
    puntúa, solo se enseña la nota y se entra a las reseñas, así que no tienen que pesar tanto al lado
    del nombre. Se baja solo AQUÍ y no en .class-estrellas-pulsables, que las comparte con opiniones,
    donde sí son el control con el que se vota y tienen que ser grandes para acertarles con el dedo.
    El !important y los dos niveles de selector son para ganarle a .class-estrellas-pulsables ion-icon.
    El número no baja a la mitad ( 13px -> 10px, no 6.5px ): a la mitad no se leería.  */
.class-re-catalogo-ficha .class-estrellas ion-icon {
  width: 14px !important;
  height: 14px !important;
  margin: 2px !important;
}

.class-re-catalogo-ficha .class-estrellas ion-label {
  font-size: 10px;
}

/*  HORARIO, TIEMPO DE ENTREGA Y TELÉFONO, debajo del nombre del restaurante. Es lo que antes vivía en
    la pantalla de información del negocio.

    Etiqueta a la izquierda y dato a la derecha, sin recuadro ni fondo propio: esto no es una tarjeta
    aparte sino la continuación de la ficha, y lo que lo separa del buscador de abajo es el margen, no
    una caja.

    EL TOPE DE ANCHO ES LO QUE MANTIENE JUNTAS LAS DOS MITADES. La hora y el botón de llamar van
    alineados a la derecha para que todas las filas caigan en la misma vertical, pero sin tope, en el
    ordenador esa derecha es el ancho entero de la columna de la carta y el teléfono se quedaba a un
    palmo de su botón. Con el tope, cada dato queda al lado de su etiqueta y la alineación se conserva.
    No se limita en el teléfono, donde la pantalla ya es más estrecha que el tope.  */
.class-re-catalogo-info {
  padding: 0;
  margin-top: 14px;
  max-width: 340px;
}

.class-re-catalogo-info-fila {
  align-items: center;
  padding: 6px 0;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-negro);
}

/*  Sin el padding de ion-col, también en las filas anidadas del horario: con él, cada línea del
    bloque quedaba sangrada y el conjunto se leía torcido.  */
.class-re-catalogo-info-fila ion-col {
  padding: 0;
}

.class-re-catalogo-info-fila ion-row + ion-row {
  margin-top: 2px;
}

/*  Los días en gris y las horas en negro: de un vistazo se leen las horas, que es lo que se busca.  */
.class-re-catalogo-info-dias {
  color: var(--re-gris-texto);
}

.class-re-catalogo-info-horas {
  font-weight: 600;
  white-space: nowrap;
}

/*  El chip de llamar se queda con su tamaño de siempre ( class-re-boton-chip ): el flex evita que la
    columna de Ionic lo estire y le deforme el cuadrado.  */
.class-re-catalogo-info-fila > .class-re-boton-chip {
  flex: 0 0 auto;
}

/*  PEDIR EN LA WEB DEL NEGOCIO — el bloque que ocupa el sitio de la carta cuando el negocio no recibe
    pedidos por la app ( ver utilidades2.negocioPideEnSuWeb ). Va pegado a la ficha de datos de arriba
    y con aire por abajo, para que se lea como una pieza y no como una fila más del horario.  */
.class-re-catalogo-web {
  padding: 0;
  margin: 20px 0 8px;
}

/*  EL BOTÓN GRANDE: es LA acción de esa pantalla, así que va con el verde macizo a todo el ancho y no
    con el verde claro de las acciones sueltas ( class-re-boton-panel ).
    No se reutiliza class-re-boton-guardar, que es idéntico de aspecto: ese es el botón de los
    formularios, y aquí no se guarda nada — el nombre acabaría mintiendo en la plantilla.  */
.class-re-catalogo-web-boton {
  --background: var(--re-verde);
  --background-activated: var(--re-verde-oscuro);
  --background-hover: var(--re-verde-oscuro);
  --color: #fff;
  --border-radius: 999px;
  --box-shadow: var(--re-sombra-media);
  font-family: var(--re-fuente-texto);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 52px;
  width: 100%;
  margin: 12px 0 0;
}

.class-re-catalogo-nombre {
  font-family: var(--re-fuente-titulo);
  font-size: 24px;
  color: var(--re-negro);
  margin: 0;
}

/*  Aire entre la dirección y el buscador: pegados se leían como una sola pieza. El !important es
    obligado porque .class-re-buscador nace con margin: 0 !important ( en la portada va dentro de una
    fila y cualquier margen lo descuadraría ).  */
.class-re-catalogo-cuerpo > .class-re-buscador {
  margin-top: 20px !important;
}

.class-re-catalogo-carril {
  margin: 16px 0 10px;
}

/*  En el ordenador el carril NO scrollea: no hay dedo que arrastrar y la barra va oculta, así que
    los chips que se salieran no habría forma de alcanzarlos. En vez de sacar flechas, se dejan
    caer en varias líneas, que además caben de sobra.  */
@media (min-width: 768px) {
  .class-re-catalogo-carril {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 10px;
  }
  /*  DOS columnas de productos, no tres: en esta pantalla la rejilla comparte el ancho con el
      panel del pedido, y con tres columnas las tarjetas se quedan tan estrechas que el nombre del
      producto baja letra a letra.  */
  .class-re-catalogo-cuerpo .class-re-rejilla-platos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.class-re-catalogo-orden {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 14px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  cursor: pointer;
}

/*  Los títulos de categoría de "Todo". Menos aire que un class-re-seccion normal: aquí van entre
    bloques de productos, no separando zonas de la página.  */
.class-re-catalogo-seccion {
  margin: 22px 0 10px;
}

/*  Con la barra del carrito puesta, el botón flotante del chat se sube para no quedar debajo de ella.
    OJO: hoy no la usa nadie, porque el ion-fab del chat está comentado en catalogo.page.html.  */
.class-re-catalogo-fab-subido {
  bottom: calc(80px + var(--ion-safe-area-bottom, 0px));
}

@media (max-width: 767px) {
  .class-re-catalogo-hero {
    height: 340px;
  }
  .class-re-catalogo-nombre {
    font-size: 20px;
  }
  /*  Las estrellas siguen a la derecha del nombre también en el teléfono: es donde se buscan para
      valorar. Lo que cede es el nombre, que se parte en varias líneas.  */
  .class-re-catalogo-ficha {
    gap: 10px;
  }
}
/*  La columna blanca del diseño. Mismo trato que el panel de la ficha de producto: fondo blanco y
    línea de separación a la izquierda. Se queda fija mientras se baja por la página: align-self:
    start + sticky + alto de pantalla es lo que hace que se quede a la vista en vez de estirarse
    hasta el alto de la columna de al lado y dejar el botón a dos pantallas de distancia.
    display: flex no es decorativo: un custom element es inline por defecto.
    overflow-y: auto porque con varios carritos apilados el contenido pasa del alto de pantalla.  */
.class-re-panel-pedido {
  /*  Las ion-col de dentro ( los nombres, las líneas de producto, el total ) traen 5px de padding
      lateral de Ionic, y eso deja el contenido corto por los dos lados. Se apaga aquí, en el
      host, porque la variable HEREDA: en la ficha de producto ya venía a 0 desde
      class-re-producto, pero en la portada y en la carta el panel cuelga de un div pelado y nadie
      la reseteaba, así que el mismo ticket se veía 10px más estrecho en dos de las tres páginas. */
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  /*  El relleno vertical no es decorativo: los botones de dentro llevan sombra MEDIA, que se sale
      12px de su caja, y el overflow-y de aquí abajo se la recortaría contra el canto del panel.  */
  padding: var(--re-aire-sombra-media) 32px;
  background: #fff;
  border-left: 1px solid #eee;
  align-self: start;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /*  Los carritos salen del panel con márgenes negativos para ir a sangre, así que hay que cortar
      lo que se salga por los lados o aparecería scroll horizontal.  */
  overflow-x: hidden;
}

.class-re-panel-pedido-titulo {
  display: block;
}

.class-re-panel-pedido-vacio {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
  line-height: 1.6;
  margin: 14px 0 0;
}

/*  Los carritos van seguidos DENTRO DE LA MISMA COLUMNA, sin tarjetas: los que no están elegidos
    solo enseñan el negocio y su total, y el elegido, que va abajo del todo, despliega su detalle.
    Los márgenes negativos son para que las bandas y las líneas lleguen A SANGRE, de un borde a otro
    de la columna, y no se queden cortas por el padding del panel; el padding lateral devuelve el
    texto a su sitio ( el mismo recurso que usa la foto de la ficha de producto ).  */
.class-re-panel-pedido-carrito {
  display: flex;
  align-items: flex-start;
  margin: 0 -32px;
  /*  Más hueco abajo que arriba: el nombre se queda en la parte alta de la banda y le deja sitio
      libre por debajo al degradado, que es donde tiene que verse.  */
  padding: 12px 32px 22px;
  cursor: pointer;
}

/*  Los carritos que NO están elegidos llevan una banda de fondo que sube desde abajo: del gris
    hundido, pegado al borde inferior, a nada. Se hunden hacia el fondo y dejan claro de un vistazo
    cuál es el que estás mirando y cuáles están esperando su turno.

    Solo el ÚLTIMO CUARTO del alto: antes arrancaba a media altura y, con una línea encima
    separando cada carrito, la pila quedaba pesada. La sombra sola, corta y sin raya, ya separa de
    sobra — y con varios carritos seguidos no se acumula en una escalera de bandas grises.

    Es un FONDO y no una máscara sobre el texto: lo que se difumina es la banda, y el nombre del
    negocio se lee igual de nítido que el del carrito abierto ( con máscara, el texto se iba con
    ella y el nombre acababa a medio borrar ).  */
.class-re-panel-pedido-carrito-apilado {
  background: linear-gradient(to bottom, transparent 75%, var(--re-fondo-hundido));
}

/*  El carrito abierto es el único que no se puede pulsar ( ya está elegido ) y el único que no es
    una fila, porque dentro lleva sus líneas, el total y el botón. Tampoco lleva banda: queda en
    blanco, que es lo que lo hace destacar sobre los demás.  */
.class-re-panel-pedido-carrito-abierto {
  display: block;
  cursor: default;
  /*  Y tampoco va a sangre, al revés que los apilados: aquí no hay banda ni línea que tenga que
      llegar de borde a borde, y el sangrado le hacía daño. Este carrito es una ion-col, que viene
      con max-width: 100% de Ionic: con el margen negativo la caja NO se ensancha esos 64px, pero
      el padding de 32px sí se aplica, así que las líneas, el total y el botón se quedaban 64px
      cortos y descolocados hacia la izquierda ( a los apilados no les pasa porque son ion-row,
      que no lleva max-width ). Sin márgenes ni padding lateral el contenido ocupa el ancho útil
      del panel, y el nombre sigue alineado con los de la baraja.  */
  margin: 0;
  padding: 12px 0 22px;
}

.class-re-panel-pedido-negocio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--re-fuente-titulo);
  font-size: 14px;
  color: var(--re-negro);
}

/*  El ticket que acompaña al nombre del negocio. Hereda el color del texto a propósito: es una
    marca de "esto es un pedido", no un icono de acción al que haya que ir.  */
.class-re-panel-pedido-negocio ion-icon {
  flex-shrink: 0;
  font-size: 16px;
}

/*  En el carrito abierto el negocio es un encabezado y no una fila más, así que se despega de las
    líneas que vienen debajo.  */
.class-re-panel-pedido-negocio-abierto {
  margin-bottom: 6px;
}

.class-re-panel-pedido-linea {
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: #7a7870;
}

.class-re-panel-pedido-separador {
  display: block;
  height: 1px;
  margin: 10px 0;
  background: #f1efe8;
}

.class-re-panel-pedido-total {
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  color: var(--re-negro);
}

.class-re-panel-pedido-boton {
  display: block;
  margin-top: 20px;
  padding: 15px;
  border-radius: 999px;
  background: var(--re-verde);
  color: #fff;
  text-align: center;
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--re-sombra-media);
  cursor: pointer;
}

/*  Va fija sobre el contenido, no dentro de él, para que se vea siempre mientras se pide. En el
    marcado está FUERA del ion-content, así que se posiciona respecto a la ventana.
    El host solo pone la POSICIÓN, y el fondo verde lo pinta la caja de dentro: sin carritos el
    componente no pinta nada y así no queda una pastilla verde vacía flotando.  */
.class-re-panel-pedido-barra {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(20px + var(--ion-safe-area-bottom, 0px));
  z-index: 10;
}

.class-re-panel-pedido-barra-caja {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 24px;
  border-radius: 999px;
  background: var(--re-verde);
  color: #fff;
  box-shadow: var(--re-sombra-media);
  cursor: pointer;
}

.class-re-panel-pedido-barra-caja ion-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

/* GEOLOCALIZACIÓN DE REPARTIDORES — botón y aviso de jornada de reparto en curso
   (los usa la cabecera de pedidos-negocio en modo repartidor) */
.class-icono-jornada-activa {
  color: var(--ion-color-colorSecundario-tint) !important;
}

/*  El aviso ya no vive dentro de un ion-toolbar de la cabecera sino dentro del contenido, así que
    ahora se pinta él mismo como una pastilla: de barra a lo ancho de la pantalla no queda nada.  */
.class-aviso-jornada-reparto {
  background-color: var(--ion-color-colorSecundario);
  color: var(--ion-color-colorSecundario-contrast);
  padding: 10px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/*****************************************************/
/* IMAGEN NUEVA — FORMULARIOS Y PERFIL               */
/*****************************************************/
/*  Sacado del diseño "Reparteat - Perfil", que trae marco de teléfono y de ordenador.
    Casi nada de esto es "de perfil": la cabecera de página, las pastillas de acción, el panel blanco y
    el campo de formulario son las piezas con las que se van a vestir el resto de páginas, así que están
    nombradas por lo que son y no por dónde salieron.
    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-perfil-pc, que la página pone según datalocal.esEscritorio.  */
.class-re-cabecera-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 4px;
}

.class-re-titulo-pagina {
  font-family: var(--re-fuente-titulo);
  font-size: 17px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

/*  Pastilla cuadrada de acción. Es la forma que el diseño usa para volver, para los ajustes y para la
    campana de la home: mismo tamaño, cambia el color según lo que haga.  */
.class-re-boton-chip {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.class-re-boton-chip ion-icon {
  font-size: 18px;
}

.class-re-boton-chip-verde {
  background: var(--re-verde-claro);
  color: var(--re-verde-oscuro);
}

.class-re-boton-chip-ambar {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

.class-re-identidad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
}

.class-re-identidad-texto {
  text-align: center;
}

.class-re-avatar {
  position: relative;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
}

.class-re-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  box-shadow: var(--re-sombra-media);
  /* Mientras la foto carga ( o si el usuario no tiene ) se ve el degradado de marca */
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
}

.class-re-avatar-camara {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--re-ambar);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
}

.class-re-avatar-camara ion-icon {
  font-size: 13px;
}

.class-re-nombre-usuario {
  font-family: var(--re-fuente-titulo);
  font-size: 18px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

.class-re-email-usuario {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-estadisticas {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.class-re-estadistica {
  flex: 1;
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--re-sombra-suave);
}

/*  display: block en las dos, y no solo cuando la pastilla la pinta un <p>. En mi-perfil son <p>,
    que ya es de bloque, pero las pantallas que las montan con ion-label ( publicidad, repartos… )
    los tienen INLINE por ser labels sueltos fuera de un ion-item: la cifra y su etiqueta salían
    seguidas en el mismo renglón, "24 Impresiones", en vez del número grande con su texto debajo.  */
.class-re-estadistica-cifra {
  display: block;
  font-family: var(--re-fuente-titulo);
  font-size: 17px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

.class-re-estadistica-etiqueta {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  color: var(--re-gris-texto);
  margin: 0;
}

/* La cifra que el diseño destaca en verde */
.class-re-estadistica-destacada .class-re-estadistica-cifra {
  color: var(--re-verde-oscuro);
}

/*  La misma idea en ámbar. En el diseño de la analítica las cifras van alternando verde y ámbar para
    que una fila de cuatro o cinco no se lea como un bloque.  */
.class-re-estadistica-ambar .class-re-estadistica-cifra {
  color: var(--re-ambar-oscuro);
}

.class-re-panel {
  background: #fff;
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: var(--re-sombra-suave);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.class-re-panel-titulo {
  font-family: var(--re-fuente-titulo);
  font-size: 14px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0 0 2px;
}

/* Texto corrido dentro de un panel: avisos, explicaciones legales... */
.class-re-texto-panel {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.5;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-texto-panel strong {
  color: var(--re-negro);
}

/* Enlaces de acción al pie de un panel */
.class-re-acciones-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 2px;
}

/* Un panel que ocupa la fila entera aunque esté en la rejilla de dos columnas */
.class-re-panel-ancho {
  margin-top: 16px;
}

.class-re-fila-campos {
  display: flex;
  gap: 10px;
}

.class-re-campo {
  flex: 1;
  min-width: 0;
}

/* Para los pares desiguales del diseño: apellidos junto a nombre, dirección junto a CP */
.class-re-campo-doble {
  flex: 2;
}

/*  El margen de ARRIBA se apaga a propósito, no sobra: la etiqueta se escribe en un span o en un
    ion-label, que no traen margen de navegador, pero en cuanto alguien la pone en un <p> —e Ionic no
    resetea los <p>— entra el margin-block-start de 1em y los campos del panel se separan casi el
    doble de lo que dice su gap. Le pasó a municipios.  */
.class-re-campo-etiqueta {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 600;
  color: #8a8a80;
  margin: 0 0 5px;
}

/*  El ion-input se viste por sus variables, no metiéndole mano por dentro: así sigue funcionando su
    caret, su clear button y su modo nativo.  */
.class-re-campo-input {
  --background: var(--re-campo-fondo);
  --color: var(--re-negro);
  --placeholder-color: var(--re-gris-texto);
  --padding-start: 14px;
  --padding-end: 14px;
  --padding-top: 12px;
  --padding-bottom: 12px;
  background: var(--re-campo-fondo);
  border-radius: 14px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  min-height: 42px;
}

/*  Un campo con un botoncito pegado a su derecha ( el tamaño del papel del ticket: se teclea a
    mano y el icono abre los tamaños habituales ). El input estira y el icono queda centrado a su
    altura.  */
.class-re-campo-con-boton {
  display: flex;
  align-items: center;
  gap: 8px;
}
.class-re-campo-con-boton .class-re-campo-input {
  flex: 1;
  min-width: 0;
}
.class-re-campo-con-boton ion-icon {
  font-size: 22px;
  color: #8a8a80;
  cursor: pointer;
}

/*  El modal que abre el campo de fecha nace a pantalla completa y deja el calendario perdido
    arriba: se le da el tamaño del propio ion-datetime.
    Las medidas llevan sumado el relleno de 12x10px que la piel del calendario le pone al host
    ( ver "IMAGEN NUEVA — EL CALENDARIO" al final ): sin sumarlo, el aire se lo comería al calendario
    por dentro en vez de agrandar el modal. El fondo y la fuente los pone ya esa misma piel, que la
    comparte con los popovers de fecha; aquí solo va lo que es de este modal.  */
.class-re-modal-fecha {
  --width: 340px;
  --height: 406px;
  --border-radius: 16px;
  --box-shadow: var(--re-sombra-media);
}

.class-re-modal-fecha ion-datetime {
  width: 100%;
  height: 100%;
}

.class-re-boton-guardar {
  --background: var(--re-verde);
  --background-activated: var(--re-verde-oscuro);
  --background-hover: var(--re-verde-oscuro);
  --color: #fff;
  --border-radius: 999px;
  --box-shadow: var(--re-sombra-media);
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 48px;
  width: 100%;
  margin: 0;
}

.class-re-id {
  text-align: center;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: #b3b1a8;
  margin: 0;
  cursor: pointer;
}

.class-re-acciones-cuenta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.class-re-enlace-salir {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-ambar-oscuro);
  margin: 0;
  cursor: pointer;
}

.class-re-enlace-peligro {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 600;
  color: var(--re-rojo);
  margin: 0;
  cursor: pointer;
}

.class-re-perfil {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.class-re-perfil-rejilla {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.class-re-perfil-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  column-reverse y no column: en el teléfono el diseño pone primero el botón de guardar y debajo los
    enlaces de cuenta, pero en el marcado los enlaces van antes para que en el ordenador, que es una
    fila, caigan solos a la izquierda.  */
.class-re-perfil-pie {
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  margin-top: 16px;
}

/*  En el ordenador el diseño reparte a lo ancho lo que en el teléfono va apilado: el avatar y las
    estadísticas comparten una sola fila, los tres paneles se reparten en dos columnas, y el pie pone los
    enlaces de cuenta a la izquierda y el botón de guardar a la derecha.
    Cuelga de .class-re-perfil-pc, que la página añade según datalocal.esEscritorio.  */
.class-re-perfil-pc {
  /* Aquí las cifras van sueltas, sin la tarjeta blanca que llevan en el teléfono */
  /*  Un ordenador con la ventana estrecha sigue siendo un ordenador ( no hay cabecera ), pero dos
      columnas ahí no caben.  */
}
.class-re-perfil-pc .class-re-perfil-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.class-re-perfil-pc .class-re-identidad {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 0;
}
.class-re-perfil-pc .class-re-identidad-texto {
  text-align: left;
}
.class-re-perfil-pc .class-re-avatar {
  width: 76px;
  height: 76px;
}
.class-re-perfil-pc .class-re-avatar-camara {
  width: 26px;
  height: 26px;
}
.class-re-perfil-pc .class-re-nombre-usuario {
  font-size: 22px;
}
.class-re-perfil-pc .class-re-email-usuario {
  font-size: 13px;
}
.class-re-perfil-pc .class-re-estadisticas {
  gap: 24px;
  margin-top: 0;
}
.class-re-perfil-pc .class-re-estadistica {
  flex: none;
  background: none;
  box-shadow: none;
  padding: 0;
}
.class-re-perfil-pc .class-re-estadistica-cifra {
  font-size: 20px;
}
.class-re-perfil-pc .class-re-estadistica-etiqueta {
  font-size: 11px;
}
.class-re-perfil-pc .class-re-perfil-rejilla {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.class-re-perfil-pc .class-re-perfil-columna,
.class-re-perfil-pc .class-re-perfil-rejilla {
  gap: 20px;
}
.class-re-perfil-pc .class-re-perfil-pie {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}
.class-re-perfil-pc .class-re-acciones-cuenta {
  flex-direction: row;
  gap: 18px;
}
.class-re-perfil-pc .class-re-enlace-peligro {
  font-size: 13px;
}
.class-re-perfil-pc .class-re-boton-guardar {
  width: auto;
  min-width: 200px;
}
@media (max-width: 1000px) {
  .class-re-perfil-pc .class-re-perfil-rejilla {
    grid-template-columns: 1fr;
  }
}

/*****************************************************/
/* IMAGEN NUEVA — GESTOR DE PEDIDOS                  */
/*****************************************************/
/*  Piel nueva de la pantalla de comandas, sacada del diseño "Reparteat - Gestor Pedidos".
    La columna oscura de la izquierda que se ve en ese diseño NO se pinta aquí: es el menú, que ya
    está hecho ( bloque de más abajo ).
    Del diseño se coge la cabecera ( título Caprasimo + subtítulo gris ), las píldoras de estado con
    su contador, la tarjeta blanca de pedido con las acciones VISIBLES dentro, y las COLUMNAS por
    estado ( nuevos / en preparación / listos ), que sí se pintan: la página ya no descarga un solo
    estado cada vez, sino todos los estados en curso, y cada uno tiene su columna.
    Mismas reglas que los bloques anteriores: prefijo class-re-, todo sobre los tokens --re-* y nada
    escrito a pelo. Vive en global.scss por la regla de oro nº3.  */
/*  En el ordenador no hay barra superior ( la navegación es el menú, siempre a la vista ), así que
    el título, el buscador y los botones de la página van dentro del contenido. En el teléfono esta
    fila no se pinta: lo resuelve el *ngIf de la plantilla, no un display:none.  */
.class-re-cabecera-gestor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/*  Nacieron como la fila de pestañas de la cabecera y son la misma píldora, pero ahora cada una
    encabeza su columna en el tablero. La fila con scroll horizontal que las envolvía
    ( class-re-pestanas ) ya no existe: ese papel lo hace class-re-tablero.  */
.class-re-pestana {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--re-sombra-suave);
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-negro);
  white-space: nowrap;
  cursor: pointer;
}

.class-re-pestana ion-icon {
  font-size: 17px;
}

/*  La columna abierta va en ámbar claro, como el "Nuevos" del diseño, y no en verde: el verde es el
    color de las ACCIONES en esta pantalla ( aceptar, marcar listo ), y usarlo también para marcar
    dónde hay comandas hace que el ojo lo lea como un botón más.  */
.class-re-pestana-activa {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

.class-re-pestana-contador {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--re-campo-fondo);
  color: var(--re-gris-texto);
  font-size: 11px;
  font-weight: 700;
}

/*  Sobre la cabecera de una columna abierta el contador se invierte a ámbar sólido: encima del ámbar
    claro, el gris del contador normal se pierde.  */
.class-re-pestana-activa .class-re-pestana-contador {
  background: var(--re-ambar);
  color: #fff;
}

/*  PANTALLA COMPLETA. El tablero ocupa todo el alto que le queda por debajo del título y de los
    chips, y es CADA COLUMNA la que hace su propio scroll vertical: así las cabeceras no se van
    nunca de la vista, que es lo que distingue un tablero de una lista larga.
    Para eso hace falta una cadena de flex sin cortes desde el scroll del ion-content hasta la lista
    de cada columna, y en cada eslabón un min-height: 0: por defecto un hijo de flex no baja de la
    altura de su contenido, así que basta con que falte en uno para que la columna crezca con sus
    comandas en vez de desplazarlas y el tablero desborde la pantalla.
    Va en clases propias -tablero y no en class-re-content / class-re-cuerpo a secas porque esas dos
    las comparten home-negocios y mi-perfil, que sí scrollean de arriba abajo.  */
ion-content.class-re-content-tablero::part(scroll) {
  display: flex;
  flex-direction: column;
}

/*  flex: 1 + box-sizing: border-box y NO min-height: 100%. Con min-height el padding de arriba se
    suma al 100% y la página acaba desbordando justo esos 32px, que es lo que deja el hueco muerto
    abajo y devuelve el scroll vertical a la página.  */
.class-re-cuerpo-tablero {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  padding-bottom: 0;
}

.class-re-cuerpo-tablero > * {
  flex-shrink: 0;
}

.class-re-cuerpo-tablero > .class-re-tablero,
.class-re-cuerpo-tablero > .class-re-comandas {
  flex: 1;
  min-height: 0;
}

/*  La fila de columnas. Scroll horizontal SIEMPRE, también en el ordenador: son trece estados y no
    caben en ninguna pantalla. Sin barra de scroll a la vista, como el resto de carriles de la app.
    align-items: stretch ( el de por defecto, escrito aquí porque importa ) para que TODAS las
    columnas midan el alto del tablero y sea su lista la que se desplace, incluso las que tienen
    pocas comandas.
    overflow-y: hidden porque en CSS un eje en auto convierte el otro en auto también, y una barra
    de scroll vertical en el carril se comería el borde de las tarjetas.
    Los márgenes negativos lo sacan del padding del cuerpo para que arrastre de canto a canto de la
    pantalla, y el padding se lo devuelve por dentro para que la primera y la última columna no
    queden pegadas al borde. Los valores son los paddings de class-re-cuerpo: si aquellos cambian,
    estos también.  */
.class-re-tablero {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-inline: -44px;
  padding-inline: 44px;
  padding-block: var(--re-aire-sombra);
}

.class-re-tablero::-webkit-scrollbar {
  display: none;
}

/*  320px es el mismo ancho mínimo que tenía la rejilla de comandas: es lo que necesita la tarjeta
    para que quepan el nombre del cliente y los botones de acción sin partirse.
    flex: 0 0 y no 1: si las columnas se repartieran el ancho sobrante, abrir una columna más
    encogería todas las demás.
    min-width: 0 porque un hijo de flex, por defecto, no baja de su min-content: sin él una comanda
    con algo largo que no parte ( una dirección, un nombre de producto ) ensancharía su columna por
    encima de los 320px y desplazaría a todas las demás. Va en toda la cadena de flex hasta la
    tarjeta ( columna → lista → envoltorio ), porque basta con que falte en un eslabón para que el
    ensanchamiento suba hasta arriba.  */
.class-re-tablero-columna {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 320px;
  min-width: 0;
}

/*  La columna cerrada no ha descargado nada, así que solo pinta su chip y ocupa lo que este mida.
    Reservarle el ancho de una tarjeta para no enseñar ninguna sería regalar sitio justo en la
    dirección donde falta.  */
.class-re-tablero-columna-compacta {
  flex: 0 0 auto;
}

.class-re-tablero-cabecera {
  align-self: flex-start;
}

/*  La lista de comandas es la única pieza de la columna que se desplaza: el chip de cabecera se
    queda arriba y esto se come el resto del alto. El padding-bottom es para que la última comanda
    no muera pegada al canto de la pantalla.
    El resto del relleno es para la sombra de las comandas, que si no se recorta contra el borde de
    esta lista. A los lados va con margen negativo que lo compensa: sin él, las tarjetas perderían
    esos píxeles de los 320px de la columna.  */
.class-re-tablero-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-top: var(--re-aire-sombra);
  padding-bottom: 16px;
  padding-inline: var(--re-aire-sombra);
  margin-inline: calc(var(--re-aire-sombra) * -1);
  scrollbar-width: none;
}

.class-re-tablero-lista::-webkit-scrollbar {
  display: none;
}

.class-re-tablero-vacia {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 0;
}

@media (max-width: 767px) {
  .class-re-tablero-columna {
    flex: 0 0 82vw;
  }
  /*  La columna "En curso" de Mis repartos ya junta todo el reparto en marcha: es LA lista del
      repartidor y ocupa el ancho entero ( la pantalla menos el padding del tablero ). Las otras
      columnas siguen detrás, a un arrastre, como siempre.  */
  .class-re-tablero-columna-agrupada {
    flex: 0 0 calc(100vw - 40px);
  }
  .class-re-tablero {
    margin-inline: -20px;
    padding-inline: 20px;
  }
}
/*  El tablero no vale para la búsqueda: los resultados salen de cualquier estado y repartirlos en
    columnas escondería los que caen en columnas cerradas. Así que ahí se pintan todos seguidos.
    auto-fill y no auto-fit: con auto-fit, un solo resultado se estiraría a todo el ancho de la
    pantalla y quedaría una tarjeta gigante y ridícula. Con auto-fill mantiene el ancho de columna.
    Scrollea sola porque ocupa el sitio del tablero, y ese sitio es de alto fijo: sin esto los
    resultados que no caben quedarían cortados sin manera de llegar a ellos.  */
.class-re-comandas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-y: auto;
  padding: var(--re-aire-sombra);
  margin: calc(var(--re-aire-sombra) * -1);
}

.class-re-comanda-envoltorio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/*  El separador de día. En la lista vieja era una fila a todo lo ancho; aquí vive DENTRO de la celda
    de su comanda, porque sacarlo como hermano cambiaría los índices que recibe el reorder.  */
.class-re-separador-dia {
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 6px 0 0;
}

.class-re-separador-dia-cuenta {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 2px 0 0;
}

/*  El título de franja de reparto. Vive en la lista y no en la tarjeta: todas las comandas que caen
    debajo son de esa franja, así que repetirla en cada una era decir lo mismo N veces en el sitio
    donde menos sitio hay. Mismo reloj y mismo verde que la franja del ticket
    ( class-re-ticket-entrega-dato ), para que se lean como lo mismo en las dos pantallas.  */
.class-re-franja-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--re-verde-oscuro);
  margin: 10px 0 0;
}

/*  El título de estado de la columna "En curso" de Mis repartos en el teléfono, que junta cuatro
    estados en una lista. Manda sobre el de franja ( la lista va por estado y dentro por franja ), así
    que se escribe más grande y con una raya debajo que corta el bloque anterior. El primero no
    necesita tanto aire arriba: lo tiene ya el hueco de la lista.  */
.class-re-estado-titulo {
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 18px 0 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--re-verde);
}

.class-re-comanda-envoltorio:first-child > .class-re-estado-titulo {
  margin-top: 0;
}

/*  Se monta sobre class-re-panel ( blanco, 20px de radio y sombra suave, el mismo panel de los
    formularios de perfil ) y aquí solo se le aprieta el aire, que una comanda lleva mucha más línea
    que un formulario.
    El cursor va en la tarjeta entera porque toda ella abre la ficha del pedido. Lo que tiene acción
    propia dentro corta el click ( ver la plantilla de pedidos-negocio ), y la lista de productos y
    la fila de acciones lo devuelven a default más abajo.  */
.class-re-comanda {
  padding: 16px;
  gap: 8px;
  cursor: pointer;
}

/*  Borde ámbar para lo que está esperando una decisión del negocio, como los "Nuevos" del diseño.
    El borde va POR DENTRO ( inset ) y no como border, para no descuadrar la rejilla con 4px extra en
    unas tarjetas sí y en otras no.  */
.class-re-comanda-urgente {
  box-shadow: var(--re-sombra-suave), inset 0 0 0 2px var(--re-ambar);
}

.class-re-comanda-datos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.class-re-comanda-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/*  El identificador del pedido, en la esquina superior derecha de la comanda. El nowrap es
    obligatorio: ahí al lado está el nombre del cliente, que se lleva todo el ancho que puede.  */
.class-re-comanda-id {
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}

.class-re-comanda-etiqueta {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--re-campo-fondo);
  color: var(--re-gris-texto);
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.class-re-comanda-etiqueta-ambar {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

.class-re-comanda-etiqueta-verde {
  background: var(--re-verde-claro);
  color: var(--re-verde-oscuro);
}

/*  El tercer tono, el de "esto ha salido mal" ( cancelado, eliminado, entrega fallida ). Lo pide la
    lista de pedidos del cliente y no hay token para él porque la paleta de RepartEat solo tiene
    verde y ámbar: el rojo es un color de aviso, no de marca, y sale del diseño tal cual.  */
.class-re-comanda-etiqueta-rojo {
  background: #fdecea;
  color: #c0392b;
}

.class-re-comanda-meta {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 0;
}

/*  El nombre del cliente. Comparte la fila superior con el identificador del pedido, así que se le
    deja encoger ( min-width: 0 ) y partir por palabras: sin eso un nombre largo echaría de la
    tarjeta al identificador.  */
.class-re-comanda-nombre {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  cursor: pointer;
}

/*  Importe y nombre del cliente, juntos en la fila superior de la comanda. El importe es corto y no
    debe partir nunca ( flex-shrink: 0 ); quien encoge es el nombre.  */
.class-re-comanda-titular {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
}

.class-re-comanda-total {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
  flex-shrink: 0;
}

/*  EL PLAZO PARA ACEPTAR EL PEDIDO. Se vacía sola mientras la comanda espera en "Tramitados" y en el
    último cuarto se pone ámbar, el mismo color con el que la tarjeta ya se marca como urgente.  */
.class-re-comanda-barra {
  --background: var(--re-campo-fondo);
  --progress-background: var(--re-verde);
  height: 4px;
  border-radius: 999px;
}

.class-re-comanda-barra-agotandose {
  --progress-background: var(--re-ambar);
}

/*  Incidencias y notas internas. El pre-line es obligatorio: las notas se escriben con saltos de
    línea y sin él se leen como un churro.  */
.class-re-comanda-nota {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  border-radius: 12px;
  padding: 8px 12px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 600;
  white-space: pre-line;
  margin: 0;
  cursor: pointer;
}

.class-re-comanda-fechas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
}

.class-re-comanda-fechas p {
  margin: 0;
}

/*  cursor: default porque aquí dentro un click no abre la ficha ( la lista lo corta ): la mano solo
    sale en la cantidad y el nombre, que sí hacen algo.  */
.class-re-comanda-productos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--re-campo-fondo);
  padding-top: 10px;
  cursor: default;
}

.class-re-comanda-producto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/*  Los productos con cantidad 0 se esconden, pero su fila SIGUE EXISTIENDO en el DOM: los índices
    que le llegan a ordenarProducto() cuentan todos los productos del pedido, y saltarse filas los
    descuadraría. Tiene que ser display:none y no visibility ni opacidad, para que el gap del flex
    tampoco le reserve hueco.  */
.class-re-comanda-producto-oculto {
  display: none;
}

/*  La cantidad es el botón que hace avanzar el producto: en espera → preparándose → listo. El color
    es TODA la información de estado que hay, así que los tres tienen que distinguirse de un vistazo
    desde la otra punta de la cocina.  */
.class-re-comanda-cantidad-columna {
  flex: 0 0 auto;
}

/*  El min-width:0 no es opcional: un hijo de un flex nunca baja de su ancho de contenido si no se le
    dice, y el título de un producto largo empujaría la fila hasta desbordar la tarjeta.  */
.class-re-comanda-producto-texto {
  flex: 1;
  min-width: 0;
}

.class-re-comanda-cantidad {
  min-width: 34px;
  text-align: center;
  padding: 5px 8px;
  border-radius: 10px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.class-re-comanda-cantidad-espera {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

.class-re-comanda-cantidad-preparando {
  background: var(--re-ambar);
  color: #fff;
}

.class-re-comanda-cantidad-listo {
  background: var(--re-verde);
  color: #fff;
}

.class-re-comanda-producto-nombre {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-negro);
  margin: 0;
  cursor: pointer;
}

.class-re-comanda-extra {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-comanda-hora-producto {
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
  color: var(--re-gris-texto);
  margin: 2px 0 0;
  text-align: center;
}

/*  Antes estas acciones estaban escondidas en el deslizamiento del ion-item-sliding. Ahora se ven,
    como en el diseño: en una cocina con prisa, una acción que hay que descubrir deslizando es una
    acción que no se usa.
    El flex:1 1 0 con basis 0 reparte el ancho a partes iguales sin que el texto mande, que es lo que
    deja "Aceptar" y "Rechazar" del mismo tamaño aunque una palabra sea más larga.
    cursor: default por lo mismo que la lista de productos: el hueco entre botones no abre la ficha.  */
.class-re-comanda-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  cursor: default;
}

.class-re-comanda-boton {
  flex: 1 1 0;
  min-width: 110px;
  text-align: center;
  padding: 9px 10px;
  border-radius: 12px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.class-re-comanda-boton-verde {
  background: var(--re-verde);
  color: #fff;
}

.class-re-comanda-boton-suave {
  background: var(--re-campo-fondo);
  color: var(--re-gris-texto);
}

.class-re-comanda-boton-rojo {
  background: #fbe3df;
  color: #c0392b;
}

/*  EL BOTÓN BLOQUEADO SE PINTA APAGADO PERO SIGUE SIENDO PULSABLE, igual que la franja completa del
    ticket ( class-re-ticket-franja-completa ): el clic es justo lo que dispara el aviso que explica
    por qué todavía no se puede. Por eso NO lleva pointer-events: none.  */
.class-re-comanda-boton-bloqueado {
  background: var(--re-campo-fondo);
  color: var(--re-gris-texto);
  opacity: 0.6;
}

/*  El spinner que sustituye a la flecha mientras la acción se está ejecutando. Va con el tamaño del
    texto de la pastilla y no con el suyo por defecto ( 28px ), que la haría crecer y movería de
    sitio a las demás acciones de la fila justo cuando no se pueden pulsar.  */
.class-re-comanda-boton ion-spinner {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: middle;
}

/* El gif de carga, que antes venía envuelto en un ion-toolbar solo para centrarlo */
.class-re-cargando {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.class-re-acciones-gestor {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Fila centrada para el "ver más" y para el chip de guardar el orden */
.class-re-fila-centrada {
  display: flex;
  justify-content: center;
  margin: 18px 0;
}

/*  El botón de filtrar por administrador. class-re-boton-guardar va a width:100%, que en un
    ordenador sería un botón de metro y medio: el tope lo pone este envoltorio.  */
.class-re-filtro-gestor {
  width: 100%;
  max-width: 420px;
}

@media (max-width: 767px) {
  /*  Una sola columna: con 320px de mínimo la rejilla ya daría una columna en casi cualquier
      teléfono, pero así también se cumple en tabletas puestas de pie.  */
  .class-re-comandas {
    grid-template-columns: 1fr;
  }
  .class-re-comanda {
    padding: 14px;
  }
}
/*****************************************************/
/* IMAGEN NUEVA — MENÚ                               */
/*****************************************************/
/*  Piel nueva del menú, sacada de los diseños "Reparteat - Home Escritorio" ( barra lateral ) y
    "Reparteat - Home" ( cajón del teléfono ). Es EL MISMO menú en las dos: cambia el envoltorio, no la
    piel, igual que pasa con la plantilla ( ver el comentario de menu.component.html ).
    El diseño de escritorio dibujaba la barra en negro y el cajón del teléfono en blanco; aquí van las dos
    en blanco, para no tener dos lenguajes distintos según el aparato.
    Mismas reglas que el bloque de la home: prefijo class-re-, todo sobre los tokens --re-* y nada
    escrito a pelo. Vive aquí y no en menu.component.scss por la regla de oro nº3.  */
/*  El menú arranca en la misma vertical, la del icono de las opciones. Ese punto sale de sumar el aire
    lateral del ion-content y el --padding-start de la pastilla, y hay que repetirlo a mano en la ficha
    del usuario y en la firma, porque van FUERA del ion-content y no heredan su relleno. Van en variables
    para que al mover uno no se quede el otro atrás.
    La marca de la cabecera queda fuera de esa alineación: su logotipo va centrado.  */
/*  Cajón del teléfono. El 78% sale del diseño: deja ver un trozo de la pantalla de debajo, que es lo que
    recuerda al usuario que el menú se cierra deslizando. El tope de 320px es para las tabletas, donde ese
    78% se iría a un cajón desproporcionado.  */
ion-menu {
  --width: 78%;
  --max-width: 320px;
  --background: #fff;
}

/*  En el ordenador el menú no es un ion-menu sino tres elementos sueltos ( cabecera, contenido y pie )
    dentro de la barra lateral, así que hay que decirle a mano que es una columna: así el contenido se
    come el hueco libre y el pie se queda abajo sin sticky ni rellenos.  */
app-menu.menu-lateral {
  display: flex;
  flex-direction: column;
  /* El flex:1 va además del height:100% de más arriba: el height depende de que .sidebar tenga una
     altura resuelta, y así se llena la barra aunque no la tenga */
  flex: 1;
}

app-menu.menu-lateral > ion-content {
  flex: 1;
  min-height: 0;
}

.class-re-menu-content {
  --background: #fff;
  --padding-start: 12px;
  --padding-end: 12px;
  --padding-top: 8px;
  font-family: var(--re-fuente-texto);
}

/*  Ionic le pone al header una sombra ( modo md ) y al footer una línea ( modo ios ) que aquí sobran:
    el menú es todo blanco y las separaciones las marcan los border-top que se ponen más abajo.  */
.class-re-menu-header {
  box-shadow: none;
}

.class-re-menu-header::after,
.class-re-menu-pie::before {
  display: none;
}

/*  La lista pierde su fondo y su padding propios: quien manda sobre el aire lateral es el ion-content de
    arriba, para que las pastillas queden a la misma distancia del borde que la marca y el pie.  */
.class-re-menu-lista {
  background: transparent;
  padding: 0 !important;
}

/*  La cabecera va en blanco, como el resto del menú: el logotipo trae su propio fondo blanco y sobre
    cualquier color se recortaría como un rectángulo pegado encima.
    El toolbar se queda sin relleno propio porque el aire alrededor del logo lo pone la marca: si no,
    sumaría el suyo por debajo y el logo quedaría descentrado en vertical.  */
.class-re-menu-cabecera {
  --background: #fff;
  --border-width: 0;
  --min-height: 76px;
  --padding-start: 0;
  --padding-end: 0;
  box-shadow: none;
}

.class-re-menu-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
}

/*  El logotipo es horizontal: no tiene caja fija, se estira hasta donde le dejan y el max-width es lo
    que lo mantiene a un tamaño razonable tanto en la barra de escritorio ( 250px ) como en el cajón del
    teléfono ( 78%, hasta 320px ).  */
.class-re-menu-logo {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
}

/*  Cada opción es una pastilla: fondo transparente en reposo y esquinas redondeadas para que al pasar por
    encima ( o al estar activa ) el color no llegue hasta el borde del menú.
    Los separadores se quitan desde el HTML con lines="none"; aquí se anula además el borde interno que
    Ionic le pone al ion-item en modo md.  */
/*  El fondo en reposo es el blanco del menú, no transparent: así la pastilla siempre pinta un color
    sólido suyo y nunca deja ver lo que tenga detrás.  */
.class-re-menu-item {
  --background: #fff;
  --border-width: 0;
  --border-radius: 14px;
  --min-height: 44px;
  --padding-start: 14px;
  --inner-padding-end: 12px;
  --color: var(--re-negro);
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  cursor: pointer;
}

/*  El icono de cada opción es un EMOJI, no un ion-icon ( ver el comentario de menu.component.html ). Al
    ser un carácter y no un SVG hay tres cosas que resolver aquí:
    - La pila de fuentes: sin ella, un Android o un Linux que no encuentre el emoji en la fuente de texto
      puede caer en una versión monocroma o directamente en el cuadradito.
    - El ancho fijo: los emoji no miden todos igual, y sin reservarles la misma caja las etiquetas
      quedarían desalineadas unas respecto a otras.
    - line-height 1: el emoji es más alto que una letra y con el interlineado normal descuadraría la
      altura de la pastilla.  */
.class-re-menu-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
  font-size: 17px;
  line-height: 1;
  width: 22px;
  min-width: 22px;
  margin-right: 12px;
  text-align: center;
}

/*  Resalte del ratón: el MISMO verde sólido con texto blanco de la pastilla activa. El diseño solo
    dibuja ese estado, así que el hover es un adelanto de él y no un tinte aparte.
    Se toca --background porque --background-hover solo lo atiende el ion-item cuando es de tipo botón,
    y estos no lo son ( son items normales con un click, como estaban antes ). Aun así se fijan también
    las dos variables del hover de Ionic: si algún día el item pasa a ser botón, su capa superpuesta
    pintaría el mismo verde a opacidad 1 en vez de mezclar un gris translúcido encima.  */
.class-re-menu-item:hover {
  --background: var(--re-verde);
  --background-hover: var(--re-verde);
  --background-hover-opacity: 1;
  --color: #fff;
}

/*  Opción de la pantalla en la que estamos. Solo la reciben las opciones que NAVEGAN de verdad: las que
    abren un modal o un popover no dejan ninguna pantalla detrás que marcar.  */
.class-re-menu-item-activo,
.class-re-menu-item-activo:hover {
  --background: var(--re-verde);
  --background-hover: var(--re-verde);
  --background-hover-opacity: 1;
  --color: #fff;
}

/*  Sobre el verde solo cambia de color el TEXTO. El emoji no: es un glifo en color propio, así que ni
    hereda el color ni hay que forzárselo como se hacía con el ion-icon.  */
/*  Contador de notificaciones sin leer. Antes iba flotando sobre el icono con posición absoluta; aquí va
    al final de la fila, que es donde no tapa nada y se lee de un vistazo.  */
.class-re-menu-badge {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 8px;
}

/*  "Administrador X", "Repartidor", "Técnico", "Super usuario". El diseño no las dibuja porque su menú de
    ejemplo es el de un cliente, que no tiene secciones; se resuelven con el tratamiento de h6 del sistema
    ( pequeña, en mayúsculas y espaciada ) para que separen sin pesar más que las propias opciones.  */
.class-re-menu-seccion {
  --background: transparent;
  --border-width: 0;
  --min-height: 34px;
  --padding-start: 14px;
  margin: 14px 0 4px;
  border-top: 1px solid rgba(32, 30, 29, 0.1);
  padding-top: 12px;
}

.class-re-menu-seccion ion-label {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--re-gris-texto) !important;
  white-space: pre-line;
}

.class-re-menu-patrocinadores {
  padding: 18px 14px 8px;
}

.class-re-menu-patrocinador {
  width: 100%;
  height: 54px;
  object-fit: contain;
  border-radius: var(--radius-sm, 8px);
}

/*  En el teléfono el pie va dentro del ion-menu, que es una columna flex. Ahí el ion-header y el
    ion-footer son shrinkables ( flex-shrink: 1 por defecto ) mientras que el ion-content de en medio se
    declara flex:1 con contain:size, o sea que su tamaño mínimo es CERO: cuando el hueco aprieta, el que
    debería ceder no cede y el que se lleva el apretón es el pie, que se queda con menos alto del que
    ocupan sus tres filas y las deja salirse por arriba, encima de la ficha del usuario.
    Con flex-shrink:0 el pie mide siempre lo que mide su contenido y quien se queda con el hueco que
    sobre es la lista, que es la que sabe hacer scroll.  */
.class-re-menu-pie,
.class-re-menu-header {
  flex-shrink: 0;
}

.class-re-menu-pie {
  background: #fff;
  border-top: 1px solid rgba(32, 30, 29, 0.1);
  padding: 12px;
}

/*  La ficha es la entrada a perfil, así que se pinta como una pastilla más: mismo redondeo, misma
    sangría y mismo verde al pasar por encima o al estar dentro de /mi-perfil. El avatar arranca en la
    misma vertical que los emoji, porque al pie ya le quita $re-menu-aire su propio padding y aquí solo
    falta la sangría de la pastilla.  */
.class-re-menu-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 14px;
  margin-bottom: 6px;
  cursor: pointer;
}

.class-re-menu-usuario:hover,
.class-re-menu-usuario-activo {
  background: var(--re-verde);
}

.class-re-menu-usuario:hover .class-re-menu-usuario-nombre,
.class-re-menu-usuario-activo .class-re-menu-usuario-nombre {
  color: #fff;
}

/*  La población baja a verde claro y no a un blanco translúcido: sigue siendo el dato secundario, pero
    con un color sólido de la paleta.  */
.class-re-menu-usuario:hover .class-re-menu-usuario-ciudad,
.class-re-menu-usuario-activo .class-re-menu-usuario-ciudad {
  color: var(--re-verde-claro);
}

/*  Sobre el verde, el borde del avatar deja de verse contra su propio fondo verde claro: se le pone el
    aro blanco que el diseño le pinta en el cajón del teléfono.  */
.class-re-menu-usuario:hover .class-re-menu-avatar,
.class-re-menu-usuario-activo .class-re-menu-avatar {
  box-shadow: 0 0 0 2px #fff;
}

.class-re-menu-avatar {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--re-verde-claro);
}

/*  El nombre y la población se recortan con puntos suspensivos: el menú mide 250px y hay nombres largos.  */
.class-re-menu-usuario-datos {
  min-width: 0;
}

.class-re-menu-usuario-nombre {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-menu-usuario-ciudad {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 1px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  Cerrar sesión va en ámbar, como en el diseño: no es una opción más de la lista ni es destructiva como
    para pintarla de rojo.  */
.class-re-menu-salir {
  --color: var(--re-ambar-oscuro);
}

.class-re-menu-firma {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px 0;
  border-top: 1px solid rgba(32, 30, 29, 0.1);
  margin-top: 4px;
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
  color: var(--re-gris-texto);
  cursor: pointer;
}

/*****************************************************/
/* IMAGEN NUEVA — POPOVER DE OPCIONES                */
/*****************************************************/
/*  Piel nueva del popover de opciones ( app-options ), sacada del diseño "Reparteat - Popover".
    Es la pantalla que más veces se ve de toda la app: se abre desde 109 sitios distintos.

    LA COMPARTEN TAMBIÉN otros tres popovers, porque son el mismo panel y así, si se retoca la
    pastilla, se retocan los cuatro:
    - app-metodo-envio, la dirección de entrega de un pedido. Lo único que tiene de más es la pastilla
      ACTIVA, que marca la dirección que el pedido ya lleva puesta ( class-re-opcion-activa, abajo ).
    - app-codigos-postales, la localidad. Lo suyo de más es la pastilla con INTERRUPTOR
      ( class-re-opcion-marcable, abajo ), para marcar las localidades donde reparte un negocio.
    - app-cantidades, el que pide una cifra o un texto. No trae lista: aprovecha el panel, el título,
      el subtítulo y la pastilla de eliminar, y pone lo suyo en su propio bloque, más abajo
      ( "POPOVER DE CANTIDAD" ).

    OJO CON EL ALCANCE: aquí se viste lo que va DENTRO del popover, no el popover. El envoltorio lo
    siguen poniendo las clases de siempre ( .popover-pequeño y .popover-cantidad ), que NO se tocan
    porque las comparten otros cinco componentes que aún no tienen diseño ( categorías, pago,
    contador, bonificación e historial ). De ahí que el panel se pinte él mismo el fondo cálido:
    por debajo el ::part(content) del popover sigue siendo blanco.
    Por lo mismo, el radio de las esquinas ( 20px ) y el ancho ( 300px ) son los del envoltorio y no
    los 24px / 340px del diseño.

    Mismas reglas que los bloques de arriba: prefijo class-re-, todo sobre los tokens --re-* y nada
    escrito a pelo. Vive aquí y no en options.component.scss por la regla de oro nº3.  */
/*  Los componentes no traen estilos propios ( sus .scss no se tocan ), así que su etiqueta es un
    elemento en línea y dejaría una franja blanca del popover asomando por debajo del panel.  */
app-options,
app-metodo-envio,
app-codigos-postales,
app-cantidades {
  display: block;
}

/*  El relleno propio de las celdas del ion-grid se baja a 5px arriba y abajo y a cero a los lados: dos
    celdas seguidas suman entonces los 10px de separación que pide el diseño, y las pastillas quedan a
    ras del panel en vez de metidas hacia dentro. Así el aire entre piezas no hay que ponerlo a mano
    fila por fila.

    El panel es una COLUMNA FLEX topada a 60vh, el mismo alto máximo que .popover-pequeño le da al
    envoltorio. Sirve para repartir: la cabecera, el buscador y los botones miden lo que miden, y la
    única que cede cuando no cabe todo es la lista de opciones, que es la que sabe hacer scroll. Si el
    alto lo repartiera el navegador a su aire, con treinta opciones el botón de aceptar se quedaría
    fuera de la pantalla.  */
.class-re-opciones {
  background: var(--re-fondo-hundido);
  padding: 22px 18px;
  --ion-grid-column-padding: 5px 0;
  font-family: var(--re-fuente-texto);
  display: flex;
  flex-direction: column;
  max-height: 60vh;
}

/*  SOLO CEDE QUIEN SABE HACER SCROLL. Las filas de un contenedor flex nacen con flex-shrink:1, así que
    cuando el contenido no cabe en los 60vh el navegador aprieta TAMBIÉN al título, al buscador y a la
    fila de botones: esta última se quedaba con menos alto del que mide el ion-button ( 48px fijos ) y
    el botón se salía de ella y se pintaba encima de la lista. Mismo caso que el pie del menú, más
    arriba, y misma solución.
    Las dos que sí deben ceder recuperan su flex-shrink por especificidad: los selectores de abajo son
    0-2-0 frente al 0-1-1 de este, así que ganan sin !important.  */
.class-re-opciones > ion-row {
  flex-shrink: 0;
}

.class-re-opciones > .class-re-opciones-lista,
.class-re-opciones > .class-re-opciones-campo {
  flex-shrink: 1;
}

.class-re-opciones-titulo {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--re-fuente-titulo);
  /*  El diseño pide un peso 800 que Caprasimo no tiene: solo se sirve en 400. Se deja en 400 y no se
      finge con una negrita sintética, igual que en el saludo de la home.  */
  font-size: 18px;
  font-weight: 400;
  color: var(--re-negro);
}

/*  El subtítulo va pegado al título, no a los 10px del resto: los dos son la misma cabecera.  */
.class-re-opciones-subtitulo {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
}

/*  EL BUSCADOR SE DESPEGA DE LA CABECERA. Los 10px que reparten las celdas del ion-grid valen entre dos
    pastillas, que son piezas iguales, pero aquí separan el título de un campo de escribir: con tan poco
    aire la pastilla del buscador se lee como parte del encabezado. Con 24px la cabecera queda arriba y
    el buscador ya pertenece a la lista que hay debajo.
    El margen va AQUÍ y no en el título porque el subtítulo va deliberadamente pegado a él ( -6px ): un
    margin-bottom en la cabecera lo empujaría a él también.
    El !important es obligado: .class-re-buscador nace con margin: 0 !important, porque en la portada la
    coloca la fila que la contiene. Este selector es de dos clases, así que gana. Y por lo mismo se
    impone al margin-top de teléfono que esa clase lleva en su @media.  */
.class-re-opciones .class-re-buscador {
  margin-top: 14px !important;
}

/*  La lista scrollea POR DENTRO: así el título de arriba y el botón de aceptar o la fila de eliminar
    de abajo se quedan quietos aunque vengan treinta opciones ( las localidades donde reparte un
    negocio, un filtro por categorías... ).

    Son DOS declaraciones y las dos hacen falta:

    - min-height: 0 le da permiso a ENCOGER. Un elemento flex nunca baja por debajo del alto de su
      contenido si no se le dice, y sin esto la fila crecería y sacaría los botones de la pantalla en
      vez de aparecer la barra de scroll.

    - flex-wrap: nowrap es lo que hace que el scroll FUNCIONE, y no es cosmética. Un ion-row nace con
      flex-wrap: wrap, o sea multilínea, y en un contenedor multilínea el align-content solo ESTIRA
      las líneas, nunca las encoge: la fila sí se quedaba en su alto, pero su ion-col seguía midiendo
      lo que midieran las opciones ( doce localidades = 1000px de columna dentro de una fila de 250 ).
      Con la columna sin topar, su overflow-y no tenía nada que recortar: no había scroll que hacer,
      las opciones se pintaban por debajo del botón de aceptar —que se veía clavado encima de una de
      ellas— y lo que sobraba lo cortaba el popover. En una sola línea el alto de la línea SÍ es el de
      la fila, así que la columna queda topada y scrollea.

    La barra de scroll se esconde, como en el carril de chips de la home.  */
.class-re-opciones-lista {
  flex-wrap: nowrap;
  min-height: 0;
  /*  EL NOWRAP NO ES COSMÉTICO, es lo que hace que el scroll de la celda exista. Un ion-row nace con
      flex-wrap:wrap, o sea contenedor MULTILÍNEA, y ahí la celda no se estira al alto de la fila sino
      al de su LÍNEA FLEX, que lo marca el contenido. Con wrap la celda medía lo que sus treinta
      pastillas, su overflow-y no tenía nada que recortar y la lista se salía por debajo del panel con
      el botón de aceptar pintado en mitad. En una sola línea la celda sí se estira al alto ya
      recortado de la fila y la barra de scroll aparece.  */
  flex-wrap: nowrap;
}

/*  El aire para la sombra de las opciones se pone por dentro con el relleno y se devuelve por fuera
    con el margen negativo, para no estrechar la lista. Solo por los LADOS: un margen negativo arriba
    y abajo saca la caja del scroll fuera de su fila, y esos cuatro píxeles se montan sobre el botón
    de aceptar dejando asomar por debajo la opción que pasa.  */
.class-re-opciones-lista ion-col {
  overflow-y: auto;
  padding: var(--re-aire-sombra);
  margin-inline: calc(var(--re-aire-sombra) * -1);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.class-re-opciones-lista ion-col::-webkit-scrollbar {
  display: none;
}

/*  Cada opción es una pastilla blanca con el texto centrado. Va sobre un ion-row porque las pastillas
    de la lista son hijas directas de un ion-col y ahí no llega el relleno de las celdas: la separación
    de 10px se la pone cada una con su propio margin-top.  */
.class-re-opcion {
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  margin-top: 10px;
  box-shadow: var(--re-sombra-suave);
  align-items: center;
  cursor: pointer;
}

/*  Dos cosas que no son decoración:
    - flex:1, porque el ion-row es un contenedor flex y sin él la etiqueta mide lo que mide su texto,
      así que el centrado no tendría dónde centrar.
    - white-space:normal, porque el ion-label corta con puntos suspensivos por defecto y el panel solo
      mide 300px: los nombres largos de categoría se quedaban a medias. Aquí se prefiere que la
      pastilla crezca a dos líneas.  */
.class-re-opcion ion-label {
  flex: 1;
  text-align: center;
  white-space: normal;
  font-family: var(--re-fuente-texto);
  font-size: 15px;
  font-weight: 700;
  color: var(--re-negro);
}

/*  La destructiva: misma pastilla, el texto en rojo. No cambia el fondo, que si no compite con el
    verde de los botones de aceptar.  */
.class-re-opcion-eliminar ion-label {
  color: var(--re-rojo);
}

/*  LA OPCIÓN QUE YA ESTÁ PUESTA. Hoy solo la usa el popover de la dirección de entrega
    ( app-metodo-envio ), que marca cuál de las direcciones lleva el pedido, pero se deja genérica
    porque cualquier lista de opciones con un valor actual la va a querer.
    Va en verde claro y no en blanco con un borde: la pastilla ya es blanca, y un borde de un píxel a
    300px de ancho no se ve. El check de la derecha es el que lo remata para quien no distinga el
    matiz de color.  */
.class-re-opcion-activa {
  background: var(--re-verde-claro);
}

.class-re-opcion-activa ion-label {
  color: var(--re-verde-oscuro);
}

/*  El check no empuja al texto: la etiqueta va a flex:1 y sigue centrada en la pastilla, así que las
    opciones marcadas y las que no tienen el texto en la misma vertical.  */
.class-re-opcion-activa ion-icon {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--re-verde);
}

/*  LA PASTILLA DE UNA LOCALIDAD: el nombre y DEBAJO su código postal, más pequeño y en gris. Los dos en
    la misma línea separados por un punto se leían como un solo dato, y el que importa al elegir es el
    nombre; el código postal acompaña.
    El ion-col existe solo para apilarlos, así que se le quita el relleno de celda: el aire de la
    pastilla ya lo pone .class-re-opcion, y con el suyo encima cada fila crecía 10px.  */
.class-re-opcion-localidad {
  padding: 0;
}

/*  Los ion-label son elementos EN LÍNEA: sin esto el nombre y el código postal se pintan seguidos y no
    hay salto de línea que valga.  */
.class-re-opcion-localidad ion-label {
  display: block;
}

/*  El selector es de dos clases a propósito: .class-re-opcion ion-label pesa 0-1-1 y pone los 15px en
    negrita del nombre, así que una clase suelta no le ganaría.  */
.class-re-opcion-localidad .class-re-opcion-cp {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--re-gris-texto);
}

/*  LA MARCA DE UN MUNICIPIO OCULTO. En esta lista solo la ven quien gestiona municipios y quien está
    marcando las localidades de un negocio que ya tenía una oculta, y en los dos casos hace falta que se
    entienda por qué está ahí algo que a un cliente no se le ofrece.
    Va en ÁMBAR y no en rojo: aquí no es una alarma, es una etiqueta de estado. El rojo se reserva al
    interruptor de add-municipio, que es donde sí se está apagando algo.
    Es inline-block y no block porque los ion-label de esta pastilla se han pasado a block ( ver arriba )
    para que el nombre y el código postal caigan uno debajo de otro, y así esta no se come la fila.  */
.class-re-opcion-localidad .class-re-opcion-oculto {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  font-size: 10px;
  font-weight: 700;
}

/*  LA PASTILLA CON INTERRUPTOR. Hoy solo la usa el popover de la localidad ( app-codigos-postales ),
    para marcar en cuáles reparte un negocio, pero se deja genérica porque cualquier lista de opciones
    que se marquen de varias en varias la va a querer.
    El texto se va a la izquierda: .class-re-opcion lo centra, y centrado al lado de un interruptor
    queda descolgado de su propia fila. El espacio entre los dos lo pone el flex:1 que la etiqueta ya
    trae de .class-re-opcion ion-label.  */
.class-re-opcion-marcable ion-label {
  text-align: start;
}

/*  LA FILA DEL CAMPO ES LA QUE CEDE, igual que la lista de opciones ahí arriba: el panel es una columna
    flex topada a 60vh, la cabecera y los botones miden lo que miden, y cuando no cabe todo la única que
    encoge es esta. El min-height:0 es lo que le da permiso ( un elemento flex nunca baja del alto de su
    contenido si no se le dice ), y sin él la textarea con auto-grow crecía sin tope: una incidencia
    arrastrada de tres pedidos dejaba los botones fuera de la pantalla.
    La barra de scroll se esconde, como en la lista.

    EL MARGEN DE ARRIBA es el mismo caso que el del buscador, aquí arriba, y por el mismo motivo: los
    10px que reparten las celdas del ion-grid valen entre dos piezas iguales, pero aquí separan un
    título de un campo de escribir, y con tan poco aire el campo se lee pegado a la cabecera. Se nota
    sobre todo en el popover de anotaciones, que muchas veces no trae subtítulo y deja el título justo
    encima del recuadro.  */
.class-re-opciones-campo {
  min-height: 0;
  margin-top: 14px;
  flex-wrap: nowrap;
}

/*  SIN -webkit-overflow-scrolling: touch. Lo llevaba, y no hace ninguna falta: desde iOS 13 el scroll
    con inercia es el de por defecto, así que lo único que aportaba era meter este subárbol en su propia
    capa de composición — que es de los sospechosos clásicos de que el cursor no se pinte donde toca en
    iOS. El overflow-y sí se queda: es el que impide que una incidencia larga eche los botones fuera.  */
.class-re-opciones-campo ion-col {
  overflow-y: auto;
  scrollbar-width: none;
}

.class-re-opciones-campo ion-col::-webkit-scrollbar {
  display: none;
}

/*  QUE SE VEA QUE AHÍ SE ESCRIBE. class-re-campo-input pinta el fondo claro de los formularios, que
    dentro del panel blanco de una página funciona; pero aquí el panel es el gris cálido hundido y un
    rectángulo más claro encima se lee como una tarjeta de solo lectura. El filete lo devuelve a ser un
    campo.
    Aquí había además un white-space: pre-line que se ha quitado: lo de dentro es un textarea, y un
    textarea ya respeta los saltos de línea él solo ( su valor de fábrica es pre-wrap ), así que la
    regla no salvaba las incidencias arrastradas de nada y de paso colapsaba los espacios. Tampoco lo
    tiene el mismo campo en gestionPyme.  */
.class-re-opciones-campo .class-re-campo-input {
  border: 1px solid var(--re-linea);
}

.class-re-opciones-fecha {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
}

/*  LOS BOTONES. El aire entre ellos se pone AQUÍ y no se deja al relleno de las celdas: los 10px que
    reparte el ion-grid valen entre dos pastillas de lista, pero entre dos botones de 48px se leen como
    si estuvieran pegados. El margin-top despega además el bloque de la fecha que lleva encima.
    La fila se queda en su dirección natural y son las celdas las que envuelven, cada una a su línea:
    un ion-col size="12" nace con flex: 0 0 100%, y en un contenedor puesto a column ese 100% deja de
    ser el ancho y pasa a ser el ALTO, así que cada botón intentaría medir la fila entera.  */
.class-re-opciones-botones {
  gap: 12px;
  margin-top: 8px;
}

.class-re-opciones-botones ion-col {
  padding: 0;
}

/*  class-re-boton-panel mide 42px, que es su alto cuando va suelta dentro de un panel. Apilada justo
    debajo del botón de guardar, seis píxeles de diferencia se leen como un descuadre y no como
    jerarquía: la jerarquía ya la dice el color.  */
.class-re-opciones-botones .class-re-boton-panel {
  height: 48px;
  font-size: 14px;
}

/*  .popover-CP la usa un único componente, app-codigos-postales, y nació a --min-width: 80% con 400px
    de alto mínimo porque dentro había una ion-list a pantalla casi completa. Con el panel de pastillas
    eso deja una ventana enorme y descuadrada respecto a los otros 104 popovers de la app, así que se
    lleva a las medidas de .popover-pequeño, que es lo que ya le pasa add-negocio en sus dos llamadas.

    POR QUÉ EL SELECTOR LLEVA LA ETIQUETA Y LOS !important: .popover-CP está declarada tres veces más
    arriba, una por cada rama de $estiloApp, y sus cuatro líneas van con !important. Una clase suelta
    empata en especificidad y no gana ni yendo después. ion-popover.popover-CP es 0-1-1 y con
    !important se impone, así que no hay que editar las tres ramas ni tocar el cssClass de las ocho
    llamadas. Mismo criterio que .class-re-popover-fecha, más abajo.  */
ion-popover.popover-CP {
  --max-height: 60vh !important;
  --max-width: 300px !important;
  --min-width: 250px !important;
  /*  La que había obligaba al panel a medir 400px aunque la lista fuera de tres localidades.  */
  --min-height: auto !important;
}

/*  Los popovers donde se ESCRIBE llevan un ion-content envolviendo su plantilla, y no es decoración:
    es la condición para que Ionic enganche sus shims de teclado de iOS al campo ( lo explica el
    comentario de cabecera de options.component.html ). Aquí solo hay que quitarle el fondo blanco que
    trae de fábrica, que taparía el panel cálido del popover, y ponerle el mismo tope de alto que usa
    gestionPyme, para que el popover siga creciendo con su contenido y no de golpe a pantalla entera.
    Lo llevan todos los popovers donde se escribe ( options, bonificacion, cantidades, contador,
    metodo-envio, codigos-postales y pop-up-component ), así que aquí tienen que estar TODAS las
    cssClass con las que se abren; si se estrena una, hay que sumarla.  */
.popover-pequeño ion-content,
.popover-mediano ion-content,
.popover-CP ion-content,
.popover-confirmacion ion-content {
  --background: transparent;
  max-height: 88dvh;
}

/*  EL TIRÓN DE 5vh HACIA ARRIBA SE PIDE CON --offset-y, NO CON margin-top. Las dos formas dejan el
    popover en el mismo sitio, pero no son lo mismo por dentro: --offset-y entra en el top que la
    animación de entrada de Ionic calcula y escribe EN LÍNEA ( top: calc( … + var(--offset-y, 0) ) ),
    mientras que el margen negativo mueve la caja DESPUÉS de haberla colocado ahí.
    HONESTIDAD SOBRE POR QUÉ ESTÁ ESTO AQUÍ: se cambió buscando el cursor invisible de iOS, con la
    teoría de que mover la caja a posteriori lo dejaba fuera de la vista ( bug de WebKit 176896 ).
    NO ERA ESO: gestionPyme conserva el margin-top negativo, y encima un transform y un backdrop-filter
    sobre el mismo ::part(content), y allí el cursor se ve. Se queda igualmente porque --offset-y es la
    variable que Ionic ofrece para esto y no pelea con el posicionado, no porque arreglara nada.
    Se hace aquí, con ion-popover.<clase>, y no editando .popover-pequeño y .popover-mediano, porque
    están declaradas en las tres ramas de $estiloApp con !important: el selector con etiqueta ( 0-1-1 )
    les gana sin tener que tocar las tres. Mismo truco que .popover-CP, aquí arriba.  */
ion-popover.popover-pequeño,
ion-popover.popover-mediano {
  --offset-y: -5vh;
}
ion-popover.popover-pequeño::part(content),
ion-popover.popover-mediano::part(content) {
  margin-top: 0 !important;
}

/*  Los 300px de .popover-pequeño están pensados para una lista de pastillas de una línea. Cuando lo de
    dentro es un párrafo —una incidencia arrastrada de tres pedidos, una nota interna—, ese ancho parte
    casi todas las líneas y el popover se estira hacia abajo hasta comerse la pantalla.
    Se añade a las llamadas del modo de texto libre, junto a .popover-pequeño, no en su lugar: de esa
    solo se corrige el ancho.
    Mismo truco de especificidad que .popover-CP, aquí arriba: .popover-pequeño va con !important en las
    tres ramas de $estiloApp, así que hace falta ion-popover.<clase> ( 0-1-1 ) para ganarle sin tener que
    editarlas.

    PERO EL ANCHO TIENE QUE DEJAR 30px LIBRES A CADA LADO, y el 92% topado a 340px no los dejaba: en un
    iPhone de 393pt salían 26,5px por lado y el popover aparecía PEGADO AL BORDE IZQUIERDO, con todo el
    hueco a la derecha. La culpa es de calculateWindowAdjustment, el posicionador de Ionic: no comprueba
    si el popover CABE, sino si su borde izquierdo queda a menos de 30px del borde de la pantalla ( 5 de
    relleno del cuerpo + 25 de margen de área segura ). Si queda, lo da por salido y lo clava en
    left: 5px; y como es un else if, ya no reajusta por la derecha.
    El calc deja 24px por lado pase lo que pase, y el tope de 340px sigue valiendo en pantallas grandes,
    donde 24px por lado darían un popover larguísimo.  */
ion-popover.class-re-popover-texto {
  --max-width: 340px !important;
  --width: calc(100% - 48px) !important;
  /*  Y el centrado a mano, por si el ancho vuelve a acercarse al límite algún día: la animación de
      entrada de Ionic escribe el left EN LÍNEA sobre .popover-content después de medir la pantalla,
      así que solo se le gana con !important. El tirón hacia arriba no se toca aquí: lo pone
      --offset-y en el bloque de más arriba, no un margen.  */
}
ion-popover.class-re-popover-texto::part(content) {
  left: 0 !important;
  right: 0 !important;
  margin: auto !important;
}

/*****************************************************/
/* IMAGEN NUEVA — POPOVER DE CANTIDAD                */
/*****************************************************/
/*  El popover que pide UNA cifra o UN texto ( app-cantidades ): unidades al carrito, unidades de una
    línea del pedido, stock, unidades compradas, precio, descuento, título de una línea y código de
    bienvenida. Se abre desde nueve sitios.

    CASI TODO LO HEREDA del popover de opciones, ahí arriba: el panel ( class-re-opciones ), el título,
    el subtítulo con el nombre del producto y la pastilla roja de eliminar
    ( class-re-opcion + class-re-opcion-eliminar ). El campo y el botón son los del formulario
    ( class-re-campo-input, class-re-boton-guardar ). Nada de eso se repite aquí.

    LO SUYO ES LA FILA DEL CAMPO: aquí el − y el + no van en su propia pastilla como en la ficha del
    producto, sino a los lados del campo de escribir, los tres en la misma línea. Los botones son los
    de la ficha reutilizados tal cual ( class-re-producto-stepper-boton y su variante -mas, al final
    de la hoja ): es el mismo gesto de contar unidades, así que comparten aspecto y se corrigen en un
    sitio. Lo único que hace falta es colocarlos.  */
/*  Los tres al centro y a la misma altura:
    - align-items, porque un ion-row estira sus celdas por defecto y los botones miden 28px fijos
      frente a los 42px del campo: sin esto se quedan colgando arriba.
    - justify-content, para que el conjunto quede centrado en el panel cuando no ocupa todo el ancho
      ( y también cuando no hay botones, que entonces el campo va a size 12 ).
    - nowrap, porque un ion-row envuelve por defecto y en un panel de 300px el + se caería a la línea
      de abajo en cuanto el campo creciera.
    El aire de los lados lo pone el gap y no el relleno de las celdas, que .class-re-opciones deja a
    cero a los lados a propósito. El de arriba y abajo separa la fila del subtítulo y del botón de
    aceptar: antes lo ponían dos <br>, que es maquetar con marcado.  */
.class-re-cantidad-fila {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0;
}

/*****************************************************/
/* IMAGEN NUEVA — TICKET DE PEDIDO                   */
/*****************************************************/
/*  Piel nueva de pedido-gestion, sacada del diseño "Reparteat - Ticket". Es la ficha de UN pedido, y
    la pantalla a la que se llega desde casi todas las demás.

    QUÉ SE COGE DEL DISEÑO: el banner ámbar de entrega, el seguimiento de cuatro pasos, la tarjeta de
    entrega, el panel de chat y el resumen del pedido. Lo que el diseño no dibuja — incidencias, el
    plegable de detalles, IVA, factura, alta de productos, bolsas y bonificaciones — se viste con los
    mismos paneles blancos, para que no haya dos lenguajes en la misma pantalla.

    QUÉ NO SE PINTA AQUÍ: la columna oscura de la izquierda del diseño de escritorio es el menú, que ya
    está hecho, y el marco de la ventana lo pone el propio modal ( .full-screen-modal ).

    EL MARCADO ES ION-GRID, no div: lo pide CLAUDE.md. Eso trae dos cosas que hay que tener presentes
    al leer esta hoja:

    1) El relleno de las celdas. Un ion-col se pone 5px por los cuatro lados. Se apaga UNA vez con
       --ion-grid-column-padding en el contenedor y el aire se reparte con gap, igual que en el popover
       de opciones. Lo mismo con --ion-grid-padding para el ion-grid.
    2) size="auto" NO es una clase: ion-col lo escribe como ESTILO EN LÍNEA
       ( flex: 0 0 auto; width: auto; max-width: auto — ver calculateSize en col.js ). Un estilo en
       línea le gana a cualquier hoja, así que las celdas que tienen que medir un ancho fijo — las
       pastillas de acción, el icono de la entrega, la foto del producto, el botón de enviar y la
       etiqueta de los detalles — llevan su width con !important. Es EL ÚNICO sitio donde hace falta:
       el resto de la hoja gana por orden, porque Stencil inserta los estilos de sus componentes
       delante del <link> de la hoja de la app y este fichero se aplica después.

    Mismas reglas que los bloques anteriores: prefijo class-re-, todo sobre los tokens --re-* y nada
    escrito a pelo. Vive aquí y no en pedido-gestion.page.scss por la regla de oro nº3.  */
.class-re-ticket-cabecera {
  --ion-grid-column-padding: 0;
  width: 100%;
}

/*  El título se recorta con puntos suspensivos en vez de empujar a los chips: en un teléfono estrecho,
    con la letra del pedido puesta, la fila se iría a dos líneas.  */
.class-re-ticket-cabecera-titulo {
  min-width: 0;
  text-align: center;
}

.class-re-ticket-cabecera-titulo .class-re-titulo-pagina {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  Las pastillas de acción son ion-col porque el marcado va en rejilla. El width en línea de size="auto"
    las dejaría del ancho de su icono: hay que devolverles el cuadrado de 36px del diseño.  */
ion-col.class-re-boton-chip {
  width: 36px !important;
  padding: 0;
}

/*  El título y el negocio de la fila de escritorio van uno debajo del otro. Van en ion-label porque el
    marcado es de rejilla, y el ion-label no es de bloque: sin esto salen los dos en la misma línea.  */
.class-re-ticket-cabecera .class-re-saludo,
.class-re-ticket-cabecera .class-re-subsaludo {
  display: block;
}

/*  El margen lo baja a media pantalla en vez de dejarlo pegado a la cabecera. Antes daba igual
    porque apenas llegaba a verse — el ticket se montaba enseguida, medio vacío —, pero ahora el gif
    se queda hasta que el pedido está entero y es lo único que hay en pantalla mientras tanto.  */
.class-re-ticket-cargando {
  width: 120px;
  margin-top: 12vh;
}

.class-re-ticket {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--re-fuente-texto);
}

/*  ESCRITORIO. La rejilla del diseño: a la izquierda EL PEDIDO ( entrega, seguimiento, el resumen,
    franjas, acciones, incidencia y las anotaciones ) y a la derecha lo accesorio: los detalles y
    el chat. Los dos de la derecha van dentro de un solo envoltorio, class-re-ticket-columna, que se
    coloca a mano en la segunda columna; todo lo demás cae solo en la primera.

    EL RESUMEN ESTÁ EN LA IZQUIERDA a propósito, aunque sea "para consultar": es el panel más largo
    del ticket y el que de verdad se lee, así que se queda en la columna ancha ( 1.4fr ), pegado al
    seguimiento. En la derecha estiraba la columna y dejaba el chat fuera de pantalla.

    El span:99 no es un número mágico caprichoso: para escribir grid-row: 1 / -1 harían falta filas
    EXPLÍCITAS, y aquí no las hay ( las filas las va creando la propia colocación automática según
    cuántos paneles se pinten, que depende del perfil y de lo que traiga el pedido ). Con el span la
    columna derecha se reserva su sitio en todas ellas y los paneles de la izquierda no se le meten
    debajo.

    OJO CON EL row-gap: 0, QUE NO ES UN DESCUIDO. row-gap se aplica ENTRE TODAS las filas de la
    rejilla, y con el span de arriba hay 99, de las que casi todas se quedan vacías. Con gap: 20px eso
    son unos 1.800px de aire fantasma detrás del contenido: la página salía con un scroll larguísimo
    y sin nada dentro. Así que el hueco entre filas se pone a cero y la separación vertical de la
    columna izquierda la lleva cada panel en su propio margin-bottom.  */
.class-re-ticket-pc {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
  column-gap: 20px;
  row-gap: 0;
}

/*  Los paneles del ticket son ion-grid, y el ion-grid trae margin-inline: auto y flex: 1 en su :host,
    pensados para cuando él es la rejilla que manda en la página. Dentro de esta columna hacen dos
    cosas raras y muy visibles: el margen automático en el eje transversal encoge el panel al ancho de
    su contenido y lo centra ( cada panel salía de un ancho distinto ), y el flex: 1 lo estira a lo
    alto para repartirse el hueco que sobre. Se apagan los dos.
    Los tres paneles de la derecha ya no son hijos directos del ticket, así que hay que nombrarlos
    también por su envoltorio.  */
.class-re-ticket > ion-grid,
.class-re-ticket-columna > ion-grid {
  margin-inline: 0;
  flex: 0 0 auto;
}

/*  LA COLUMNA DE LA DERECHA. En el teléfono no existe: display: contents borra su caja y sus tres
    paneles vuelven a la única columna del ticket, en el orden en el que están escritos.  */
.class-re-ticket-columna {
  display: contents;
}

.class-re-ticket-pc > .class-re-ticket-columna {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  grid-column: 2;
  grid-row: 1/span 99;
  align-self: start;
}

.class-re-ticket-pc > * {
  grid-column: 1;
}

/*  La separación vertical que ya no pone row-gap. La columna de la derecha no la lleva: ella se
    apila sola con su propio gap.  */
.class-re-ticket-pc > *:not(.class-re-ticket-columna) {
  margin-bottom: 20px;
}

/* Al último no, que si no deja un dedo de scroll por debajo del contenido */
.class-re-ticket-pc > *:not(.class-re-ticket-columna):last-child {
  margin-bottom: 0;
}

/*  El chat ya no se queda pegado con sticky: ahora tiene el resumen y los detalles encima, así que la
    columna entera baja con la página. Lo único que se le pone es el tope de alto, para que una
    conversación larga no estire la columna sin fin: a partir de ahí hace scroll la lista de dentro.
    Alto mínimo NO lleva: el panel mide lo que mida su contenido. Hubo uno de 420px para que una
    conversación corta no quedara en una tira, pero con un solo mensaje dejaba medio panel en blanco
    entre la burbuja y la caja de escribir, y con la ficha, el aviso y el compositor el panel ya sale
    de un alto razonable él solo.  */
.class-re-ticket-pc .class-re-ticket-chat {
  max-height: calc(100vh - 150px);
}

/*  La lista se come el hueco que sobre, así la caja de escribir se queda pegada abajo. Sigue haciendo
    falta con el panel al tope de alto: es ella la que se encoge y scrollea.  */
.class-re-ticket-pc .class-re-ticket-chat-lista {
  flex: 1 1 auto;
}

.class-re-ticket-banner {
  background: var(--re-ambar-claro);
  border-radius: 20px;
  padding: 14px 18px;
  align-items: center;
  gap: 12px;
}

.class-re-ticket-banner-texto {
  min-width: 0;
}

.class-re-ticket-banner-titulo {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: var(--re-ambar-oscuro);
  margin: 0;
}

.class-re-ticket-banner-sub {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: #8a7854;
  margin: 2px 0 0;
}

.class-re-ticket-banner-icono {
  font-size: 24px;
  color: var(--re-ambar-oscuro);
}

/*  Los pasos y las líneas van todos a flex:1, como en el diseño: así los cuatro puntos quedan a la
    misma distancia sea cual sea el largo de las etiquetas.  */
.class-re-ticket-pasos {
  align-items: flex-start;
  padding: 6px 2px;
  cursor: pointer;
}

.class-re-ticket-paso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  padding: 0;
}

.class-re-ticket-paso-punto {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  background: #e6e3da;
  color: #a3a196;
}

.class-re-ticket-paso-punto ion-icon {
  font-size: 15px;
}

.class-re-ticket-paso-punto-hecho {
  background: var(--re-verde);
  color: #fff;
}

/*  El paso en el que está el pedido AHORA va en ámbar y no en verde. El verde es "esto ya pasó"; si el
    actual fuera también verde, no habría forma de distinguir dónde está el pedido de un vistazo.  */
.class-re-ticket-paso-punto-actual {
  background: var(--re-ambar);
  color: #fff;
}

/*  overflow-wrap porque "Pendiente de confirmar" ( la etiqueta del primer paso mientras el pedido
    está tramitado ) es bastante más larga que las otras y en el móvil no cabe en una línea: parte en
    dos y, si aun así una palabra no cupiera en la columna, se parte antes de salirse. Los puntos no
    se mueven porque la fila va a align-items: flex-start.  */
.class-re-ticket-paso-etiqueta {
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--re-negro);
  margin: 0;
  overflow-wrap: break-word;
}

.class-re-ticket-paso-etiqueta-pendiente {
  color: #a3a196;
}

.class-re-ticket-paso-linea {
  flex: 1 1 0;
  height: 3px;
  margin-top: 15px;
  padding: 0;
  border-radius: 999px;
  background: #e6e3da;
}

.class-re-ticket-paso-linea-hecha {
  background: var(--re-verde);
}

/* En el ordenador el seguimiento va dentro de una tarjeta blanca, como en el diseño */
.class-re-ticket-pc .class-re-ticket-pasos {
  background: #fff;
  border-radius: 20px;
  padding: 22px 26px;
  box-shadow: var(--re-sombra-suave);
}

.class-re-ticket-acciones {
  gap: 8px;
  flex-wrap: wrap;
}

/*  Los botones reutilizan class-re-comanda-boton del gestor de comandas, que ya es esta misma pastilla.
    Aquí se les sube el cuerpo y, sobre todo, SE REPARTEN TODO EL ANCHO: en el ticket son la acción
    principal de la pantalla, no un botón más de una tarjeta de lista, y a media pantalla se pulsan
    mucho peor.
    El flex va con !important porque estas pastillas son celdas de un ion-grid, y las medidas de ion-col
    las inyecta Stencil en el <head> en tiempo de ejecución: no se puede dar por hecho que este fichero
    vaya después. El max-width es por lo mismo, que ion-col lo trae a 100% y aquí estorba.
    El min-width de 110px que trae la pastilla de base es el que decide cuándo se pasa a una segunda
    línea: con tres o cuatro acciones en un teléfono, bajan y vuelven a repartirse esa línea entera.  */
.class-re-ticket-acciones .class-re-comanda-boton {
  flex: 1 1 0 !important;
  max-width: none !important;
  padding: 14px 16px;
  font-size: 13px;
}

/*  Panel blanco ( class-re-panel ) con la cabecera de cuadradito + título arriba y las horas debajo,
    justo encima de los botones que avanzan el pedido: es lo último que hay que decidir antes de
    tramitar.  */
.class-re-ticket-franjas-cabecera {
  align-items: center;
  gap: 12px;
}

/*  El mismo cuadradito de icono que la tarjeta de entrega, pero en verde pálido: aquí el panel es
    blanco y el blanco sobre blanco no despegaría.  */
.class-re-ticket-franjas-icono {
  width: 40px !important;
  height: 40px;
  border-radius: 12px;
  background: var(--re-verde-claro);
  color: var(--re-verde-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.class-re-ticket-franjas-titulo {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 600;
  color: var(--re-negro);
}

.class-re-ticket-franjas-lista {
  gap: 8px;
  flex-wrap: wrap;
}

/*  Cada hora es una pastilla del ancho de su texto: van con size="auto", así que no hace falta pelear
    con el flex de ion-col como en los botones de acción, que ahí sí se reparten la fila.
    El nowrap es para que '13:00–13:30' no se parta en dos líneas cuando quedan pocas y anchas.

    class-re-franja es el MISMO estilo con nombre genérico: la pastilla de franja horaria no es del
    ticket, se pinta igual en la configuración del negocio, donde se encienden y se apagan una a una.
    Van como dos selectores de la misma regla y no como dos reglas copiadas para que un retoque valga
    en los dos sitios.  */
.class-re-franja,
.class-re-ticket-franja {
  flex: 1 1 0 !important;
  max-width: none !important;
  min-width: 100px;
  background: var(--re-campo-fondo);
  border-radius: 999px;
  padding: 11px 10px;
  text-align: center;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-negro);
  white-space: nowrap;
  cursor: pointer;
}

.class-re-franja-activa,
.class-re-ticket-franja-elegida {
  background: var(--re-verde);
  color: #fff;
}

/*  LA FRANJA COMPLETA SE PINTA APAGADA PERO SIGUE SIENDO PULSABLE. Sale así en cuanto el cliente
    pulsa una llena ( se destapan todas a la vez ), y tocarla después solo repite el aviso de que no
    queda sitio. Por eso NO lleva pointer-events: none ni opacidad de deshabilitado; lo que dice que
    no se puede elegir es la línea tachada.  */
.class-re-ticket-franja-completa {
  color: var(--re-gris-texto, #9a9a9a);
  text-decoration: line-through;
}

/*  ES LA TARJETA ÁMBAR DE LA PANTALLA. Antes era un panel blanco más y el ámbar lo ponía el banner de
    arriba, que se ha desactivado ( ver el comentario de la plantilla ): sin él la pantalla se quedaba
    entera en blancos y verdes. El color se muda aquí, que además es donde el diseño lo tenía a medias,
    con la tarjeta del mapa colgando del banner.
    Sin sombra, como la tenía el banner: sobre el fondo cálido de la página el propio ámbar ya la
    despega, y una sombra la haría competir con los paneles blancos de debajo.  */
.class-re-ticket-entrega {
  background: var(--re-ambar-claro);
  border-radius: 20px;
  padding: 14px 18px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

/*  El cuadradito del icono se invierte: sobre el ámbar claro, el verde claro de antes no despegaba.  */
.class-re-ticket-entrega-icono {
  width: 44px !important;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: var(--re-ambar-oscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.class-re-ticket-entrega-texto {
  min-width: 0;
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: var(--re-ambar-oscuro);
}

/*  "Cambiar" va DEBAJO de la dirección, que es a lo que se refiere: a la derecha de la tarjeta ahora
    está el botón de recoger en el establecimiento. Subrayado porque ahí abajo, en pardo apagado y
    junto a la franja y al repartidor, sin nada parecería una línea de dato más y no algo que se pulsa.  */
.class-re-ticket-entrega-accion {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  color: var(--re-ambar-oscuro);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

/*  RECOGER EN EL ESTABLECIMIENTO. Pastilla blanca sobre el ámbar, con el ancho topado para que el
    texto caiga en dos o tres líneas y no se coma la dirección: es la decisión alternativa de la
    tarjeta, no su protagonista.  */
.class-re-ticket-entrega-recogida {
  max-width: 118px !important;
  background: #fff;
  border-radius: 16px;
  padding: 10px 12px;
  text-align: center;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--re-ambar-oscuro);
  cursor: pointer;
}

.class-re-ticket-entrega-recogida ion-icon {
  display: block;
  margin: 0 auto 4px;
  font-size: 18px;
}

/*  Las líneas de debajo de la dirección: la franja elegida y por dónde va el repartidor. Hacen de
    subtítulo, con el mismo pardo apagado que el banner usaba para el suyo: en negrita se leen, pero no
    le pelean el sitio a la dirección, que es de lo que va la tarjeta.  */
.class-re-ticket-entrega-dato {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  color: #8a7854;
}

.class-re-ticket-entrega-dato ion-icon {
  flex: 0 0 auto;
  font-size: 15px;
}

/*  La línea del repartidor lleva SIEMPRE su nombre, y solo a veces por dónde va. Esta clase se le
    pone únicamente cuando hay una posición que enseñar, que es cuando pulsarla abre el mapa: con el
    nombre a secas no hay nada detrás y una mano encima prometería algo que no pasa.  */
.class-re-ticket-entrega-repartidor {
  cursor: pointer;
}

/*  EL REPARTIDOR EN EL TICKET: el chip con su nombre y su nota, y detrás, si la hay, la frescura de
    su posición. Con wrap, porque en un teléfono estrecho las dos cosas no siempre caben en una línea.  */
.class-re-ticket-repartidor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 6px;
}

/*  Una PASTILLA blanca y no una línea de dato más: es lo que dice que se pulsa y que lleva a algún
    sitio ( la ficha del repartidor, donde se le valora ). La estrella en ámbar, como las de
    app-estrellas, para que se lea como una nota aunque todavía diga "Valorar".  */
.class-re-ticket-repartidor-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--re-ambar);
  border-radius: 999px;
  padding: 4px 12px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  color: var(--re-ambar-oscuro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.class-re-ticket-repartidor-chip ion-icon {
  flex: 0 0 auto;
  font-size: 14px;
}

.class-re-ticket-repartidor-chip ion-icon[name=star] {
  color: var(--re-ambar);
}

.class-re-ticket-repartidor .class-re-ticket-entrega-dato {
  margin-top: 0;
}

/*  El pre-line, por lo mismo que en class-re-comanda-nota: una incidencia trae una línea por cada una
    arrastrada de pedidos anteriores, y sin él las viñetas se leen todas seguidas en un churro.  */
.class-re-ticket-alerta {
  background: #fbe3df;
  color: var(--re-rojo);
  border-radius: 20px;
  padding: 14px 16px;
  align-items: center;
  gap: 10px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  white-space: pre-line;
  cursor: pointer;
}

.class-re-ticket-alerta ion-icon {
  font-size: 20px;
}

/*  La incidencia va en ámbar y no en rojo: es algo que hay que atender, pero el pedido sigue vivo. El
    rojo se reserva para los estados de los que ya no se vuelve ( cancelado, eliminado ).  */
.class-re-ticket-alerta-ambar {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

/*  El aviso de "pedido confirmado, escríbenos por el chat" es la única alerta que vive DENTRO del panel
    de chat, que es una columna flex donde la lista de mensajes es lo que crece. Sin el flex: 0 0 auto la
    lista se lo comería al llenarse la conversación. Y no se pulsa, así que tampoco lleva la manita que
    el resto de alertas sí tiene ( todas abren el cambio de estado ).  */
.class-re-ticket-alerta-bloqueo {
  flex: 0 0 auto;
  cursor: default;
}

/*  min-height: 0 en el panel y en la lista: sin él, un hijo de flex nunca baja del alto de su
    contenido, así que con veinte mensajes la lista crecería y se llevaría por delante el max-height
    del panel en vez de aparecer la barra de scroll.  */
.class-re-ticket-chat {
  min-height: 0;
  overflow: hidden;
}

.class-re-ticket-chat-cabecera {
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.class-re-ticket-chat-avatar {
  width: 44px;
  height: 44px;
}

/*  La segunda ficha de la cabecera, la del repartidor, va bajo un filete para que se lea como otra
    persona y no como una continuación de la de arriba. El aire de arriba compensa el gap del panel.  */
.class-re-ticket-chat-repartidor {
  padding-top: 10px;
  border-top: 1px solid var(--re-linea);
}

.class-re-ticket-chat-repartidor .class-re-ticket-chat-avatar,
.class-re-ticket-chat-repartidor .class-re-ticket-chat-nombre {
  cursor: pointer;
}

.class-re-ticket-chat-identidad {
  min-width: 0;
}

.class-re-ticket-chat-nombre {
  display: block;
  font-family: var(--re-fuente-titulo);
  /*  El diseño pide un peso 700 que Caprasimo no tiene: solo se sirve en 400. Se deja en 400 y no se
      finge con una negrita sintética, igual que en el saludo de la home.  */
  font-size: 14px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-ticket-chat-rol {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-verde-oscuro);
  margin: 1px 0 0;
}

.class-re-ticket-chat-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.class-re-ticket-chat-lista::-webkit-scrollbar {
  display: none;
}

/*  Cada mensaje ocupa la fila entera y la burbuja se pega a un lado o al otro. El lado lo decide QUIÉN
    habla, no el perfil de quien mira: el cliente siempre a la derecha y el negocio siempre a la
    izquierda, igual que en el marcado anterior.  */
.class-re-ticket-burbuja-fila {
  display: flex;
  justify-content: flex-start;
  padding: 0;
}

.class-re-ticket-burbuja-fila-cliente {
  justify-content: flex-end;
}

.class-re-ticket-burbuja {
  display: block;
  max-width: 85%;
  background: var(--re-campo-fondo);
  border-radius: 14px;
  padding: 9px 13px;
}

.class-re-ticket-burbuja-cliente {
  background: var(--re-verde);
}

.class-re-ticket-burbuja ion-col {
  padding: 0;
}

.class-re-ticket-burbuja-autor {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  color: var(--re-verde-oscuro);
  margin: 0 0 2px;
}

.class-re-ticket-burbuja-texto {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.4;
  color: var(--re-negro);
  white-space: pre-line;
  margin: 0;
}

/*  La hora al canto izquierdo y el check al derecho, con "Borrar" en medio cuando lo hay. El
    space-between lo reparte solo en los dos casos: con dos piezas las manda a los extremos, y con
    tres deja la de en medio centrada.  */
.class-re-ticket-burbuja-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
}

.class-re-ticket-burbuja-hora {
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-ticket-burbuja-borrar {
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
  color: var(--re-rojo);
  cursor: pointer;
  margin: 0;
}

/* Sobre el verde de la burbuja del cliente, los grises y el verde oscuro no se leen */
/*  EL DOBLE CHECK. Un check gris es "enviado" y el doble en verde es "leído". Sustituye a los 👀 que
    llevaba antes pegados al nombre de quien hablaba.  */
.class-re-ticket-burbuja-visto {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--re-gris-texto);
}

.class-re-ticket-burbuja-visto-si {
  color: var(--re-verde);
}

.class-re-ticket-burbuja-cliente .class-re-ticket-burbuja-autor,
.class-re-ticket-burbuja-cliente .class-re-ticket-burbuja-texto,
.class-re-ticket-burbuja-cliente .class-re-ticket-burbuja-hora {
  color: #fff;
}

.class-re-ticket-burbuja-cliente .class-re-ticket-burbuja-hora {
  opacity: 0.75;
}

/*  Sobre el verde de la burbuja del cliente el check va en blanco, y es la OPACIDAD la que distingue
    enviado de leído: el verde del "leído" desaparecería contra su propio fondo.  */
.class-re-ticket-burbuja-cliente .class-re-ticket-burbuja-visto {
  color: #fff;
  opacity: 0.55;
}

.class-re-ticket-burbuja-cliente .class-re-ticket-burbuja-visto-si {
  opacity: 1;
}

.class-re-ticket-chat-compositor {
  align-items: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.class-re-ticket-chat-campo {
  min-width: 0;
}

/*  El textarea se viste por las variables del campo de formulario ( class-re-campo-input ) y aquí solo
    se le quita el alto mínimo de 42px, que en una caja de una línea que crece sola sobra.  */
.class-re-ticket-chat-campo .class-re-campo-input {
  min-height: 0;
  --padding-top: 10px;
  --padding-bottom: 10px;
}

.class-re-ticket-chat-enviar {
  width: 40px !important;
  height: 40px;
  border-radius: 50%;
  background: var(--re-ambar);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  cursor: pointer;
}

.class-re-ticket-chat-enviar ion-icon {
  font-size: 17px;
}

.class-re-ticket-detalles-cabecera {
  align-items: center;
  cursor: pointer;
  color: var(--re-gris-texto);
}

.class-re-ticket-identidad {
  align-items: center;
  gap: 14px;
}

/*  El QR lo pinta qrcode.min.js a 200x200 con un canvas y una img superpuestos ( ver generarQR ). No se
    le puede pedir otro tamaño desde el script, así que se encoge aquí.  */
.class-re-ticket-qr {
  padding: 0;
  line-height: 0;
}

.class-re-ticket-qr img,
.class-re-ticket-qr canvas {
  width: 84px !important;
  height: 84px !important;
}

.class-re-ticket-letra {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--re-campo-fondo);
  cursor: pointer;
}

.class-re-ticket-letra-etiqueta {
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-ticket-letra-valor {
  font-family: var(--re-fuente-titulo);
  font-size: 16px;
  font-weight: 400;
  color: var(--re-ambar-oscuro);
  margin: 0;
}

/*  Cada dato del plegable es una fila etiqueta / valor. La etiqueta tiene un ancho fijo para que todos
    los valores arranquen en la misma vertical: leído en columna, un dato mal alineado cuesta más de
    encontrar que uno con la etiqueta cortada.  */
.class-re-ticket-detalle {
  align-items: baseline;
  gap: 10px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
}

.class-re-ticket-detalle ion-icon {
  font-size: 13px;
  color: var(--re-gris-texto);
}

.class-re-ticket-detalle-etiqueta {
  width: 130px !important;
  max-width: 45% !important;
  color: var(--re-gris-texto);
}

.class-re-ticket-detalle-valor {
  min-width: 0;
  color: var(--re-negro);
  font-weight: 600;
  word-break: break-word;
}

.class-re-ticket-bolsas {
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
}

.class-re-ticket-bolsa {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--re-campo-fondo);
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  color: var(--re-negro);
}

.class-re-ticket-producto {
  align-items: flex-start;
  gap: 12px;
  padding-top: 4px;
}

.class-re-ticket-producto + .class-re-ticket-producto {
  border-top: 1px solid #f1efe8;
  padding-top: 12px;
}

.class-re-ticket-producto-foto {
  width: 64px !important;
  text-align: center;
}

.class-re-ticket-producto-foto ion-avatar {
  width: 64px;
  height: 64px;
  --border-radius: 16px;
  position: relative;
}

/*  El descuento va colgado de la esquina de la foto, fuera del flujo: si ocupara sitio, la foto se
    descuadraría solo en los productos que tienen oferta.  */
.class-re-ticket-producto-dto {
  position: absolute;
  top: -4px;
  left: -4px;
  z-index: 2;
  background: var(--re-verde);
  color: #fff;
  border-radius: 999px;
  padding: 3px 7px;
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.class-re-ticket-producto-estanteria {
  display: block;
  margin-top: 4px;
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
  color: var(--re-gris-texto);
}

/*  La cantidad reutiliza el lenguaje del gestor de comandas: gris en espera, ámbar cogido y verde
    empaquetado. Ahí ya se aprendió que el color dice en qué punto va cada producto.
    Flex para poner la flecha de "esto sube y baja" al lado de la cifra, en la misma línea: en una
    segunda línea la pastilla crecería más que la foto y descuadraría la fila. La flecha nace
    escondida y solo la enciende la variante editable, así la plantilla necesita un único binding en
    vez de repetir la condición también en un *ngIf.  */
.class-re-ticket-producto-cantidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  padding: 5px 9px;
  border-radius: 12px;
  background: var(--re-campo-fondo);
  color: var(--re-gris-texto);
  font-family: var(--re-fuente-texto);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

/*  Sin color propio: ion-icon pinta con currentColor, así la flecha acompaña al ámbar de "cogido" y
    al verde de "empaquetado" en vez de pelearse con ellos.  */
.class-re-ticket-producto-cantidad ion-icon {
  display: none;
  font-size: 12px;
}

.class-re-ticket-producto-cantidad-cogido {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

.class-re-ticket-producto-cantidad-empaquetado {
  background: var(--re-verde-claro);
  color: var(--re-verde-oscuro);
}

/*  SOLO CUANDO LA CANTIDAD SE PUEDE CAMBIAR DE VERDAD ( ver cantidadEditable ): antes la pastilla
    llevaba el cursor de mano siempre, incluso en el ticket de un repartidor, donde el clic no hace
    nada. Va DESPUÉS de -cogido y -empaquetado y no toca el fondo a propósito: el color es de ellos,
    que es lo que dice en qué punto va el producto. El reborde se pinta con box-shadow y no con
    border para no ensanchar la pastilla y descuadrar la fila — el mismo truco que
    class-re-plato-en-pedido.  */
.class-re-ticket-producto-cantidad-editable {
  box-shadow: 0 0 0 1px rgba(46, 43, 37, 0.12), var(--re-sombra-suave);
  cursor: pointer;
}

.class-re-ticket-producto-cantidad-editable ion-icon {
  display: block;
  opacity: 0.65;
}

.class-re-ticket-producto-cuerpo {
  min-width: 0;
}

.class-re-ticket-producto-cuerpo ion-label {
  display: block;
  margin: 0;
}

.class-re-ticket-producto-nombre {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--re-negro);
  cursor: pointer;
}

.class-re-ticket-producto-tachado {
  text-decoration: line-through;
  color: var(--re-gris-texto);
}

.class-re-ticket-producto-lugar {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-verde-oscuro);
  cursor: pointer;
}

.class-re-ticket-producto-expres {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  color: var(--re-verde-oscuro);
}

.class-re-ticket-producto-usuario {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  color: var(--re-ambar-oscuro);
}

.class-re-ticket-producto-extra {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin-top: 2px !important;
}

.class-re-ticket-producto-precio {
  margin-top: 4px !important;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-verde-oscuro);
  cursor: pointer;
}

.class-re-ticket-producto-aviso {
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  color: var(--re-ambar-oscuro);
}

.class-re-ticket-producto-beneficio {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
}

/*  class-re-buscador es el buscador de la home, y allí va a un ancho fijo de 380px porque comparte
    fila con el saludo y la campana. Esta lo estira al panel entero. Ya no la usa el ticket ( su
    buscador se cambió por el botón de añadir producto ), la usa el buscador de la card del catálogo
    ( app-catalogo-pedido ), que va dentro de un ion-row por lo mismo: ese flex-basis de 380px,
    suelto en un panel en columna, se aplicaría a la altura.  */
.class-re-ticket-buscador {
  flex: 1 1 auto;
  width: 100%;
  position: relative;
}

/*  LAS DOS INVITACIONES DE LA CARD DE RESUMEN, con el mismo traje: "Añadir producto", en el sitio del
    buscador que había, y "Añadir una nota al pedido", al final, bajo el total. Una fila a todo lo
    ancho con el filete discontinuo de "aquí va algo más": es una invitación a añadir, no una acción
    del pedido como las de class-re-ticket-acciones, y por eso no lleva el fondo de botón de aquellas.
    La de producto en el ordenador despliega la card del catálogo y su texto pasa a "Cerrar catálogo".  */
.class-re-ticket-add-producto,
.class-re-ticket-add-nota {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px dashed var(--re-ambar);
  border-radius: 14px;
  color: var(--re-ambar-oscuro);
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.class-re-ticket-add-producto ion-icon,
.class-re-ticket-add-nota ion-icon {
  font-size: 20px;
}

.class-re-ticket-separador {
  height: 1px;
  background: #f1efe8;
  margin: 4px 0;
}

.class-re-ticket-linea {
  align-items: baseline;
  gap: 12px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: #7a7870;
}

.class-re-ticket-linea-concepto {
  min-width: 0;
}

.class-re-ticket-linea-importe {
  font-weight: 700;
  white-space: nowrap;
}

/*  El importe que paga el cliente. Va en Caprasimo y más grande, como el "Total" del diseño: de toda la
    lista de importes es el único que se busca con la mirada.  */
.class-re-ticket-linea-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #f1efe8;
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  color: var(--re-negro);
}

.class-re-ticket-linea-total .class-re-ticket-linea-importe {
  color: var(--re-verde-oscuro);
}

/*  Cierra la card, bajo el total. La cabecera dice qué es ( "Nota del pedido" ) y ofrece "Editar" a
    la derecha, como el "Cambiar" de la tarjeta de entrega; el recuadro ámbar de debajo es el mismo
    que tenía la nota en su antiguo panel, y también se pulsa. Sin nota, en su lugar va la
    invitación class-re-ticket-add-nota de aquí arriba.  */
.class-re-ticket-nota-cabecera {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.class-re-ticket-nota-titulo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-negro);
}

.class-re-ticket-nota-titulo ion-icon {
  font-size: 16px;
  color: var(--re-ambar-oscuro);
}

.class-re-ticket-nota-editar {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  color: var(--re-ambar-oscuro);
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.class-re-ticket-nota {
  display: block;
  background: var(--re-ambar-claro);
  border-radius: 14px;
  padding: 10px 13px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.4;
  color: var(--re-ambar-oscuro);
  white-space: pre-line;
  cursor: pointer;
}

/*  Quién la escribió y cuándo. Va en bloque para caer debajo del texto, más pequeña y sin el
    pre-line de arriba, que le partiría la línea por el salto del interpolado.  */
.class-re-ticket-nota-meta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: normal;
  opacity: 0.8;
}

@media (max-width: 767px) {
  .class-re-ticket {
    gap: 14px;
  }
  .class-re-ticket-banner-titulo {
    font-size: 15px;
  }
  /*  La etiqueta del plegable de detalles pasa a su propia línea: con 130px fijos y una pantalla de
      360px, valores como una dirección larga se quedaban en una columna de tres palabras.  */
  .class-re-ticket-detalle {
    flex-wrap: wrap;
    gap: 2px 10px;
  }
  .class-re-ticket-detalle-etiqueta {
    width: auto !important;
    max-width: none !important;
  }
}
/*****************************************************/
/*  FICHA DE PRODUCTO ( diseño "Reparteat - Producto" )
/*****************************************************/
/*  La ficha que se abre al pulsar un producto ( info-producto ). Una sola columna en las dos caras:
    cabecera con el chip de atrás y la miga de pan, foto CUADRADA al lado del título y del precio, y
    debajo la descripción, los extras, los alérgenos, la cantidad y el botón. En el ordenador la
    columna se centra; en el teléfono el botón de añadir flota sobre el contenido.  */
.class-re-producto {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--re-fuente-texto);
}

/*  El ion-col de Ionic viene con flex: 1 1 0, pensado para repartirse el ANCHO de una fila. Dentro
    de un contenedor en columna ese flex-basis: 0 se aplica al ALTO: el bloque se queda con altura
    cero y su contenido se pinta encima de lo que va detrás ( la cantidad sobre los extras, los
    alérgenos invisibles ). Se apaga para que cada bloque mida lo que mide su contenido. Es el mismo
    apaño que ya hace class-re-ticket con sus ion-grid.  */
.class-re-producto > ion-col,
.class-re-producto-columna > ion-col {
  flex: 0 0 auto;
}

/*  Y por lo mismo, nada de la columna se encoge: un flex item se aplasta aunque tenga height fijo,
    que es lo que dejaba la foto de cabecera en una tira de nada.  */
.class-re-producto-columna > * {
  flex-shrink: 0;
}

/*  ESCRITORIO. El panel de "Tu selección" se quitó, pero la segunda columna sigue haciendo falta: la
    ocupa app-panel-pedido, el carrito compartido con la portada y la carta. El contenido va en la
    primera, pegado al margen izquierdo.  */
/*  minmax(0, 1fr) y no 1fr: un 1fr pelado equivale a minmax(auto, 1fr), así que un hijo ancho — el
    carril de alérgenos, un título largo sin espacios — estira la columna y saca scroll horizontal a
    toda la página. Con el mínimo a 0 la columna manda sobre su contenido y no al revés.  */
.class-re-producto-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--re-ancho-panel-pedido);
  align-items: start;
  min-height: 100vh;
}

.class-re-producto-pc > * {
  grid-column: 1;
}

/*  El panel del pedido, que aquí es el componente app-panel-pedido. Solo hay que COLOCARLO, porque
    lo de quedarse fijo al bajar ya lo trae su propia clase ( class-re-panel-pedido ).
    Esta regla ( .clase > .clase, 0-2-0 ) gana a la de arriba ( .clase > *, 0-1-0 ), así que no hace
    falta !important. Eso sí: el <app-panel-pedido> tiene que ser HIJO DIRECTO del ion-grid,
    hermano de class-re-producto-columna, no ir metido en una ion-col.  */
.class-re-producto-pc > .class-re-panel-pedido {
  grid-column: 2;
  grid-row: 1/span 99;
}

/*  El padding vive en la columna y no en cada bloque. El hueco de abajo es grande porque en el
    teléfono el botón de añadir flota sobre el contenido y taparía el último bloque; en el ordenador
    no flota nada, así que la regla de -pc lo devuelve a su medida.  */
.class-re-producto-columna {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 20px 110px;
}

/*  Sin max-width y sin margin: 0 auto: el contenido arranca pegado a la izquierda y se estira hasta
    el ticket, que es la segunda columna de la rejilla. El minmax(0, 1fr) de arriba es lo que evita
    que un hijo ancho ( el carril de alérgenos ) desborde ese hueco.  */
.class-re-producto-pc .class-re-producto-columna {
  padding: 32px 44px 48px;
}

.class-re-producto-cargando {
  width: 90px;
}

/*  El atrás va donde va siempre, no flotando sobre la foto. En el teléfono la fila vive dentro de un
    ion-header, que en la ficha del producto es el de vidrio de la portada ( class-re-cabecera-header
    + class-re-cabecera-glass ): de ahí salen el fondo, el borde y el aire.

    class-re-header-crema es para las páginas que NO usan ese header de vidrio: el toolbar va SIN
    color= porque colorPrincipal es blanco puro y dejaría una costura contra el crema del contenido.
    Ahora mismo no la usa ninguna página —la última era add-negocio, que pasó a la de vidrio como el
    resto—: se conserva porque es la alternativa documentada, no porque haya nada colgando de ella.  */
.class-re-header-crema {
  box-shadow: none;
  border: none;
}

.class-re-header-crema ion-toolbar {
  --background: var(--re-fondo);
  --border-width: 0;
  padding-inline: 20px;
  padding-top: calc(var(--ion-safe-area-top, 0px) + 6px);
  padding-bottom: 6px;
}

/*  En el ordenador la misma fila es la primera del contenido, porque el modal se abre a pantalla
    completa y no lleva header.  */
.class-re-producto-pc .class-re-producto-cabecera-fila {
  margin-bottom: 24px;
}

/*  La miga de pan del diseño. Es texto, no un enlace: la ficha del negocio se quitó de esta pantalla,
    aquí solo dice de dónde viene el producto. min-width: 0 para que el text-overflow funcione dentro
    del flex de la cabecera en vez de empujar los chips fuera.  */
.class-re-producto-miga {
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--re-gris-texto);
}

.class-re-producto-miga ion-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-producto-identidad {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
}

/*  El cuadrado del diseño. overflow: hidden es lo que redondea de verdad la foto, que va a sangre
    dentro de la caja; el ámbar se ve mientras carga y si el producto no tiene foto.  */
/*  LOS TRES ANCHOS ( width, min-width y max-width ) SON NECESARIOS, no es redundancia. Esto es un
    ion-col size="auto" e Ionic lo estila con ion-col[size-auto] { width: auto } y ion-col
    { max-width: 100% }, selectores que ganan en especificidad a una clase suelta: el width se
    ignora, así que la caja se dimensiona por su contenido — el swiper, que mide lo que mida la
    foto — y deja de ser cuadrada. El min-width pone el suelo y el max-width el techo, y entre los
    dos la clavan a la medida pase lo que pase.  */
.class-re-producto-foto {
  flex: 0 0 auto;
  position: relative;
  width: 144px;
  min-width: 144px;
  max-width: 144px;
  height: 144px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--re-ambar-claro);
}

.class-re-producto-pc .class-re-producto-foto {
  width: 280px;
  min-width: 280px;
  max-width: 280px;
  height: 280px;
}

/*  display: block explícito en el swiper: el elemento <swiper> es un custom element y sin él es
    inline, con lo que el alto del 100% no se aplica y la foto no llega a verse.  */
.class-re-producto-foto-swiper,
.class-re-producto-foto-swiper .swiper-slide,
.class-re-producto-foto-vacia {
  display: block;
  width: 100%;
  height: 100%;
}

/*  EL SELECTOR LARGO NO ES CAPRICHO: ionic-swiper.css trae
        .swiper .swiper-slide img { width: auto; max-width: 100%; height: auto; max-height: 100% }
    que es especificidad 0-2-1 y gana a una clase suelta ( 0-1-0 ). Con height: auto la foto se
    queda en su proporción natural dentro del cuadrado y deja el hueco ámbar debajo, y el
    object-fit: cover no hace nada porque no le sobra caja que recortar. Este selector es 0-3-1 y
    gana sin depender del orden de los ficheros.
    Ojo: esa regla de Ionic afecta a TODOS los swiper de la app. No se toca en global porque hay
    galerías que la quieren, como la foto de promo ( class-re-promo-foto-img, que va a contra
    propósito ): si otra galería tiene que llenar su hueco, se le hace lo mismo que aquí.  */
.class-re-producto-foto .swiper-slide img.class-re-producto-foto-img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
}

/*  Sin foto, el degradado ámbar del diseño en lugar de un hueco blanco.  */
.class-re-producto-foto-vacia {
  background: linear-gradient(135deg, var(--re-ambar-claro), var(--re-ambar-oscuro));
}

.class-re-producto-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/*  El mismo apaño que ya lleva class-re-producto-columna, y por lo mismo: en un contenedor en
    columna un hijo se aplasta aunque tenga alto propio, y aquí van apilados el título, el precio,
    la valoración, la descripción y los chips.  */
.class-re-producto-datos > * {
  flex-shrink: 0;
}

/*  Compartir y favorito, debajo del título. En la cabecera solo se queda el atrás.  */
.class-re-producto-acciones-secundarias {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

/*  Van apilados, no en una fila con el precio a la derecha: título, precio y debajo el resto.  */
.class-re-producto-titulo ion-label {
  font-family: var(--re-fuente-titulo);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--re-negro);
}

.class-re-producto-pc .class-re-producto-titulo ion-label {
  font-size: 30px;
}

/*  En fila y alineado por la línea base, para que el precio tachado de la oferta se lea al lado del
    precio bueno y no encima.  */
.class-re-producto-precio {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--re-fuente-titulo);
  font-size: 19px;
  font-weight: 400;
  white-space: nowrap;
  color: var(--re-verde-oscuro);
}

.class-re-producto-pc .class-re-producto-precio {
  font-size: 26px;
}

.class-re-producto-precio-tachado {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  text-decoration: line-through;
  color: var(--re-gris-texto);
}

.class-re-producto-sin-iva ion-label,
.class-re-producto-ahorro ion-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--re-gris-texto);
}

.class-re-producto-ahorro ion-label {
  color: var(--re-ambar-oscuro);
}

.class-re-producto-valoracion {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--re-ambar-oscuro);
  cursor: pointer;
}

.class-re-producto-valoracion ion-icon {
  font-size: 13px;
}

/*  La descripción cambia de sitio según la cara, así que el margen de arriba también: en el teléfono
    va debajo de la fila de la foto y a todo el ancho, y necesita despegarse de ella; en el ordenador
    vive dentro de la columna de datos y solo la separa de la valoración.  */
.class-re-producto-descripcion ion-label {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: #7a7870;
}

.class-re-producto-pc .class-re-producto-descripcion ion-label {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.7;
}

.class-re-producto-bloque {
  display: flex;
  flex-direction: column;
}

/*  El título de sección de la ficha es más pequeño que el general de la app: aquí conviven varios
    ( Extras, Alérgenos ) en una pantalla corta, y a 19px se comían la ficha.  */
.class-re-producto-seccion {
  display: block;
  margin: 20px 0 8px;
  font-size: 15px;
}

/*  ESCRITORIO: los extras en dos columnas, que es lo que pide el diseño y para lo que sobra sitio
    ahora que la ficha llega hasta el ticket. Funciona porque el marcado NO envuelve cada extra:
    los títulos de sección y las pastillas son hijos directos ( ver el ng-container del .html ).  */
.class-re-producto-pc .class-re-producto-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  align-items: start;
}

/*  El título de categoría cruza las dos columnas: si ocupase una celda, la primera pastilla de su
    grupo se pintaría a su lado en vez de debajo.  */
.class-re-producto-pc .class-re-producto-extras-titulo {
  grid-column: 1/-1;
}

/*  La pastilla del diseño: nombre a la izquierda, importe a la derecha, y en ámbar la que está
    marcada. Es la misma forma con la que el mockup pinta tamaños y extras. En blanco cuando está
    sin marcar, que sobre el crema del fondo se distingue igual y queda más limpio que el gris.  */
.class-re-producto-pastilla {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--re-negro);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.class-re-producto-pc .class-re-producto-pastilla {
  margin-bottom: 10px;
  padding: 14px 18px;
  font-size: 14px;
}

.class-re-producto-pastilla-marcada,
.class-re-producto-pc .class-re-producto-pastilla-marcada {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

.class-re-producto-pastilla-nombre {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.class-re-producto-pastilla-nombre ion-icon {
  flex-shrink: 0;
  font-size: 16px;
}

.class-re-producto-pastilla-importe {
  white-space: nowrap;
}

/*  RELACIONADOS. En el teléfono no son un carril que se arrastra como en la portada: aquí el bloque
    va al final de una ficha por la que ya se está bajando, y una columna se recorre con el mismo
    gesto. En el ordenador sí es la rejilla de siempre ( class-re-rejilla-platos ).  */
.class-re-producto-relacionados {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.class-re-producto-alergenos {
  flex-wrap: nowrap;
  padding: 2px 0;
}

.class-re-producto-alergeno {
  flex-shrink: 0;
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.class-re-producto-fila-cantidad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}

.class-re-producto-etiqueta-cantidad ion-label {
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 400;
  color: var(--re-negro);
}

/*  El botón se pinta también desde la barra flotante del teléfono, que está FUERA de
    class-re-producto: ahí sus ion-col no heredarían el reset de la rejilla y cogerían el padding por
    defecto.  */
.class-re-producto-stepper,
.class-re-producto-acciones {
  --ion-grid-column-padding: 0;
}

.class-re-producto-stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--re-campo-fondo);
}

/*  min-width y max-width por lo mismo que la foto: son ion-col size="auto" e Ionic les pone
    width: auto con más especificidad, así que sin ellos salían ovalados en vez de redondos.  */
.class-re-producto-stepper-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--re-sombra-suave);
  font-size: 15px;
  font-weight: 700;
  color: var(--re-negro);
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.class-re-producto-stepper-boton-mas {
  background: var(--re-verde);
  color: #fff;
  box-shadow: none;
}

.class-re-producto-stepper-cifra {
  min-width: 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--re-negro);
}

/*  EN EL TELÉFONO EL BOTÓN FLOTA, sin fondo debajo. Fue primero un class-fijar-arriba ( un sticky
    pegado ARRIBA por el que el botón se colaba sobre el contenido al bajar ) y después un ion-footer
    con fondo crema en degradado; ese fondo es justo lo que rompía el estilo de la app, donde los
    botones de abajo van sueltos sobre el contenido ( class-re-panel-pedido-barra en la portada y en
    la carta ). Un ion-footer no puede ser transparente de verdad: es hermano del ion-content y por
    detrás enseña el blanco del ion-modal, así que esto ya no es un footer sino una fila normal fuera
    del contenido, colocada respecto a la ventana.
    El host solo POSICIONA: el verde lo pinta class-re-producto-boton, la pastilla de dentro.  */
.class-re-producto-barra {
  display: block;
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(20px + var(--ion-safe-area-bottom, 0px));
  z-index: 10;
}

.class-re-producto-acciones {
  display: flex;
}

.class-re-producto-boton {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 22px;
  border-radius: 999px;
  background: var(--re-verde);
  color: #fff;
  box-shadow: var(--re-sombra-media);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.class-re-producto-boton-inactivo {
  opacity: 0.5;
  pointer-events: none;
}

/*  En el ordenador el botón no flota: va al final de la columna, debajo de la cantidad.  */
.class-re-producto-pie-contenido {
  margin-top: 26px;
}

/*  Ya no tiene estilos propios. Era un ion-fab flotando abajo a la derecha, que en el ordenador
    encima había que apartar del ancho del panel del pedido. Ahora es la pastilla ámbar de la
    cabecera ( class-re-boton-chip class-re-boton-chip-ambar ), la misma que usa productos.  */
/*****************************************************/
/* IMAGEN NUEVA — AVISOS                             */
/*****************************************************/
/*  El aviso único de la app ( utilidades.presentToastPopOver ). No es un ion-toast: es un ion-popover
    en modo ios abierto SIN event, que es lo que hace que Ionic lo centre en la pantalla.

    Y no es UN popover, son DOS: el componente de dentro ( InfoComponent, en Common ) abre encima un
    segundo popover con el mismo texto, y es el cierre de ESE, medio segundo antes, el que cierra al de
    fuera. Como Common no se toca, aquí no se quita ninguno de los dos: se viste el de fuera, que es el
    que dura todo el aviso, y al de dentro se le hace invisible sin estorbarle el ciclo de vida.  */
ion-popover.class-popover-toast {
  /*  Fondo, sombra y medidas sí tienen variable en ion-popover. El RADIO no: ion-modal tiene
      --border-radius y ion-popover no, su 10px de ios es una regla suelta sobre .popover-content.
      Por eso baja al ::part, igual que en .popover-pequeño y compañía.  */
  --background: #fff;
  --box-shadow: var(--re-sombra-media);
  /*  ANCHO FIJO, y no 'auto' aunque encogerlo hasta el texto quedara mejor en los avisos de dos
      palabras. El motivo es el centrado: Ionic mide el panel UNA sola vez, antes de colocarlo, y
      escribe left = anchoPantalla/2 - anchoPanel/2 ( ver getPopoverDimensions en utils.js y
      ios.enter.js ). Con un ancho que depende del contenido, cuando Angular termina de pintar el
      texto el panel crece, pero el left ya está escrito con la medida vieja: el aviso se queda
      descentrado hacia la derecha. Con una medida que no depende del contenido, lo que Ionic mide
      y lo que acaba midiendo el panel son lo mismo, y sale centrado siempre.
      El max-width en % es solo para los teléfonos estrechos, donde 300px no dejarían margen.  */
  --width: 300px;
  --max-width: 90%;
  /*  Tope generoso a propósito: con el pointer-events de abajo el panel no se puede arrastrar, así
      que si un aviso llegara a necesitar scroll no habría forma de leerlo entero.  */
  --max-height: 80vh;
  /*  El backdrop se sigue creando ( eso está en Common ), pero a opacidad 0 no se ve. Ojo:
      invisible NO es intangible, un elemento a opacity 0 se sigue comiendo los toques.  */
  --backdrop-opacity: 0;
  /*  De que no BLOQUEE se encarga esto. El aviso dura entre 4 y 10 segundos y es el único mecanismo
      de avisos de la app: si durante ese rato el backdrop se tragara los toques, la app se sentiría
      colgada. El host es un position: fixed a pantalla completa, así que apagarle los eventos deja
      pasar el toque a través del backdrop Y del panel hasta lo que haya debajo.
      Se pierde el cierre tocando el fondo, y da igual: el aviso se cierra solo con su setTimeout,
      que es JavaScript y no se entera del CSS. Nada más se pierde, porque pulsar el panel hoy ya
      no hace nada ( el popover se crea sin dismissOnSelect ).  */
  pointer-events: none;
  /*  Si algún día hay que subirlo del centro, se hace AQUÍ y no con margin en el ::part(content):
      Ionic escribe el top en línea como calc( Xpx + var(--offset-y) ).  */
  /*  El borde es para escritorio: ahí Ionic añade .popover-desktop y con ella medio píxel de línea
      gris alrededor del contenido, que al lado de nuestra sombra se ve como un cerco sucio.  */
}
ion-popover.class-popover-toast::part(content) {
  border-radius: 20px;
  border: 0;
}

/*  El componente de Common no trae estilos propios ( su .scss no se toca ), así que su etiqueta es un
    elemento en línea y por debajo asomaría una franja del blanco del popover. Mismo apaño que
    app-options / app-metodo-envio en el popover de opciones.
    El relleno del panel se pone aquí y no en el ::part(content) porque el contenido del popover es
    scrollable: puesto dentro, el aire de abajo acompaña al texto en vez de quedarse fijo al borde.  */
ion-popover.class-popover-toast app-info {
  display: block;
  padding: 18px 20px;
  /*  El ion-grid del componente viene con 5px de relleno propio y su ion-col con otros 5: diez
      píxeles que se sumarían al padding de arriba y descuadrarían el panel.  */
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
}

/*  El texto.

    La familia va explícita porque --ion-font-family NO está definida: la línea que lo intenta en
    theme/variables.scss lleva guiones tipográficos en vez de guiones normales y el navegador la
    descarta, así que sin esto el aviso saldría con la fuente del sistema.

    Los !important son para ganarle a .class-texto, que fija 15px con !important.

    Y --ion-color-base es lo que mata el verde: el ion-label del popover de fuera lleva
    color="colorSecundario" escrito en el HTML de Common, y ese verde lo pinta el propio ion-label
    desde dentro de su shadow con :host(.ion-color) { color: var(--ion-color-base) }, que gana por
    especificidad a cualquier regla nuestra. En vez de pelear, se le cambia el valor a la variable que
    esa regla lee.  */
ion-popover.class-popover-toast ion-label {
  --ion-color-base: var(--re-negro);
  color: var(--re-negro) !important;
  font-family: var(--re-fuente-texto) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  /*  Hay avisos escritos en dos párrafos con saltos de línea de verdad, y sin pre-line se quedarían
      en un churro seguido. No hace falta desactivar ningún recorte con puntos suspensivos: ion-label
      solo recorta cuando cuelga de un ion-item, y este cuelga de un ion-col.
      El centrado ya lo hereda del class-justificar-centro de la columna.  */
  white-space: pre-line !important;
}

/*  El segundo popover, el que InfoComponent abre sobre sí mismo con el mismo texto. Existía para
    pintar el texto dos veces; con el diseño nuevo sobra, pero NO se puede quitar: vive en Common y
    además es la pieza que manda, porque su cierre a timer-500 es lo que dispara el cierre del de
    fuera. Así que se le deja nacer y morir igual y solo se le quita lo que se ve.

    Se apaga con opacity y NO con display: none a propósito. present() espera con await a que termine
    la animación de entrada; con display: none el elemento deja de pintarse y esa espera puede no
    resolverse nunca en los WebView que no usan la Web Animations API, y entonces el aviso se quedaría
    colgado para siempre. Con opacity el elemento sigue ahí y el ciclo de vida es el de antes.

    Y lleva su propio backdrop porque Ionic solo se salta el backdrop de los popovers ANIDADOS, y estos
    dos no lo son: cuelgan del mismo ion-app, como hermanos. De ahí que haya que apagarlo aquí también.  */
ion-popover.class-popover-toast-text {
  --backdrop-opacity: 0;
  pointer-events: none;
}
ion-popover.class-popover-toast-text::part(content) {
  opacity: 0;
}

/*  Common/services/firebase.service.ts tiene su PROPIO presentToast ( un ion-toast ) y lo usa 9 veces
    para los errores de Google, Apple, registro y recuperar contraseña. Esas llamadas no se pueden
    migrar sin tocar Common, así que se les da aquí la misma piel para que no desentonen. Va sobre la
    etiqueta y no sobre una clase porque ese create() no pasa ninguna cssClass.
    Lo único que no se puede igualar es la posición: salen abajo, no centrados.  */
ion-toast {
  --background: #fff;
  --color: var(--re-negro);
  --border-radius: 20px;
  --box-shadow: var(--re-sombra-media);
  font-family: var(--re-fuente-texto);
}

/*****************************************************/
/* IMAGEN NUEVA — RESEÑAS                            */
/*****************************************************/
/*  Sacado del diseño "Reparteat - Reseñas", que trae marco de teléfono y de ordenador. Viste la page
    opiniones, que sirve igual para las reseñas de un negocio que para las de un producto.

    La disposición BASE es la del TELÉFONO: una columna con la ficha, el formulario y la lista. Lo del
    ordenador va agrupado al final, colgando de .class-re-resenas-pc, que la página pone según
    datalocal.esEscritorio: ahí son DOS columnas, la ficha y el formulario a la izquierda y las
    reseñas a la derecha.

    Casi todo se reutiliza de los bloques anteriores ( class-re-panel, class-re-campo-input,
    class-re-boton-guardar, class-re-avatar, class-re-cabecera-pagina, class-re-seccion-titulo… ):
    aquí solo está lo que esta pantalla añade.

    UNA DESVIACIÓN CONSCIENTE DEL DISEÑO: sus tarjetas de reseña son #f6f4ee, que es exactamente
    nuestro --re-fondo, o sea el fondo del propio contenido — copiado tal cual no se vería ninguna
    caja. Van blancas con sombra suave, que además es el lenguaje del resto de la app.  */
/*  El ion-header del teléfono es el de vidrio de la portada ( class-re-cabecera-header +
    class-re-cabecera-glass ): de ahí salen el fondo, el borde y el aire, así que aquí ya no hace
    falta vestir el toolbar.  */
/*  class-re-cabecera-pagina reparte con space-between porque en mi-perfil hay TRES piezas ( volver,
    título y ajustes ). Aquí solo hay dos, así que el título se iría al otro extremo de la pantalla:
    van juntos y pegados a la izquierda, como en el diseño.  */
.class-re-resenas-cabecera {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 14px;
}

.class-re-resenas-cabecera .class-re-titulo-pagina {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-resenas-cargando {
  width: 90px;
}

/*  El relleno propio del ion-grid ( y el de cada ion-col ) se apaga de una vez para toda la pantalla:
    el aire lo pone class-re-cuerpo, y los huecos entre bloques, los gap de más abajo.  */
.class-re-resenas {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí
    casi todas viven dentro de una caja en columna, y ese flex-basis: 0 con grow las haría repartirse
    el ALTO a partes iguales: la ficha, el formulario y la lista acabarían midiendo lo mismo. Con
    0 0 auto cada una mide lo que mida su contenido.  */
.class-re-resenas ion-col {
  flex: 0 0 auto;
}

/*  EL width: 100% Y EL margin-inline: 0 NO SOBRAN, son lo que hace que la rejilla ocupe la pantalla.
    ion-grid viene de Ionic con margin-inline: auto y SIN width ( ver grid.css: solo .grid-fixed lleva
    anchura ). Como esta rejilla es hija de un contenedor flex en COLUMNA, esos márgenes automáticos
    caen en el eje transversal, y un margen auto en el eje transversal se come el espacio libre y
    ANULA el estirado: la rejilla se encoge hasta su contenido y se queda centrada, con dos huecos
    enormes a los lados. Dándole la anchura no queda espacio libre que repartir y los auto valen 0.  */
.class-re-resenas-rejilla {
  width: 100%;
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.class-re-resenas-columna {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 16px;
}

/*  El "Opiniones" reutiliza class-re-seccion / class-re-seccion-titulo de la portada, pero allí la
    fila trae un margen de 28px arriba para separar carruseles y el título va a 19px, que es el tamaño
    de un encabezado de portada. Aquí el aire lo pone el gap de la columna, y el diseño escribe este
    título más pequeño: es el rótulo de una lista, no el titular de la pantalla.  */
.class-re-resenas-columna .class-re-seccion {
  margin: 0;
}

.class-re-resenas-columna .class-re-seccion-titulo {
  font-size: 15px;
}

/*  En el teléfono va suelta sobre el crema, sin caja; en el ordenador el diseño la mete en un panel
    blanco ( ver el bloque del final ).

    LA COLUMNA ES OBLIGATORIA, no un adorno: el logo, el nombre y la nota van cada uno en su fila y
    centrados. Un display: flex a secas es flex-direction: row, y sin esta línea los tres se colocan
    uno al lado del otro. El align-items los centra en horizontal ( es el eje transversal de una
    columna ) y el text-align hace lo propio con los textos de más de una línea.  */
.class-re-resenas-ficha {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 6px 0;
}

/*  Se reutiliza el avatar de mi-perfil y solo se le cambia la medida.
    LOS TRES ANCHOS SON NECESARIOS, no es redundancia: esto es un ion-col, e Ionic lo estila con
    ion-col { max-width: 100% } y compañía, selectores que ganan a una clase suelta. El min-width pone
    el suelo y el max-width el techo, y entre los dos lo clavan al cuadrado.  */
.class-re-resenas-ficha .class-re-avatar {
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  height: 64px;
}

.class-re-resenas-nombre {
  font-family: var(--re-fuente-titulo);
  font-size: 19px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

/*  En el TELÉFONO las estrellas y el "4,8 · 312 reseñas" van en la misma línea; en el ordenador el
    diseño los separa en dos ( ver el bloque del final ). El componente app-estrellas pinta su propio
    número, pero aquí se le deja sin [total] para escribirlo con el formato del diseño.  */
.class-re-resenas-nota {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

/*  EL TAMAÑO DE LAS ESTRELLAS. El diseño pinta las de la ficha y las del formulario IGUALES, a 22px,
    y más pequeñas las de cada reseña. Los tamaños que trae el componente ( 17px, 11px con
    tamano="pequeno", y 28px cuando además son pulsables ) están escritos con !important, así que para
    ganarles hace falta otro.
    Se baja hasta .class-estrellas a propósito: si la regla se quedara en el ion-icon suelto también
    encogería las papeleras, que son vecinas de las estrellas en las dos filas.  */
.class-re-resenas-nota .class-estrellas ion-icon,
.class-re-resenas-estrellas .class-estrellas ion-icon {
  width: 22px !important;
  height: 22px !important;
}

.class-re-resenas-tarjeta .class-estrellas ion-icon {
  width: 14px !important;
  height: 14px !important;
}

/*  El diseño escribe los títulos de los paneles de esta pantalla un punto más grandes que los de
    mi-perfil, de donde sale class-re-panel-titulo.  */
.class-re-resenas .class-re-panel-titulo {
  font-size: 15px;
}

.class-re-resenas-nota-texto {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-resenas-estrellas {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
}

/*  El textarea se viste por las variables del campo de formulario ( class-re-campo-input ) y aquí
    solo se le quita el alto mínimo de 42px, que con rows="3" ya no pinta nada.  */
.class-re-resenas-campo {
  min-height: 0;
}

.class-re-resenas-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.class-re-resenas-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--re-sombra-suave);
}

/*  El nombre a la izquierda y las estrellas a la derecha; abajo, la fecha y la papelera. nowrap para
    que un nombre largo no tire las estrellas a la línea siguiente: lo que se recorta es el texto.  */
.class-re-resenas-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
}

.class-re-resenas-autor {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
}

.class-re-resenas-texto {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.5;
  color: var(--re-gris-texto);
  margin: 0;
  white-space: pre-line;
}

.class-re-resenas-fecha {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 0;
}

/*  La papelera de borrar una reseña y la que quita la puntuación antes de enviarla. El diseño no
    dibuja ninguna de las dos, pero son funcionalidad que ya existía.  */
.class-re-resenas-borrar {
  flex: 0 0 auto;
  font-size: 15px;
  color: var(--re-rojo);
  cursor: pointer;
}

.class-re-resenas-vacio {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.5;
  color: var(--re-gris-texto);
}

/*  FICHA DEL REPARTIDOR ( info-repartidor ): lo único que tiene de más sobre la de un negocio es la
    fila del teléfono, con el número y un botón de llamar en píldora verde, como el de guardar pero
    pequeño, porque aquí es una acción secundaria de la ficha y no el cierre de un formulario.  */
.class-re-repartidor-telefono {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.class-re-repartidor-telefono ion-icon {
  vertical-align: middle;
}

.class-re-repartidor-llamar {
  --background: var(--re-verde);
  --background-activated: var(--re-verde-oscuro);
  --background-hover: var(--re-verde-oscuro);
  --color: #fff;
  --border-radius: 999px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 34px;
  margin: 0;
}

/*  Dos columnas: a la izquierda la ficha y el formulario, a la derecha las reseñas, que es donde hay
    que leer y por eso se lleva la parte ancha ( 1.6fr del diseño ).
    minmax(0, 1fr) y no 1fr: un 1fr pelado equivale a minmax(auto, 1fr), así que un nombre largo sin
    espacios estiraría la columna y sacaría scroll horizontal a toda la página.  */
.class-re-resenas-pc {
  /*  La pastilla de volver también crece: en el ordenador el diseño la pone a 40px y con la esquina
      un punto más redonda, para que no se quede pequeña al lado de un título de 22px.  */
  /*  El diseño escribe 1fr / 1.6fr, que a su ancho ( 1360px, menos el menú y el aire, dejan 1042 )
      son 390px para la ficha y el resto para las reseñas. Aquí NO se copia esa proporción tal cual:
      en un monitor ancho un 1fr crecería sin freno y la ficha acabaría siendo una caja de 900px con
      un logo de 76px en medio. Se le pone tope a la columna de la izquierda y las reseñas se quedan
      con TODO lo que sobre, sea la pantalla la que sea.
      El tope son 480px y no los 390px que mide en el diseño: con la anchura justa la ficha se ve
      estrecha al lado de la lista, y el campo de la reseña parte el texto en demasiadas líneas.  */
  /*  Aquí la ficha SÍ es una caja blanca, como el panel del formulario que tiene debajo.  */
  /*  Aquí la nota va en DOS líneas: las estrellas arriba y "4,8 sobre 5 · 312 reseñas" debajo. En
      el teléfono el diseño las pone en una sola, que es lo que hace la regla de más arriba.  */
}
.class-re-resenas-pc .class-re-resenas-cabecera {
  margin-bottom: 22px;
}
.class-re-resenas-pc .class-re-resenas-cabecera .class-re-boton-chip {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 14px;
}
.class-re-resenas-pc .class-re-titulo-pagina {
  font-size: 22px;
}
.class-re-resenas-pc .class-re-resenas-rejilla {
  display: grid;
  grid-template-columns: minmax(280px, 480px) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}
.class-re-resenas-pc .class-re-resenas-ficha {
  background: #fff;
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: var(--re-sombra-suave);
}
.class-re-resenas-pc .class-re-resenas-ficha .class-re-avatar {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  height: 76px;
}
.class-re-resenas-pc .class-re-resenas-nombre {
  font-size: 20px;
}
.class-re-resenas-pc .class-re-resenas-nota {
  flex-direction: column;
  gap: 4px;
}
.class-re-resenas-pc .class-re-resenas-columna .class-re-seccion-titulo {
  font-size: 16px;
}
.class-re-resenas-pc .class-re-resenas-autor {
  font-size: 14px;
}
.class-re-resenas-pc .class-re-resenas-texto {
  line-height: 1.6;
}

/*****************************************************/
/* IMAGEN NUEVA — CONFIGURACIÓN DEL NEGOCIO          */
/*****************************************************/
/*  Sacado del diseño "Reparteat - Config Restaurante", que trae marco de teléfono y de ordenador.

    CASI TODO LO QUE HACE FALTA YA ESTABA. El panel blanco, la etiqueta y el campo de formulario, el
    botón de guardar y la pastilla de acción salieron del diseño del perfil y aquí se reutilizan tal
    cual: class-re-panel, class-re-panel-titulo, class-re-fila-campos, class-re-campo,
    class-re-campo-etiqueta, class-re-campo-input, class-re-boton-guardar, class-re-boton-chip y
    class-re-id. La fila de interruptor es class-re-ajuste, la de las notificaciones y add-producto.
    Lo que se añade abajo son SOLO las piezas que este formulario tiene y el perfil no: el subtítulo
    de la cabecera, el logo cuadrado, el aviso ámbar, las filas de lista con filete, la casilla, el
    carril de personas, la fila de dos botones y el pie fijo de guardar.

    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-negocio-pc, que la página pone según datalocal.esEscritorio.  */
/*  Se apaga el relleno propio del ion-grid ( y el de cada ion-col ), pero NO el padding del elemento:
    ese es el de class-re-cuerpo, que es el aire que separa los paneles del borde de la pantalla y el
    que tienen todas las demás páginas ( 44px en el ordenador, 20px en el teléfono ). Estaba puesto a
    cero y por eso las tarjetas de esta pantalla salían pegadas a los márgenes, que es justo lo que
    class-re-alta y class-re-notis no hacen.  */
.class-re-negocio {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--re-fuente-texto);
}

/*  EL APAÑO DEL ion-col, que es el mismo que ya hacen class-re-producto y class-re-ticket. El ion-col
    de Ionic viene con flex-basis: 0 y flex-grow: 1, pensado para repartirse el ANCHO de una fila.
    Dentro de un contenedor en COLUMNA ese flex-basis: 0 se aplica al ALTO: la columna, el panel o el
    campo se quedan con altura cero y su contenido se pinta encima de lo que va detrás. Y el flex-shrink
    de 1 aplasta lo que sí tiene alto propio, que es lo que dejaría el logo y los avatares en una tira
    de nada. Con flex: 0 0 auto cada hijo mide lo que mide su contenido y no se encoge.

    Van enumerados los SEIS contenedores en columna que tiene la pantalla y no un
    ".class-re-negocio ion-col" a secas: eso alcanzaría también a los ion-col que van dentro de una
    fila ( class-re-fila-campos, class-re-ajuste, el carril... ), donde el reparto del ancho es justo
    lo que se quiere y lo pone class-re-campo con su flex: 1.  */
.class-re-negocio > *,
.class-re-negocio > form > *,
.class-re-negocio-rejilla > *,
.class-re-negocio-columna > *,
.class-re-negocio-poblacion > *,
.class-re-negocio .class-re-panel > * {
  flex: 0 0 auto;
}

/*  EL FORMULARIO ES UNA CAJA MÁS DE LA PILA. La cabecera del ordenador y el gif de carga tienen que
    pintarse SIEMPRE, también mientras se descarga el negocio o cuando no hay ninguno que editar
    ( le pasa a quien no es superusuario y abre "nuevo negocio" ): colgaban del mismo *ngIf que el
    formulario y desaparecían con él, y un modal a pantalla completa sin cabecera se queda sin botón
    de cerrar. Por eso las dos filas salieron del <form> y el <form> pasó a ser un hijo más del
    cuerpo. Un <form> es display: block, así que el gap de .class-re-negocio dejaría de separar los
    paneles: se le pone aquí el suyo.  */
.class-re-negocio > form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.class-re-negocio-cargando {
  width: 90px;
}

/*  Las dos columnas del ordenador. En el teléfono es una sola pila y el orden que se ve es el del
    marcado, que es el de siempre: acceso, información, contacto... ( ver la cabecera de la page ).  */
.class-re-negocio-rejilla {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.class-re-negocio-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/*  El bloque de la localidad de reparto elegida. Va un nivel MÁS ADENTRO que los demás campos del
    panel ( cuelga del ion-col que lo condiciona, no del panel ), así que el gap del panel no le llega
    y sus filas saldrían pegadas unas a otras. Se lo pone él.  */
.class-re-negocio-poblacion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*  Y la lista de días, al revés: SIN gap. Lo que separa sus filas es el filete de
    class-re-fila-lista, y un hueco lo dejaría flotando en medio de la nada.  */
.class-re-negocio-dias {
  display: block;
}

/*  El diseño pone dos líneas donde el resto de páginas pone una: qué estás haciendo ( "Editar
    negocio" ) y sobre qué ( "Casa Zafrina" ). Por eso la cabecera de página, que es la misma
    class-re-cabecera-pagina de siempre, necesita aquí una columna de textos en medio.  */
/*  En columna a propósito: fuera de un ion-item el ion-label no es un bloque ( Ionic solo se lo pone
    con :host-context(.item) ), así que dos ion-label sueltos se pondrían en la misma línea. Como
    items de un flex en columna quedan uno debajo del otro sin tocar las clases de texto, que las
    comparten otras páginas.  */
.class-re-cabecera-textos {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.class-re-subtitulo-pagina {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 2px 0 0;
}

/*  La identidad del negocio a la izquierda y "Acceso y visibilidad" a su derecha, que es lo que
    decide si el negocio se ve y quién entra.

    LA FILA ENVUELVE ( flex-wrap ) en vez de tener un corte propio por ancho: la tarjeta de acceso
    pide 280px de base, así que donde no caben los dos al lado —el teléfono, y el ordenador con la
    ventana estrecha— baja ella sola debajo del logo, que se queda a la izquierda igual. Con
    align-items: flex-start la tarjeta del logo mide lo que mide su contenido y no se estira hasta
    el alto de la de al lado.  */
.class-re-negocio-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

/*  El logo va en size="auto", así que su tarjeta mide lo que mide el pie ( "Cambiar el logo del
    negocio" ), que es más ancho que el cuadrado.  */
.class-re-negocio-cabeza-acceso {
  flex: 1 1 280px;
  min-width: 0;
}

/*  Cuadrado con las esquinas muy redondeadas, no redondo como el avatar de una persona: es la marca
    del restaurante, y el diseño la trata como una tarjeta, no como una cara.  */
.class-re-logo-negocio {
  width: 88px;
  height: 88px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--re-verde-claro);
  margin: 0 auto 10px;
  cursor: pointer;
}

.class-re-logo-negocio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.class-re-logo-negocio-pie {
  display: block;
  text-align: center;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 600;
  color: var(--re-verde-oscuro);
  cursor: pointer;
}

/*  LA IMAGEN DE PORTADA, al lado del logo. Apaisada y con el doble de ancho que alto, que es la
    proporción en la que se pide ( 1200 × 600 ): así el recuadro del formulario enseña exactamente lo
    que se va a ver en la tarjeta del negocio, recorte incluido.  */
.class-re-portada-negocio {
  width: 176px;
  height: 88px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--re-verde-claro);
  margin: 0 auto 10px;
  cursor: pointer;
}

.class-re-portada-negocio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*  El logo y la portada, uno al lado del otro. Con wrap porque en un móvil estrecho no caben los dos
    en la misma línea y es preferible que caigan uno debajo del otro a que encojan.  */
.class-re-negocio-imagenes {
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/*  La medida recomendada, debajo del pie de cada imagen. Es el único sitio de la app donde se le dice
    al usuario de qué tamaño tiene que subir una foto, y va en gris pequeño para que se lea como una
    aclaración y no compita con la acción ( "Cambiar el logo" ), que es lo que se pulsa.  */
.class-re-imagen-medida {
  display: block;
  text-align: center;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin-top: 2px;
}

/* En la galería la etiqueta va alineada a la izquierda, como el resto de etiquetas de campo */
.class-re-imagen-medida-izquierda {
  text-align: left;
  margin: 0 0 6px;
}

/*  Este formulario es medio formulario y medio panel de mandos. Se reutiliza class-re-ajuste, la
    fila de interruptor de las notificaciones y de add-producto, en vez de la class-re-fila-interruptor
    que vivía aquí: aquella no tenía dónde poner la explicación, y en esta pantalla la mitad de los
    interruptores la necesita —antes estaban escondidas en un toast que había que descubrir pulsando
    la etiqueta, y una de ellas llevaba meses cortada a media frase—.

    LO ÚNICO QUE HAY QUE CAMBIARLE ES DÓNDE VA EL FILETE. class-re-ajuste lo pinta DEBAJO de cada fila
    y se lo quita a la última. Allí los paneles son solo interruptores; aquí casi todos MEZCLAN
    interruptores y campos, así que la última fila de ajustes casi nunca es la última del panel y
    quedaba un filete suelto flotando encima de un campo. Se le da la vuelta: el filete lo pone ARRIBA
    la fila que va DETRÁS de otra fila de ajuste, que es exactamente donde hay dos que separar. El
    aire queda simétrico: 12px por arriba los pone el padding de aquí y 12px por abajo el gap del
    panel.  */
.class-re-negocio .class-re-ajuste {
  padding: 0;
  border-bottom: none;
}

.class-re-negocio .class-re-ajuste + .class-re-ajuste {
  border-top: 1px solid var(--re-campo-fondo);
  padding-top: 12px;
}

/*  CADA PUNTO DE RECOGIDA ES UNA TARJETA, y hace falta que se vea dónde acaba uno y empieza el
    siguiente: son cuatro controles seguidos ( nombre, dirección, interruptor y el enlace de borrar )
    y sin un filete en medio dos puntos consecutivos se leen como un solo formulario de ocho.
    El gap de class-re-negocio-poblacion los separa, pero 12px no bastan para agrupar; esto lo cierra.
    El primero no lleva raya: ya lo separa de la descripción del panel el gap de la pila.  */
.class-re-punto-recogida + .class-re-punto-recogida {
  border-top: 1px solid var(--re-campo-fondo);
  padding-top: 14px;
}

/*  LOS INTERRUPTORES CUYO ENCENDIDO ES UNA MALA NOTICIA: el "Ocultar negocio" de add-negocio y el
    "Ocultar a los clientes" de add-municipio. Puestos, esa cosa deja de existir para el cliente.
    Lo heredó de class-toggle-alerta, del sistema viejo, y se conserva con la paleta nueva.
    Va con la clase repetida para ganarle en peso a class-re-ajuste-toggle, que se declara MÁS ABAJO
    en el fichero ( bloque de notificaciones ) y con la misma especificidad le pisaría el color.  */
.class-re-ajuste-toggle.class-re-ajuste-toggle-alerta {
  --background-checked: var(--re-rojo);
}

/*  La explicación de un CAMPO, no de un interruptor: los minutos para aceptar un pedido y los
    minutos antes de la franja. Es la misma class-re-ajuste-descripcion, que se despega de la
    etiqueta y deja aire hasta el input.  */
.class-re-negocio .class-re-campo > .class-re-ajuste-descripcion {
  margin: -2px 0 7px;
}

/*  LA CASILLA, que es a un ion-checkbox lo que class-re-ajuste-toggle es a un ion-toggle. Sustituye a
    class-checkbox-normal, del sistema viejo, que apagada se iba a un lightgray que no está en ninguna
    paleta de la app y que arrastraba un margin-top: 7px !important puesto a ojo para un marcado que
    ya no existe. La usan los repartidores de la localidad y los días de reparto.  */
.class-re-casilla {
  --border-width: 0;
  --border-radius: 8px;
  --background: var(--re-fondo-hundido);
  --background-checked: var(--re-verde);
  --checkmark-color: #fff;
  margin: 0;
}

/*  Dentro de la lista arrastrable la casilla va en slot="start" y necesita despegarse del nombre.  */
.class-re-lista-categorias ion-item ion-checkbox {
  margin-inline-end: 12px;
}

/*  DOS BOTONES A LO ANCHO DE UN PANEL ( "Borrar" y "Nueva imagen" de los mensajes ). Estaba montado
    con class-re-fila-campos y dos class-re-campo, que son las clases de un CAMPO de formulario: se
    leía como si los botones fueran inputs. Reparto a partes iguales y el mismo hueco que la fila de
    campos.  */
.class-re-negocio-botones {
  display: flex;
  gap: 10px;
}

.class-re-negocio-botones > * {
  flex: 1 1 0;
  min-width: 0;
}

/*  Cuando una pastilla de acción va al lado de un campo ( las redes sociales, que abren lo que hay
    escrito ), se alinea con el CAMPO y no con su etiqueta, que es lo que hace alto arriba.  */
.class-re-fila-campos > .class-re-boton-chip {
  align-self: flex-end;
  margin-bottom: 3px;
}

/*  La caja de "Comisión de plataforma: 12%" del diseño. Es un panel más, pero en ámbar, y sirve para
    lo que no se toca: lo que la app hace por su cuenta o lo que conviene saber antes de tocar.  */
.class-re-aviso-ambar {
  background: var(--re-ambar-claro);
  border-radius: 20px;
  padding: 16px;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  line-height: 1.5;
  color: #8a7854;
}

.class-re-aviso-ambar strong {
  color: var(--re-ambar-oscuro);
}

/*  EL AVISO DE "ACTIVA TU NEGOCIO" del tablero de comandas. Es el aviso ámbar de arriba, pero con el
    botón al lado del texto en vez de debajo: se ve todos los días y no puede comerse media pantalla.
    En un móvil estrecho la fila se parte sola y el botón cae debajo, que es lo que se quiere.  */
.class-re-aviso-activacion {
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.class-re-aviso-activacion-texto {
  padding: 0;
  min-width: 200px;
}

/*  El botón del aviso no ocupa todo el ancho como el de un panel: va al lado del texto.  */
.class-re-boton-activacion {
  width: auto;
  --padding-start: 20px;
  --padding-end: 20px;
}

/*  Las filas de horario del diseño: nombre a la izquierda, valor a la derecha y un filete entre una y
    otra, que la última no lleva. Aquí las usan las categorías de productos y los días de reparto.  */
.class-re-fila-lista {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--re-linea);
}

.class-re-fila-lista:last-child {
  border-bottom: none;
}

.class-re-fila-lista-nombre {
  flex: 1;
  min-width: 0;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-negro);
}

.class-re-fila-lista-valor {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: #7a7870;
  cursor: pointer;
}

/*  LA LISTA DE CATEGORÍAS es el único sitio donde la fila NO puede ser un ion-row: el
    ion-reorder-group necesita ion-item para poder arrastrar. Así que en vez de ponerle encima
    class-re-fila-lista, se le quita a Ionic su piel y se le pinta el mismo filete con sus variables,
    que es la forma de vestir un ion-item sin meterle mano por dentro.  */
.class-re-lista-categorias {
  background: transparent;
  padding: 0;
  margin: 0;
}

.class-re-lista-categorias ion-item {
  --background: transparent;
  --color: var(--re-negro);
  --padding-start: 0;
  --inner-padding-end: 0;
  --min-height: 44px;
  --border-color: var(--re-linea);
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
}

.class-re-lista-categorias ion-item:last-of-type {
  --border-width: 0;
}

/*  Las mismas del ticket, con nombre genérico: las franjas de reparto se pintan igual aquí y allí.
    Ver .class-re-franja, arriba, en el bloque del ticket.  */
.class-re-franjas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*  "Añadir administrador", "Subir imagen", "Añadir categoría"... No es el botón de guardar: aquel es
    el verde macizo que cierra la pantalla y solo hay uno. Estos son acciones sueltas de un panel, así
    que van en el verde claro de las pastillas de acción.  */
.class-re-boton-panel {
  --background: var(--re-verde-claro);
  --background-activated: var(--re-verde);
  --background-hover: var(--re-verde);
  --color: var(--re-verde-oscuro);
  --border-radius: 999px;
  --box-shadow: none;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 42px;
  width: 100%;
  margin: 0;
}

/*  Administradores y repartidores. Antes era un Swiper; ahora es el class-re-carril de siempre, que
    arrastra con el dedo igual y deja ver de un vistazo cuánta gente hay.  */
.class-re-equipo-persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  flex-shrink: 0;
  cursor: pointer;
}

.class-re-equipo-avatar {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--re-verde-claro);
}

.class-re-equipo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.class-re-equipo-nombre {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/*  También era un Swiper a 1,5 fotos por pantalla. En miniatura se ven cuatro de golpe, que es lo que
    hace falta para saber cuál se quiere tocar: al pulsar una se abre opcionesImagenes().  */
.class-re-galeria-foto {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--re-campo-fondo);
  flex-shrink: 0;
  cursor: pointer;
}

.class-re-galeria-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*  La imagen suelta de un mensaje ( entrada, pedido, publicidad ): a lo ancho del panel y con las
    esquinas del panel.  */
.class-re-imagen-panel {
  width: 100%;
  border-radius: 16px;
  display: block;
}

/*  Dos columnas, como en el perfil y como en el marco de ordenador del diseño. Cuelga de
    .class-re-negocio-pc, que la página añade según datalocal.esEscritorio.
    Aquí no hay ion-header ( la page se abre como modal a pantalla completa ), así que la cabecera con
    el atrás y el título se pinta como primera fila del contenido.  */
.class-re-negocio-pc {
  /*  minmax(0, 1fr) y no 1fr a secas: un 1fr pelado equivale a minmax(auto, 1fr), así que un texto
      largo sin espacios —la lista de municipios, una clave de Stripe— estira su columna y le saca
      scroll horizontal a toda la página. Es el mismo caso que ya documenta class-re-notis-pc.  */
  /*  Un ordenador con la ventana estrecha sigue siendo un ordenador ( no hay cabecera ), pero dos
      columnas ahí no caben. Mismo corte que en el perfil.  */
}
.class-re-negocio-pc .class-re-negocio-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.class-re-negocio-pc .class-re-negocio-columna,
.class-re-negocio-pc .class-re-negocio-cabeza {
  gap: 20px;
}
.class-re-negocio-pc .class-re-titulo-pagina {
  font-size: 24px;
}
.class-re-negocio-pc .class-re-subtitulo-pagina {
  font-size: 13px;
}
.class-re-negocio-pc .class-re-logo-negocio {
  width: 110px;
  height: 110px;
}
.class-re-negocio-pc .class-re-portada-negocio {
  width: 220px;
  height: 110px;
}
@media (max-width: 1000px) {
  .class-re-negocio-pc .class-re-negocio-rejilla {
    grid-template-columns: 1fr;
  }
}

/*****************************************************/
/* IMAGEN NUEVA — EL CALENDARIO                      */
/*****************************************************/
/*  El ion-datetime salía todavía con la piel de fábrica de Ionic ( azul #3880ff y la fuente del
    sistema ) en medio de pantallas ya rediseñadas. Aquí se viste, y con él los catorce calendarios de
    la app de una vez.

    LO PRIMERO QUE HAY QUE SABER ANTES DE TOCAR ESTO: en Ionic 6 el ion-datetime es shadow DOM y NO
    expone ni una sola part ( ::part(calendar-day) y compañía llegaron en la 7 ). Su interior es
    INALCANZABLE para los selectores: no hay forma de escribir una regla para el día de hoy, para la
    fila de "L M X J V S D" ni para las flechas del mes. Lo único que entra son las VARIABLES CSS y lo
    que se HEREDA del host ( la fuente y el color ), y por eso este bloque es una lista de variables y
    no de selectores. Si algo del calendario no se puede cambiar por herencia, es que no se puede.

    De ahí sale también la única concesión del diseño: HOY y el día ELEGIDO salen del MISMO
    --ion-color-base, así que no pueden ir de dos colores. Los dos van en verde, y lo que los separa
    es la forma que Ionic ya les da — hoy un aro hueco, el elegido una píldora rellena.  */
/*  Sustituye a .popover-pequeño en los popovers de fecha, no la acompaña: aquella va entera con
    !important y su margin-top de -5vh está pensado para una lista corta de opciones, así que a un
    calendario de 350px lo levanta fuera de sitio.
    El calendario de mi-perfil no pasa por aquí porque va en un ion-modal, que ya tiene su
    class-re-modal-fecha; la piel de abajo la comparten los dos.  */
ion-popover.class-re-popover-fecha {
  /*  El crema de la app, no blanco. Como estos popovers se abren con show-backdrop="false" no hay
      fondo oscuro que los recorte, así que lo único que los despega de la página es la sombra: por
      eso aquí va la media y no la suave.  */
  --background: var(--re-fondo);
  --box-shadow: var(--re-sombra-media);
  /*  320px es el ancho natural del calendario y 20 más son el aire de los lados que se le da abajo
      al ion-datetime. El max-width en % es para los teléfonos estrechos, donde 340px no dejarían
      margen.  */
  --width: 340px;
  --max-width: 92%;
  --max-height: 80vh;
  /*  El radio no tiene variable en ion-popover ( ion-modal sí tiene --border-radius ), así que baja
      al ::part, igual que en class-popover-toast. El border: 0 mata el medio píxel de cerco gris que
      Ionic añade en escritorio con .popover-desktop.  */
}
ion-popover.class-re-popover-fecha::part(content) {
  border-radius: 20px;
  border: 0;
}

/*  Va sobre la etiqueta pelada y no sobre una clase a propósito: el calendario es el mismo en toda la
    app, así que no hay ningún caso en el que se quiera sin vestir, y así el siguiente que se añada
    sale bien sin que nadie tenga que acordarse de ponerle nada.

    NO SE TOCAN LOS --ion-color-step-*, que es lo que uno vendría a hacer aquí para el gris de los días
    de otro mes o el de los separadores. Hoy no están definidos en ningún sitio del proyecto, y cada
    uso del calendario cae en un fallback distinto y bien elegido: el MISMO --ion-color-step-300 es el
    FONDO de la pastilla de la hora ( #edeef0 ) y el COLOR DE TEXTO de la fila de los días de la semana
    ( #b3b3b3 ). Darle un valor arregla uno y estropea el otro sí o sí.  */
ion-datetime {
  --background: var(--re-fondo);
  --title-color: var(--re-negro);
  /*  El texto de la pastilla de la hora. Es la única cosa del calendario que pide --ion-text-color;
      aquí va acotado al ion-datetime, no toca nada más de la app.  */
  --ion-text-color: var(--re-negro);
  /*  Los números de los días. Sus botones se pintan con color: currentColor, así que el color se lo
      tiene que dar el host.  */
  color: var(--re-negro);
  /*  El aire de alrededor. Va en el HOST y no en el ::part(content) del popover a propósito: puesto
      aquí queda DENTRO del --background, así que lo aprovechan igual el popover y el ion-modal de
      mi-perfil, que es lo único que comparten los dos. Ionic pone box-sizing: border-box, así que
      estos 10px por lado son los que le sobran al ancho de 340px de arriba.  */
  padding: 12px 10px;
  /*  LAS DOS FUENTES SON A PROPÓSITO, no es que sobre una.
      Dentro del calendario hay dos clases de texto y se reparten así:

      - --ion-font-family la piden POR SU NOMBRE los botones de cada día
        ( font-family: var(--ion-font-family, inherit) ), el botón del mes y las ruedas de mes/año y
        de hora, que son ion-item / ion-label / ion-picker-column-internal. Todo eso son CIFRAS, y
        las cifras de la app van en Figtree.
      - el font-family suelto lo HEREDAN los que no piden nada, que en la práctica es la fila de
        "L M X J V S D" ( y el rótulo "Hora" cuando el calendario trae reloj ). Son rótulos, así que
        se llevan la Caprasimo de los títulos y es el único sitio donde asoma la fuente de la marca:
        por dentro del calendario no hay forma de escribirle una regla a nada.

      OJO si algún día se toca: --ion-font-family NO existe en esta app ( theme/variables.scss la
      escribe con guiones tipográficos y el navegador descarta la línea ), así que si se quita esta
      declaración los días NO se quedan en Figtree, se van a la Caprasimo del host por el 'inherit'
      del fallback.  */
  font-family: var(--re-fuente-titulo);
  --ion-font-family: var(--re-fuente-texto);
}

/*****************************************************/
/* IMAGEN NUEVA — NOTIFICACIONES                     */
/*****************************************************/
/*  Sacado del diseño "Reparteat - Notificaciones", que trae marco de teléfono y de ordenador. Viste
    la page notificaciones, que se abre a pantalla completa desde la campana de la portada y desde el
    🔔 del menú.
    Se REUTILIZA casi todo lo que ya existe: el content y el cuerpo de la portada, la cabecera de
    página y su pastilla de volver ( bloque de perfil ), el carril y la píldora con contador del
    gestor de comandas, el panel blanco, el chip de "ver más" y el enlace de sección.
    Lo que se crea es la TARJETA DE AVISO ( punto, cuadradito de color, título, mensaje y fecha ) y
    la FILA DE AJUSTE con su interruptor, que hasta ahora solo existía en el sistema viejo
    ( class-toggle-normal ).
    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-notis-pc, que la página pone según datalocal.esEscritorio.  */
/*  El relleno propio del ion-grid ( y el de cada ion-col ) se apaga de una vez para toda la pantalla:
    el aire lo pone class-re-cuerpo, y los huecos entre bloques, los gap de más abajo.  */
.class-re-notis {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí
    casi todas viven dentro de una caja en columna, y ese flex-basis: 0 con grow las haría repartirse
    el ALTO a partes iguales. Las dos que SÍ tienen que crecer ( el texto de la tarjeta y el de la
    fila de ajuste ) se lo dicen más abajo con dos clases, que pesan más que este selector.  */
.class-re-notis ion-col {
  flex: 0 0 auto;
}

.class-re-notis-cargando {
  width: 90px;
}

/*  class-re-cabecera-pagina reparte con space-between porque en mi-perfil hay TRES piezas fijas.
    Aquí la tercera —el enlace de marcar todas— aparece y desaparece según la pestaña, así que con
    space-between el título bailaría de sitio: van pegados a la izquierda y es el margen automático
    del título el que empuja el enlace al otro extremo.  */
.class-re-notis-cabecera {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 14px;
}

.class-re-notis-cabecera .class-re-titulo-pagina {
  margin-right: auto;
}

.class-re-notis-cabecera .class-re-seccion-enlace {
  white-space: nowrap;
}

/*  El carril trae ya el scroll horizontal sin barra a la vista; lo que hace falta es apagarle el
    flex-wrap que ion-row lleva de fábrica, porque con él las píldoras se irían a una segunda línea
    en vez de desplazarse.  */
.class-re-notis-pestanas {
  flex-wrap: nowrap;
}

.class-re-notis-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.class-re-notis-grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/*  "HOY", "AYER", "Martes 12 de mayo". Pequeña, en mayúsculas y espaciada: separa sin pesar más que
    los avisos que encabeza. Es el mismo tratamiento que el sistema le da a un h6.  */
.class-re-notis-dia {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-noti {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 12px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--re-sombra-suave);
  cursor: pointer;
}

/*  Las ya leídas se apagan enteras en vez de cambiarles el color a cada pieza: siguen ahí y se
    pueden abrir, pero no compiten con las nuevas.  */
.class-re-noti-leida {
  opacity: 0.6;
}

/*  El punto de "sin leer". En las leídas NO se quita, se vuelve transparente: si desapareciera, su
    hueco se cerraría y los cuadraditos de color de unas y otras dejarían de estar alineados.  */
.class-re-noti-punto {
  width: 8px;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--re-ambar);
  margin-top: 6px;
}

.class-re-noti-punto-hueco {
  background: transparent;
}

/*  El cuadradito del icono. El color lo elige la página con tonoNotificacion(): verde lo que se
    mueve, ámbar lo que ha escrito una persona y gris lo demás.  */
.class-re-noti-icono {
  width: 38px;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.class-re-noti-icono ion-icon {
  font-size: 18px;
}

.class-re-noti-icono-verde {
  background: var(--re-verde-claro);
  color: var(--re-verde-oscuro);
}

.class-re-noti-icono-ambar {
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
}

.class-re-noti-icono-gris {
  background: var(--re-fondo-hundido);
  color: var(--re-gris-texto);
}

/*  Doble clase para ganarle al flex: 0 0 auto de arriba: este texto SÍ se lleva todo el ancho que
    sobra. El min-width: 0 es lo que le permite encogerse por debajo de su contenido y que un mensaje
    largo parta líneas en vez de estirar la tarjeta.  */
.class-re-noti .class-re-noti-texto {
  flex: 1 1 auto;
  min-width: 0;
}

.class-re-noti-titulo {
  display: block;
  font-family: var(--re-fuente-titulo);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--re-negro);
  margin: 0;
  white-space: normal;
}

/*  pre-line: el cuerpo del aviso viene de la push tal cual lo escribió quien lo mandó, y algunos
    llevan saltos de línea a propósito.  */
.class-re-noti-mensaje {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.45;
  color: var(--re-gris-texto);
  margin: 3px 0 0;
  white-space: pre-line;
}

.class-re-noti-fecha {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  opacity: 0.8;
  margin: 6px 0 0;
}

.class-re-notis-vacio {
  justify-content: center;
  text-align: center;
  padding: 30px 10px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
}

.class-re-notis-ajustes {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/*  La columna de ajustes del ordenador. Lleva dentro los MISMOS paneles que la pestaña de
    configuración del teléfono, así que solo tiene que colocarlos.  */
.class-re-notis-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/*  El rótulo de la columna. Hace de título de la mitad derecha igual que las pestañas lo hacen de la
    izquierda, así que va a su altura y con el mismo peso que un título de sección.  */
.class-re-notis-titulo-columna {
  display: block;
  font-family: var(--re-fuente-titulo);
  font-size: 16px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

/*  El panel de ajustes va SIN el gap de 12px que trae class-re-panel: aquí el aire entre filas lo
    pone el padding de cada una, que es lo que deja la línea divisoria pegada a las dos.  */
.class-re-notis-ajustes .class-re-panel,
.class-re-notis-panel .class-re-panel {
  gap: 0;
  padding: 14px 18px;
}

.class-re-ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--re-campo-fondo);
}

.class-re-ajuste:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.class-re-ajuste .class-re-ajuste-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.class-re-ajuste-etiqueta {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-negro);
  margin: 0;
  white-space: normal;
}

/*  La descripción se ve SIEMPRE, no solo con el aviso encendido: es antes de encenderlo cuando hace
    falta saber qué se activa.  */
.class-re-ajuste-descripcion {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  line-height: 1.45;
  color: var(--re-gris-texto);
  margin: 0;
  white-space: normal;
}

/*  El interruptor con los colores de la marca. Sustituye a class-toggle-normal, que apagado se iba a
    un lightgray que no es de ninguna paleta de la app.  */
.class-re-ajuste-toggle {
  --background: var(--re-fondo-hundido);
  --background-checked: var(--re-verde);
  --handle-background: #fff;
  --handle-background-checked: #fff;
  margin: 0;
  padding: 0;
}

/*  Dos columnas DEL MISMO ANCHO: la lista a la izquierda y los ajustes a la derecha. Las dos son
    contenido de verdad y se leen igual de seguido, así que ninguna manda sobre la otra ( no es el
    caso del panel del pedido de la portada, que sí es un acompañante de 340px ).
    minmax(0, 1fr) y no 1fr a secas: un 1fr pelado equivale a minmax(auto, 1fr), así que el título de
    un aviso largo sin espacios estiraría su columna y sacaría scroll horizontal a toda la página.
    La cabecera y las pestañas cruzan las dos columnas.  */
.class-re-notis-pc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 28px;
  row-gap: 18px;
}

.class-re-notis-pc > .class-re-notis-cabecera,
.class-re-notis-pc > .class-re-notis-pestanas {
  grid-column: 1/-1;
}

/*  La pastilla de volver también crece: en el ordenador el diseño la pone a 40px y con la esquina un
    punto más redonda, para que no se quede pequeña al lado de un título de 22px.  */
.class-re-notis-pc .class-re-notis-cabecera .class-re-boton-chip {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 14px;
}

.class-re-notis-pc .class-re-titulo-pagina {
  font-size: 22px;
}

.class-re-notis-pc .class-re-noti {
  padding: 16px 18px;
  border-radius: 20px;
}

.class-re-notis-pc .class-re-noti-icono {
  width: 42px;
  min-width: 42px;
  height: 42px;
}

.class-re-notis-pc .class-re-noti-icono ion-icon {
  font-size: 20px;
}

.class-re-notis-pc .class-re-noti-titulo {
  font-size: 15px;
}

.class-re-notis-pc .class-re-noti-punto {
  margin-top: 8px;
}

/*****************************************************/
/* IMAGEN NUEVA — GESTOR DE USUARIOS                 */
/*****************************************************/
/*  Piel nueva de gestor-usuarios, sacada del diseño "Reparteat - Gestor Usuarios". Es la pantalla del
    superusuario: atiende solicitudes, da de alta usuarios y reparte permisos de administrador y de
    repartidor.

    QUÉ SE COGE DEL DISEÑO: la cabecera con título y renglón gris, el buscador pastilla, la fila de
    píldoras, el botón verde de alta, y sobre todo LAS DOS COLUMNAS de tarjetas blancas con avatar,
    nombre, email, etiqueta de rol y tiempo a la derecha.

    QUÉ NO SE PINTA AQUÍ: la columna oscura de la izquierda del diseño es el menú, que ya está hecho,
    y el marco de ventana lo pone el propio modal ( .full-screen-modal ). Y la FICHA de un usuario,
    que el diseño no dibuja: se viste reutilizando lo de mi-perfil ( class-re-identidad, class-re-avatar,
    class-re-estadisticas, class-re-panel, class-re-campo-* ), para que al pulsar una tarjeta no se
    caiga a otro idioma.

    LAS DOS COLUMNAS NO SON IGUALES, aunque el diseño las dibuje simétricas: la de la DERECHA son
    siempre los últimos en conectarse y no la mueve nada, y la de la IZQUIERDA es la que se gestiona
    ( lo que elijan las pestañas, o los resultados del buscador ).

    DOS DESVIACIONES CONSCIENTES DEL DISEÑO:
    1) Las pestañas. El diseño dibuja unas píldoras propias; aquí se usan las de notificaciones
       ( class-re-pestana ), para que las dos pantallas de gestión se manejen igual.
    2) La cabecera de cada columna. Donde el diseño pone un enlace "Ver todos" va el NÚMERO de
       usuarios: las dos columnas ya enseñan la lista entera con su "ver más", así que un enlace a
       "todos" no llevaría a ninguna parte.

    EL MARCADO ES ION-GRID, no div ( lo pide CLAUDE.md ), con las mismas dos cautelas que el bloque
    del ticket: los ion-col traen 5px por los cuatro lados, que se apagan de una vez con
    --ion-grid-column-padding y se sustituyen por gap; y size="auto" NO es una clase sino un ESTILO EN
    LÍNEA ( width: auto ), así que lo que tenga que medir un ancho fijo lo pide con !important.  */
.class-re-usuarios-cabecera {
  --ion-grid-column-padding: 0;
  width: 100%;
}

/*  El título se recorta con puntos suspensivos en vez de empujar a las pastillas: "Gestor de usuarios"
    es largo y en un teléfono estrecho partiría la fila en dos.  */
.class-re-usuarios-cabecera-titulo {
  min-width: 0;
  text-align: center;
}

.class-re-usuarios-cabecera-titulo .class-re-titulo-pagina {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  El botón verde de alta, el "+ Invitar usuario" del diseño. No se hace con class-re-boton-guardar
    porque aquel va a width: 100% ( es el botón de pie de un formulario ) y aquí es una pastilla que
    mide su texto, en una fila donde ya hay tres cosas más.  */
.class-re-usuarios-alta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--re-verde);
  color: #fff;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.class-re-usuarios-alta ion-icon {
  font-size: 16px;
}

/*  El aire entre las piezas de la página ( cabecera, píldoras, columnas ) lo pone el gap, no los
    márgenes de cada una: así ninguna tiene que saber quién va encima ni debajo.  */
.class-re-usuarios-cuerpo {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/*  Las pestañas son las MISMAS que las de notificaciones — class-re-pestana en un carril con scroll
    horizontal — y por eso aquí solo está lo que allí añade class-re-notis-pestanas: que no partan a
    dos líneas. El aire para que no se coma su sombra lo pone ya class-re-carril.  */
.class-re-usuarios-pestanas {
  flex-wrap: nowrap;
  gap: 10px;
}

/*  Las dos columnas. El reparto lo hace el size del ion-col ( 6 y 6 en el ordenador, 12 y 12 en el
    teléfono, que es lo que las apila ).
    align-items: flex-start para que una columna corta no estire su tarjeta hasta el alto de la otra.

    EL AIRE ENTRE ELLAS NO PUEDE SER UN column-gap: un ion-col size="6" mide EXACTAMENTE el 50%, así
    que 50% + 50% + hueco no cabe en la fila y la segunda columna caería debajo. Se hace como los
    canalones de toda la vida: cada columna se mete 14px por dentro y la fila se saca esos mismos
    14px por fuera, así que entre las dos quedan 28px y los bordes de la página no se mueven.
    Apiladas en el teléfono da igual: el padding y el margen negativo se anulan.  */
.class-re-usuarios-columnas {
  row-gap: 28px;
  align-items: flex-start;
  margin-inline: -14px;
}

.class-re-usuarios-columnas > ion-col {
  min-width: 0;
  padding-inline: 14px;
}

/*  Ni el título de columna arrastra el margen de arriba de class-re-seccion, ni la cabecera el de
    abajo de class-re-cabecera-gestor: quien reparte el aire en esta página es el gap del cuerpo, y si
    se dejan los dos el hueco sale doble.  */
.class-re-usuarios-cuerpo .class-re-seccion {
  margin-top: 0;
}

.class-re-usuarios-cuerpo .class-re-cabecera-gestor {
  margin-bottom: 0;
}

/*  ion-col nace con flex: 1 1 0, que está pensado para repartir el ANCHO de una fila. Dentro de un
    contenedor puesto en COLUMNA — el panel blanco, el bloque de identidad, cada montón de paneles de
    la ficha — ese mismo flex pasa a repartir el ALTO, y entonces el basis 0 y el grow 1 deciden la
    altura de cada pieza en vez de decidirla su contenido. Aquí se les devuelve el tamaño natural.  */
.class-re-panel > ion-col,
.class-re-identidad > ion-col,
.class-re-usuarios-ficha-columna > ion-col {
  flex: 0 0 auto;
}

/*  Y aquí se apagan los 5px que ion-col se pone por los cuatro lados, porque en esta página el aire
    lo reparten los gap.
    OJO CON EL :not(): un panel TAMBIÉN es un ion-col hijo de la columna de la ficha, y como el
    selector de dos partes pesa más que .class-re-panel a secas, sin la excepción este padding: 0 le
    borraba al panel el suyo ( 18px 16px ) y los títulos y los botones nacían pegados al borde de la
    tarjeta. El panel se pone su relleno solo: aquí no hay que tocarlo.  */
.class-re-panel > ion-col,
.class-re-identidad > ion-col,
.class-re-usuarios-ficha-columna > ion-col:not(.class-re-panel) {
  padding: 0;
}

.class-re-usuarios-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/*  Es un ion-item y no una fila a pelo porque así el avatar, el texto y lo de la derecha se colocan
    solos en sus slots, y el pulsado ya viene hecho.
    Un ion-item es transparente y pega sus hijos a los bordes de la pantalla: hay que devolverle el
    fondo, el redondeo y el relleno con sus variables, que es la única manera de llegar a la parte de
    dentro del componente ( .item-native vive en su shadow DOM ).  */
.class-re-usuario-tarjeta {
  --background: #fff;
  --background-hover: #fff;
  --border-radius: 18px;
  --padding-start: 16px;
  --padding-end: 16px;
  --inner-padding-end: 0;
  --inner-padding-top: 14px;
  --inner-padding-bottom: 14px;
  --min-height: 0;
  border-radius: 18px;
  box-shadow: var(--re-sombra-suave);
  width: 100%;
  font-family: var(--re-fuente-texto);
  cursor: pointer;
}

/*  46px es la medida del diseño. Lleva !important porque el :host de ion-avatar ya define width y
    height ( 48px ) y Ionic inyecta los estilos de sus componentes DESPUÉS de esta hoja: a igualdad de
    peso gana el último.  */
ion-avatar.class-re-usuario-avatar {
  width: 46px !important;
  height: 46px !important;
  margin-inline-end: 14px;
}

/*  Mientras la foto carga — o si el usuario no tiene — se ve el degradado de marca, igual que en el
    avatar de mi-perfil.  */
.class-re-usuario-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
}

.class-re-usuario-nombre {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-usuario-email {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  El tiempo de la derecha. Ancho fijo para que las cifras de todas las tarjetas caigan en la misma
    vertical: con ancho automático, "ahora" y "3 días" dejarían el borde derecho en diente de sierra.  */
.class-re-usuario-tiempo {
  flex: 0 0 auto;
  width: 62px;
  text-align: right;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: #a3a196;
  margin: 0 0 0 10px;
}

/*  Los de la última hora, en verde: es el "● ahora" del diseño, y lo único que distingue de un vistazo
    a quien está dentro ahora mismo.  */
.class-re-usuario-tiempo-vivo {
  color: var(--re-verde-oscuro);
  font-weight: 700;
}

/*  La etiqueta de rol. El fondo y el color los pone class-re-comanda-etiqueta y sus modificadores;
    aquí solo se le quita el crecimiento que le daría el slot del ion-item.  */
.class-re-usuarios-etiqueta {
  flex: 0 0 auto;
  margin: 0;
}

/*  Mismo canalón que las dos columnas de la lista, y por el mismo motivo: los dos montones de paneles
    son ion-col size="6" y no dejan sitio para un column-gap.  */
.class-re-usuarios-ficha {
  row-gap: 16px;
  align-items: flex-start;
  margin-inline: -8px;
}

.class-re-usuarios-ficha > ion-col {
  padding-inline: 8px;
}

/*  Los dos montones de paneles. El gap es el mismo que el de las tarjetas: la ficha y la lista se
    leen con el mismo pulso.  */
.class-re-usuarios-ficha-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  Se reutiliza el avatar de mi-perfil y solo se le cambia la medida.
    LOS TRES ANCHOS SON NECESARIOS, no es redundancia: esto es un ion-col, e Ionic lo estila con
    ion-col { max-width: 100% } y compañía, selectores que ganan a una clase suelta.  */
.class-re-usuarios-ficha-avatar {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  height: 76px;
  padding: 0;
  cursor: pointer;
}

/*  El perfil y el subperfil, que son los que esconden los 7 clics del creador. Van en gris pequeño:
    quien los necesita ya sabe que están ahí, y quien no, no tiene por qué leerlos antes que el nombre. */
.class-re-usuarios-perfil {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 4px 0 0;
  cursor: pointer;
}

.class-re-identidad-texto .class-re-usuarios-etiqueta {
  display: inline-flex;
  margin-top: 6px;
}

/*  ORDENADOR. La cabecera de la ficha deja de ser un bloque centrado a todo el ancho y se lee en una
    sola línea: el avatar y los datos a la izquierda, las tres cifras a la derecha. Es exactamente lo
    que hace mi-perfil en class-re-perfil-pc, y el motivo es el mismo: centrado y a 1.900px de ancho,
    un avatar con un nombre debajo deja media pantalla en blanco antes de que empiece lo que importa.  */
.class-re-usuarios-ficha-pc {
  /*  padding-block y NO padding a secas: el relleno LATERAL es el canalón de 8px que esta celda
      comparte con los paneles de abajo, y quitándolo el avatar se saldría 8px por la izquierda
      respecto a todo lo demás.  */
}
.class-re-usuarios-ficha-pc .class-re-identidad {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding-block: 0;
}
.class-re-usuarios-ficha-pc .class-re-identidad-texto {
  text-align: left;
  min-width: 0;
}
.class-re-usuarios-ficha-pc .class-re-estadisticas {
  margin-top: 0;
}

/*  Título del panel y estado de la solicitud en la misma línea, cada uno a un lado.  */
.class-re-usuarios-panel-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/*  Los datos de interés van de dos en dos. El gap sustituye al relleno de los ion-col, que esta
    página tiene apagado.  */
.class-re-usuarios-datos {
  display: flex;
  gap: 12px;
}

.class-re-usuarios-datos ion-col {
  min-width: 0;
  padding: 0;
}

.class-re-usuarios-datos .class-re-texto-panel {
  display: block;
  overflow-wrap: anywhere;
}

/*  Van en el carril horizontal que ya existe, en lugar del <swiper> que traían: es un puñado de
    logos, no un carrusel, y el carril no necesita ni módulo ni configuración.  */
.class-re-usuarios-negocio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 84px !important;
  padding: 0;
  cursor: pointer;
}

ion-avatar.class-re-usuarios-negocio-logo {
  width: 56px !important;
  height: 56px !important;
}

.class-re-usuarios-negocio-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, var(--re-ambar), var(--re-ambar-oscuro));
}

.class-re-usuarios-negocio-nombre {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-negro);
  text-align: center;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*  Cada grupo es una fila apilada, y NO un ion-item: aquí no se pulsa nada, así que no hace falta el
    alto mínimo ni el resaltado al tocar que trae un item. El filete de arriba es el que separa una
    alarma de la siguiente; la primera se lo quita para no dibujar una raya suelta justo debajo del
    texto que explica el panel.  */
.class-re-usuarios-alarma {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0 0;
  border-top: 1px solid var(--re-linea);
}

.class-re-usuarios-alarma:first-of-type {
  border-top: none;
}

.class-re-usuarios-alarma-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

/*  El margen de abajo de class-re-campo-etiqueta sobra dentro de esta cabecera, que ya separa con su
    propio gap: sin apagarlo, la etiqueta y el recuento quedan a distinta altura.  */
.class-re-usuarios-alarma-cabecera .class-re-campo-etiqueta {
  margin: 0;
}

.class-re-usuarios-alarma-cuenta {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  white-space: nowrap;
  flex-shrink: 0;
}

/*  ROJO PORQUE ES UN SÍNTOMA, no una alarma más: su hora ya pasó y el documento sigue ahí, o sea que
    la Cloud Function que tenía que recogerlo no está pasando. Es justo lo que se viene a mirar a este
    panel, así que tiene que verse de un vistazo.  */
.class-re-usuarios-alarma-vencida {
  color: var(--re-rojo);
  font-weight: 600;
}

@media (max-width: 767px) {
  .class-re-usuarios-cuerpo {
    gap: 14px;
  }
  /*  Apiladas, este row-gap es el que separa "Últimos en conectarse" de la última tarjeta de
      "Nuevos usuarios".  */
  .class-re-usuarios-columnas {
    row-gap: 22px;
  }
  .class-re-usuarios-ficha-avatar {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    height: 88px;
  }
  /*  En el teléfono la ficha es una sola columna, así que los dos montones de paneles tienen que
      separarse entre ellos igual que se separan sus paneles por dentro.  */
  .class-re-usuarios-ficha {
    row-gap: 16px;
  }
}
/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    GESTOR-REPARTOS
    ═══════════════════════════════════════════════════════════════════════════════════════════════

    La pantalla reutiliza ENTERO el tablero de comandas ( class-re-tablero, -columna, -lista,
    class-re-pestana, class-re-comanda ): aquí solo está lo que la diferencia, que son dos cosas.
    1. El tablero va dentro de una CARD y no a pantalla completa.
    2. La tarjeta es de dos líneas en vez de la comanda entera.
    Ninguna clase de comandas se toca: si algo hay que cambiar de aquellas, se cambia allí.  */
/*  El carril de chips del rango, justo encima de la card. align-items: center porque conviven dos
    pastillas de altos distintos: el chip de rango y, con el rango a medida, la píldora de fecha con
    su icono de calendario, que es un punto más alta.
    Lo que NO lleva es flex-shrink, y no hace falta: class-re-cuerpo-tablero ya se lo pone a todos
    sus hijos menos al tablero, que es el único que crece.  */
.class-re-repartos-filtro {
  align-items: center;
  margin-bottom: 14px;
}

/*  ALTO FIJO, no flex: 1. La página tiene paneles y gráficas DEBAJO de esta card, así que ya no
    puede comerse todo el alto sobrante de la pantalla: con eso puesto, todo lo demás quedaba fuera y
    sin manera de llegar. Ahora scrollea la página y la card mide lo que mide.
    El alto tiene que ser un valor concreto y no un max-height: es lo que Chart.js y el flex de
    dentro necesitan medir. La cadena de min-height: 0 hacia abajo se queda igual — es lo que hace
    que las columnas se desplacen por dentro en vez de crecer y desbordar la card.
    El overflow: hidden recorta el carril contra el radio de la card.  */
.class-re-repartos-panel {
  height: 920px;
  min-height: 0;
  overflow: hidden;
  padding: 18px 20px;
  gap: 0;
  margin-top: 22px;
}

/*  El título de la card. El aire va en su margen y no en el gap del panel, que aquí está a 0 a
    propósito: el tablero tiene que pegarse a los bordes de la card para que el carril arrastre de
    canto a canto.
    flex-shrink: 0 para que el tablero, que sí crece, no se lo coma cuando la card va justa de alto.  */
.class-re-repartos-titulo {
  flex: 0 0 auto;
  margin-bottom: 14px;
}

/*  El tablero se queda con el alto que sobra bajo la fila de filtros, y el min-height: 0 es el
    eslabón que permite que sus columnas scrolleen en vez de estirarse.  */
.class-re-repartos-panel > .class-re-tablero {
  flex: 1;
  min-height: 0;
}

/*  El contador de repartos de la franja. Parte de la píldora de contar de siempre
    ( class-re-pestana-contador ) y le cambia tres cosas:

    - VERDE MACIZO con el texto en blanco, en vez del gris de la píldora base. El gris
      ( --re-campo-fondo ) es casi el mismo tono que el fondo de la tarjeta de reparto que tiene
      justo debajo, así que la cifra se diluía. Es el mismo par de colores que class-re-chip-activo.
    - margin-left: auto, que es lo que la manda al BORDE DERECHO de la columna. En un flex sin
      justify-content, un margen automático se come todo el hueco sobrante: por eso basta con esto y
      no hace falta tocar el contenedor, que lo comparte con comandas.
    - letter-spacing a 0, porque el título lo lleva a .04em y sobre dos cifras separaba los números
      de más; y flex-shrink: 0 para que un título largo no la aplaste en una columna estrecha.  */
.class-re-franja-cuenta {
  margin-left: auto;
  background: var(--re-verde);
  color: #fff;
  letter-spacing: 0;
  flex-shrink: 0;
}

/*  El título de la cabecera del teléfono. Se come el hueco que sobra, y no es un capricho: desde que
    se quitó el botón de recargar solo quedan dos hijos en class-re-fila-cabecera, que es un
    space-between, así que sin esto el título se iría pegado al borde derecho de la barra.  */
.class-re-repartos-titulo-cabecera {
  flex: 1;
  min-width: 0;
}

/*  La fila del filtro acumulable, debajo de la del rango. El padding-block deja respirar a la sombra
    de las pestañas, que a ras del carril se recortaba contra el borde.  */
.class-re-repartos-filtros {
  align-items: center;
  padding-block: 3px;
  margin-bottom: 14px;
}

/*  Cada filtro puesto. Es el chip verde de siempre con la × detrás: en verde y no en la pastilla
    blanca de las pestañas porque un filtro puesto tiene que cantar — es lo que explica que las
    cifras de abajo no cuadren con el total.  */
.class-re-filtro-etiqueta {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.class-re-filtro-etiqueta ion-icon {
  font-size: 15px;
}

/*  class-re-tablero se saca del padding del cuerpo con margin-inline: -44px para arrastrar de canto
    a canto de la PANTALLA. Dentro de la card eso sacaría las columnas fuera de ella, así que aquí
    se le devuelven los márgenes al padding de la card: el carril arrastra de canto a canto de la
    CARD, que es lo que corresponde.  */
.class-re-repartos-tablero {
  margin-inline: -20px;
  padding-inline: 20px;
}

/*  Se monta sobre class-re-comanda y solo le quita aire: aquí caben dos líneas y el objetivo es que
    entren cuantas más mejor en la columna.
    El fondo es el de la app, no el blanco de class-re-panel, y sin sombra: esta tarjeta va DENTRO de
    otra card, que sí es blanca, y una sombra blanca sobre blanco no separa nada. El contraste lo
    hace el color.
    Las esquinas bajan de los 20px del panel a 10: a este alto ( ~34px ) un radio de 20 se come casi
    toda la altura del lado y la tarjeta deja de leerse como una tarjeta.
    El cursor va en la tarjeta entera porque toda ella abre la ficha del pedido, igual que en la
    comanda ( aquí, además, no hay nada dentro con acción propia ).  */
.class-re-reparto {
  padding: 4px 9px;
  gap: 1px;
  border-radius: 10px;
  background: var(--re-fondo);
  box-shadow: none;
  cursor: pointer;
}

/*  LAS LINE-HEIGHT SON OBLIGATORIAS, no un remate. Sin ellas el alto de cada renglón lo decide el
    "normal" del navegador ( ~1.2 sobre el tamaño de fuente, y más en Caprasimo, que tiene la caja
    alta ), y por mucho que se bajen los tamaños la tarjeta no encoge. Con estas dos reglas la
    tarjeta pasa de ~49px a ~34px, que es el objetivo.  */
.class-re-reparto .class-re-comanda-nombre {
  font-size: 12px;
  line-height: 1.1;
}

.class-re-reparto .class-re-comanda-meta,
.class-re-reparto .class-re-comanda-total {
  font-size: 11px;
  line-height: 1.1;
}

/*  El identificador es Caprasimo, que a 15px marca el alto de toda la fila de arriba: bajarlo es
    tan necesario como bajar el nombre del negocio que tiene al lado.  */
.class-re-reparto .class-re-comanda-id {
  font-size: 12px;
  line-height: 1.1;
}

/*  La línea de abajo: total y cliente a la izquierda, siglas del repartidor a la derecha.
    align-items: center y no el flex-start que trae class-re-comanda-fila: ahí arriba el
    identificador tiene que cuadrar con la primera línea del nombre del negocio, pero aquí los tres
    trozos son de altos distintos y alineados arriba quedarían en escalera.
    El gap baja de los 10px de la fila a 6: el total y el nombre del cliente son el mismo dato
    leído de corrido, y separarlos tanto los partía en dos columnas que no existen.  */
.class-re-reparto-fila-baja {
  align-items: center;
  gap: 6px;
}

/*  El cliente se come el hueco que sobra ( flex: 1 ), que es lo que empuja las siglas contra el
    borde derecho. Con min-width: 0 un nombre largo se parte en vez de echar las siglas fuera.  */
.class-re-reparto-cliente {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/*  La dirección de entrega, en las tarjetas de reparto ( gestor-repartos y "Mis repartos" de
    pedidos-negocio ). El tamaño de letra no se toca: lo hereda de class-re-comanda-meta, 11px dentro
    de class-re-reparto y 12px en la comanda. El icono va arriba ( flex-start ) y no centrado, para
    que con una calle de dos renglones quede junto al primero; y no se aplasta ( flex-shrink: 0 ).
    overflow-wrap: anywhere para que una dirección larga se parta en vez de ensanchar la columna.  */
.class-re-reparto-direccion {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  overflow-wrap: anywhere;
}

.class-re-reparto-direccion ion-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/*  Las siglas del repartidor: es la etiqueta de comanda de siempre ( class-re-comanda-etiqueta ),
    apretada a tamaño de badge. Verde cuando hay repartidor y el gris de la etiqueta base cuando no,
    que son las dos parejas de colores que ya usan los chips de estado: un color por repartidor
    convertiría el tablero en un semáforo.
    flex-shrink: 0 para que no se aplaste cuando el nombre del cliente es largo.  */
.class-re-reparto-siglas {
  padding: 0 5px;
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/*  class-re-estadistica nace BLANCA con sombra, que es lo que necesita en mi-perfil ( va sobre el
    fondo crema de la página ). Aquí van sobre ese mismo fondo, así que el blanco se leería como una
    tarjeta más y competiría con la card del tablero, que es la que manda en la pantalla.
    TODAS EN VERDE, sin la alternancia con ámbar de la analítica: allí sirve para trocear una fila
    de cifras de distinta naturaleza, pero aquí las siete son lo mismo — el resumen del periodo —, y
    alternar sugería una división entre ellas que no existe.  */
.class-re-repartos-cifras .class-re-estadistica {
  background: var(--re-verde-claro);
  box-shadow: none;
}

/*  LAS SIETE EN UNA SOLA FILA en el escritorio. class-re-estadisticas no lleva flex-wrap, así que
    ya no envuelve; lo que hace falta es que las pastillas se REPARTAN el ancho ( flex: 1 1 0 ) en
    vez de medir su contenido, y el min-width: 0 que deja que se encojan por debajo de él — sin eso,
    "Empaquetado → entrega" ensancharía su pastilla y echaría a las demás fuera.
    El padding baja de los 12px de la clase base: con siete pastillas, 12px por lado se comen el
    ancho que necesita el texto.  */
.class-re-repartos-cifras > .class-re-estadistica {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
}

/*  display: block es lo que baja la etiqueta a su propia línea. Los ion-label sueltos ( fuera de un
    ion-item ) son inline, así que la cifra y su etiqueta se pintaban seguidas en el mismo renglón:
    "6 Usuarios" en vez de la cifra grande con el "Usuarios" debajo.  */
.class-re-repartos-cifras .class-re-estadistica-cifra,
.class-re-repartos-cifras .class-re-estadistica-etiqueta {
  display: block;
}

/*  La CIFRA en negro y la etiqueta en verde: el número es el dato y tiene que ser lo primero que se
    lee, y sobre el verde claro el negro es lo que más contrasta.  */
.class-re-repartos-cifras .class-re-estadistica-cifra {
  color: var(--re-negro);
}

.class-re-repartos-cifras .class-re-estadistica-etiqueta {
  color: var(--re-verde-oscuro);
}

.class-re-repartos-cifras .class-re-estadistica-etiqueta {
  line-height: 1.2;
}

/*  Dos columnas en el ordenador, apiladas en el teléfono. El reparto lo hace el size del ion-col
    ( 6 y 6, o 12 y 12 ).
    EL AIRE ENTRE ELLAS NO PUEDE SER UN column-gap: un ion-col size="6" mide EXACTAMENTE el 50%, así
    que 50% + 50% + hueco no cabe en la fila y la segunda columna caería debajo. Se hace con el
    canalón de toda la vida, como class-re-usuarios-columnas: cada columna se mete 14px por dentro y
    la fila se saca esos mismos 14px por fuera. Apiladas en el teléfono se anulan solos.  */
.class-re-repartos-columnas {
  row-gap: 20px;
  align-items: flex-start;
  margin-inline: -14px;
  margin-top: 20px;
}

.class-re-repartos-columnas > ion-col {
  min-width: 0;
  padding-inline: 14px;
}

/*  El panel de una lista se queda SIN gap: class-re-panel separa a sus hijos 12px, y con las filas
    llevando su propio filete ese hueco dejaba la línea flotando entre dos vacíos. El aire lo pone ya
    el padding de class-re-fila-lista.  */
.class-re-repartos-lista-panel {
  gap: 0;
}

.class-re-repartos-lista-panel .class-re-fila-lista {
  flex-wrap: nowrap;
  cursor: pointer;
}

/*  El avatar en pequeño: 36px en vez de los 56 de class-re-equipo-avatar, que es de carril. Sin foto
    se ve el fondo liso, teñido por el estado — que es justo el círculo de color del diseño.

    EL !important NO ES OPCIONAL. Esto es un ion-col size="auto", y Ionic le pone width: auto y
    max-width: 100%; como inyecta los estilos de sus componentes DESPUÉS de esta hoja, a igualdad de
    peso gana el suyo y la medida de aquí se perdía: el círculo se estiraba con la fila y la foto
    salía deformada y fuera de la tarjeta. Es el mismo caso que ion-avatar.class-re-usuario-avatar.  */
.class-re-repartidor-avatar {
  flex: 0 0 auto !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  align-self: center;
}

.class-re-repartidor-avatar-ambar {
  background: var(--re-ambar);
}

.class-re-repartidor-avatar-gris {
  background: var(--re-fondo-hundido);
}

/*  min-width: 0 para que el nombre pueda recortarse con puntos suspensivos: sin él, un nombre largo
    ensancha su columna y empuja las cifras fuera de la fila.  */
.class-re-repartidor-identidad {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
}

.class-re-repartidor-nombre {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-negro);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.class-re-repartidor-detalle {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/*  Las cifras de la fila son las class-re-estadistica de siempre pero SIN CAJA: la fila ya está
    dentro de un panel blanco, y una tarjeta blanca dentro de otra no separa nada.
    El nowrap es lo que evita los "entregad/os" partidos por la mitad, y el ancho mínimo alinea las
    dos columnas de cifras entre filas aunque una diga "5" y otra "132".  */
.class-re-repartidor-cifra {
  background: none;
  box-shadow: none;
  padding: 0;
  min-width: 58px;
  text-align: center;
}

.class-re-repartidor-cifra .class-re-estadistica-cifra,
.class-re-repartidor-cifra .class-re-estadistica-etiqueta {
  display: block;
  white-space: nowrap;
}

.class-re-repartidor-cifra .class-re-estadistica-cifra {
  font-size: 14px;
}

.class-re-repartidor-cifra .class-re-estadistica-etiqueta {
  font-size: 9px;
  line-height: 1.2;
}

.class-re-repartidores-aviso {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin-top: 12px;
}

/*  Cuadradito redondeado y no círculo, como el icono de los avisos: un logo de negocio es una marca,
    y recortarla en redondo se come las esquinas del diseño.
    Mismo !important y por lo mismo que el avatar del repartidor: sin él, el width: auto que Ionic le
    da al ion-col size="auto" gana por orden de hoja y el logo se estira hasta salirse de la fila.  */
.class-re-negocio-logo {
  flex: 0 0 auto !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  padding: 0 !important;
  align-self: center;
  border-radius: 10px;
  overflow: hidden;
  background: var(--re-verde-claro);
}

.class-re-negocio-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*  El texto de una gráfica sin datos. La caja del canvas se queda igualmente en su sitio, en blanco:
    plegarla haría que Chart.js midiese cero justo al dibujar y no se pintaría nunca ( ver el
    comentario de pintarGraficas en el .ts ). El texto explica POR QUÉ no hay nada, que es lo que
    permite distinguir un hueco de datos de una gráfica rota.  */
.class-re-grafica-vacia {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
}

@media (max-width: 767px) {
  /*  Menos padding lateral, que es donde la pantalla va justa, y el mismo valor en el margen
      negativo del carril: los dos tienen que coincidir o las columnas se descuadran del borde.
      El alto va en vh y no en píxeles: en un teléfono, un valor fijo son casi toda la pantalla en
      uno pequeño y media en uno grande.
      Y NO se dobla como en el ordenador: 70vh ya es casi toda la pantalla, y al doblarlo la card
      sería más alta que el teléfono — habría que scrollear la página para ver el final de unas
      columnas que a su vez scrollean por dentro, con los dos desplazamientos peleándose. Se sube
      un poco y nada más.  */
  .class-re-repartos-panel {
    height: 80vh;
    padding: 14px 12px;
  }
  .class-re-repartos-tablero {
    margin-inline: -12px;
    padding-inline: 12px;
  }
  /*  Las siete cifras en una fila solo caben en el escritorio. Aquí envuelven de dos en dos: el
      40% deja que entren dos por renglón con su gap, y una tercera ya no cabe.  */
  .class-re-repartos-cifras {
    flex-wrap: wrap;
  }
  .class-re-repartos-cifras > .class-re-estadistica {
    flex: 1 1 40%;
  }
  /*  Con las tres cifras puestas, la fila de un repartidor no cabe de una tacada en un teléfono
      estrecho. Se deja envolver para que la etiqueta de estado caiga a un segundo renglón en vez
      de empujar las cifras fuera de la tarjeta.  */
  .class-re-repartos-lista-panel .class-re-fila-lista {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}
/*****************************************************/
/* IMAGEN NUEVA — MIS PEDIDOS                        */
/*****************************************************/
/*  Sacado del diseño "Reparteat - Mis Pedidos", que trae marco de teléfono y de ordenador. Viste la
    page pedidos-cliente, que se abre a pantalla completa desde 🧾 Mis pedidos del menú.

    Se REUTILIZA casi todo lo que ya existe: el content y el cuerpo de la portada, la cabecera de
    página con su pastilla de volver ( bloque de perfil ), el buscador de la home, el carril y la
    píldora con contador del gestor de comandas, la cabecera de día de notificaciones, la etiqueta de
    estado y el botón verde del gestor de comandas, el chip de "ver más" y la fila de carga.
    Lo que se crea es la TARJETA DE PEDIDO, que es la misma idea que la comanda del gestor pero con
    otro contenido: allí manda el cliente y lo que ha pedido, y aquí el negocio, lo que costó y por
    dónde va.

    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-pedidos-pc, que la página pone según datalocal.esEscritorio.  */
/*  El relleno propio del ion-grid ( y el de cada ion-col ) se apaga de una vez para toda la pantalla:
    el aire lo pone class-re-cuerpo, y los huecos entre bloques, los gap de más abajo.  */
.class-re-pedidos {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí
    casi todas viven dentro de una caja en columna, y ese flex-basis: 0 con grow las haría repartirse
    el ALTO a partes iguales. La única que SÍ tiene que crecer ( el texto de la tarjeta ) se lo dice
    más abajo con su clase, que pesa más que este selector.  */
.class-re-pedidos ion-col {
  flex: 0 0 auto;
}

.class-re-pedidos-cargando {
  width: 90px;
}

/*  class-re-cabecera-pagina reparte con space-between porque en mi-perfil hay TRES piezas. Aquí solo
    hay dos —volver y el título— y con space-between el título se iría al otro extremo de la barra.  */
.class-re-pedidos-cabecera {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 14px;
}

/*  ORDENADOR: la cabecera y el buscador comparten fila, que ahí sobra ancho. El título empuja el
    buscador al otro extremo con su margen automático.  */
.class-re-pedidos-cabecera-pc {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 20px;
}

.class-re-pedidos-cabecera-pc > .class-re-pedidos-cabecera {
  margin-right: auto;
}

/*  El carril trae ya el scroll horizontal sin barra a la vista; lo que hace falta es apagarle el
    flex-wrap que ion-row lleva de fábrica, porque con él las píldoras se irían a una segunda línea
    en vez de desplazarse.  */
.class-re-pedidos-pestanas {
  flex-wrap: nowrap;
}

.class-re-pedidos-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.class-re-pedidos-grupo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/*  La cabecera de día ( "HOY", "AYER", "Martes 12 de mayo" ) es class-re-notis-dia tal cual: es la
    misma pieza haciendo lo mismo, y duplicarla con otro nombre solo daría dos sitios donde
    corregirla.  */
.class-re-pedidos-vacio {
  justify-content: center;
  text-align: center;
  padding: 32px 12px;
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  color: var(--re-gris-texto);
}

/*  align-items: center y no flex-start: aquí el logo es una pieza alta y el texto son tres líneas
    cortas, y centrados quedan a la misma altura pase lo que pase con el nombre del negocio.  */
.class-re-pedido {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--re-sombra-suave);
  cursor: pointer;
}

/*  El logo del negocio, en cuadrado con la esquina redondeada y no en círculo como estaba antes: es
    la forma que el diseño le da al negocio en toda la app ( ver class-re-tarjeta ).

    LA MEDIDA VA EN LA <img> Y NO EN LA COLUMNA que la envuelve, igual que en class-re-plato-foto.
    Puesta en la columna no sirve: un ion-col con size="auto" trae su propio width de Ionic, que gana
    por especificidad, y entonces la columna crece hasta el ancho NATURAL del logo y revienta la
    tarjeta. Con la medida en la imagen, la columna se ajusta a lo que hay dentro y da igual lo que
    Ionic haga con ella.  */
.class-re-pedido-logo {
  flex-shrink: 0;
}

.class-re-pedido-logo img {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  /* Mientras el logo carga se ve el degradado de marca en vez de un hueco blanco */
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
}

/*  La que SÍ crece, y con min-width: 0 para que el nombre largo de un negocio pueda encogerse en vez
    de empujar el importe fuera de la tarjeta.
    Va con DOS clases a propósito: así pesa más que el .class-re-pedidos ion-col de ahí arriba, que
    apaga el crecimiento de todas las columnas de la pantalla y si no le ganaría a este flex.  */
.class-re-pedido .class-re-pedido-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.class-re-pedido-titulo {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

/*  El importe se pega al otro extremo con el margen automático del nombre, no con space-between: así
    el icono de mensaje sin leer se queda junto al nombre, que es a lo que se refiere.  */
.class-re-pedido-negocio {
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  LA PÍLDORA DEL IDENTIFICADOR DEL PEDIDO, pegada al nombre del negocio. Verde macizo y no el chip
    claro de class-re-comanda-etiqueta: la tarjeta es blanca y aquí se busca que salte a la vista de
    un vistazo, que es para lo que sirve ese dato en el mostrador.
    No lleva medida fija: el identificador puede ser 'A', '12', 'ZB' o '🟡', y con prefijo del negocio
    delante. El min-width solo evita que un solo carácter salga en una píldora ovalada y estrecha; de
    ahí en adelante crece con el texto. flex-shrink: 0 porque quien se encoge en esta fila es el
    nombre del negocio ( tiene el ellipsis ), nunca esto.  */
.class-re-pedido-letra {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--re-verde), var(--re-verde-oscuro));
  color: #fff;
  font-family: var(--re-fuente-titulo);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: var(--re-sombra-suave);
}

.class-re-pedido-aviso {
  font-size: 15px;
  color: var(--re-ambar-oscuro);
  flex-shrink: 0;
}

.class-re-pedido-total {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0 0 0 auto;
  white-space: nowrap;
}

.class-re-pedido-meta {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 0;
}

/*  El chip de estado. El fondo y el color los pone class-re-comanda-etiqueta y sus modificadores de
    tono; aquí solo va lo que la etiqueta del gestor no necesitaba: que sea una caja con su icono
    dentro, y que NO se estire a lo ancho de la tarjeta.  */
.class-re-pedido-estado {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 4px 12px;
}

.class-re-pedido-estado ion-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.class-re-pedido-estado ion-label {
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*  "Ver pedido" solo existe en el ordenador, y solo en la tarjeta ancha de arriba: en el teléfono la
    tarjeta entera ya se pulsa y el botón sobraría. Se apaga aquí y se enciende abajo.  */
.class-re-pedido-boton {
  display: none;
}

/*  Dos columnas DEL MISMO ANCHO, como en notificaciones. minmax(0, 1fr) y no 1fr a secas: un 1fr
    pelado equivale a minmax(auto, 1fr), así que el nombre largo de un negocio estiraría su columna y
    sacaría scroll horizontal a toda la página.
    La cabecera, las pestañas y la lista cruzan las dos columnas: quien se reparte en dos es la
    LISTA por dentro, no el bloque.  */
.class-re-pedidos-pc > .class-re-pedidos-lista {
  display: block;
}

/*  Cada grupo de día es la rejilla, y no la lista entera: así la cabecera "HOY" sigue ocupando su
    línea a todo lo ancho y las tarjetas de ese día se reparten debajo, en dos columnas.  */
.class-re-pedidos-pc .class-re-pedidos-grupo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  row-gap: 16px;
  margin-bottom: 22px;
}

.class-re-pedidos-pc .class-re-notis-dia {
  grid-column: 1/-1;
}

/*  LA PRIMERA TARJETA A TODO LO ANCHO, con su botón. Es lo que hace el diseño con el pedido en
    curso: el que importa ahora ocupa el doble y enseña la acción, y el histórico va debajo en dos
    columnas. Se hace con CSS y no con un *ngIf de índice en la plantilla, que sería marcado
    duplicado para decir lo mismo.
    Solo en la pestaña de EN CURSO ( class-re-pedidos-curso ): en entregados y cancelados no hay
    ningún pedido más importante que los demás, y destacar el primero solo por ser el más reciente
    diría algo que no es.
    :first-of-type y no :first-child porque el primer hijo del grupo es la cabecera del día.  */
.class-re-pedidos-pc.class-re-pedidos-curso .class-re-pedidos-grupo:first-child > .class-re-pedido:first-of-type {
  grid-column: 1/-1;
}

.class-re-pedidos-pc.class-re-pedidos-curso .class-re-pedidos-grupo:first-child > .class-re-pedido:first-of-type .class-re-pedido-boton {
  display: flex;
}

.class-re-pedidos-pc.class-re-pedidos-curso .class-re-pedidos-grupo:first-child > .class-re-pedido:first-of-type .class-re-pedido-logo img {
  width: 60px;
  height: 60px;
  border-radius: 18px;
}

/*  La pastilla de volver también crece: en el ordenador el diseño la pone a 40px y con la esquina un
    punto más redonda, para que no se quede pequeña al lado de un título de 22px.  */
.class-re-pedidos-pc .class-re-pedidos-cabecera .class-re-boton-chip {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 14px;
}

.class-re-pedidos-pc .class-re-titulo-pagina {
  font-size: 22px;
}

.class-re-pedidos-pc .class-re-pedido {
  padding: 16px 18px;
  border-radius: 20px;
}

.class-re-pedidos-pc .class-re-pedido-negocio {
  font-size: 16px;
}

.class-re-pedidos-pc .class-re-pedido-letra {
  min-width: 28px;
  font-size: 14px;
}

.class-re-pedidos-pc .class-re-pedido-total {
  font-size: 15px;
}

.class-re-pedidos-pc .class-re-pedido-meta {
  font-size: 13px;
}

/*  El buscador de la home va a un ancho fijo de 380px porque allí comparte fila con el saludo; aquí
    también comparte fila, así que se queda como está y solo se le impide crecer.  */
.class-re-pedidos-cabecera-pc > .class-re-buscador {
  flex-shrink: 0;
}

/*****************************************************/
/* IMAGEN NUEVA — LA VENTANA DE PUBLICIDAD           */
/*****************************************************/
/*  Sacado del diseño "Reparteat - Publicidad", que trae marco de teléfono y de ordenador. Viste el
    componente app-publicidad, el popover con la promoción de un negocio: sale solo en la portada a
    los pocos segundos, y a mano desde el banner de novedades ( ahí en modo carrusel, encadenando
    una publicación tras otra ).
    A diferencia de las páginas, aquí el reparto teléfono / ordenador NO cuelga de una clase que
    ponga el .ts con datalocal.esEscritorio, sino de un @media: el marco del popover solo se puede
    medir desde el CSS, y con dos criterios distintos podrían no coincidir ( ordenador con la ventana
    estrecha, tableta ) y saldría el diálogo ancho con el contenido apilado dentro.
    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final.  */
/*  Sustituye a las dos clases viejas ( .popover-publicidad y .popover-publicidad-completa ), y de
    paso al popover entero: esta ventana es un MODAL.

    POR QUÉ NO UN POPOVER. Un popover va pensado para salir pegado a lo que lo abre, y Ionic lo
    coloca escribiendo top y left EN LÍNEA sobre su contenido ( popover/animations/ios.enter.js ):
    desde la hoja de estilos no se le puede llevar al centro, y un transform encima solo consigue
    correrlo media ventana. Un modal con --width y --height se centra él solo, y además se recentra
    al girar el teléfono o al cambiar el tamaño de la ventana.

    El velo oscuro se pide aquí porque el del modal nace flojo para lo que quiere el diseño, que
    apaga la app entera detrás de la tarjeta.

    EL !important NO SOBRA, es el mismo caso que .full-screen-modal ( ver arriba ): ion-modal trae
    un @media a partir de 768px que le pone --width: 600px y --height: 600px, y su hoja se carga
    después de esta, así que a igualdad de peso ganaría ella y en el ordenador la tarjeta saldría de
    600×600 con la foto estirada.  */
.class-re-modal-promo {
  --width: calc(100% - 40px) !important;
  --max-width: 420px !important;
  --height: auto !important;
  --max-height: 88% !important;
  --border-radius: var(--re-radio-tarjeta) !important;
  --background: #fff;
  --box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
  --backdrop-opacity: .5;
}

/*  El host del componente no es una caja por sí solo: sin esto la tarjeta no llenaría el modal.  */
.class-re-modal-promo app-publicidad {
  display: block;
  height: 100%;
}

.class-re-promo {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--re-radio-tarjeta);
  background: #fff;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Esta
    tarjeta es una COLUMNA, y ahí ese grow reparte el ALTO: sin esto, la ✕ de 32px se estira hasta
    media tarjeta y su border-radius del 50% la convierte en una elipse.
    Las tres cajas que SÍ tienen que crecer lo dicen justo debajo, con selectores que pesan más.  */
.class-re-promo ion-col {
  flex: 0 0 auto;
}

.class-re-promo .class-re-promo-datos,
.class-re-promo .class-re-promo-texto {
  flex: 1 1 auto;
}

/*  Los botones sí reparten el ancho de su fila, que para eso son una fila.  */
.class-re-promo .class-re-promo-botones > ion-col {
  flex: 1 1 0;
}

/*  SIN ALTO FIJO: la foto ocupa todo el ancho de la tarjeta y el alto se lo da su proporción, así
    que ni se recorta ni se deforma. El tope en vh es solo para que una imagen muy vertical no se
    coma la pantalla entera y deje al texto fuera; cuando entra en juego, el object-fit de más abajo
    la mete entera dentro en vez de estirarla.  */
.class-re-promo-foto {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-height: 46vh;
  padding: 0;
  overflow: hidden;
}

/*  EL ALTO DE LA CADENA DE SWIPER, que es de donde salían los dos fallos de la foto.

    En swiper/angular no hay un div interno: la clase .swiper la lleva el propio <swiper>, y Swiper
    le pone height: 100% a él, al .swiper-wrapper y a la .swiper-slide. Esos tres 100% hay que
    devolverlos a auto para que el alto lo acabe poniendo la imagen; si no, se miden contra un padre
    sin alto y la cadena entera se queda en nada.
    El .swiper-wrapper conserva su display flex: es el carril por el que Swiper desplaza las slides,
    y ponerlo en block lo desmonta.
    Los selectores van con dos clases porque la hoja de Swiper se carga después de esta y a igualdad
    de peso ganaría ella.  */
.class-re-promo-foto .class-re-promo-foto-swiper,
.class-re-promo-foto-swiper .swiper-wrapper,
.class-re-promo-foto-swiper .swiper-slide {
  height: auto;
}

.class-re-promo-foto-swiper,
.class-re-promo-foto-swiper .swiper-slide,
.class-re-promo-foto-img,
.class-re-promo-foto-vacia {
  width: 100%;
  padding: 0;
}

/*  <swiper> es un custom element: sin display: block sería inline y ni el ancho ni el alto se
    comportarían.  */
.class-re-promo-foto-swiper,
.class-re-promo-foto-img,
.class-re-promo-foto-vacia {
  display: block;
}

/*  LA IMAGEN MANDA EN EL ALTO: se estira al ancho completo de la tarjeta y crece hacia abajo lo que
    le pida su proporción, sin deformarse y sin que se le recorte nada.
    El height/object-fit solo entran en juego cuando el max-height de la caja frena a una imagen muy
    vertical: entonces la mete entera en lo que queda, en vez de estirarla.
    El fondo se ve mientras carga, y de marco en ese caso extremo.  */
.class-re-promo-foto-img {
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  background: var(--re-fondo);
}

/*  Sin foto no hay proporción de la que tirar, así que la franja vacía se apaña con una suya y el
    degradado ámbar del diseño en lugar de un hueco blanco.  */
.class-re-promo-foto-vacia {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--re-ambar-claro), var(--re-ambar-oscuro));
}

/*  La cuenta atrás de los 15 segundos del carrusel: una línea de 3px coronando la foto. Antes era
    una barra al pie, compitiendo por el sitio con los botones.  */
.class-re-promo-barra {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 3px;
  --background: rgba(255, 255, 255, .35);
  --progress-background: var(--re-verde);
}

.class-re-promo-cerrar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 50%;
  background: rgba(28, 28, 28, 0.5);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

/*  El chip pisa la foto, así que va en blanco translúcido y no en el fondo de chip de Ionic.  */
.class-re-promo-negocio {
  position: absolute;
  bottom: 12px;
  left: 14px;
  z-index: 2;
  height: auto;
  margin: 0;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  --background: rgba(255, 255, 255, .92);
}

.class-re-promo-negocio ion-label {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  color: var(--re-negro);
}

.class-re-promo-negocio-logo {
  width: 22px;
  height: 22px;
  margin: 0 8px 0 0;
}

.class-re-promo-datos {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 22px 22px;
}

/*  min-height: 0 y el scroll aquí: con un mensaje largo, lo que se encoge es el texto, no los
    botones, que tienen que seguir viéndose sin arrastrar.  */
.class-re-promo-texto {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
}

.class-re-promo-titulo {
  display: block;
  font-family: var(--re-fuente-titulo);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--re-negro);
}

.class-re-promo-mensaje {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.5;
  color: var(--re-gris-texto);
  margin-top: 6px;
}

/*  El aire sobre los botones lo pone SIEMPRE el pie, y no los puntos con su margen: los puntos solo
    salen en el carrusel, y con una única publicación el mensaje se quedaba pegado al botón.  */
.class-re-promo-pie {
  flex: 0 0 auto;
  padding: 0;
  margin-top: 20px;
}

.class-re-promo-puntos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
}

/*  Un punto por publicación del carrusel. El gris del apagado es el #e0ddd5 del diseño y no
    --re-gris-texto: es un gris de RELLENO, y el de texto se vería casi negro aquí.  */
.class-re-promo-punto {
  width: 6px;
  min-width: 6px;
  height: 6px;
  padding: 0;
  border-radius: 50%;
  background: #e0ddd5;
}

.class-re-promo-punto-activo {
  background: var(--re-verde);
}

/*  El relevo de los puntos cuando hay demasiadas publicaciones para pintarlos ( ver maximoPuntos ).  */
.class-re-promo-contador {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 600;
  color: var(--re-gris-texto);
}

.class-re-promo-botones {
  display: flex;
  gap: 10px;
}

.class-re-promo-boton-suave,
.class-re-promo-boton {
  --border-radius: 999px;
  --box-shadow: none;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 44px;
  width: 100%;
  margin: 0;
}

.class-re-promo-boton-suave {
  --background: var(--re-campo-fondo);
  --background-activated: var(--re-fondo-hundido);
  --background-hover: var(--re-fondo-hundido);
  --color: var(--re-negro);
}

.class-re-promo-boton {
  --background: var(--re-verde);
  --background-activated: var(--re-verde-oscuro);
  --background-hover: var(--re-verde-oscuro);
  --color: #fff;
  --box-shadow: var(--re-sombra-media);
}

/*  En el ordenador es LA MISMA TARJETA, solo que más grande: no hay una segunda disposición que
    mantener, ni un ancho a partir del cual el contenido se recoloque. La tarjeta crece hasta 480px,
    la foto gana alto y las letras suben un punto, que en una pantalla de escritorio la de 20px se
    quedaba pequeña.
    El corte son los 768px de siempre en esta hoja.  */
@media (min-width: 768px) {
  .class-re-modal-promo {
    --max-width: 480px !important;
  }
  .class-re-promo-datos {
    padding: 26px 28px 28px;
  }
  .class-re-promo-titulo {
    font-size: 24px;
  }
  .class-re-promo-mensaje {
    font-size: 14px;
    margin-top: 8px;
  }
  .class-re-promo-botones {
    gap: 12px;
  }
  .class-re-promo-boton-suave,
  .class-re-promo-boton {
    font-size: 14px;
    height: 48px;
  }
}
/*****************************************************/
/* IMAGEN NUEVA — MIS PUBLICACIONES                  */
/*****************************************************/
/*  La otra mitad de la publicidad: la página publicidad-amaca, donde un negocio crea sus novedades,
    las programa y mira lo que han dado de sí. Se abre a pantalla completa desde el menú y desde el
    banner de la portada de negocios.
    No tiene diseño propio: se viste REUTILIZANDO lo que ya existe — el content y el cuerpo de la
    portada, la cabecera de página con su pastilla de volver, el carril de pestañas del gestor de
    comandas, el panel blanco y los campos de mi-perfil, las estadísticas del perfil, la fila de
    ajuste con interruptor de notificaciones y el chip de "ver más". Lo que se crea aquí es solo lo
    que no tenía dónde apoyarse: la ficha de una publicación, la galería de imágenes y el hueco de
    la gráfica.
    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-publi-pc, que la página pone según datalocal.esEscritorio.  */
.class-re-publi {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí
    casi todas viven dentro de una caja en columna, y ese flex-basis: 0 con grow las haría repartirse
    el ALTO a partes iguales. Las que SÍ tienen que crecer se lo dicen justo debajo, con selectores
    que pesan más que este.  */
.class-re-publi ion-col {
  flex: 0 0 auto;
}

.class-re-publi .class-re-fila-campos > .class-re-campo {
  flex: 1 1 0;
}

.class-re-publi .class-re-fila-campos > .class-re-campo-doble {
  flex: 2 1 0;
}

.class-re-publi .class-re-estadisticas > .class-re-estadistica {
  flex: 1 1 0;
  min-width: 0;
}

/*  LAS TRES CIFRAS DE LA ANALÍTICA, tintadas como el resumen del gestor de repartos y no blancas:
    aquí viven junto a paneles blancos, y en blanco se leerían como un panel más.
    TODAS EN VERDE, sin destacar ninguna: las tres son lo mismo —lo que ha dado de sí la
    publicación—, y resaltar una sugería una jerarquía que no existe.  */
.class-re-publi-cifras .class-re-estadistica {
  background: var(--re-verde-claro);
  box-shadow: none;
  padding: 10px 6px;
}

/*  Cifra y etiqueta en el MISMO verde oscuro: la pastilla se lee entonces como un solo bloque de
    color y no como un número negro con una etiqueta verde colgando debajo.  */
.class-re-publi-cifras .class-re-estadistica-cifra,
.class-re-publi-cifras .class-re-estadistica-etiqueta {
  color: var(--re-verde-oscuro);
}

.class-re-publi-cifras .class-re-estadistica-etiqueta {
  line-height: 1.2;
}

/*  El carril trae ya el scroll horizontal sin barra a la vista; lo que hace falta es apagarle el
    flex-wrap que ion-row lleva de fábrica, porque con él las píldoras se irían a una segunda línea
    en vez de desplazarse.  */
.class-re-publi-pestanas {
  flex-wrap: nowrap;
}

/*  LAS LOCALIDADES DE DIFUSIÓN, al revés que las pestañas: aquí SÍ se envuelve. Son pocas —las de
    reparto del negocio— y hay que verlas todas de un vistazo para saber dónde se va a publicar;
    esconder la mitad tras un scroll lateral, en un campo que además hay que marcar, sería un mal
    sitio para ahorrar espacio.  */
.class-re-publi-localidades {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 8px;
  margin-top: 2px;
}

.class-re-publi-rejilla,
.class-re-publi-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.class-re-publi-columna {
  min-width: 0;
}

/*  El botón de guardar va a width: 100%, que en un ordenador sería un botón de metro y medio: el
    tope lo pone este envoltorio, igual que en el gestor de usuarios.  */
.class-re-publi-guardar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.class-re-publi-guardar .class-re-boton-guardar {
  max-width: 420px;
}

/*  El producto al que apunta el anuncio. Es una pastilla y no un campo porque no se escribe: se
    pulsa y se elige en la lista de productos del negocio.  */
.class-re-publi-producto {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border-radius: 16px;
  background: var(--re-campo-fondo);
  cursor: pointer;
}

.class-re-publi-producto-foto {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--re-ambar-claro);
}

.class-re-publi-producto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.class-re-publi-producto-nombre {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  color: var(--re-negro);
}

.class-re-publi-producto ion-icon {
  font-size: 16px;
  color: var(--re-gris-texto);
}

/*  La galería va con slidesPerView: 'auto', así que el ancho lo tiene que poner la slide: sin esto
    todas medirían cero y no se vería ninguna foto.  */
.class-re-publi-galeria {
  display: block;
  width: 100%;
}

.class-re-publi-galeria .swiper-slide {
  width: 120px;
  height: 120px;
}

.class-re-publi-galeria-img,
.class-re-publi-galeria-vacia {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 16px;
  object-fit: cover;
  cursor: pointer;
}

.class-re-publi-galeria-vacia {
  background: linear-gradient(135deg, var(--re-ambar-claro), var(--re-ambar-oscuro));
}

.class-re-publi-subiendo {
  --background: var(--re-campo-fondo);
  --progress-background: var(--re-ambar);
  height: 4px;
  border-radius: 999px;
}

/*  Subir imagen no es la acción principal de la pantalla —esa es Guardar—, así que va en la píldora
    apagada y no en verde.  */
.class-re-publi-boton-suave {
  --background: var(--re-campo-fondo);
  --background-activated: var(--re-fondo-hundido);
  --background-hover: var(--re-fondo-hundido);
  --color: var(--re-negro);
  --border-radius: 999px;
  --box-shadow: none;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 44px;
  margin: 0;
}

/*  El canvas de Chart.js necesita una caja CON ALTO y en position: relative — es lo que la librería
    mide para dimensionarse. Y el alto se lo tiene que quedar ella: forzarle desde aquí un
    width/height al 100% con !important es lo que deformaba el dibujo, porque el lienzo interno
    conserva la proporción que Chart.js calculó y el CSS lo estiraba, y las letras de los ejes salían
    aplastadas, como en cursiva. Quien le dice que se amolde a esta caja es
    utilidades2.ajustarGraficaAlContenedor(), que llama calcularInteraccionesAnuncio(). Es el mismo
    caso que la gráfica de add-producto.  */
.class-re-publi-grafica {
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
}

.class-re-publi-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.class-re-publi-vacio {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
}

.class-re-publi-ficha {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--re-radio-tarjeta);
  background: #fff;
  box-shadow: var(--re-sombra-suave);
  cursor: pointer;
}

.class-re-publi-foto {
  width: 72px;
  min-width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--re-ambar-claro);
}

.class-re-publi-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.class-re-publi-foto-vacia {
  width: 100%;
  height: 100%;
  padding: 0;
  background: linear-gradient(135deg, var(--re-ambar-claro), var(--re-ambar-oscuro));
}

.class-re-publi-ficha .class-re-publi-datos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.class-re-publi-titulo {
  display: block;
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--re-negro);
}

.class-re-publi-fechas {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
}

/*  Lo consumido de la campaña. Va fina y sin números: el detalle está en las fechas de encima.  */
.class-re-publi-barra {
  --background: var(--re-fondo-hundido);
  --progress-background: var(--re-verde);
  height: 4px;
  border-radius: 999px;
  margin-top: 8px;
}

/*  Lo que en el teléfono va apilado se reparte aquí en dos columnas: a la izquierda lo que se edita
    y a la derecha lo que se mide. La lista se queda en una sola columna, centrada, porque una ficha
    de 72px de alto estirada a 1400px sería una regla con una foto al principio.  */
.class-re-publi-pc {
  /*  La cabecera del ordenador: la pastilla de volver crece a 40px y el título a 22px, para que
      no se queden pequeños fuera de la barra del teléfono. Mismo criterio que en notificaciones
      y en mis pedidos.  */
}
.class-re-publi-pc .class-re-publi-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.class-re-publi-pc .class-re-publi-lista {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}
.class-re-publi-pc .class-re-publi-titulo {
  font-size: 17px;
}
.class-re-publi-pc .class-re-publi-fechas {
  font-size: 12px;
}
.class-re-publi-pc .class-re-publi-grafica {
  height: 260px;
}
.class-re-publi-pc .class-re-fila-cabecera {
  margin-bottom: 18px;
}
.class-re-publi-pc .class-re-fila-cabecera .class-re-boton-chip {
  width: 40px;
  min-width: 40px;
  height: 40px;
  border-radius: 14px;
}
.class-re-publi-pc .class-re-titulo-pagina {
  font-size: 22px;
}

/************************************************************************************************/
/*  IMAGEN NUEVA — ANALÍTICA DEL NEGOCIO                                                        */
/************************************************************************************************/
/*  Sale del diseño "Reparteat - Analitica Negocio": el cuadro de mando de un negocio, con sus tres
    caras — el tráfico de la tienda, las ventas del mes y el control de caja de los repartidores.
    Como publicidad-amaca, no tiene casi diseño propio: se viste REUTILIZANDO lo que ya existe — el
    content y el cuerpo de la portada, la cabecera de vidrio y la de página del gestor de usuarios,
    el carril de pestañas del gestor de comandas, el panel blanco y las estadísticas de mi-perfil, el
    chip de "ver más" y el interruptor de los ajustes de notificaciones. Lo que se crea aquí es solo
    lo que no tenía dónde apoyarse: la caja con alto de las gráficas, el donut con su cifra en el
    centro, la pastilla de dato de los carriles, el desglose de importes y la lista de pedidos del
    control de caja.
    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-analitica-pc, que la página pone según datalocal.esEscritorio.  */
.class-re-analitica {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí
    casi todas viven dentro de una caja en columna, y ese flex-basis: 0 con grow las haría repartirse
    el ALTO a partes iguales. Las que SÍ tienen que crecer se lo dicen justo debajo, con selectores
    que pesan más que este.  */
.class-re-analitica ion-col {
  flex: 0 0 auto;
}

.class-re-analitica .class-re-estadisticas > .class-re-estadistica {
  flex: 1 1 0;
}

/*  El cliente y su fecha son el trozo elástico de la fila de pedido del control de caja. Va aquí, con
    dos clases, y no solo en class-re-analitica-pedido-datos: allí lo pisaría el flex: 0 0 auto de
    arriba, que con "una clase + un tipo" pesa más que una clase sola, y el nombre no crecería. La
    regla suelta sigue haciendo falta para las otras pantallas que reutilizan estas filas
    ( info-cliente, gestor-clientes, analytics-app ), que no cuelgan de class-re-analitica.  */
.class-re-analitica .class-re-analitica-pedido-datos {
  flex: 1 1 110px;
}

/*  LAS CIFRAS DEL PERIODO. class-re-estadistica nace BLANCA con sombra, que es lo que necesita en
    mi-perfil ( va sobre el fondo crema de la página ). Aquí casi todas viven DENTRO de un panel, que
    ya es blanco, así que se perdían: se veía el número flotando sin caja.
    El diseño las pinta tintadas y alternando verde y ámbar, para que una fila de cuatro o cinco no
    se lea como un bloque; el ámbar lo pide la propia tarjeta con class-re-estadistica-ambar.  */
.class-re-analitica .class-re-estadistica {
  background: var(--re-verde-claro);
  box-shadow: none;
}

.class-re-analitica .class-re-estadistica-ambar {
  background: var(--re-ambar-claro);
}

/*  La cifra va SIEMPRE en negro, como en el diseño: el tono lo da el fondo de la tarjeta y la
    etiqueta, no el número. Por eso se pisa aquí el verde que class-re-estadistica-destacada le pone
    en el perfil.  */
.class-re-analitica .class-re-estadistica-cifra {
  color: var(--re-negro);
}

.class-re-analitica .class-re-estadistica-etiqueta {
  color: var(--re-verde-oscuro);
}

.class-re-analitica .class-re-estadistica-ambar .class-re-estadistica-etiqueta {
  color: var(--re-ambar-oscuro);
}

/*  OJO: aquí NO va ningún flex. En el teléfono la rejilla es una COLUMNA, así que un flex-basis: 0
    no repartiría el ancho sino el ALTO: cada panel dejaría de medir lo que mide su contenido y la
    tarjeta blanca se encogería hasta el título, con las gráficas y las estadísticas derramándose
    fuera. Los paneles tienen que seguir con el flex: 0 0 auto de arriba.
    Y para el ordenador tampoco hace falta: allí la rejilla es un grid, que ignora el flex de sus
    hijos — las columnas las reparte grid-template-columns y el alto lo iguala el height: 100%.
    min-width: 0 sí es necesario: sin él una gráfica ancha no puede encogerse y estira la tarjeta.  */
.class-re-analitica .class-re-analitica-rejilla > .class-re-panel {
  min-width: 0;
}

/*  class-re-seccion nació para separar bloques de la portada y trae 28px de aire arriba; aquí solo
    se usa por su reparto ( título a la izquierda, "Descargar ❯" a la derecha ) DENTRO de un panel,
    donde el aire ya lo pone el gap.  */
.class-re-analitica .class-re-panel > .class-re-seccion {
  margin: 0;
  align-items: baseline;
}

/*  En el teléfono las rejillas son una columna a secas: quien las convierte en dos o tres columnas
    es el bloque del ordenador del final.  */
.class-re-analitica-rejilla {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.class-re-analitica-cabecera {
  flex-wrap: nowrap;
}

/*  class-re-saludo y class-re-subsaludo nacieron para los <p> de la portada; aquí van sobre
    ion-label, que es inline-block, y sin esto los dos títulos saldrían en la misma línea.  */
.class-re-analitica-cabecera .class-re-saludo,
.class-re-analitica-cabecera .class-re-subsaludo {
  display: block;
}

/*  Las dos píldoras del rango de fechas. Son las mismas pastillas de las pestañas, con el icono del
    calendario delante: cada una abre su calendario y entre las dos va la "a" de "del 1 al 15".  */
.class-re-analitica-fecha {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.class-re-analitica-fecha ion-icon {
  font-size: 15px;
  color: var(--re-ambar);
}

.class-re-analitica-fecha-separador {
  align-self: center;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
}

/*  En un teléfono estrecho las dos píldoras y la "a" pueden no caber en una línea: que envuelvan es
    mejor que recortarlas.  */
.class-re-analitica-fecha-fila {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

/*  El canvas de Chart.js necesita una caja CON ALTO y en position: relative — es lo que la librería
    mide para dimensionarse. Y el alto se lo tiene que quedar ella: forzarle desde aquí un
    width/height al 100% con !important es lo que deformaba el dibujo, porque el lienzo interno
    conserva la proporción que Chart.js calculó y el CSS lo estiraba ( letras aplastadas, quesos
    ovalados ). Quien le dice que se amolde a esta caja es utilidades2.ajustarGraficaAlContenedor().  */
.class-re-analitica-grafica {
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
}

/*  Las barras horizontales de las búsquedas son diez filas con su etiqueta: con 220px no caben y el
    texto se amontona.  */
.class-re-analitica-grafica-alta {
  position: relative;
  display: block;
  width: 100%;
  height: 300px;
}

/*  EL DONUT CON LA CIFRA EN EL CENTRO. Antes se conseguía subiendo la cifra con un margin-top de
    -30vw, que dependía del ancho de la pantalla y en un ordenador se iba a paseo. Ahora el centro
    es una capa absoluta encima del canvas; va con pointer-events: none para no comerse el hover de
    la gráfica.
    OJO: aquí NO se pone alto ni se toca el canvas. Los quesos son los únicos que conservan su
    maintainAspectRatio, que para un doughnut es 1: dándoles una caja de ancho fijo salen redondos
    ellos solos, y el alto lo pone el propio lienzo.  */
.class-re-analitica-donut {
  position: relative;
  display: block;
  width: 170px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.class-re-analitica-donut-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: none;
}

.class-re-analitica-donut-cifra {
  font-family: var(--re-fuente-titulo);
  font-size: 20px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

.class-re-analitica-donut-etiqueta {
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--re-gris-texto);
  margin: 0;
}

/*  El donut y su desglose de importes al lado, como en el diseño. En el teléfono se apilan.  */
.class-re-analitica-margen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

/*  El dato suelto de un carril: la cifra arriba y de qué es debajo. Va sobre el fondo de los campos
    y no en blanco porque el carril vive DENTRO de un panel, que ya es blanco.  */
.class-re-analitica-pastilla {
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--re-campo-fondo);
  text-align: center;
  cursor: pointer;
}

.class-re-analitica-pastilla-ambar {
  background: var(--re-ambar-claro);
}

.class-re-analitica-pastilla-cifra {
  display: block;
  font-family: var(--re-fuente-titulo);
  font-size: 13px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
}

.class-re-analitica-pastilla-etiqueta {
  display: block;
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  color: var(--re-gris-texto);
  white-space: nowrap;
  margin: 0;
}

.class-re-analitica-desglose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.class-re-analitica-desglose-linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
}

.class-re-analitica-desglose-etiqueta {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-analitica-desglose-valor {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-negro);
  white-space: nowrap;
  margin: 0;
}

.class-re-analitica-valor-verde {
  color: var(--re-verde-oscuro);
}

.class-re-analitica-valor-rojo {
  color: var(--re-rojo);
}

/*  Las estadísticas del reparto de cobros son seis y no caben en una fila de teléfono: aquí se
    envuelven de dos en dos y en el ordenador se estiran.  */
.class-re-analitica-kpis {
  flex-wrap: wrap;
}

.class-re-analitica-kpis > .class-re-estadistica {
  flex: 1 1 40%;
}

/*  El dinero que falta por cuadrar no es un dato bueno ni malo: es un aviso, y por eso va en ámbar
    fuerte y no en el verde de las cifras que sí están cobradas.  */
.class-re-analitica-estadistica-aviso .class-re-estadistica-cifra {
  color: var(--re-ambar-oscuro);
}

.class-re-analitica-faltantes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

/*  Cada tarjeta de faltante lleva sus dos acciones DENTRO y a la vista. Antes la tarjeta entera era
    un (click) que abría un popover, sin cursor ni icono ni nada que dijera que aquello se podía
    pulsar: quien no lo sabía no llegaba nunca a "Marcar todo".  */
.class-re-analitica-faltante {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  La tarjeta cuyo medio de pago está filtrando la lista. El borde va por dentro ( inset ) y no como
    border para que la tarjeta no cambie de tamaño al activarse y las cuatro sigan cuadradas.
    El selector lleva delante .class-re-analitica porque es de ahí de donde sale el box-shadow: none
    de las estadísticas de esta pantalla, y con una clase sola le ganaría el "none".  */
.class-re-analitica .class-re-analitica-faltante-activo {
  box-shadow: inset 0 0 0 2px var(--re-verde);
}

.class-re-analitica-faltante-acciones {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/*  El botón de acción de la tarjeta: el mismo verde claro de class-re-boton-panel pero a la escala
    que admite una tarjeta que en el teléfono mide media pantalla.  */
.class-re-analitica-faltante-boton {
  --background: #fff;
  --background-activated: var(--re-verde);
  --background-hover: var(--re-verde);
  --color: var(--re-verde-oscuro);
  --border-radius: 999px;
  --box-shadow: none;
  --padding-start: 10px;
  --padding-end: 10px;
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 28px;
  margin: 0;
}

.class-re-analitica-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0;
}

/*  UNA FILA DE PEDIDO ES UNA SOLA LÍNEA MIENTRAS QUEPA. Cuanto más baja, más pedidos se ven de una
    vez, que es de lo que va cuadrar la caja.
    Envuelve ( wrap ) en vez de recortar : el bloque de cobro es una pieza entera y, cuando en un
    teléfono estrecho no cabe al lado del cliente, se cae a una segunda línea DENTRO de la tarjeta.
    Con nowrap lo que sobraba se derramaba por el lado y el medio de pago o el precio quedaban
    cortados por el borde.  */
.class-re-analitica-pedido {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 12px;
  border-radius: 16px;
  background: var(--re-campo-fondo);
}

/*  El medio de pago, el importe y el interruptor van juntos y no se separan nunca: son las tres
    cosas que se miran a la vez al dar un pedido por contabilizado. margin-left: auto los empuja al
    borde derecho cuando comparten línea con el cliente, y los deja igual de alineados cuando caen a
    la segunda.  */
.class-re-analitica-pedido-cobro {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  margin-left: auto;
}

/*  El pedido que ya está contabilizado se apaga: así lo que salta a la vista al recorrer la lista es
    justo lo que queda por cuadrar.  */
.class-re-analitica-pedido-contabilizado {
  opacity: 0.5;
}

/*  El número de pedido ( la letra ). Ancho mínimo fijo para que los nombres empiecen todos a la
    misma altura y la lista se lea en columna.  */
.class-re-analitica-pedido-letra {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 0;
  font-family: var(--re-fuente-titulo);
  font-size: 13px;
  color: var(--re-negro);
  white-space: nowrap;
  cursor: pointer;
}

/*  flex-basis en 110px y no en auto : es el ancho por debajo del cual ya no merece la pena apretar
    más el nombre del cliente, y es lo que dispara el salto de línea del bloque de cobro.  */
.class-re-analitica-pedido-datos {
  flex: 1 1 110px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.class-re-analitica-pedido-caja {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/*  Quien de verdad tiene que encogerse: es el único texto de largo imprevisible de la fila.  */
.class-re-analitica-pedido-nombre {
  font-family: var(--re-fuente-titulo);
  font-size: 14px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-analitica-pedido-total {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
  white-space: nowrap;
}

.class-re-analitica-pedido-meta {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 0;
}

/*  Los tres trozos del bloque de cobro no se encogen nunca: quien cede sitio es el nombre del
    cliente, y si aun así no cabe, el bloque entero baja de línea.  */
.class-re-analitica-pedido-pago,
.class-re-analitica-pedido-cobro > .class-re-ajuste-toggle {
  flex: 0 0 auto;
}

.class-re-analitica-codigo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  border-bottom: 1px solid var(--re-fondo-hundido);
}

.class-re-analitica-codigo:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.class-re-analitica-vacio {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
}

/*  Lo que en el teléfono es una columna larguísima se reparte aquí en rejillas de dos y de tres, que
    es como está dibujado el artboard de escritorio: primero la fila de cifras del mes, luego las
    gráficas grandes emparejadas y por último los paneles de detalle de tres en tres. Todas las
    columnas van con minmax(0, 1fr): sin ese 0 una gráfica ancha empujaría la rejilla y la página
    acabaría con scroll horizontal.  */
.class-re-analitica-pc {
  gap: 20px;
  /*  Sin align-items cada celda se estira a la altura de la fila ( es el stretch de serie de la
      rejilla ), que es justo lo que se quiere: dos tarjetas juntas tienen que medir lo mismo
      aunque una lleve más cosas dentro.  */
  /*  Para la fila que lleva un único panel y lo quiere a ancho completo: sin esto la rejilla de
      dos columnas lo dejaría ocupando solo la mitad izquierda.  */
  /*  LA REJILLA DEL FLUJO DE CAJA :

        ┌ Pedidos ─────┐┌ Facturación ─┐
        │  gráficas    │└──────────────┘
        │              │┌ Estimaciones ┐
        └──────────────┘└──────────────┘
        ┌ Control de caja ─────────────┐
        │  + la lista de pedidos       │
        └──────────────────────────────┘

      Los cuatro paneles están escritos en el marcado en ese mismo orden, que es como se leen
      apilados en el teléfono; lo que hace falta decir aquí es que las gráficas de pedidos se quedan
      con las dos primeras filas de la columna izquierda, para que a su derecha quepan la facturación
      y las estimaciones una debajo de otra, y que el control de caja va abajo a lo ancho. Sin
      colocarlos a mano, la rejilla los repartiría llenando fila a fila y las estimaciones caerían
      debajo de los pedidos.
      Los selectores van con el hijo directo de la rejilla porque el panel de las gráficas es el
      MISMO que pinta la pestaña de Ventas ( sale de panelPedidosTpl ): allí vive en otra rejilla,
      al lado de Recurrencia, y no tiene que llevarse esta colocación.
      align-items: start es lo que evita que un panel corto se estire al alto de su fila y se quede
      con medio palmo de blanco dentro de la tarjeta.  */
  /*  El panel del control de caja ocupa la fila entera, así que aquí caben dos columnas de pedidos
      y se ve el doble de lista sin bajar. Es el mismo recurso que usa la ficha de cliente.  */
  /*  Aquí sí hay sitio para poner el donut y su desglose uno al lado del otro. El desglose tiene
      width: 100% para el teléfono, donde va debajo; puesto en fila hay que devolverle el auto o se
      saldría del panel.  */
}
.class-re-analitica-pc .class-re-analitica-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.class-re-analitica-pc .class-re-analitica-rejilla > .class-re-panel {
  height: 100%;
}
.class-re-analitica-pc .class-re-analitica-rejilla-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.class-re-analitica-pc .class-re-analitica-rejilla-1 {
  grid-template-columns: minmax(0, 1fr);
}
.class-re-analitica-pc .class-re-analitica-rejilla-caja {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.class-re-analitica-pc .class-re-analitica-rejilla-caja > .class-re-panel {
  height: auto;
}
.class-re-analitica-pc .class-re-analitica-rejilla-caja > .class-re-analitica-panel-pedidos {
  grid-column: 1;
  grid-row: 1/span 2;
}
.class-re-analitica-pc .class-re-analitica-rejilla-caja > .class-re-analitica-panel-facturacion {
  grid-column: 2;
  grid-row: 1;
}
.class-re-analitica-pc .class-re-analitica-rejilla-caja > .class-re-analitica-panel-estimaciones {
  grid-column: 2;
  grid-row: 2;
}
.class-re-analitica-pc .class-re-analitica-rejilla-caja > .class-re-analitica-panel-caja {
  grid-column: 1/-1;
  grid-row: 3;
}
.class-re-analitica-pc .class-re-analitica-panel-caja .class-re-analitica-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}
.class-re-analitica-pc .class-re-analitica-kpis > .class-re-estadistica {
  flex: 1 1 0;
}
.class-re-analitica-pc .class-re-estadistica-cifra {
  font-size: 20px;
}
.class-re-analitica-pc .class-re-estadistica-etiqueta {
  font-size: 11px;
}
.class-re-analitica-pc .class-re-analitica-grafica {
  height: 260px;
}
.class-re-analitica-pc .class-re-analitica-grafica-alta {
  height: 340px;
}
.class-re-analitica-pc .class-re-analitica-donut {
  width: 190px;
}
.class-re-analitica-pc .class-re-analitica-donut-cifra {
  font-size: 24px;
}
.class-re-analitica-pc .class-re-analitica-margen {
  flex-direction: row;
  gap: 20px;
}
.class-re-analitica-pc .class-re-analitica-margen > .class-re-analitica-desglose {
  flex: 1 1 0;
  width: auto;
}
.class-re-analitica-pc .class-re-analitica-faltantes {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*****************************************************/
/* IMAGEN NUEVA — ALTA Y EDICIÓN DE PRODUCTO         */
/*****************************************************/
/*  El formulario con el que se crea y se edita un producto ( add-producto ). Se abre siempre como
    modal a pantalla completa: desde el menú, desde la ficha del producto, desde el catálogo y desde
    la importación de ficheros. Sale del diseño "Reparteat - Editar Producto", que trae marco de
    teléfono y de ordenador.
    Es la página con más campos del proyecto, así que casi todo se REUTILIZA: el content y el cuerpo
    de la portada, la cabecera de vidrio, el panel blanco y los campos de mi-perfil, la fila de
    ajuste con interruptor de las notificaciones, la galería de imágenes y la píldora apagada de mis
    publicaciones, y las estadísticas del perfil. Lo que se crea aquí es solo lo que no tenía dónde
    apoyarse: la cabecera del ordenador, la pastilla del valor que propone el fichero de importación,
    la caja de las filas que se editan a mano ( extras, opciones, lotes ) y el hueco del margen.
    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-alta-pc, que la página pone según datalocal.esEscritorio.  */
.class-re-alta {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  Los ion-col nacen con flex: 1 1 0, pensados para repartirse el ANCHO de una fila, y aquí casi
    todos viven dentro de una caja en COLUMNA, donde ese flex-basis: 0 con grow les haría repartirse
    el ALTO. Aquí se les devuelve el tamaño natural.

    Van ENUMERADOS los contenedores que están en columna, y con «>», en vez de un
    «.class-re-alta ion-col» a secas — que es como estaba y estaba MAL. Aquel alcanzaba también a los
    ion-col que viven dentro de una FILA, y ahí repartirse el ancho es justo lo que se quiere. Y no
    era un matiz estético: un ion-col SIN «size» no recibe estilo en línea de Ionic y conserva el
    width: 100% de su :host, así que al pasarlo a flex-basis: auto medía la fila entera y, con
    flex-shrink: 0, ya no podía encoger — la columna del título de la cabecera empujaba los botones
    de Ajustes y Guardar fuera de la pantalla, donde los recortaba el overflow del ion-content.
    Mismo criterio ( y misma explicación ) que en add-negocio.  */
.class-re-alta > *,
.class-re-alta-rejilla > *,
.class-re-alta-columna > *,
.class-re-alta .class-re-panel > *,
.class-re-alta .class-re-alta-editable > * {
  flex: 0 0 auto;
}

/* El único reparto que no es a partes iguales: el campo ancho de una pareja desigual */
.class-re-alta .class-re-fila-campos > .class-re-campo-doble {
  flex: 2 1 0;
}

/*  add-producto.page.scss define ion-toggle { --background: #838383 }, y con la encapsulación
    emulada de Angular eso pesa más que .class-re-ajuste-toggle: los interruptores saldrían gris
    marengo en vez del gris cálido del diseño. Como los .scss de página no se tocan, se le gana en
    peso desde aquí.  */
.class-re-alta .class-re-ajuste-toggle {
  --background: var(--re-fondo-hundido);
  --background-checked: var(--re-verde);
}

/*  El panel que solo lleva filas de interruptor: esas filas ya traen su propio relleno y su línea de
    separación, así que el gap del panel las despegaría el doble.  */
.class-re-alta .class-re-panel-ajustes {
  gap: 0;
  padding: 14px 18px;
}

/*  Un campo que cuelga de un interruptor ( la fecha de bloqueo automático, la de publicación ) tiene
    que ponerse su propio aire, porque ese panel va sin gap.  */
.class-re-alta .class-re-panel-ajustes > .class-re-campo {
  margin-top: 12px;
}

.class-re-alta-rejilla,
.class-re-alta-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.class-re-alta-columna {
  min-width: 0;
}

/*  En el teléfono la cabecera es la de vidrio; en el ordenador no hay barra superior, así que la
    miga de pan, el título y las dos acciones se pintan dentro del contenido.
    Se deja el flex-wrap: wrap que ya trae ion-row: en una ventana estrecha los botones bajan a una
    segunda línea, que es lo que hace el gestor de comandas, en vez de quedarse fuera.  */
.class-re-alta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/*  La columna del título es la que cede cuando no cabe todo: crece hasta empujar los botones contra
    el borde derecho, y si aun así no llega, el texto se recorta con puntos suspensivos.  */
.class-re-alta-cabecera-texto {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.class-re-alta-miga,
.class-re-alta-cabecera-texto .class-re-titulo-pagina {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.class-re-alta-miga {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 600;
  color: var(--re-gris-texto);
}

.class-re-alta-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
}

.class-re-alta-cabecera-acciones .class-re-boton-guardar {
  width: auto;
  min-width: 150px;
  height: 44px;
}

/*  El textarea comparte piel con el input, pero el min-height de 42px de este lo dejaría clavado en
    una línea: se lo quitamos y que crezca con auto-grow.  */
.class-re-alta-campo-texto {
  min-height: 0;
}

/*  Al importar un fichero de productos, cada campo puede traer debajo el valor que propone la
    importación: se pulsa y se aplica. Antes era un ion-badge dorado en una fila suelta detrás del
    campo, que no dejaba ver a cuál correspondía.  */
.class-re-alta-cambio {
  display: block;
  margin-top: 6px;
  padding: 6px 12px;
  /*  Radio de tarjeta y no de píldora a propósito: lo que propone el fichero puede ser una
      descripción entera, y una píldora de tres líneas no se sostiene.  */
  border-radius: 14px;
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

/*  La píldora apagada de mis publicaciones no trae ancho, porque allí vive dentro de una columna
    estrecha. Aquí casi siempre cierra un panel, así que se le da.  */
.class-re-alta-boton-ancho {
  width: 100%;
}

/*  Generarlo con la inteligencia artificial y propagar sus cambios a los franquiciados. Estaban
    dentro de la analítica, escondidas al final de la página, y son lo primero que se busca al abrir
    un producto nuevo: por eso suben encima de la card de producto.
    Van en ÁMBAR, que es el color con el que esta app llama la atención sin pedir la acción
    principal, para no competir con el verde de guardar.  */
.class-re-alta-boton-destacado {
  --background: var(--re-ambar);
  --background-activated: var(--re-ambar-oscuro);
  --background-hover: var(--re-ambar-oscuro);
  --color: var(--re-negro);
  --border-radius: 999px;
  --box-shadow: var(--re-sombra-suave);
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 44px;
  margin: 0;
}

/*  Los dos juntos se reparten la fila, y en cuanto no caben, el segundo baja  */
.class-re-alta-acciones-ia {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.class-re-alta-acciones-ia .class-re-alta-boton-destacado {
  flex: 1 1 200px;
}

/*  El chip que acompaña a un campo ( escanear el código, ir a la URL ) tiene que quedar a la altura
    del campo. Sin esto se estira desde la etiqueta, porque una fila de campos no alinea nada.  */
.class-re-alta .class-re-fila-campos > .class-re-chip {
  align-self: flex-end;
}

/*  Lo que se repite y se edita a mano ( un extra, una opción, un lote ) se mete en una caja del
    color del campo, para que se lea dónde acaba uno y empieza el siguiente. Los campos de dentro se
    ponen blancos porque, si no, se fundirían con esa caja.
    Los extras eran antes un ion-item-sliding: había que deslizar para encontrar el borrar, que en un
    ordenador no se descubre.  */
/*  El selector va con dos clases a propósito: .class-re-panel>ion-col ( global.scss:9393 ) apaga el
    relleno de los ion-col hijos de un panel, y estas cajas son justo eso, así que a una clase sola le
    ganaría y nacerían sin aire.  */
.class-re-alta .class-re-alta-editable {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: var(--re-campo-fondo);
}

/*  Las que no apilan campos sino que ponen uno solo con su acción al lado ( una opción, un modelo )  */
.class-re-alta .class-re-alta-editable-fila {
  flex-direction: row;
  align-items: center;
}

.class-re-alta-editable .class-re-campo-input {
  --background: #fff;
  background: #fff;
}

/*  Dentro de estas cajas los campos van sin etiqueta o con todas iguales, así que centrarlos deja la
    casilla, los importes y la papelera a la misma altura.  */
.class-re-alta-editable .class-re-fila-campos {
  align-items: center;
}

/*  LOS SEIS CAMPOS DE UN EXTRA EN UNA SOLA FILA. En el ordenador caben de corrido; en el teléfono
    esto envuelve solo, porque cada campo declara el ancho a partir del cual salta de línea en vez
    del flex: 1 1 0 que reparte a partes iguales y los dejaría de 40px.  */
.class-re-alta-extra-campos {
  flex-wrap: wrap;
  align-items: flex-end;
}

.class-re-alta .class-re-alta-extra-campos > .class-re-campo {
  flex: 1 1 130px;
}

.class-re-alta .class-re-alta-extra-campos > .class-re-campo-doble {
  flex: 2 1 180px;
}

/*  Coste, PVP e IVA son tres números cortos: no necesitan el mismo ancho que un nombre  */
.class-re-alta .class-re-alta-extra-campos > .class-re-alta-extra-importe {
  flex: 1 1 80px;
}

/*  La casilla y la papelera no tienen etiqueta encima, así que se alinean por abajo con los campos
    que sí la tienen; si no, quedarían a la altura de las etiquetas.  */
.class-re-alta-extra-campos > .class-re-alta-extra-casilla,
.class-re-alta-extra-campos > .class-re-alta-borrar {
  align-self: flex-end;
  margin-bottom: 4px;
}

/*  El borrar va sobre un rojo muy claro — el mismo par de la etiqueta de pedido cancelado — para que
    se lea como lo que es sin gritar en medio de un formulario.  */
.class-re-alta-borrar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 12px;
  background: #fbe3df;
  color: var(--re-rojo);
  cursor: pointer;
}

.class-re-alta-borrar ion-icon {
  font-size: 16px;
}

.class-re-alta-margen {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.class-re-alta-margen-cifra {
  font-family: var(--re-fuente-titulo);
  font-size: 19px;
  font-weight: 400;
  color: var(--re-verde-oscuro);
  margin: 0;
}

/* Vender por debajo del coste se avisa en rojo, no en verde apagado */
.class-re-alta-margen-cifra-negativa {
  color: var(--re-rojo);
}

.class-re-alta-margen ion-progress-bar {
  --background: var(--re-campo-fondo);
  --progress-background: var(--re-verde);
  height: 6px;
  border-radius: 999px;
}

/*  La galería es la misma de mis publicaciones, pero allí son cuadrados de 120px dentro de una
    columna estrecha y aquí el diseño quiere una foto apaisada de 150px de alto, con la siguiente
    asomando por el borde para que se vea que hay más de una.  */
.class-re-alta .class-re-publi-galeria .swiper-slide {
  width: 210px;
  height: 150px;
}

/*  Se reutilizan los iconos de la ficha del producto ( class-re-producto-alergeno ), pero allí solo
    se miran y aquí se pulsan para quitarlos.  */
.class-re-alta .class-re-producto-alergeno {
  cursor: pointer;
}

/*  Favoritos, visitas y ventas. Mismo tratamiento que las cifras del periodo del gestor de repartos:
    class-re-estadistica nace BLANCA con sombra, que es lo que necesita en mi-perfil ( va sobre el
    fondo crema ), pero aquí vive DENTRO de un panel, que ya es blanco, así que la caja se perdía y
    quedaba el número flotando. Las tres van en verde, no alternando con ámbar, porque son la misma
    clase de dato.  */
.class-re-alta-cifras .class-re-estadistica {
  background: var(--re-verde-claro);
  box-shadow: none;
}

/*  display: block es lo que baja la etiqueta a su propia línea. Los ion-label sueltos ( fuera de un
    ion-item ) son inline, así que la cifra y su etiqueta se pintaban seguidas en el mismo renglón:
    "12 Favoritos" en vez de la cifra grande con el "Favoritos" debajo.  */
.class-re-alta-cifras .class-re-estadistica-cifra,
.class-re-alta-cifras .class-re-estadistica-etiqueta {
  display: block;
  color: var(--re-verde-oscuro);
}

.class-re-alta-cifras .class-re-estadistica-etiqueta {
  line-height: 1.2;
}

/*  El canvas de Chart.js necesita una caja CON ALTO y en position: relative — es lo que la librería
    mide para dimensionarse. Y el alto se lo tiene que quedar ella: forzarle desde aquí un
    width/height al 100% con !important es lo que deformaba el dibujo, porque el lienzo interno
    conserva la proporción que Chart.js calculó y el CSS lo estiraba, y las letras de los ejes salían
    aplastadas, como en cursiva. Quien le dice que se amolde a esta caja es
    utilidades2.ajustarGraficaAlContenedor(), igual que en la analítica.  */
.class-re-alta-grafica {
  position: relative;
  display: block;
  width: 100%;
  height: 220px;
}

/*  El botón se queda pegado al fondo mientras se recorre el formulario, que es lo que enseña el
    diseño y lo que hacía la vieja class-fijar-abajo.  */
.class-re-alta-guardar {
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 20px;
  z-index: 2;
  margin-top: 20px;
}

.class-re-alta-guardar .class-re-boton-guardar {
  max-width: 420px;
}

/*  Dos columnas: a la izquierda lo que se escribe y a la derecha lo que se mira — la analítica, la
    foto y los alérgenos. Por debajo de 1000px la modal ya no da para dos columnas ( arranca donde
    acaba el menú lateral ) y vuelve a una.  */
.class-re-alta-pc {
  /*  Los relacionados reutilizan la rejilla de platos de la portada, que va a TRES columnas porque
      allí ocupa el ancho de la página. Aquí vive dentro de la columna que se edita, que es la
      mitad: a tres columnas la tarjeta se queda sin sitio para el nombre.  */
}
.class-re-alta-pc .class-re-alta-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  align-items: start;
  gap: 20px;
}
.class-re-alta-pc .class-re-rejilla-platos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1000px) {
  .class-re-alta-pc .class-re-alta-rejilla {
    grid-template-columns: 1fr;
  }
}

/*******************************************************************************************************/
/************************************ IMAGEN NUEVA — FICHA DE CLIENTE **********************************/
/*******************************************************************************************************/
/*  info-cliente. Es el mismo problema que la ficha de gestor-usuarios — la ficha de una persona — así
    que se viste con las mismas piezas ( class-re-identidad, class-re-estadisticas, class-re-panel ) y
    aquí solo vive lo que es propio de esta pantalla. Las filas de tickets reutilizan las de analitica
    ( class-re-analitica-pedido ) y por eso tampoco hay nada suyo aquí.  */
/*  Mismo canalón que la ficha de usuarios y por el mismo motivo: los dos montones de paneles son
    ion-col size="6" y no dejan sitio para un column-gap.  */
.class-re-cliente-ficha {
  row-gap: 16px;
  align-items: flex-start;
  margin-inline: -8px;
}

.class-re-cliente-ficha > ion-col {
  padding-inline: 8px;
}

.class-re-cliente-columna {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  ion-col nace con flex: 1 1 0, pensado para repartir el ANCHO de una fila. Dentro de un contenedor
    puesto en COLUMNA — cada montón de paneles, y cada nota dentro del panel — pasa a repartir el ALTO,
    y el basis 0 decide la altura de cada pieza en vez de decidirla su contenido.
    OJO CON EL :not(): un panel también es un ion-col hijo de la columna, y el selector de dos partes
    pesa más que .class-re-panel a secas: sin la excepción, el padding: 0 le borraría al panel su
    relleno propio y los títulos nacerían pegados al borde de la tarjeta.  */
.class-re-cliente-columna > ion-col,
.class-re-cliente-nota > ion-col {
  flex: 0 0 auto;
}

.class-re-cliente-columna > ion-col:not(.class-re-panel),
.class-re-cliente-nota > ion-col {
  padding: 0;
}

/*  UNA NOTA del cliente. Van apiladas dentro del mismo panel blanco, separadas por el filete: son
    varias fichas del mismo bloque, no un panel cada una. La primera no lleva filete ni hueco arriba
    porque justo encima tiene el título del panel.  */
.class-re-cliente-nota {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.class-re-cliente-nota + .class-re-cliente-nota {
  padding-top: 14px;
  border-top: 1px solid var(--re-linea);
}

/*  LOS TICKETS. Las filas son las de analitica, pero allí viven DENTRO de un panel blanco y aquí van
    sueltas sobre el crema de la página: con su --re-campo-fondo ( #f4f2ec ) sobre el --re-fondo
    ( #f6f4ee ) no se distinguía una fila de la otra ni del fondo. Aquí cada ticket es una tarjeta
    blanca con la sombra suave, como el resto de tarjetas que van sobre el crema.  */
.class-re-cliente .class-re-analitica-pedido {
  background: #fff;
  box-shadow: var(--re-sombra-suave);
}

/*  El botón de guardar de la cabecera de ordenador, junto a la pastilla de ajustes.  */
.class-re-cliente-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
}

/*  class-re-boton-guardar nace a lo ancho, que es lo que hace falta en el pie del teléfono. En la
    cabecera del ordenador tiene que ocupar lo suyo y nada más.  */
.class-re-cliente-cabecera-acciones .class-re-boton-guardar {
  width: auto;
  min-width: 130px;
  height: 44px;
}

/*  La cabecera de la ficha deja de ser un bloque centrado a todo el ancho y se lee en una sola línea:
    el avatar y los datos a la izquierda, las tres cifras a la derecha. Es lo mismo que hacen mi-perfil
    y gestor-usuarios, y por el mismo motivo: centrado y a 1.900px de ancho, un avatar con el nombre
    debajo deja media pantalla en blanco antes de que empiece lo que importa.  */
.class-re-cliente-pc {
  /*  padding-block y NO padding a secas: el relleno LATERAL es el canalón de 8px que esta celda
      comparte con los paneles de abajo, y quitándolo el avatar se saldría por la izquierda respecto
      a todo lo demás.  */
  /*  Los tickets ocupan el ancho entero de la ficha, debajo de los dos montones de paneles: en una
      sola columna cada uno sería una tarjeta de 1.800px con el nombre a la izquierda y la fecha a la
      derecha, y el ojo tendría que cruzar la pantalla para leer una línea. En tres caben ~500px cada
      uno, que es de lo que va sobrada la fila.
      Por debajo de 1400px se quedan en dos: la modal arranca donde acaba el menú lateral, así que el
      ancho real es siempre menor que el de la ventana.  */
}
.class-re-cliente-pc .class-re-identidad {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding-block: 0;
}
.class-re-cliente-pc .class-re-identidad-texto {
  text-align: left;
  min-width: 0;
}
.class-re-cliente-pc .class-re-estadisticas {
  margin-top: 0;
}
.class-re-cliente-pc .class-re-analitica-lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}
@media (max-width: 1400px) {
  .class-re-cliente-pc .class-re-analitica-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*****************************************************/
/* IMAGEN NUEVA — LA REJILLA EXCEL DE PRODUCTOS      */
/*****************************************************/
/*  La pestaña "Excel" de la página de productos: la tabla donde se editan de corrido el estado, el
    código interno, los textos, los precios y la imagen de todos los productos del negocio. Solo se
    pinta en ordenador ( productos.page.ts, this.ordenador ), que es el único sitio donde una tabla
    de doce columnas tiene sentido.
    Se REUTILIZA casi todo: el content y el cuerpo de la portada, la etiqueta y el campo de
    formulario de mi-perfil, las pastillas de acción de la cabecera, la píldora de alta del gestor de
    usuarios y el botón de guardar. Lo propio de aquí es solo lo que no tenía dónde apoyarse: el
    carril de scroll horizontal que comparten cabecera y filas, los anchos de columna y el pie fijo.
    Antes era un ion-list de ion-item-sliding con las columnas repartidas por el size= de ion-col
    ( doce columnas de Ionic para once campos ), así que los textos salían de tres letras de ancho y
    las acciones había que descubrirlas deslizando, que en un ordenador no se le ocurre a nadie.  */
/*  El scroll vertical se queda donde estaba, en el ion-content: la cabecera de columnas no puede ir
    pegada arriba porque un contenedor con overflow-x en auto convierte también su eje vertical en
    auto, y la barra de scroll de las filas acabaría dibujada a 1430px del borde, fuera de la vista.
    El cuerpo de la rejilla ya no es suyo: comparte el class-re-productos-cuerpo con la tabla, porque
    la cabecera y las pestañas tienen que seguir a la vista también en modo Excel.  */
/*  La cabecera y las filas van DENTRO del mismo contenedor con scroll horizontal. Es la única forma
    de que sigan cuadradas sin sincronizar dos scrolls por código: se desplazan porque se desplaza su
    padre. Por eso la cabecera bajó aquí desde el ion-header.
    Los márgenes negativos lo sacan del padding del cuerpo para que la tabla arrastre de canto a
    canto, y el padding se lo devuelve por dentro ( mismo truco y mismos valores que
    class-re-tablero ). overflow-y en hidden porque un eje en auto pone el otro en auto también.  */
.class-re-excel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  margin-inline: -44px;
  padding-inline: 44px;
  padding-block: var(--re-aire-sombra);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

/*  Aquí la barra SÍ se ve, al revés que en los carriles de chips de la app: en una tabla que no cabe
    en la pantalla es la única pista de que hay columnas a la derecha.  */
.class-re-excel::-webkit-scrollbar {
  height: 8px;
}

.class-re-excel::-webkit-scrollbar-thumb {
  background: var(--re-fondo-hundido);
  border-radius: 999px;
}

/*  1310px es la SUMA de los anchos de columna de abajo ( 1214 ), de las nueve separaciones de 8px y
    del relleno lateral de la fila: si se toca cualquiera de los tres, este número cambia.
    Es un min-width y no un width para que en una pantalla ancha la tabla se estire y la columna de
    la imagen se coma lo que sobre, en vez de dejar un hueco muerto a la derecha.
    max-width en none porque un ion-col nace con max-width: 100%, que lo clavaría al ancho del carril
    y se llevaría por delante el min-width.  */
.class-re-excel-tabla {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 0 auto;
  min-width: 1310px;
  max-width: none;
}

/*  Los mismos 12px de relleno lateral que la fila, para que cada rótulo caiga sobre su columna. Va
    sin fondo: es la etiqueta de un campo, no una barra.  */
.class-re-excel-cabecera {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
  padding: 0 12px;
}

.class-re-excel-cabecera .class-re-campo-etiqueta {
  margin-bottom: 0;
  padding-inline: 12px;
}

/*  Cada producto es una tarjeta blanca, como las filas de listado del resto de la app
    ( class-re-usuario-tarjeta ), pero con menos aire: en una tabla de cien filas lo que se busca es
    poder comparar de un vistazo dos productos que están lejos.  */
.class-re-excel-fila {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--re-sombra-suave);
}

/*  Los campos van más bajos que en un formulario ( 42px de min-height ) y con menos relleno: aquí no
    hay etiqueta encima de cada uno y lo que interesa es que quepan filas en la pantalla.
    El textarea sale a una línea y sin auto-grow a propósito: con auto-grow, un producto con la
    descripción larga levantaría su fila y la tabla quedaría en diente de sierra.  */
.class-re-excel-fila .class-re-campo-input {
  --padding-start: 12px;
  --padding-end: 12px;
  --padding-top: 8px;
  --padding-bottom: 8px;
  border-radius: 12px;
  font-size: 12px;
  min-height: 36px;
  width: 100%;
}

.class-re-excel-fila .class-re-excel-campo-elegible {
  cursor: pointer;
}

.class-re-excel-celda-centrada {
  display: flex;
  justify-content: center;
}

/*  Los mismos iconos de la ficha del producto ( class-re-producto-alergeno ), pero allí miden 44px y
    aquí los campos de la fila miden 36 de alto: a tamaño natural levantarían la tabla entera. Se
    quedan en 24 y, como en la ficha, se pulsan para quitarlos.
    ENVUELVEN en vez de recortarse: un producto con siete alérgenos hace su fila un poco más alta, que
    es mucho mejor que esconder un dato que es obligatorio declarar. El + no encoge nunca.  */
.class-re-excel-alergenos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.class-re-excel-fila .class-re-producto-alergeno {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.class-re-excel-alergenos .class-re-boton-chip {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  font-size: 14px;
}

.class-re-excel-acciones {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 8px;
}

/*  Duplicar necesita que el producto exista en la base de datos: en una fila recién añadida, que
    todavía no se ha guardado, no hay nada que copiar.  */
.class-re-excel-accion-apagada {
  opacity: 0.35;
  pointer-events: none;
}

/*  Los llevan la cabecera y la fila, y de ahí sale el cuadre. Van en flex y no en el size= de
    ion-col porque size= reparte doce columnas del ancho disponible: con once campos dentro, los
    textos se quedaban de tres letras y no había manera de darle más sitio al nombre que al IVA.
    flex-shrink en 0 en todas menos la de la imagen: si encogieran, la tabla cabría siempre y no
    aparecería nunca el scroll horizontal, que es justo lo que evita que se aplasten.
    max-width en none y min-width en 0 por lo de siempre con ion-col: nace con max-width: 100% y no
    baja del ancho de su contenido.  */
.class-re-excel-cabecera > ion-col,
.class-re-excel-fila > ion-col {
  padding: 0;
  max-width: none;
  min-width: 0;
}

.class-re-excel-col-estado {
  flex: 0 0 52px;
}

.class-re-excel-col-ci {
  flex: 0 0 84px;
}

.class-re-excel-col-texto {
  flex: 0 0 180px;
}

.class-re-excel-col-categoria {
  flex: 0 0 120px;
}

.class-re-excel-col-numero {
  flex: 0 0 78px;
}

.class-re-excel-col-alergenos {
  flex: 0 0 176px;
}

.class-re-excel-col-imagen {
  flex: 1 0 170px;
}

.class-re-excel-col-acciones {
  flex: 0 0 96px;
}

/*  Se queda pegado abajo mientras se recorre la tabla. El degradado es para que las filas que pasan
    por debajo no se lean a medias contra los botones.  */
.class-re-excel-pie {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0;
  background: linear-gradient(to top, var(--re-fondo) 72%, rgba(246, 244, 238, 0));
}

/*  El de guardar va a width: 100% porque es el botón de pie de un formulario; aquí comparte fila con
    otras tres cosas y tiene que medir lo suyo ( mismo caso que en class-re-alta-cabecera-acciones ).  */
.class-re-excel-pie .class-re-boton-guardar {
  width: auto;
  min-width: 150px;
  height: 44px;
}

/*  La rejilla no se pinta en el teléfono, pero SÍ en una ventana de ordenador estrechada: ordenador
    se decide con platform.is('desktop') al entrar en la página, no con el ancho. Y por debajo de
    767px class-re-cuerpo cambia de relleno, así que el truco de borde a borde necesita el suyo.  */
@media (max-width: 767px) {
  .class-re-excel {
    margin-inline: -20px;
    padding-inline: 20px;
  }
}
/*****************************************************/
/* IMAGEN NUEVA — GESTOR DE PRODUCTOS                */
/*****************************************************/
/*  El listado de productos de mi negocio ( productos ), que sale del diseño "Reparteat - Gestor
    Productos". Deja de ser una lista de fichas y pasa a ser una TABLA de gestión: producto,
    categoría, precio, un interruptor de disponible y el enlace de editar, dentro de un solo panel
    blanco y con paginación numerada al pie.
    Se REUTILIZA casi todo: el content y el cuerpo de la portada, la cabecera de ordenador y el botón
    verde de alta del gestor de usuarios, el par título + subtítulo de la portada, las píldoras de
    categoría del catálogo, el panel blanco y el filete de mi-perfil, la miniatura de producto del
    catálogo, la etiqueta de estado de las comandas y el interruptor de las notificaciones. Lo propio
    de aquí es solo lo que no tenía dónde apoyarse: los anchos de columna, el rótulo en versalitas y
    la paginación numerada, que en el resto de la app no existe ( todo pagina con "ver más" ).
    La disposición BASE es la del ORDENADOR, que es de donde sale el diseño; el teléfono va en el
    único @media del final, donde la tabla se recoge a una columna.  */
.class-re-productos-cuerpo {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.class-re-productos-carril {
  gap: 10px;
}

/*  En el ordenador el carril NO scrollea: no hay dedo que arrastrar y la barra va oculta, así que
    una pestaña que se saliera no habría forma de alcanzarla. Mismo criterio que en el catálogo.  */
@media (min-width: 768px) {
  .class-re-productos-carril {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 10px;
  }
}
/*  Solo coloca las tarjetas: el blanco y la sombra los pone cada una, no el contenedor.
    flex: 0 0 auto porque un ion-col nace con flex: 1 1 0, y dentro de un cuerpo en columna eso lo
    estira hasta el fondo de la pantalla y manda el "ver más" al canto de abajo aunque haya tres
    productos. max-width: none por lo de siempre: el ion-col trae un max-width: 100%.  */
.class-re-productos-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
  max-width: none;
  padding: 0;
}

/*  UNA TARJETA POR PRODUCTO, como las del gestor de usuarios y las de la rejilla Excel. Antes era un
    panel blanco con las filas separadas por un filete, con su fila de rótulos encima; el diseño lo
    traía así, pero era el único listado de la app con cabecera de columnas y en el teléfono el
    conjunto se leía como un bloque en vez de como una lista de productos.
    Sin rótulos, los anchos de columna de más abajo son los que alinean la tabla en el ordenador.  */
.class-re-productos-fila {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--re-sombra-suave);
  cursor: pointer;
}

.class-re-productos-fila > ion-col {
  padding: 0;
  max-width: none;
}

/*  OJO, LA TRAMPA DE ion-col. Su :host trae flex-basis: 0; flex-grow: 1 PERO TAMBIÉN width: 100%
    ( node_modules/@ionic/core/.../col/col.css ). Ese width es inofensivo mientras flex-basis sea una
    longitud, porque flexbox solo mira width cuando flex-basis vale auto. En cuanto se escribe aquí un
    flex: … AUTO, se despierta y la columna pasa a pedir el ancho ENTERO de la fila: con flex-shrink 0
    se lleva una línea para ella sola y el resto envuelve debajo.
    Así que en esta tabla: o base en píxeles, o flex: 1 1 0. Nunca flex: … auto a secas — y si de
    verdad hace falta el ancho del contenido, hay que acompañarlo de width: auto, que es justo lo que
    Ionic inyecta en línea cuando le pones size="auto".  */
.class-re-productos-col-foto {
  flex: 0 0 44px;
}

/*  La única que crece: se queda con todo el sitio que sobra, y eso es lo que empuja el interruptor
    hasta el borde derecho de la tarjeta. min-width: 0 para que el nombre pueda partir en varias
    líneas sin ensanchar la columna.  */
.class-re-productos-col-nombre {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
}

.class-re-productos-col-categoria {
  flex: 0 0 160px;
}

.class-re-productos-col-precio {
  flex: 0 0 100px;
}

.class-re-productos-col-estado {
  flex: 0 0 90px;
}

.class-re-productos-col-editar {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 80px;
}

/*  La del catálogo mide 72px, que es media tarjeta. Aquí se queda en 44, con el redondeo
    proporcionalmente más cerrado para que siga leyéndose como un cuadrado. La clase la comparten la
    foto de verdad y el hueco de los productos que no tienen ninguna.  */
.class-re-productos-foto {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}

/*  El nombre va en la tipografía de título, como en las fichas del catálogo, y SIN nowrap: un
    producto con nombre largo se lee entero en dos líneas antes que recortado con puntos suspensivos.
    OJO CON anywhere: break-word y anywhere parten igual, pero anywhere además hace que el ancho
    MÍNIMO del texto sea el de UNA LETRA, y entonces el flex de fuera puede encoger la columna hasta
    ahí. Eso es lo que dejaba el nombre escrito en vertical, una letra por línea, en el teléfono.  */
.class-re-productos-nombre {
  display: block;
  font-family: var(--re-fuente-titulo);
  font-size: 14px;
  font-weight: 400;
  color: var(--re-negro);
  margin: 0;
  overflow-wrap: break-word;
}

.class-re-productos-precio {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 700;
  color: var(--re-negro);
  margin: 0;
}

.class-re-productos-recogido {
  display: none;
}

/*  TRES COLUMNAS: la foto, el nombre ( con la categoría y el precio recogidos debajo ) y el
    interruptor al canto derecho. Se van las columnas de categoría y precio, porque esos dos datos
    bajan bajo el nombre, y la de "Editar", porque la tarjeta ya se abre al tocarla y ahí el ancho es
    oro. El marcado es el mismo en los dos sitios, la diferencia la pone esto.  */
@media (max-width: 767px) {
  .class-re-productos-col-categoria,
  .class-re-productos-col-precio,
  .class-re-productos-col-editar {
    display: none;
  }
  .class-re-productos-recogido {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
  }
  .class-re-productos-fila {
    gap: 12px;
    padding: 12px 14px;
  }
  /*  width: auto es OBLIGATORIO al lado de un flex: … auto sobre un ion-col: sin él sigue vivo el
      width: 100% de su :host, la columna pide la fila entera y el interruptor se va a otra línea.
      Ver la nota de la trampa de ion-col, arriba, en los anchos de columna.  */
  .class-re-productos-col-estado {
    flex: 0 0 auto;
    width: auto;
  }
}
/*****************************************************/
/* IMAGEN NUEVA — MUNICIPIOS                         */
/*****************************************************/
/*  La pantalla de add-municipio, donde el superusuario da de alta, edita y borra los municipios en los
    que trabaja la app. Es la otra cara del popover de la localidad ( app-codigos-postales ): las dos
    listan la misma colección, así que se parecen a propósito.
    No tiene diseño propio: se viste REUTILIZANDO lo que ya existe — el content y el cuerpo de la
    portada, la cabecera de vidrio del teléfono y la de gestor del ordenador, el buscador, el panel
    blanco y los campos de mi-perfil y la pastilla verde de alta del gestor de productos. Lo que se crea
    aquí es solo la ficha de un municipio, que no tenía dónde apoyarse.
    La disposición BASE es la del TELÉFONO. Lo del ordenador va agrupado al final, colgando de
    .class-re-municipios-pc, que la página pone según datalocal.esEscritorio.  */
.class-re-municipios {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí
    casi todas viven dentro de una caja en columna —el panel, la lista—, y ese flex-basis: 0 con grow
    las haría repartirse el ALTO a partes iguales. Las que SÍ tienen que crecer o encogerse se lo dicen
    justo debajo, con selectores que pesan más que este.  */
.class-re-municipios ion-col {
  flex: 0 0 auto;
}

.class-re-municipios .class-re-fila-campos > .class-re-campo {
  flex: 1 1 0;
}

.class-re-municipios .class-re-fila-campos > .class-re-campo-doble {
  flex: 2 1 0;
}

/*  La separación bajo la cabecera del ordenador ya la pone el gap del cuerpo: sumada al margen que
    class-re-cabecera-gestor trae de serie quedaban 34px, un escalón que no tiene ninguna otra página.
    Mismo apaño que en el gestor de usuarios.  */
.class-re-municipios .class-re-cabecera-gestor {
  margin-bottom: 0;
}

.class-re-municipios-rejilla {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/*  El botón de guardar va a width: 100%, que en un ordenador sería un botón de metro y medio: el tope
    lo pone este envoltorio, igual que en mis publicaciones.  */
.class-re-municipios-guardar {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.class-re-municipios-guardar .class-re-boton-guardar {
  max-width: 420px;
}

.class-re-municipios-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
}

.class-re-municipios-vacio {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
}

.class-re-municipios-vacio p {
  margin: 0;
}

/*  La ficha lleva las esquinas del PANEL ( 20px ) y no las de la tarjeta de negocio ( 28px ): es una
    fila baja, y a 28px la curva se come casi todo el lado corto.
    El nowrap es por el ion-row, que trae flex-wrap: wrap de fábrica: con él, el código postal se iría
    a una segunda línea en cuanto el nombre del municipio fuera largo.  */
.class-re-municipios-ficha {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--re-sombra-suave);
  cursor: pointer;
}

.class-re-municipios .class-re-municipios-datos {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.class-re-municipios-nombre {
  font-family: var(--re-fuente-titulo);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--re-negro);
  margin: 0;
  overflow-wrap: break-word;
}

/*  LA MARCA DE UN MUNICIPIO OCULTO, al lado del nombre y no en la línea de la provincia: es lo primero
    que hay que saber de la ficha, porque un municipio oculto no se le ofrece a nadie.
    Ámbar, la misma pastilla que en el popover de la localidad ( class-re-opcion-oculto ), para que el
    estado se reconozca igual en las dos pantallas. Va en un <span> dentro del <p> del nombre, así que
    el inline-block es lo que le deja tener relleno propio sin partir la línea.  */
.class-re-municipios-nombre .class-re-municipios-oculto {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--re-ambar-claro);
  color: var(--re-ambar-oscuro);
  font-family: var(--re-fuente-texto);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.class-re-municipios-meta {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  margin: 0;
}

/*  El código postal, en la misma pastilla verde con la que el resto de la app marca un dato de
    identidad. Es el campo con el que se filtran los negocios, así que se lee de un vistazo y no
    perdido en la línea de debajo del nombre.
    El width: auto es obligatorio al lado de un flex: … auto sobre un ion-col: sin él sigue vivo el
    width: 100% de su :host y la pastilla pediría la fila entera.  */
.class-re-municipios .class-re-municipios-cp {
  flex: 0 0 auto;
  width: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--re-verde-claro);
  color: var(--re-verde-oscuro);
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.class-re-municipios-flecha {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--re-gris-texto);
}

/*  Lo que en el teléfono va apilado se reparte aquí en dos columnas: a la izquierda los datos que se
    rellenan y a la derecha por qué importa el código postal. La lista se queda en una sola columna,
    centrada, porque una ficha de 60px de alto estirada a 1400px sería una regla con un nombre al
    principio.  */
.class-re-municipios-pc .class-re-municipios-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.class-re-municipios-pc .class-re-municipios-lista {
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.class-re-municipios-pc .class-re-municipios-nombre {
  font-size: 17px;
}
.class-re-municipios-pc .class-re-municipios-meta {
  font-size: 12px;
}

/*****************************************************/
/* IMAGEN NUEVA — INFORMACIÓN LEGAL                  */
/*****************************************************/
/*  La modal de informacion-legal: el aviso legal, la privacidad, los términos, las cookies y la
    política de geolocalización. Es una VENTANITA AUXILIAR ( se abre con full-modal, la cssClass por
    defecto de presentModal, que en el ordenador la deja en una columna de 700px al lado del menú ), así
    que no tiene disposición de escritorio: la misma columna sirve para las dos caras y lo único que
    cambia con el ancho es el cuerpo de letra, al final.
    Casi todo se REUTILIZA — el content y el cuerpo de la portada, la cabecera de vidrio del teléfono, el
    panel blanco y los campos de mi-perfil y el botón verde de guardar. Lo propio es solo cómo se lee un
    documento largo dentro del panel.  */
.class-re-legal {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí el
    panel y el campo viven dentro de una caja en columna, y ese flex-basis: 0 con grow les haría
    repartirse el ALTO a partes iguales.  */
.class-re-legal ion-col {
  flex: 0 0 auto;
}

/*  Un documento legal es un texto seguido y largo: interlínea de lectura ( 1.7, no el 1.5 de los avisos
    cortos de class-re-texto-panel ) y en negro, no en gris, porque aquí el texto ES el contenido de la
    pantalla y no un pie de ayuda.
    El pre-line es imprescindible y es lo que aportaba la vieja class-texto: en Firestore el texto se
    guarda en plano, con sus saltos de línea, y sin esto los párrafos se pegarían todos en un ladrillo.  */
.class-re-legal-texto {
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  line-height: 1.7;
  color: var(--re-negro);
  margin: 0;
  white-space: pre-line;
  overflow-wrap: break-word;
}

/*  Mismo vacío centrado que el de la lista de municipios: un documento sin publicar dejaba la tarjeta en
    blanco sin decir por qué.  */
.class-re-legal-vacio {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 30px 20px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
}

.class-re-legal-vacio p {
  margin: 0;
}

/*  El campo nace con cuerpo de documento y no de una línea: el auto-grow lo estira después según lo que
    haya escrito, pero al abrirlo vacío un textarea de 42px no invita a redactar un texto legal.  */
.class-re-legal .class-re-campo-input {
  min-height: 320px;
  line-height: 1.6;
}

/*  El botón se queda pegado al fondo mientras se recorre el texto, que puede ser larguísimo: es lo que
    hacía la vieja class-fijar-abajo y lo mismo que hace class-re-alta-guardar en el alta de producto.  */
.class-re-legal-guardar {
  display: flex;
  justify-content: center;
  position: sticky;
  bottom: 20px;
  margin-top: 20px;
}

.class-re-legal-guardar .class-re-boton-guardar {
  max-width: 420px;
}

/*  Aquí no hay cambio de disposición, solo de cuerpo: la columna es más ancha y a 14px las líneas salen
    demasiado largas para lo apretado que va el interlineado.  */
@media (min-width: 768px) {
  .class-re-legal-texto {
    font-size: 15px;
  }
}
/*****************************************************/
/* IMAGEN NUEVA — MENSAJE A CLIENTES                 */
/*****************************************************/
/*  La modal de mensaje-clientes: se escribe un aviso y se manda a los clientes que el gestor tenga
    delante, por notificación push, por correo o por los dos.
    No tiene diseño propio: se viste REUTILIZANDO lo que ya existe — el content y el cuerpo de la
    portada, la cabecera de vidrio del teléfono y la de gestor del ordenador, el panel blanco y los
    campos de mi-perfil, las pastillas del carril de filtros y el botón verde de guardar. Lo que se crea
    aquí es solo la rejilla de la pantalla y la caja de los dos recuentos, que no tenían dónde apoyarse.
    La disposición BASE es la del TELÉFONO ( una columna ). Lo del ordenador va al final, colgando de
    .class-re-mensaje-pc, que la página pone según datalocal.esEscritorio.  */
.class-re-mensaje {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/*  Las columnas de Ionic nacen con flex: 1 0 0%, pensadas para repartir el ANCHO de una fila. Aquí casi
    todas viven dentro de una caja en columna —los paneles, los campos—, y ese flex-basis: 0 con grow
    las haría repartirse el ALTO a partes iguales. Las que SÍ tienen que crecer se lo dicen debajo, con
    selectores que pesan más que este. Mismo apaño que en municipios.  */
.class-re-mensaje ion-col {
  flex: 0 0 auto;
}

/*  La separación bajo la cabecera del ordenador ya la pone el gap del cuerpo: sumada al margen que
    class-re-cabecera-gestor trae de serie quedaba un escalón que no tiene ninguna otra página.  */
.class-re-mensaje .class-re-cabecera-gestor {
  margin-bottom: 0;
}

.class-re-mensaje-rejilla {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/*  Los dos paneles SÍ reparten el ancho cuando la rejilla los pone en fila ( solo en ordenador, ver el
    final ). El min-width: 0 no sobra: sin él una línea larga del mensaje ensancharía su panel y se
    comería el del recuento.  */
.class-re-mensaje-rejilla > .class-re-panel {
  flex: 1 1 0;
  min-width: 0;
}

/*  El campo del mensaje nace con cuerpo de nota y no de una línea: el auto-grow lo estira después según
    lo escrito, pero abierto vacío un textarea de 42px no invita a redactar nada. Mismo criterio que el
    editor de textos legales.  */
.class-re-mensaje .class-re-mensaje-texto {
  min-height: 150px;
  line-height: 1.6;
}

/*  Las tres pestañas ( Redactar / HTML / Vista previa ) NO tienen CSS propio: reutilizan el carril y
    las pastillas del filtro de la portada, igual que el selector de canal de esta misma pantalla.  */
.class-re-editor-barra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/*  El user-select: none NO sobra: sin él, arrastrar el ratón por la barra selecciona las letras de los
    propios botones, y esa selección SUSTITUYE a la del editor — que es justo la que el botón necesita
    para saber dónde aplicar el formato.  */
.class-re-editor-boton {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--re-campo-fondo);
  color: var(--re-negro);
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
}

.class-re-editor-boton:hover {
  background: var(--re-verde-claro);
  color: var(--re-verde-oscuro);
}

.class-re-editor-boton ion-icon {
  font-size: 17px;
}

.class-re-editor-boton-cursiva em {
  font-family: Georgia, serif;
}

/*  LA SUPERFICIE EDITABLE. Es un <article contenteditable> y no un ion-col porque ion-col, ion-row e
    ion-grid son de SHADOW DOM y proyectan por un <slot>: un contenteditable sobre un shadow host es
    terreno sin especificar y los comandos de bloque ( formatBlock, insertUnorderedList ) se rinden.
    Al no ser un ion-* no hereda NADA de la piel de los campos, así que se repite aquí el mismo fondo
    y el mismo radio de class-re-campo-input para que no cante al lado del asunto.  */
.class-re-editor {
  display: block;
  min-height: 220px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 14px;
  background: var(--re-campo-fondo);
  border-radius: 14px;
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  line-height: 1.6;
  color: var(--re-negro);
  outline: none;
}

.class-re-editor:focus {
  box-shadow: 0 0 0 2px var(--re-verde-claro);
}

/*  OBLIGATORIO, y no es una redundancia: el display:none que trae el atributo [hidden] viene de la
    hoja del NAVEGADOR, y el display de cualquier regla de autor le gana — incluido el display:block de
    aquí arriba. Sin esta línea el editor se vería en las tres pestañas a la vez.  */
.class-re-editor[hidden] {
  display: none;
}

/*  EL PLACEHOLDER. No se hace con :empty, que es lo primero que se piensa: en cuanto el editor recibe
    el foco el navegador le mete un <br> dentro y deja de estar vacío para el CSS, así que el texto de
    ayuda desaparecería antes de escribir nada. La página pone y quita la clase mirando el texto plano,
    que es el único dato fiable.  */
.class-re-editor-vacio::before {
  content: attr(data-placeholder);
  color: var(--re-gris-texto);
  pointer-events: none;
}

/*  LO QUE SE ESCRIBE DENTRO. Ionic no resetea los <p>, así que sin esto entran los márgenes de 1em del
    navegador y los párrafos se separan aquí el doble que en el correo de verdad, que es justo lo que
    la pantalla no debe hacer: mentir sobre el resultado.  */
.class-re-editor p {
  margin: 0 0 12px;
}

.class-re-editor h3 {
  font-family: var(--re-fuente-titulo);
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 10px;
}

.class-re-editor ul,
.class-re-editor ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.class-re-editor li {
  margin-bottom: 4px;
}

.class-re-editor a {
  color: var(--re-verde-oscuro);
}

.class-re-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.class-re-editor hr {
  border: none;
  border-top: 1px solid var(--re-linea);
  margin: 18px 0;
}

/*  LA PESTAÑA HTML. El <textarea> de dentro NO hereda la font-family del host — trae la suya de la hoja
    del navegador —, así que hay que ir a por él. ion-textarea es `scoped` y no `shadow`, o sea que
    desde global.scss se alcanza sin ::part ni nada.  */
.class-re-editor-codigo textarea {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
}

/*  LA VISTA PREVIA. Altura fija a la fuerza: un iframe no crece con su contenido y, con sandbox="", el
    documento es de origen opaco, así que tampoco se le puede leer el scrollHeight para ajustarla. Se
    queda con scroll propio — que además es como se ve un correo de verdad en el panel de lectura.  */
.class-re-editor-previa {
  display: block;
  width: 100%;
  height: 420px;
  border: 1px solid var(--re-linea);
  border-radius: 14px;
  background: #fff;
}

.class-re-editor-contador {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  color: var(--re-gris-texto);
  text-align: right;
  margin: 6px 0 0;
}

/*  Push y correo NO llegan a la misma gente, así que van en dos cajas separadas y no en una cifra
    sumada: la suma escondería justamente lo que hay que ver antes de enviar.  */
.class-re-mensaje-recuento {
  display: flex;
  gap: 10px;
}

.class-re-mensaje-recuento-caja {
  flex: 1 1 0;
  background: var(--re-campo-fondo);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
}

.class-re-mensaje-recuento-cifra {
  font-family: var(--re-fuente-titulo);
  font-size: 26px;
  font-weight: 400;
  color: var(--re-verde-oscuro);
  margin: 0;
}

.class-re-mensaje-recuento-pie {
  font-family: var(--re-fuente-texto);
  font-size: 11px;
  font-weight: 600;
  color: #8a8a80;
  margin: 2px 0 0;
}

/*  El botón de guardar va a width: 100%, que en un ordenador sería un botón de metro y medio: el tope
    lo pone este envoltorio, igual que en municipios.  */
.class-re-mensaje-enviar {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.class-re-mensaje-enviar .class-re-boton-guardar {
  max-width: 420px;
}

/*  Lo único que cambia: los dos paneles se ponen uno al lado del otro, el de escribir a la izquierda y
    el de a quién le llega a la derecha, que es donde se mira antes de pulsar.  */
.class-re-mensaje-pc .class-re-mensaje-rejilla {
  flex-direction: row;
  align-items: flex-start;
}

/*****************************************************/
/* IMAGEN NUEVA — LOGIN Y REGISTRO                   */
/*****************************************************/
/*  Piel de las dos pantallas de acceso, sacada del artboard "login" del diseño de RepartEat. Las
    clases se llaman class-re-acceso-* y no class-re-login-* porque login y register son la misma
    pantalla con distintos campos: el logo, los textos, el separador de proveedores y el pie que
    lleva a la otra son idénticos, y con un solo juego de clases no pueden acabar despareados.
    Casi todo lo que pinta ya estaba escrito ( class-re-campo-etiqueta, class-re-campo-input y
    class-re-boton-guardar, en el bloque del panel blanco y los campos de formulario ): aquí solo va
    lo propio del acceso.
    La columna es la misma en teléfono y en ordenador —un formulario de tres campos no gana nada
    repartido en dos caras—, así que este bloque no tiene @media.  */
/*  El ancho tope es lo único que separa el teléfono del ordenador: sin él, en escritorio los campos
    se estirarían de lado a lado de la ventana.
    ARRIBA hace falta la safe-area: el content es fullscreen y el registro no lleva ion-header, así
    que sin ella el logo arranca debajo de la barra de estado, pegado al borde.
    ABAJO, el hueco es para que el último botón no se quede tapado por el pie, que ahora flota sobre
    el contenido en vez de empujarlo ( 48px de pastilla + los 20px que la separan del borde ).  */
.class-re-acceso-cuerpo {
  max-width: 420px;
  margin: 0 auto;
  padding: calc(44px + var(--ion-safe-area-top, 0px)) 24px calc(88px + var(--ion-safe-area-bottom, 0px));
}

/*  El icono va suelto sobre el papel crema, sin círculo blanco ni sombra detrás: es un PNG con
    transparencia, y meterlo en una caja lo convertía en una insignia. El object-fit es lo que impide
    que salga deformado si algún día el fichero deja de ser cuadrado.  */
.class-re-acceso-logo {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto 18px;
  object-fit: contain;
}

.class-re-acceso-titulo {
  font-family: var(--re-fuente-titulo);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--re-negro);
  text-align: center;
  margin: 0;
}

.class-re-acceso-subtitulo {
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  color: var(--re-gris-texto);
  text-align: center;
  margin: 6px 0 22px;
}

/*  El gif de carga mientras se autentica, que sustituye al formulario entero. Se baja a media pantalla
    en vez de dejarlo pegado arriba, como el del ticket: es lo único que hay a la vista mientras tanto y
    ahí es donde se mira. El centrado lo pone class-re-cargando, que ya existe.  */
.class-re-acceso-cargando {
  width: 120px;
  margin-top: 10vh;
}

/*  Los campos del acceso van sobre el fondo de la página, no dentro de un panel blanco: con
    --re-campo-fondo —que se eligió para el blanco— no se distinguirían del papel, así que usan el
    fondo hundido, que es justo el gris cálido para este caso.  */
.class-re-acceso-campo {
  --background: var(--re-fondo-hundido);
  background: var(--re-fondo-hundido);
}

/*  Es un enlace de verdad ( en el login, el correo de nueva contraseña ), así que lleva el cursor de
    mano: no es un ion-button porque en el diseño es texto suelto alineado a la derecha, sin caja.  */
.class-re-acceso-enlace {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 600;
  color: var(--re-ambar-oscuro);
  text-align: right;
  cursor: pointer;
  margin: 10px 0 18px;
}

/*  Las dos rayas del separador son los pseudoelementos de la propia fila: al ser flex, entran como
    dos hijos más y se reparten el hueco que deja el texto. Así el marcado no necesita columnas
    vacías cuyo único cometido sea dibujar una línea.  */
.class-re-acceso-separador {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}

.class-re-acceso-separador::before,
.class-re-acceso-separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--re-linea);
}

.class-re-acceso-separador p {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  margin: 0;
}

.class-re-acceso-proveedores {
  gap: 12px;
  flex-wrap: nowrap;
}

/*  Botón blanco, el contrapunto del verde de "Iniciar sesión": el diseño los quiere secundarios,
    no una segunda llamada a la acción. Las medidas ( alto, radio y cuerpo ) son las de
    class-re-boton-guardar para que las tres pastillas de la pantalla midan igual.  */
.class-re-acceso-social {
  --background: #fff;
  --background-activated: var(--re-fondo-hundido);
  --background-hover: var(--re-fondo-hundido);
  --color: var(--re-negro);
  --border-radius: 999px;
  --box-shadow: var(--re-sombra-suave);
  font-family: var(--re-fuente-texto);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  height: 48px;
  width: 100%;
  margin: 0;
}

/*  El logotipo de Google es un <img> con el SVG a color, no un ion-icon: hay que darle medida a mano
    porque un <img> no entiende el font-size con el que se dimensionan los iconos de Ionic.  */
.class-re-acceso-social-logo {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

/*  TÉRMINOS Y CONDICIONES ( solo en el registro ). La casilla y su texto van en la misma fila y
    centrados entre sí: el ion-checkbox mide 20px y el texto 12px, así que sin el align-items la
    casilla se quedaría colgando por encima de la línea.  */
.class-re-acceso-terminos {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 20px;
}

.class-re-acceso-check {
  --size: 20px;
  --border-radius: 6px;
  --border-color: #cfcdc4;
  --border-color-checked: var(--re-verde);
  --checkbox-background-checked: var(--re-verde);
  --checkmark-color: #fff;
  margin: 0;
}

/*  El texto entero abre la modal legal, no solo un trozo subrayado: es un objetivo más fácil de
    acertar con el dedo, y el subrayado ya avisa de que se puede pulsar.  */
.class-re-acceso-terminos-texto {
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-gris-texto);
  text-decoration: underline;
  cursor: pointer;
  margin: 0;
}

/*  El paso a la OTRA pantalla de acceso ( al registro desde el login, al login desde el registro ) va
    pegado abajo, fuera del ion-content: es la salida de quien ha entrado donde no tocaba y el diseño
    lo quiere siempre a la vista.
    FLOTA, sin fondo debajo. Fue un ion-footer con el toolbar pintado de blanco, y esa franja opaca de
    borde a borde es lo que rompía el estilo de la app, donde los botones de abajo van sueltos sobre
    el contenido ( class-re-panel-pedido-barra en la portada y en la carta, class-re-producto-barra en
    la ficha de producto ). Un ion-footer no puede ser transparente de verdad: es hermano del
    ion-content y por detrás enseña el fondo de la app, no el papel crema. Así que es una fila fija,
    que solo pone la POSICIÓN respecto a la ventana; el verde lo pinta la pastilla de dentro, y por
    los lados y por debajo se ve pasar el contenido.  */
.class-re-acceso-pie {
  display: block;
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(20px + var(--ion-safe-area-bottom, 0px));
  z-index: 10;
  /*  Con left y right puestos, el margin auto centra la pastilla en escritorio y la deja del mismo
      ancho que la columna del formulario.  */
  max-width: 420px;
  margin: 0 auto;
}

.class-re-acceso-pie-boton {
  --background: var(--re-verde-claro);
  --background-activated: var(--re-verde-claro);
  --background-hover: var(--re-verde-claro);
  --color: var(--re-verde-oscuro);
  --border-radius: 999px;
  /*  Ahora pasa por encima del contenido, así que necesita la sombra para despegarse de él  */
  --box-shadow: var(--re-sombra-suave);
  font-family: var(--re-fuente-texto);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  height: 48px;
  width: 100%;
  margin: 0;
}

/*****************************************************/
/* IMAGEN NUEVA — SELECTOR DE PRODUCTO               */
/*****************************************************/
/*  La modal que abren siete sitios de la app para elegir un producto ( components/productos ): añadir
    un producto a un pedido desde pedido-gestion — que es su uso principal —, la reserva de
    pedidos-negocio, los relacionados de add-producto, el producto que se adjunta a un chat o a una
    publicación, el anuncio de add-negocio y el cotejo de fichero-productos.
    NO sale de una imagen nueva: es la CARTA de un restaurante puesta a otra cosa, así que reutiliza
    entera la tarjeta class-re-plato del catálogo, el carril de chips de la portada, las dos cabeceras
    de los gestores y el pie pegado abajo del alta de producto. Lo único propio es lo que allí no
    existe: la lista de extras dentro de la tarjeta y los tres huecos de columna que hacen falta
    porque aquí las piezas son ion-col y en el catálogo eran div.  */
/*  El aire entre las piezas ( cabecera, carril, rejilla, pie ) lo pone el gap y no los márgenes de
    cada una, igual que en el gestor de productos. Y se apagan los rellenos que ion-grid y ion-col se
    ponen solos, porque aquí el aire lo reparten class-re-cuerpo y este gap.  */
.class-re-selector {
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.class-re-selector .class-re-cabecera-gestor {
  margin-bottom: 0;
}

/*  Sustituye al botón verde "Buscar por categorías", que escondía detrás de un popover lo que cabe en
    una fila de pastillas.  */
.class-re-selector-carril {
  gap: 10px;
}

/*  En el ordenador el carril NO scrollea: no hay dedo que arrastrar y la barra va oculta, así que un
    chip que se saliera no habría forma de alcanzarlo. Mismo criterio que en el catálogo y en el
    gestor de productos.  */
@media (min-width: 768px) {
  .class-re-selector-carril {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 10px;
  }
}
/*  Arriba, y no en el centro como en el catálogo: aquí la tarjeta lleva además la lista de extras
    debajo del precio y crece bastante, y con align-items: center la foto se quedaba flotando a media
    altura y el botón de añadir en mitad de la nada.  */
.class-re-selector .class-re-plato {
  align-items: flex-start;
}

/*  LOS HUECOS DE LA FOTO Y DEL BOTÓN. En el catálogo son div, que dentro de un flex miden lo suyo;
    aquí son ion-col, y un ion-col nace con flex-basis: 0; flex-grow: 1, o sea que se repartiría el
    ancho de la tarjeta a partes iguales con el cuerpo del texto. Se les devuelve su medida, que es la
    que ya declaran class-re-plato-foto ( 72px ) y class-re-plato-boton ( 34px ).
    Base en PÍXELES y nunca 'auto': ion-col trae también un width: 100% que se despierta en cuanto el
    flex-basis vale auto, y entonces la columna pide la fila entera ( ver la nota de la trampa de
    ion-col en el bloque del gestor de productos ).  */
.class-re-selector .class-re-plato-foto-caja {
  flex: 0 0 72px;
}

.class-re-selector .class-re-plato-boton {
  flex: 0 0 34px;
}

.class-re-selector-casilla {
  flex: 0 0 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*  Van SEPARADOS del resto de la ficha por un filete: son decisiones que se toman antes de elegir el
    producto, no una línea más de texto suya, y sin la línea se leían como una tercera descripción.  */
.class-re-selector-extras {
  display: flex;
  flex-direction: column;
  /*  Los dos son ion-row, que trae flex-wrap: wrap de serie: aquí ( en columna ) eso partiría la
      lista en dos columnas de extras, y en la fila de abajo tiraría el precio a su propia línea.  */
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--re-linea);
}

.class-re-selector-extra {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

/*  La casilla de un extra es más pequeña que la de una lista: acompaña a un texto de 12px, y con los
    24px de serie de Ionic se comía la línea entera.  */
.class-re-selector-extra .class-re-casilla {
  flex: 0 0 auto;
  --size: 18px;
}

/*  El nombre crece y el precio mide lo suyo: eso es lo que empuja el importe al borde derecho de la
    tarjeta. El min-width: 0 para que un extra de nombre largo pueda partir en vez de ensanchar la
    fila y sacar el precio fuera.  */
.class-re-selector-extra-nombre {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  color: var(--re-negro);
}

.class-re-selector-extra-precio {
  flex: 0 0 auto;
  font-family: var(--re-fuente-texto);
  font-size: 12px;
  font-weight: 700;
  color: var(--re-verde-oscuro);
}

/*  ═══════════════════════════════════════════════════════════════════════════════════════════════
    EL CATÁLOGO DENTRO DEL TICKET ( app-catalogo-pedido )
    ═══════════════════════════════════════════════════════════════════════════════════════════════

    La carta del negocio como un panel más de la columna derecha de pedido-gestion, para añadir
    productos a un pedido sin salir de él. Solo se pinta en el ordenador a dos columnas.

    Reutiliza casi todo: class-re-panel ( fondo, radio, sombra ), class-re-selector ( el gap, los
    resets de ion-grid, las medidas de foto y botón y los extras dentro de la tarjeta ) y la tarjeta
    class-re-plato del selector de producto. Los dos gap ( 12px de panel, 16px de selector ) van en
    el mismo elemento y gana el de selector por orden, que es el que se quiere. Aquí solo va lo que
    cambia por vivir dentro del ticket.  */
/*  El host es un elemento a medida y va como hijo de una columna flex ( class-re-ticket-columna ):
    se le da caja de bloque y se le permite encoger, que si no un título largo de producto
    ensancharía la columna entera.  */
app-catalogo-pedido {
  display: block;
  min-width: 0;
}

/*  CON LA CARD A LA VISTA la rejilla del ticket reparte de otra manera: la columna de la derecha
    deja de ser la accesoria y necesita sitio para las tarjetas. Va después de class-re-ticket-pc
    para pisar su 1.4fr 1fr.  */
.class-re-ticket-pc-catalogo {
  grid-template-columns: 1fr 1.25fr;
}

/*  El panel mide como mucho la ventana, y la que scrollea es su LISTA, no la página: así el resumen
    de la izquierda y el buscador se quedan quietos mientras se recorre la carta. Mismo criterio que
    el chat del ticket ( class-re-ticket-pc .class-re-ticket-chat ).
    El margin-inline: 0 hace aquí lo que class-re-ticket-columna>ion-grid hace con sus paneles: ese
    selector no alcanza a un ion-grid metido dentro del componente, y el :host de ion-grid trae
    margin-inline: auto, que encogería el panel al ancho de su contenido.  */
.class-re-catalogo-pedido {
  margin-inline: 0;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}

/*  LA LISTA es un ion-grid dentro del panel ( otro ion-grid ), y el :host de ion-grid trae
    margin-inline: auto y width: auto con más especificidad que la del panel. Dentro de una columna
    flex, un margen automático en el eje transversal ANULA el estirado y deja la caja al ancho de su
    contenido: la rejilla de auto-fill, sin un ancho definido, calculaba UNA columna y salía centrada
    en mitad del panel. Se le fija el ancho entero y se le apagan los márgenes, que es lo que hace
    class-re-ticket-columna>ion-grid con los paneles del ticket.
    Los rellenos de las variables tampoco bajan al :host del grid de dentro, así que van aquí.

    EL FONDO CREMA es el contraste: las tarjetas de producto son blancas ( class-re-plato ) y el
    panel también, y sobre blanco no se veían. Con el fondo de la app debajo se leen como en la
    carta, tarjetas blancas sobre crema.  */
.class-re-catalogo-pedido-lista {
  flex: 1 1 auto;
  width: 100%;
  margin-inline: 0;
  min-height: 0;
  overflow-y: auto;
  --ion-grid-padding: 0;
  --ion-grid-column-padding: 0;
  padding: 12px;
  border-radius: 16px;
  background: var(--re-fondo);
}

.class-re-catalogo-pedido-cabecera {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}

.class-re-catalogo-pedido-cabecera .class-re-panel-titulo {
  margin: 0;
}

/*  Recargar y cerrar, juntos a la derecha. Es un ion-row y trae ancho completo: se le quita para
    que el space-between de la cabecera lo empuje al borde.  */
.class-re-catalogo-pedido-botones {
  width: auto;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
}

/*  Los títulos de categoría de la lista. class-re-seccion trae 28px de margen arriba pensados para
    la portada; aquí, dentro de un panel, con la mitad sobra.  */
.class-re-catalogo-pedido-seccion {
  margin: 14px 0 8px;
}

.class-re-catalogo-pedido-seccion:first-child {
  margin-top: 0;
}

.class-re-catalogo-pedido-seccion .class-re-seccion-titulo {
  font-size: 16px;
}

/*  LA REJILLA: dos tarjetas cuando caben y una cuando no. auto-fill y no repeat(2): con la ventana
    justo por encima del corte de una columna del ticket ( 1000px ) y el menú lateral, la columna
    derecha se queda en unos 400px, y cada tarjeta ya reserva foto ( 72 ), stepper ( ~100 ) y
    rellenos: a dos por fila no le quedaba sitio al nombre. El mínimo de 230px es lo que deja que
    salgan dos en la columna ensanchada ( 1.25fr ) de una pantalla normal de portátil.
    Es un ion-row, que nace con width: 100% y flex-wrap: es una rejilla y el ancho se lo da el
    padre ( ver la nota de la lista, aquí arriba ).  */
.class-re-catalogo-pedido .class-re-rejilla-platos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  width: 100%;
}

.class-re-catalogo-pedido .class-re-rejilla-platos + .class-re-rejilla-platos {
  margin-top: 12px;
}

/*  LA TARJETA ENVUELVE: foto y cuerpo en la primera línea y los extras, que piden el 100% del
    ancho, en la segunda. Dentro del cuerpo, al lado de la foto, a cada extra le quedaban unos 50px
    y el nombre salía partido sílaba a sílaba.  */
.class-re-catalogo-pedido .class-re-plato {
  flex-wrap: wrap;
}

.class-re-catalogo-pedido-extras {
  flex: 0 0 100%;
  width: 100%;
  /*  El filete y el aire de arriba ya los pone class-re-selector-extras; el margen de arriba se
      recorta porque el gap de la tarjeta ( 12px ) ya separa las dos líneas.  */
  margin-top: 0;
}

/*  EL PIE DEL CUERPO: precio a la izquierda, contador a la derecha. El contador vive aquí y no en
    una columna propia junto al cuerpo porque un − N + de 100px al lado de la foto dejaba al título
    30px y salía a una letra por línea.  */
.class-re-catalogo-pedido-pie {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}

/*  La línea del precio crece y el contador mide lo suyo. Su margen de arriba lo pone ya el pie.  */
.class-re-catalogo-pedido-pie .class-re-plato-linea-precio {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  width: auto;
  margin-top: 0;
}

/*  Sin precio no hay nada a la izquierda: el margen automático manda el contador a la derecha.  */
.class-re-catalogo-pedido-pie .class-re-plato-boton,
.class-re-catalogo-pedido-pie .class-re-producto-stepper {
  margin-left: auto;
}

/*  El − N + de la ficha de producto, más compacto: aquí va en el pie de una tarjeta pequeña y no en
    una fila propia. Es un ion-row, que nace con flex-wrap: wrap y ancho completo: se le devuelve su
    medida como a los otros huecos de la tarjeta ( ver class-re-selector ).  */
.class-re-catalogo-pedido .class-re-producto-stepper {
  flex: 0 0 auto;
  width: auto;
  flex-wrap: nowrap;
  padding: 3px 5px;
  gap: 6px;
}

.class-re-catalogo-pedido .class-re-producto-stepper-boton {
  width: 26px;
  min-width: 26px;
  max-width: 26px;
  height: 26px;
}

/*  LA TARJETA QUE YA ESTÁ EN EL PEDIDO se marca con un reborde verde: en un catálogo de cincuenta
    tarjetas es lo que deja ver de un vistazo qué se ha pedido ya. Va por box-shadow y no por
    border para no mover la tarjeta un par de píxeles al añadirla.  */
.class-re-plato-en-pedido {
  box-shadow: 0 0 0 2px var(--re-verde);
}

/*# sourceMappingURL=styles.css.map*/