/* ============================================================ HUF — Componente: PanelCard (.hd-panel-card) — HVL §6.5 ------------------------------------------------------------ Vehículo: TagHelper (AdminPortal/TagHelpers/ HdPanelCardTagHelper.cs) + slot opcional . El borde superior con el acento de identidad es el "sello de marca" de líneas de energía (HVL §4.2) — se repite aquí (2px; el sidebar es el único lugar con 3px), en el link activo del sidebar y en el foco de inputs, en ningún otro lugar. Cero sombra (HVL §5.2: la profundidad se expresa por valor de fondo, nunca por sombra, salvo lo que flota sobre el plano — un panel no flota). Ejemplos de uso → docs/hednora-ui-framework-guide.md §PanelCard. ============================================================ */ /* REVISIÓN 3 (2026-08-04): el borde superior de acento se ELIMINÓ. Un panel es un contenedor neutro: no está activo, no tiene el foco, no es una acción primaria y no está en vivo — así que no le corresponde la línea de energía (HVL §4.2 revisado, §5.3). Repetida en cada panel apilado, la línea dejaba de comunicar y pasaba a decorar, que es exactamente lo que la ley de color prohíbe. La contención la expresan el escalón de superficie y el separador de 1px, que para eso están. */ .hd-panel-card { padding: var(--hd-space-5); border-radius: var(--hd-radius-md); background: var(--hd-theme-surface); border: 1px solid var(--hd-color-border); transition: border-color var(--hd-motion-standard) var(--hd-ease); } /* El hover tampoco tiñe de acento: pasar el cursor por encima no vuelve "activo" a un panel. Se refuerza la línea neutra (HVL §5.2: el hover de un panel cambia el color de su línea, no su elevación). */ .hd-panel-card:hover { border-color: var(--hd-color-border-strong); } /* ── Forma del modo pastel (2026-08-13, decisión 29) ─────────────── EXCEPCIÓN acotada a data-hd-mode="pastel" sobre la regla de "cero sombra" del encabezado de este archivo (HVL §5.2). Solo aplica al modo pastel: oscuro y claro conservan la profundidad por valor de fondo, sin sombra. Misma sombra de dos capas que la tarjeta de indicador — un solo valor de relieve en todo el modo, no una escala nueva. */ [data-hd-mode="pastel"] .hd-panel-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 5px 14px rgba(15, 23, 42, .055); } .hd-panel-card--form { max-width: 56rem; } /* ── Variante seleccionable ──────────────────────────────────────── Para un embudo donde elegir una tarjeta ES el paso (servicio y estilista del portal público de peluquería). A diferencia del panel neutro de arriba, aquí el hover y el estado elegido SÍ se tiñen de acento: la tarjeta seleccionada es "esto está activo", que es exactamente lo que HVL §4.2 reserva para el color con significado — mismo criterio que .hd-pay-tile y .hd-order-card. El .hd-panel-card__body de una tarjeta sin título hereda el padding del panel, así que la variante no lo repite. */ .hd-panel-card--selectable { display: block; cursor: pointer; color: inherit; text-decoration: none; height: 100%; } .hd-panel-card--selectable:hover { border-color: var(--hd-theme-accent); } .hd-panel-card--selectable.is-selected { border-color: var(--hd-theme-accent); background: rgba(var(--hd-theme-accent-rgb), .07); } /* El foco visible es obligatorio: cuando la variante se renderiza como , es un control navegable por teclado y el hover no alcanza. */ .hd-panel-card--selectable:focus-visible { outline: 2px solid var(--hd-theme-accent); outline-offset: 2px; } /* Variante para contenido a sangre (ej. .hd-table): el padding del card se * mueve a la cabecera para que el título/acciones sigan viéndose insertados, * pero el cuerpo llega a los cuatro bordes — sin esto, una tabla ancha queda * con el padding completo del card por los cuatro lados (gap real detectado * al conformar HVL §10, Fase A del plan de migración). */ .hd-panel-card--flush { padding: 0; } .hd-panel-card--flush .hd-panel-card__header { padding: var(--hd-space-5) var(--hd-space-5) 0; margin-bottom: var(--hd-space-4); } /* Envuelve. Sin `flex-wrap` el grupo de acciones —que no encoge— se quedaba siempre en la primera línea y el título absorbía todo el faltante: como `.hd-panel-card__heading` trae `min-width: 0`, podía comprimirse hasta su ancho de palabra. Medido a 360px: en Pasarela de pagos el título "Llaves de Wompi" se partía en tres renglones ("Llaves" / "de" / "Wompi") junto a sus dos insignias, y en Cierre de caja la insignia "7 entregados · 2 recoger · 0 cancelados" quedaba montada ENCIMA del título "Domicilios". La base de 14rem es el punto de corte: mientras el título tenga esos 224px y las acciones quepan al lado, la línea sigue siendo una sola y el escritorio no cambia en nada. Cuando ya no caben, las acciones bajan enteras a su propia línea y el título recupera el ancho completo — que es lo que un encabezado necesita para leerse. */ .hd-panel-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hd-space-4); flex-wrap: wrap; margin-bottom: var(--hd-space-5); } .hd-panel-card__heading { min-width: 0; flex: 1 1 14rem; } .hd-panel-card__title { margin: 0; font-size: var(--hd-text-title); font-weight: 600; color: var(--hd-theme-text); line-height: 1.2; } .hd-panel-card__subtitle { margin: var(--hd-space-1) 0 0; font-size: var(--hd-text-caption); color: var(--hd-theme-text-muted); } .hd-panel-card__actions { display: flex; align-items: center; gap: var(--hd-space-2); flex-shrink: 0; } .hd-panel-card__body { color: var(--hd-theme-text); } /* ============================================================ Variante: OrderCard (.hd-order-card) — Discoteca/Caja ------------------------------------------------------------ Sin TagHelper: a diferencia del resto del catálogo, esta tarjeta la regenera JavaScript en cada evento SignalR (pedidoCardBodyHtml en Discoteca/Caja/Index.cshtml) además de Razor en la carga inicial — un TagHelper no es invocable desde JS, así que el contrato público es la clase CSS, no un vehículo Razor (mismo criterio ya usado por wwwroot/js/ventas/venta-rapida.js con hd-btn). A diferencia de .hd-panel-card, SÍ lleva acento de línea de energía (a la izquierda, no arriba) porque un pedido activo es exactamente el caso que HVL §4.2 reserva para el color con significado: algo pasando ahora mismo. El color del acento es el mismo token que su badge de estado, para que borde y badge cuenten la misma historia. ============================================================ */ .hd-order-card { display: flex; flex-direction: column; height: 100%; padding: var(--hd-space-4); border-radius: var(--hd-radius-md); background: var(--hd-theme-surface); border: 1px solid var(--hd-color-border); border-left: 3px solid var(--hd-color-border-strong); } .hd-order-card--pendiente { border-left-color: var(--hd-color-warning); } .hd-order-card--preparando { border-left-color: var(--hd-color-info); } .hd-order-card--listo { border-left-color: var(--hd-color-success); } .hd-order-card--domicilio { border-left-color: var(--hd-color-warning); } .hd-order-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hd-space-2); padding-bottom: var(--hd-space-2); margin-bottom: var(--hd-space-2); border-bottom: 1px solid var(--hd-color-border); } .hd-order-card__body { flex: 1; font-size: var(--hd-text-caption); color: var(--hd-theme-text); } .hd-order-card__footer { padding-top: var(--hd-space-2); margin-top: var(--hd-space-2); border-top: 1px solid var(--hd-color-border); } /* Valor del domicilio, encima del total: es el único número de la tarjeta que el cajero puede corregir sobre un pedido ya realizado, así que va junto al total y no perdido en el cuerpo. */ .hd-order-card__domicilio { display: flex; align-items: center; gap: var(--hd-space-1); margin-bottom: var(--hd-space-1); } /* Por qué el pedido pudo caer en revisión (script 130). Va ARRIBA del valor del domicilio: es lo primero que el cajero necesita saber de una tarjeta frenada, y ponerlo entre los números lo volvería una línea más del desglose. DOS TRATAMIENTOS, y esa es la decisión. La primera versión pintaba toda medición igual —gris apagado con una rayita naranja—, y ahí se anulaban dos defectos entre sí: con 7 m avisando lo mismo que 2 km, subirle el volumen habría convertido la alarma en ruido de fondo; y dejándola baja, el pedido que sí hay que frenar se leía igual que "Domicilio: $3.500". Separar los casos por la tolerancia del tenant es lo que permite gritar solo donde corresponde. El modificador lo elige quien pinta la tarjeta (Razor y su gemelo JS), porque el margen es del tenant. */ .hd-order-card__discrepancia { display: flex; align-items: flex-start; gap: var(--hd-space-1); margin-bottom: var(--hd-space-2); line-height: 1.35; } /* Dentro del margen: el punto y la dirección cuadran. Se sigue mostrando —Caja es donde se calibra el margen, ADR-061— pero en voz baja y sin color de alarma, que es lo que deja libre el naranja para el caso de abajo. */ .hd-order-card__discrepancia--ok { padding-left: var(--hd-space-2); border-left: 3px solid var(--hd-color-border); } .hd-order-card__discrepancia--ok .hd-icon { color: var(--hd-color-text-muted); flex-shrink: 0; } /* Fuera del margen: hay que frenar el despacho. Recuadro completo y no solo un borde izquierdo, por lo mismo que en la página de entrega (.ent-alerta): esto aparece en una minoría de pedidos y tiene que ganarle la atención a un pie de tarjeta lleno de cifras. */ .hd-order-card__discrepancia--alerta { padding: var(--hd-space-2); border: 1px solid var(--hd-color-warning); border-radius: var(--hd-radius-sm, 6px); background: color-mix(in srgb, var(--hd-color-warning) 14%, transparent); } .hd-order-card__discrepancia--alerta .hd-icon { color: var(--hd-color-warning); flex-shrink: 0; } .hd-order-card__discrepancia-titulo { font-weight: 700; color: var(--hd-color-text); } /* El detalle NO va en --hd-color-text-muted: sobre el fondo teñido de advertencia el gris apagado queda por debajo de AA, y es justo la mitad que dice contra qué dirección se está comparando. */ .hd-order-card__discrepancia-detalle { margin-top: .15rem; font-size: .8125rem; color: var(--hd-color-text); opacity: .85; } /* Quién sale con el pedido (script 128). Va bajo el valor del domicilio y no en las acciones del pie: es un dato del envío, como el valor, no un botón que dispare algo. El select se encoge hasta el ancho de la tarjeta para que un nombre largo no la desborde — las tarjetas viven en un grid y una sola ancha corre la columna entera. */ .hd-order-card__domiciliario { display: flex; align-items: center; gap: var(--hd-space-1); margin-bottom: var(--hd-space-1); } .hd-order-card__domiciliario .hd-select { flex: 1 1 auto; min-width: 0; padding-block: var(--hd-space-1); font-size: .8125rem; } /* Desglose sobre el total de la tarjeta (subtotal / impuestos / descuentos). Las líneas del cuerpo van sin impuesto (ADR-027), así que el total no se reconstruye sumándolas: esto explica la diferencia en vez de dejarla como una sorpresa. */ .hd-order-card__desglose > div { display: flex; justify-content: space-between; gap: var(--hd-space-2); } .hd-order-card__total { font-weight: 600; margin-bottom: var(--hd-space-2); } .hd-order-card__actions { display: flex; flex-wrap: wrap; gap: var(--hd-space-1); }