/* ============================================================================= WIMB — piel de aplicacion sobre ng-template ============================================================================= Todo lo que sigue sale del contrato. Las tres cosas que este archivo NO decide por su cuenta: 1. MEDIDAS DE LAYOUT — se consumen los tokens declarados en reset.scss: --header-height (5rem) · --main-section-height · --container-height --gallery-container-height · --navbar-width (18rem) · --logo-width --container-width · --main-section-width · --ticker y las nueve grillas --grid-* / --gallery-pic-width / --forma-input-width. Ninguna grilla se escribe a mano: si hace falta una medida que el contrato no lista, va el token mas cercano, no un minmax inventado. 2. ALTOS DE COMPONENTE — metrica de Angular Material, no valores propios: barra de aplicacion var(--header-height) = 5rem item de lista 3rem (1 linea) · 4rem (2 lineas) · 5.5rem (3 lineas) campo outlined 3.5rem boton 2.5rem visual, 3rem de area tactil chip 2rem FAB extendido 3.5rem 3. RADIOS — los valores observados en los 9 overrides del template: 0.4rem panel de select · 0.5rem card, menu, snackbar, tooltip 1rem dialog y datepicker · 2rem chip El contrato no declara escala de radio: se usan estos, en el lugar donde se usan, sin crear una escala paralela. ALTO DEL VIEWPORT — este artefacto no usa la unidad de viewport dinamico (la variante "d" de vh): el soporte todavia es irregular y en un navegador que no la entiende la declaracion entera se descarta. En su lugar cada regla declara DOS veces la misma propiedad: min-height: calc(100vh - var(--header-height)); <- respaldo min-height: calc(var(--wimb-vh, 1vh) * 100 - var(--header-height)); La primera funciona sin JavaScript en cualquier navegador. La segunda usa `--wimb-vh`, que NO es un token de diseno: es una MEDIDA que js/shell.js escribe en el con el alto visible real (innerHeight / 100) y refresca al rotar o al aparecer/desaparecer la barra del navegador. Su valor de respaldo `1vh` deja la cuenta identica a la linea anterior si el script no llego a correr. En el port a Angular se reemplaza por un servicio sobre el ViewportRuler del CDK — ver ANGULAR.md. AREA SEGURA — en modo standalone (instalada) el contenido llega hasta el borde fisico. Cada superficie fija suma env(safe-area-inset-*) para no quedar debajo del notch ni de la barra de gestos. UNIDADES — regla de la casa: font-size en em, layout en rem, line-height sin unidad, MAXIMO UN DECIMAL en cualquier valor. De ahi que el trazo fino sea 0.1rem y que el ritmo de espaciado avance de a 0.4rem en vez de apoyarse en la grilla de cuatro pixeles, que en rem pide dos decimales. RESPONSIVE — los cinco rangos de BreakpointService, no anchos de gusto: < 600px isXSmall 600-960 isSmall } isSmallOrBelow: sidenav en overlay 960-1280 isMedium -> sidenav fijo 1280-1920 isLarge -> columna de contenido medida >= 1920 isXLarge -> gutter mayor Las media queries van en PX y no en rem — es la unica excepcion a la regla de unidades, y es deliberada: BreakpointService envuelve los Breakpoints del CDK, que estan definidos en px. En rem, un usuario con el tamano de fuente raiz cambiado correria los limites y esta hoja dejaria de coincidir con el signal que gobierna la misma pantalla en Angular. El limite tiene que ser el mismo numero en los dos lados. ============================================================================= */ /* ── 1. Reset y ritmo tipografico ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--secondary-font); font-size: 1em; line-height: 1.875; /* el body del template, no un 1.5 generico */ color: var(--theme-text); background: var(--theme-bg); min-height: 100vh; /* respaldo sin JS */ min-height: calc(var(--wimb-vh, 1vh) * 100); transition: background 0.2s ease-in-out, color 0.2s ease-in-out; overscroll-behavior-y: contain; /* sin rebote raro en modo instalada */ } /* --- MODELO DE SCROLL -------------------------------------------------------- El documento NO scrollea: la barra y el sidenav quedan fijos y el unico que se desplaza es el contenido. Asi la barra principal nunca se va de pantalla ni "flota" sobre lo que pasa por abajo. Va acotado a las pantallas de aplicacion (`body:has(> .app)`): la landing es una pagina larga y ahi el scroll de documento es el correcto. ------------- */ body:has(> .app) { height: 100vh; /* respaldo sin JS */ height: calc(var(--wimb-vh, 1vh) * 100); min-height: 0; overflow: hidden; } h1, h2, h3, h4 { font-family: var(--primary-font); font-weight: var(--font-semibold); margin: 0; line-height: 1.2; text-wrap: balance; } /* Tipografia fluida por calc: el texto se adapta al ancho SIN override por breakpoint. La parte en em manda la escala (font-size va en em, siempre) y la parte en vw es el ajuste continuo. Un salto por media query da dos tamanos y un escalon; esto da una curva y ningun escalon. */ h1 { font-size: calc(1.4em + 0.4vw); } h2 { font-size: calc(1.2em + 0.2vw); } h3 { font-size: 1.1em; } p { margin: 0; text-wrap: pretty; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--app-primary); } [hidden] { display: none !important; } ::selection { background: var(--app-primary-container); color: var(--app-primary-dark); } :focus-visible { outline: 0.2rem solid var(--app-primary); outline-offset: 0.2rem; } /* ── 2. Cascara: barra + sidenav + main ─────────────────────────────────── */ .app { display: grid; grid-template-rows: auto 1fr; height: 100%; min-height: 0; } .app-header { position: relative; z-index: 30; /* ya no necesita sticky: no scrollea */ display: flex; align-items: center; gap: 0.8rem; min-height: var(--header-height); /* 5rem — token, no 3.5rem a ojo */ padding: env(safe-area-inset-top, 0rem) calc(0.8rem + env(safe-area-inset-right, 0rem)) 0 calc(0.8rem + env(safe-area-inset-left, 0rem)); background: var(--theme-header-bg); color: var(--theme-header-text); box-shadow: 0 0.1rem 0.4rem color-mix(in srgb, var(--app-neutral-dark) 28%, transparent); } .app-header__brand { display: flex; align-items: center; gap: 0.8rem; /* El lockup se mide por su contenido. Encajarlo en --logo-width cortaba la bajada: ese token mide la marca, no la marca mas dos lineas de texto. */ flex: 0 1 auto; width: max-content; max-width: 100%; font-family: var(--primary-font); font-weight: var(--font-bold); font-size: 1.1em; line-height: 1.2; letter-spacing: 0.02em; color: inherit; text-decoration: none; min-width: 0; overflow: hidden; /* a 320px la marca cede antes que los botones */ } .app-header__brand span { min-width: 0; /* sin esto el flex item no cede y el corte vuelve */ } .app-header__brand small { display: block; font-family: var(--monospace-font); font-size: 0.6em; font-weight: var(--font-regular); opacity: 0.78; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* El alto del logo sale del alto de la barra, no de un valor suelto */ .app-header__logo { height: calc(var(--header-height) * 0.5); width: auto; max-width: var(--logo-width); /* min(100%, 10rem) — el tope es de la marca */ flex: 0 0 auto; } .app-header__spacer { flex: 1 1 auto; } .app-sidenav { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 50; width: var(--navbar-width); /* min(100%, 18rem) */ height: 100vh; /* respaldo sin JS */ height: calc(var(--wimb-vh, 1vh) * 100); background: var(--theme-sidenav-bg); color: var(--theme-sidenav-text); border-inline-end: 0.1rem solid var(--theme-border); transform: translateX(-100%); transition: transform 0.2s ease-in-out; display: flex; flex-direction: column; overflow-y: auto; padding-block: env(safe-area-inset-top, 0rem) env(safe-area-inset-bottom, 0rem); padding-inline-start: env(safe-area-inset-left, 0rem); } .app-sidenav[data-open='true'] { transform: none; } .app-scrim { position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--app-neutral-dark) 55%, transparent); opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } .app-scrim[data-open='true'] { opacity: 1; pointer-events: auto; } .app-sidenav__head { display: flex; align-items: center; min-height: 3rem; padding: 1.2rem 1.6rem 0.4rem; font-family: var(--primary-font); font-weight: var(--font-semibold); font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-text-secondary); } /* Item de navegacion = item de lista Material de una linea: 3rem */ .nav-item { display: flex; align-items: center; gap: 1.2rem; min-height: 3rem; padding: 0 1.6rem; margin: 0; color: inherit; text-decoration: none; font-size: 0.9em; transition: background 0.2s ease-in-out; } .nav-item:hover { background: var(--theme-sidenav-hover); } .nav-item[aria-current='page'] { background: var(--theme-sidenav-active-bg); color: var(--theme-sidenav-active-text); font-weight: var(--font-semibold); box-shadow: inset 0.3rem 0 0 var(--theme-sidenav-active-text); } .nav-item__count { margin-inline-start: auto; font-family: var(--monospace-font); font-size: 0.8em; font-variant-numeric: tabular-nums; color: var(--theme-text-secondary); } .nav-sep { height: 0.1rem; margin: 0.8rem 1.6rem; background: var(--theme-divider); border: 0; } /* Dentro de una card el ritmo ya lo pone el gap: el margen se sumaba */ .nav-sep--pegado { margin: 0; } .app-main { padding: 1.6rem calc(0.8rem + env(safe-area-inset-right, 0rem)) calc(6rem + env(safe-area-inset-bottom, 0rem)) calc(0.8rem + env(safe-area-inset-left, 0rem)); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2.4rem; /* ritmo vertical unico: sin margenes sueltos */ overflow-y: auto; overscroll-behavior: contain; min-height: 0; } /* ── 3. Los cinco rangos de BreakpointService ───────────────────────────── */ /* isXSmall — por debajo de 600px la barra lleva cuatro controles de 3rem. El nombre cede el lugar; el logo queda, que es lo que identifica. */ @media (max-width: 599.98px) { .app-header { padding-inline: 0.4rem; } .app-header__brand span { display: none; } } /* isSmall — 600px: el pliego y los dialogos dejan de ser de pantalla completa */ @media (min-width: 600px) { .app-main { padding-inline: 1.6rem; } } /* isMedium — 960px: isSmallOrBelow deja de valer, el sidenav pasa a modo fijo */ @media (min-width: 960px) { .app { grid-template-columns: var(--navbar-width) 1fr; grid-template-rows: auto 1fr; } .app-header { grid-column: 1 / -1; padding-inline: 1.6rem; } .app-sidenav { position: relative; transform: none; z-index: 10; height: auto; min-height: 0; /* la fila de la grilla le da el alto */ overflow-y: auto; overscroll-behavior: contain; } .app-scrim, .app-header__menu { display: none; } .app-main { padding: 2.4rem 2.4rem 3.2rem; } } /* isLarge — 1280px: la columna de contenido toma su medida del contrato en vez de estirarse hasta el borde. Aca la app deja de parecer una pagina y pasa a ser una herramienta. */ @media (min-width: 1280px) { .app-main { grid-template-columns: var(--main-section-width); /* minmax(min(80%,12rem), 80%) */ justify-content: start; padding-inline: 3.2rem; } .app-main > * { min-width: 0; } } /* isXLarge — 1920px: gutter mayor, el contenido no se pega a los bordes */ @media (min-width: 1920px) { .app-main { padding-inline: 6rem; justify-content: center; } } /* ── 4. Seccion, encabezado de pagina y panel (selectores del manifiesto) ── */ .ds-section { display: block; } /* --- QUIEN PONE EL RITMO VERTICAL ------------------------------------------- Lo pone el CONTENEDOR (con `gap` o con `padding`), nunca el item con `margin`. La regla de adyacencia del manifiesto sirve en un contexto de flujo normal, pero adentro de un contenedor que ya espacia hace dano: · en una grilla de dos columnas, un margen superior en el segundo item baja SOLO esa columna: las cards quedan desalineadas entre si; · en .app-main se suma al gap y duplica la separacion; · en la landing se suma al padding y despega la linea divisoria. Por eso la regla queda declarada —por si alguna vez hay flujo normal— y se anula en los tres contenedores que ya se hacen cargo del espaciado. -------- */ .ds-section + .ds-section { margin-block-start: 2.4rem; } .grid > .ds-section + .ds-section, .app-main > .ds-section + .ds-section, .lp > .ds-section + .ds-section { margin-block-start: 0; } .ds-section h2 { font-family: var(--primary-font); font-weight: var(--font-semibold); } /* Sin margen: el ritmo lo pone el gap de .app-main, sumarlo daba 4rem de aire */ .ds-header h1 { font-family: var(--primary-font); font-weight: var(--font-semibold); } .ds-header__eyebrow { font-family: var(--monospace-font); font-size: 0.8em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--theme-text-secondary); line-height: 1.4; } .ds-header__sub { color: var(--theme-text-secondary); font-size: 0.9em; } .ds-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-content: start; } .ds-panel h3 { font-family: var(--primary-font); font-weight: var(--font-semibold); } /* ── 5. Card (radio 0.5rem, el del override _cards.scss) ────────────────── */ .mat-mdc-card { background: var(--theme-bg-elevated); border: 0.1rem solid var(--theme-border); border-radius: 0.5rem; box-shadow: 0 0.1rem 0.2rem color-mix(in srgb, var(--app-neutral-dark) 12%, transparent); } .mat-mdc-card > :not(.mat-mdc-card-header):not(.mat-mdc-card-actions):first-child { padding-block-start: 0; } .mat-mdc-card-header { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; min-height: 4rem; padding: 0.8rem 1.6rem; border-block-end: 0.1rem solid var(--theme-divider); } .mat-mdc-card-header h2, .mat-mdc-card-header h3 { margin: 0; } .mat-mdc-card-header > * { min-width: 0; } .mat-mdc-card-content { padding: 1.6rem; } .mat-mdc-card-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; min-height: 4rem; padding: 0.8rem 1.6rem; border-block-start: 0.1rem solid var(--theme-divider); } .app-card-padded { padding: 1.6rem; } /* Grillas: SIEMPRE un token del contrato, y el minimo de una grilla de columnas o de cards tiene que caer entre 17,5rem y 20rem (regla de la casa, §6). Por eso los paneles usan --grid-footer-width y no --grid-complete-width: con 36rem de minimo, dos paneles recien entran a 1178px y un portatil de 1280 se veia igual que un telefono. .grid--form y .grid--tiles quedan por debajo de ese rango a proposito: no son grillas de cards, son la fila de campos y el mosaico de galeria, y cada una usa el token que el contrato declara para ese uso. */ .grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } .grid--cards { grid-template-columns: var(--grid-profile-card); } /* dos columnas desde 657px */ .grid--panes { grid-template-columns: var(--grid-footer-width); } /* dos columnas desde 666px */ .grid--form { grid-template-columns: var(--forma-input-width); } /* fila de campos */ .grid--tiles { grid-template-columns: var(--gallery-pic-width); } /* mosaico */ .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-content: start; /* si la card se estira a la mas alta de la fila, el sobrante se repartia entre las filas y el titulo bajaba unos pixeles */ } .stack--tight { gap: 0.4rem; } .row { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; } .row--end { justify-content: flex-end; } .row--holgada { gap: 1.6rem; } /* separacion entre cifras, no margen por item */ .spacer { flex: 1 1 auto; } /* ── 6. Botones (selectores y modificadores del manifiesto) ─────────────── */ .mat-mdc-button, .mat-mdc-raised-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem; min-height: 3rem; /* area tactil Material */ padding: 0 1.6rem; border: 0.1rem solid transparent; border-radius: 0.5rem; background: transparent; color: var(--app-primary); font-family: var(--primary-font); font-weight: var(--font-medium); font-size: 0.9em; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; } .mat-mdc-button:hover { background: var(--app-primary-container); } .mat-mdc-button:focus-visible, .mat-mdc-raised-button:focus-visible { outline: 0.2rem solid var(--app-primary); outline-offset: 0.2rem; } .mat-mdc-raised-button { background: var(--app-primary); color: var(--app-on-primary); box-shadow: 0 0.1rem 0.2rem color-mix(in srgb, var(--app-neutral-dark) 25%, transparent); } .mat-mdc-raised-button:hover { background: var(--app-primary-dark); } .mat-mdc-raised-button.app-secondary { background: var(--app-secondary); color: var(--app-on-secondary); } .mat-mdc-raised-button.app-secondary:hover { background: var(--app-secondary-dark); } .mat-mdc-button.app-outlined { border-color: var(--app-neutral-outline); } .mat-mdc-button.app-quiet { color: var(--theme-text-secondary); } .mat-mdc-button.app-quiet:hover { background: var(--theme-sidenav-hover); } .mat-mdc-button.app-danger { color: var(--app-error); border-color: color-mix(in srgb, var(--app-error) 40%, transparent); } .mat-mdc-button.app-danger:hover { background: color-mix(in srgb, var(--app-error) 10%, transparent); } .mat-mdc-button.app-block, .mat-mdc-raised-button.app-block { width: 100%; } .mat-mdc-button[disabled], .mat-mdc-raised-button[disabled] { opacity: 0.45; pointer-events: none; } .mat-mdc-icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; padding: 0; background: transparent; border: 0; border-radius: 2rem; color: inherit; cursor: pointer; transition: background 0.2s ease-in-out; } .mat-mdc-icon-button:hover { background: color-mix(in srgb, currentColor 14%, transparent); } /* FAB extendido Material: 3.5rem */ .mat-mdc-fab-extended { position: fixed; z-index: 25; inset-block-end: calc(1.6rem + env(safe-area-inset-bottom, 0rem)); inset-inline-end: calc(1.6rem + env(safe-area-inset-right, 0rem)); display: inline-flex; align-items: center; gap: 0.8rem; min-height: 3.5rem; padding: 0 1.6rem; border: 0; border-radius: 2rem; background: var(--app-primary); color: var(--app-on-primary); font-family: var(--primary-font); font-weight: var(--font-semibold); font-size: 0.9em; text-decoration: none; cursor: pointer; box-shadow: 0 0.2rem 0.8rem color-mix(in srgb, var(--app-neutral-dark) 35%, transparent); } @media (min-width: 960px) { .mat-mdc-fab-extended { display: none; } } /* ── 7. Campos (selectores exactos del manifiesto) ──────────────────────── */ .mat-mdc-form-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } .mat-mdc-form-field > label, .mdc-floating-label { font-family: var(--primary-font); font-size: 0.8em; font-weight: var(--font-semibold); color: var(--theme-text-secondary); line-height: 1.4; } .mat-mdc-form-field input, .mat-mdc-form-field select, .mat-mdc-form-field textarea { min-height: 3.5rem; /* campo outlined Material */ padding: 0 1.2rem; width: 100%; background: var(--theme-bg-elevated); color: var(--mat-form-field-outlined-input-text-color); border: 0.1rem solid var(--app-neutral-outline); border-radius: 0.5rem; font-size: 0.9em; transition: border-color 0.2s ease-in-out; } .mat-mdc-form-field textarea { min-height: 6rem; padding-block: 0.8rem; resize: vertical; line-height: 1.5; } .mat-mdc-form-field input:focus, .mat-mdc-form-field select:focus, .mat-mdc-form-field textarea:focus { border-color: var(--app-primary); outline: 0.1rem solid var(--app-primary); outline-offset: 0; } .mat-mdc-form-field-hint { font-size: 0.8em; line-height: 1.4; color: var(--theme-text-secondary); } .mat-mdc-form-field.has-error input, .mat-mdc-form-field.has-error select, .mat-mdc-form-field.has-error textarea { border-color: var(--app-error); } .mat-mdc-form-field.has-error .mdc-floating-label, .mat-mdc-form-field.has-error .mat-mdc-form-field-hint { color: var(--app-error); } .mat-mdc-select-trigger { min-height: 3rem; padding: 0 1.2rem; background: var(--theme-bg-elevated); color: var(--theme-text); border: 0.1rem solid var(--app-neutral-outline); border-radius: 0.4rem; /* radio del panel de select */ font-size: 0.9em; cursor: pointer; transition: border-color 0.2s ease-in-out; } .mat-mdc-select-trigger:hover { border-color: var(--app-secondary); } .mat-mdc-select-trigger { max-width: 100%; min-width: 0; } /* Barra de busqueda: alto de campo outlined, radio de chip */ .app-search { display: flex; align-items: center; gap: 0.8rem; min-height: 3.5rem; padding: 0 0.8rem 0 1.2rem; background: var(--theme-bg-elevated); border: 0.1rem solid var(--theme-border); border-radius: 2rem; } .app-search input { border: 0; background: transparent; flex: 1 1 auto; width: 100%; min-height: 3rem; padding: 0; } .app-search input:focus { outline: none; } /* Slide toggle: 3rem de area, igual que el resto de los controles */ .mat-mdc-slide-toggle-row { display: flex; align-items: center; gap: 1.2rem; min-height: 4rem; padding: 0.4rem 0; border-block-end: 0.1rem solid var(--theme-divider); } .mat-mdc-slide-toggle-row:last-child { border-block-end: 0; } .mat-mdc-slide-toggle-row__text { flex: 1 1 auto; } .mat-mdc-slide-toggle-row__text small { display: block; color: var(--theme-text-secondary); font-size: 0.8em; line-height: 1.5; } .mat-mdc-slide-toggle { position: relative; width: 3.2rem; height: 2rem; flex: 0 0 auto; } .mat-mdc-slide-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .mat-mdc-slide-toggle span { position: absolute; inset: 0; border-radius: 2rem; pointer-events: none; background: var(--app-neutral-light); transition: background 0.2s ease-in-out; } .mat-mdc-slide-toggle span::after { content: ''; position: absolute; inset-block-start: 0.2rem; inset-inline-start: 0.2rem; width: 1.6rem; height: 1.6rem; border-radius: 2rem; background: var(--theme-bg-elevated); transition: transform 0.2s ease-in-out; } .mat-mdc-slide-toggle input:checked + span { background: var(--app-primary); } .mat-mdc-slide-toggle input:checked + span::after { transform: translateX(1.2rem); } .mat-mdc-slide-toggle input:focus-visible + span { outline: 0.2rem solid var(--app-primary); outline-offset: 0.2rem; } /* ── 8. Chips (alto 2rem, radio 2rem — el del override) ─────────────────── */ .mat-mdc-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2rem; padding: 0 0.8rem; border-radius: 2rem; font-size: 0.8em; font-weight: var(--font-semibold); line-height: 1.4; background: var(--app-neutral-bg); color: var(--app-neutral-dark); border: 0.1rem solid transparent; white-space: nowrap; } [data-theme='dark'] .mat-mdc-chip { background: var(--theme-bg-surface); color: var(--theme-text-secondary); } .mat-mdc-chip.app-primary { background: var(--app-primary-container); color: var(--app-primary-dark); } .mat-mdc-chip.app-secondary { background: var(--app-secondary-container); color: var(--app-secondary-dark); } .mat-mdc-chip.app-tertiary { background: var(--app-tertiary-container); color: var(--app-tertiary-dark); } .mat-mdc-chip.app-ok { background: var(--result-success-bg); color: var(--result-success-text); } .mat-mdc-chip.app-pend { background: var(--result-timeout-bg); color: var(--result-timeout-text); } .mat-mdc-chip.app-fail { background: var(--result-failure-bg); color: var(--result-failure-text); } .mat-mdc-chip.app-outlined { background: transparent; border-color: var(--app-neutral-outline); color: var(--theme-text-secondary); } /* Chip seleccionable: alto de chip Material con area tactil de 2.4rem */ .mat-mdc-chip-option { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0 1.2rem; border-radius: 2rem; cursor: pointer; background: transparent; border: 0.1rem solid var(--app-neutral-outline); color: var(--theme-text); font-size: 0.8em; line-height: 1.4; white-space: nowrap; transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; } .mat-mdc-chip-option[aria-pressed='true'] { background: var(--app-primary-container); border-color: var(--app-primary); color: var(--app-primary-dark); font-weight: var(--font-semibold); } .mat-mdc-chip-listbox { display: flex; gap: 0.8rem; overflow-x: auto; padding-block-end: 0.4rem; scrollbar-width: thin; align-self: start; /* estirada como item de grilla su alto colapsa a cero y los chips salen cortados */ } .mat-mdc-chip-listbox::-webkit-scrollbar { height: 0.2rem; } .mat-mdc-chip-listbox::-webkit-scrollbar-thumb { background: var(--app-neutral-light); border-radius: 2rem; } .code { font-family: var(--monospace-font); font-size: 0.8em; letter-spacing: 0.06em; line-height: 1.5; color: var(--theme-text-secondary); } .num { font-family: var(--monospace-font); font-variant-numeric: tabular-nums; } /* ── 9. Iconos (clases del manifiesto) ──────────────────────────────────── */ .icon { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; } .icon-medium { width: 1.2rem; height: 1.2rem; } .icon-large { width: 2rem; height: 2rem; } .icon-grid { display: grid; grid-template-columns: var(--gallery-pic-width); gap: 0.8rem; } .icon-cell { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; gap: 0.4rem; min-height: 5.5rem; padding: 0.8rem; background: var(--theme-bg-elevated); border: 0.1rem solid var(--theme-border); border-radius: 0.5rem; color: var(--app-primary); text-align: center; } .icon-cell span:last-child { font-size: 0.8em; color: var(--theme-text-secondary); line-height: 1.4; } /* ── 10. Modulos de dominio ─────────────────────────────────────────────── */ /* 10.1 Tarjeta de contenedor. Codigo de color por naturaleza del contenedor: se mueve / esta fijo / es una subdivision. Tres tonos, no cinco. */ .box-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; padding: 1.6rem; min-height: 12rem; background: var(--theme-bg-elevated); border: 0.1rem solid var(--theme-border); border-radius: 0.5rem; color: inherit; text-decoration: none; border-inline-start: 0.3rem solid var(--box-accent, var(--app-neutral-light)); transition: border-color 0.2s ease-in-out, transform 0.2s ease-in-out; } a.box-card:hover { transform: translateY(-0.2rem); border-color: var(--app-primary); } .box-card__top { display: flex; align-items: flex-start; gap: 1.2rem; } .box-card__id { font-family: var(--monospace-font); font-size: 0.8em; letter-spacing: 0.1em; line-height: 1.5; color: var(--theme-text-secondary); text-transform: uppercase; } .box-card__name { font-family: var(--primary-font); font-weight: var(--font-semibold); font-size: 1.1em; line-height: 1.3; } .box-card__where { font-size: 0.8em; line-height: 1.5; color: var(--theme-text-secondary); } .box-card__meta { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; } .box-card__qr { flex: 0 0 auto; width: 4rem; } .box-card--tipo-caja, .box-card--tipo-baul, .box-card--tipo-bolso, .box-card--tipo-pallet { --box-accent: var(--app-primary); } .box-card--tipo-armario, .box-card--tipo-ropero, .box-card--tipo-estante { --box-accent: var(--app-tertiary); } .box-card--tipo-cajon { --box-accent: var(--app-secondary); } /* 10.2 Medidor de cobertura — barra de estado, no visualizacion de datos */ /* Paso de la guia: numero en chip mono + contenido. Reusa card y chip del manifiesto; lo unico propio es la grilla de dos columnas. */ .paso { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1.2rem; align-items: start; } .paso__n { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 2rem; background: var(--app-primary); color: var(--app-on-primary); font-family: var(--monospace-font); font-size: 0.9em; font-weight: var(--font-semibold); } .paso__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; min-width: 0; } .paso__donde { font-size: 0.8em; line-height: 1.5; color: var(--theme-text-secondary); display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; } /* Son enlaces de navegacion, no prosa: mismo blanco de toque que un chip */ .paso__donde a, .mat-mdc-form-field-hint > a:only-child { display: inline-flex; align-items: center; min-height: 2.4rem; } /* Pregunta desplegable: interaccion nativa, sin JavaScript */ .pregunta { border-block-end: 0.1rem solid var(--theme-divider); } .pregunta:last-child { border-block-end: 0; } .pregunta > summary { display: flex; align-items: center; gap: 0.8rem; min-height: 4rem; padding: 0.8rem 0; cursor: pointer; font-family: var(--primary-font); font-weight: var(--font-semibold); font-size: 0.9em; list-style: none; } .pregunta > summary::-webkit-details-marker { display: none; } .pregunta > summary::after { content: ''; margin-inline-start: auto; flex: 0 0 auto; width: 0.8rem; height: 0.8rem; border-inline-end: 0.2rem solid var(--theme-text-secondary); border-block-end: 0.2rem solid var(--theme-text-secondary); transform: rotate(45deg); transition: transform 0.2s ease-in-out; } .pregunta[open] > summary::after { transform: rotate(-135deg); } .pregunta > div { padding-block-end: 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } .meter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } .meter__label { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.8em; line-height: 1.5; color: var(--theme-text-secondary); } .meter__track { height: 0.4rem; border-radius: 2rem; overflow: hidden; background: color-mix(in srgb, var(--app-neutral-outline) 30%, transparent); } .meter__fill { height: 100%; background: var(--app-secondary); border-radius: 2rem; transition: width 0.2s ease-in-out; } .meter--warn .meter__fill { background: var(--app-warning); } /* 10.3 Fila de item = item de lista Material de dos lineas: 4rem */ .item-row { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1.2rem; align-items: center; min-height: 4rem; padding: 0.8rem 1.6rem; border-block-end: 0.1rem solid var(--theme-divider); } .item-row:last-child { border-block-end: 0; } .item-row > * { min-width: 0; } /* un nombre largo no empuja la fila */ .item-row__thumb { width: 3rem; height: 3rem; border-radius: 0.5rem; overflow: hidden; flex: 0 0 auto; background: var(--app-neutral-bg); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; color: var(--app-neutral); } [data-theme='dark'] .item-row__thumb { background: var(--theme-bg-surface); } .item-row__thumb img { width: 100%; height: 100%; object-fit: cover; } .item-row__thumb--empty { border: 0.1rem dashed var(--app-neutral-outline); } .item-row__name { font-weight: var(--font-semibold); font-size: 0.9em; line-height: 1.5; } .item-row__meta { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; font-size: 0.8em; line-height: 1.5; color: var(--theme-text-secondary); } .item-row__qty { font-family: var(--monospace-font); font-size: 0.9em; color: var(--theme-text-secondary); } /* 10.4 Escaner — alto del token de galeria del contrato */ .scanner { position: relative; border-radius: 1rem; overflow: hidden; background: var(--app-neutral-bg-dark); height: var(--gallery-container-height); /* calc(80vh - 13rem) */ height: calc(var(--wimb-vh, 1vh) * 80 - 13rem); min-height: 18rem; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; } .scanner--cuadrado { /* el alto sale del ancho, no del viewport */ height: auto; min-height: 0; aspect-ratio: 1; max-width: 100%; } .scanner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scanner__reticle { position: relative; width: min(62%, 15rem); aspect-ratio: 1; pointer-events: none; } .scanner__reticle::before, .scanner__reticle::after { content: ''; position: absolute; width: 2.4rem; height: 2.4rem; border: 0.2rem solid var(--app-on-primary); border-radius: 0.8rem; } .scanner__reticle::before { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; } .scanner__reticle::after { inset-block-end: 0; inset-inline-end: 0; border-inline-start: 0; border-block-start: 0; } .scanner__laser { position: absolute; inset-inline: 8%; height: 0.2rem; inset-block-start: 12%; background: var(--app-secondary); box-shadow: 0 0 0.8rem var(--app-secondary); animation: laser 2.4s ease-in-out infinite; } @keyframes laser { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(min(42vh, 22rem)); } } .scanner__status { position: absolute; inset-block-end: 0.8rem; inset-inline: 0.8rem; min-height: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 0.4rem 1.2rem; border-radius: 0.5rem; text-align: center; font-size: 0.8em; line-height: 1.5; background: color-mix(in srgb, var(--app-neutral-bg-dark) 80%, transparent); color: var(--app-on-primary); } .scanner__placeholder { position: relative; color: var(--app-neutral-light); text-align: center; padding: 1.6rem; } /* 10.5 Hoja de etiquetas. Tinta y papel salen de --app-*, que NO cambian con el tema: la hoja imprime igual en claro y en oscuro. */ .sheet { background: var(--app-neutral-surface); color: var(--app-neutral-dark); padding: 1.6rem; border-radius: 0.5rem; border: 0.1rem solid var(--app-neutral-light); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } .sheet__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; } .label { width: var(--container-width); /* min(100%, 12rem) */ min-width: 100%; border: 0.1rem dashed var(--app-neutral-outline); border-radius: 0.4rem; padding: 0.8rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; justify-items: center; text-align: center; background: var(--app-neutral-surface); color: var(--app-neutral-dark); break-inside: avoid; } .label svg { width: 100%; height: auto; } .label__code { font-family: var(--monospace-font); font-size: 0.8em; letter-spacing: 0.1em; font-weight: var(--font-semibold); line-height: 1.4; } .label__name { font-family: var(--primary-font); font-size: 0.8em; font-weight: var(--font-semibold); line-height: 1.3; } .label__where { font-size: 0.7em; line-height: 1.4; } /* 10.6 Estado vacio */ .empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; justify-items: center; text-align: center; min-height: 12rem; align-content: center; padding: 2.4rem 1.6rem; color: var(--theme-text-secondary); border: 0.1rem dashed var(--theme-border); border-radius: 0.5rem; } .empty h3 { color: var(--theme-text); } /* 10.7 Estadistica */ .stat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; align-content: start; min-height: 4rem; } .stat__value { font-family: var(--monospace-font); font-size: calc(1.5em + 0.4vw); font-weight: var(--font-semibold); line-height: 1.2; font-variant-numeric: tabular-nums; } .stat__label { font-size: 0.8em; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.1em; color: var(--theme-text-secondary); } /* 10.8 Fila de checklist = item de lista Material de tres lineas: 5.5rem */ .check-row { display: flex; align-items: center; gap: 1.2rem; min-height: 5.5rem; padding: 0.8rem 1.6rem; border-block-end: 0.1rem solid var(--theme-divider); cursor: pointer; } .check-row:last-child { border-block-end: 0; } .check-row input[type='checkbox'] { width: 2rem; height: 2rem; accent-color: var(--app-secondary); flex: 0 0 auto; cursor: pointer; } .check-row input { margin: 0; } /* el navegador le pone 3px y descuadra la fila */ .check-row__text { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.2rem; } .check-row__text > * { min-width: 0; } .check-row__text strong { font-size: 0.9em; line-height: 1.5; } .check-row__text small { color: var(--theme-text-secondary); font-size: 0.8em; line-height: 1.5; } .check-row[data-done='true'] .check-row__text strong { text-decoration: line-through; color: var(--theme-text-secondary); } /* ── 11. Dialogo (radio 1rem), snackbar (0.5rem), banner ────────────────── */ .mat-mdc-dialog-container { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-columns: minmax(0, 1fr); place-items: end center; background: color-mix(in srgb, var(--app-neutral-dark) 55%, transparent); } .mat-mdc-dialog-container[hidden] { display: none; } .mat-mdc-dialog-surface { background: var(--theme-bg-elevated); width: var(--ticker); /* min(100%, 28rem) */ border-radius: 1rem 1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding: 2.4rem 2.4rem calc(2.4rem + env(safe-area-inset-bottom, 0rem)); max-height: 92vh; /* respaldo sin JS */ max-height: calc(var(--wimb-vh, 1vh) * 92); overflow-y: auto; animation: surface-up 0.2s ease-in-out; } @keyframes surface-up { from { transform: translateY(1.6rem); opacity: 0; } } @media (min-width: 600px) { .mat-mdc-dialog-container { place-items: center; } .mat-mdc-dialog-surface { border-radius: 1rem; } } .mat-mdc-snack-bar-container { position: fixed; z-index: 70; inset-block-end: calc(1.6rem + env(safe-area-inset-bottom, 0rem)); inset-inline: 1.6rem; margin-inline: auto; width: fit-content; max-width: var(--ticker); min-height: 3rem; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; background: var(--app-neutral-dark); color: var(--app-neutral-surface); padding: 0.8rem 1.6rem; border-radius: 0.5rem; font-size: 0.9em; line-height: 1.5; box-shadow: 0 0.2rem 0.8rem color-mix(in srgb, var(--app-neutral-dark) 40%, transparent); animation: surface-up 0.2s ease-in-out; } .mat-mdc-snack-bar-container[hidden] { display: none; } .banner { display: flex; gap: 1.2rem; align-items: flex-start; min-height: 3rem; padding: 0.8rem 1.6rem; border-radius: 0.5rem; font-size: 0.9em; line-height: 1.5; background: var(--app-primary-container); color: var(--app-primary-dark); } .banner--warn { background: var(--result-timeout-bg); color: var(--result-timeout-text); } .banner--ok { background: var(--result-success-bg); color: var(--result-success-text); } .banner strong { font-family: var(--primary-font); } /* ── 12. Tabla ──────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table.mat-mdc-table { width: 100%; border-collapse: collapse; font-size: 0.9em; } table.mat-mdc-table th, table.mat-mdc-table td { text-align: start; height: 3rem; padding: 0.4rem 1.2rem; border-block-end: 0.1rem solid var(--theme-divider); } table.mat-mdc-table th { font-family: var(--primary-font); font-size: 0.8em; font-weight: var(--font-semibold); color: var(--theme-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } table.mat-mdc-table tbody tr:hover { background: var(--theme-sidenav-hover); } /* ── 13. Utilidades ─────────────────────────────────────────────────────── */ .muted { color: var(--theme-text-secondary); } .small { font-size: 0.9em; } .tiny { font-size: 0.8em; line-height: 1.5; } .center { text-align: center; } .sr-only { position: absolute; width: 0.1rem; height: 0.1rem; padding: 0; margin: -0.1rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── 14. Impresion — solo el pliego ─────────────────────────────────────── */ @media print { .app-header, .app-sidenav, .app-scrim, .mat-mdc-fab-extended, .no-print { display: none !important; } /* El modelo de scroll se desarma para imprimir: con overflow oculto y alto fijo, el pliego saldria cortado en una sola pagina. */ body:has(> .app) { height: auto; overflow: visible; } .app, .app-main { display: block; height: auto; overflow: visible; padding: 0; min-height: 0; } body { background: none; } .sheet { border: 0; padding: 0; border-radius: 0; } .label { border-style: solid; border-color: var(--app-neutral-light); } @page { margin: 10mm; } } /* ── 15. Movimiento reducido ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }