/* Kern PMS — lenguaje visual estilo IBM Carbon (white theme). Sin paquetes de Carbon. */ :root { --k-bg: #f4f4f4; --k-layer: #ffffff; --k-layer-hover: #e8e8e8; --k-border: #e0e0e0; --k-border-strong: #8d8d8d; --k-text: #161616; --k-text-secondary: #525252; --k-text-placeholder: #a8a8a8; --k-text-inverse: #ffffff; --k-interactive: #0f62fe; --k-interactive-hover: #0353e9; --k-danger: #da1e28; --k-danger-hover: #b81922; --k-success: #24a148; --k-warning: #f1c21b; --k-focus: #0f62fe; --k-font-sans: 'IBM Plex Sans', system-ui, sans-serif; --k-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --k-header-h: 48px; --k-sidenav-w: 256px; /* Rampa de gravedad del donut de mora. NO se reusan --k-warning/--k-danger aunque dos valores coincidan: esos son estados semánticos (una alerta, un error) y esto es una rampa ordenada. Atarlos haría que cambiar el color de los errores repintara el donut. Escala real de Carbon. */ --k-aging-1: #f1c21b; /* Yellow 30 */ --k-aging-2: #ff832b; /* Orange 40 */ --k-aging-3: #da1e28; /* Red 60 */ --k-aging-4: #750e13; /* Red 90 */ --k-motion-productive: cubic-bezier(0.2, 0, 0.38, 0.9); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--k-bg); color: var(--k-text); font-family: var(--k-font-sans); font-size: 14px; line-height: 1.4; } a { color: var(--k-interactive); text-decoration: none; } a:hover { text-decoration: underline; } /* Header */ .k-header { position: fixed; inset: 0 0 auto 0; height: var(--k-header-h); background: #161616; color: var(--k-text-inverse); display: flex; align-items: center; gap: 16px; padding: 0 16px; z-index: 100; } .k-header__brand { color: #fff; font-weight: 600; letter-spacing: .02em; } .k-header__brand span { font-weight: 300; } .k-header__spacer { flex: 1; } .k-header .k-select { background: #262626; color: #fff; border-color: #393939; max-width: 240px; } .k-header__user { font-family: var(--k-font-mono); font-size: 12px; color: #c6c6c6; } .k-header form { margin: 0; } .k-header .k-btn--ghost { color: #fff; border-color: transparent; } .k-header .k-btn--ghost:hover { background: #353535; } /* Side nav */ .k-sidenav { position: fixed; top: var(--k-header-h); bottom: 0; left: 0; width: var(--k-sidenav-w); background: var(--k-layer); border-right: 1px solid var(--k-border); padding: 16px 0; overflow-y: auto; } .k-sidenav a { display: block; padding: 10px 16px; color: var(--k-text-secondary); border-left: 3px solid transparent; text-decoration: none; } .k-sidenav a:hover { background: var(--k-layer-hover); color: var(--k-text); } .k-sidenav a.is-active { border-left-color: var(--k-interactive); color: var(--k-text); font-weight: 600; background: #e8e8e8; } .k-sidenav__group { padding: 16px 16px 4px; font-family: var(--k-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--k-text-placeholder); } /* Tablero: hero de cobranza, cola "para hoy", tarjetas de insight. */ .k-hero { background: var(--k-layer); border: 1px solid var(--k-border); padding: 22px 24px; display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: center; margin-bottom: 24px; } .k-hero__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--k-text-secondary); } .k-hero__pct { font-size: 48px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; } .k-hero__row { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 0; } .k-hero__bar { height: 12px; background: var(--k-border); border-radius: 2px; overflow: hidden; max-width: 520px; margin-top: 14px; } .k-hero__bar > span { display: block; height: 100%; background: var(--k-interactive); } .k-hero__aside { text-align: right; } .k-hero__aside .v { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } .k-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; padding: 4px 9px; border-radius: 12px; white-space: nowrap; } .k-delta--up { background: #defbe6; color: #0e6027; } .k-delta--down { background: #fff1f1; color: #a2191f; } .k-todo { background: var(--k-layer); border: 1px solid var(--k-border); margin-bottom: 24px; } .k-todo a { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--k-border); text-decoration: none; color: var(--k-text); } .k-todo a:last-child { border-bottom: 0; } .k-todo a:hover { background: var(--k-layer-hover); } .k-todo__n { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: #edf5ff; color: #0f62fe; flex: none; } .k-todo__n--alert { background: #fff1f1; color: #a2191f; } .k-todo__t { flex: 1; } .k-todo__t small { color: var(--k-text-secondary); font-size: 12px; } .k-todo__go { color: var(--k-text-placeholder); } .k-insight { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--k-border); border: 1px solid var(--k-border); margin-bottom: 24px; } .k-insight__c { background: var(--k-layer); padding: 16px 18px; } .k-insight__k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--k-text-secondary); } .k-insight__v { font-size: 26px; font-weight: 600; margin: 5px 0 2px; font-variant-numeric: tabular-nums; } .k-insight__so { font-size: 12.5px; color: var(--k-text-secondary); } .k-insight__so strong { color: var(--k-text); } /* Grupos colapsables del sidenav (acordeón). El grupo activo nace abierto (data-open lo pone el servidor). */ .k-nav-group__toggle { width: 100%; appearance: none; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 4px; font-family: var(--k-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--k-text-placeholder); } .k-nav-group__toggle:hover { color: var(--k-text-secondary); } .k-nav-group__toggle:focus-visible { outline: 2px solid var(--k-focus); outline-offset: -2px; } .k-nav-chev { width: 12px; height: 12px; flex: none; transition: transform .18s ease; } .k-nav-group[data-open="true"] .k-nav-chev { transform: rotate(90deg); } .k-nav-group__items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease; } .k-nav-group[data-open="true"] .k-nav-group__items { grid-template-rows: 1fr; } .k-nav-group__items > div { overflow: hidden; min-height: 0; } @media (prefers-reduced-motion: reduce) { .k-nav-group__items { transition: none; } .k-nav-chev { transition: none; } } /* Botón del menú móvil: no existe en escritorio. */ .k-header__menu { display: none; background: none; border: 0; color: #fff; font-size: 20px; line-height: 1; padding: 8px; cursor: pointer; } /* Fondo del cajón: bajo el cajón (90), sobre la barra pegajosa de tablas (50, kern.css ~línea 210). El botón ☰ es alcanzable con el cajón abierto por GEOMETRÍA (el cajón y el fondo empiezan en top: var(--k-header-h), nunca se superponen con la cabecera), no por el orden de apilamiento. Lo que el 90/80 sí resuelve de verdad es cubrir esa barra pegajosa cuando el cajón está abierto. */ .k-sidenav__backdrop { position: fixed; inset: var(--k-header-h) 0 0 0; background: rgba(0, 0, 0, .5); z-index: 80; } /* Main */ .k-main { margin: var(--k-header-h) 0 0 var(--k-sidenav-w); padding: 32px; min-height: calc(100vh - var(--k-header-h)); } .k-page-title { font-size: 28px; font-weight: 400; margin: 0 0 24px; } @media (max-width: 900px) { .k-header__menu { display: block; } /* El cajón deja de esconderse y se sale de pantalla: sigue en el DOM, sigue siendo el mismo menú. z-index 90 lo deja bajo la cabecera (100); la razón real de esa cifra está en el comentario de .k-sidenav__backdrop, no es alcanzabilidad del botón (eso lo da la geometría, no el apilamiento). visibility, no solo transform: un transform SOLO mueve píxeles — el cajón cerrado seguiría siendo tabulable y visible para lectores de pantalla. visibility: hidden lo saca del tab order y del árbol de accesibilidad. El paso de transición con delay hace que abrir sea instantáneo y cerrar espere los .2s para no cortar la animación de salida. No lo "simplifiques" quitando visibility: eso reintroduce el bug de accesibilidad. */ .k-sidenav { display: block; visibility: hidden; transform: translateX(-100%); transition: transform .2s ease, visibility 0s linear .2s; z-index: 90; } .k-sidenav.is-open { visibility: visible; transform: none; transition: transform .2s ease, visibility 0s; } .k-main { margin-left: 0; padding: 16px; } /* Targets cómodos para el pulgar en el cajón móvil (≥44px). En escritorio se usan con mouse, así que el tamaño extra es solo para touch. */ .k-sidenav a { min-height: 44px; display: flex; align-items: center; } .k-nav-group__toggle { min-height: 44px; padding-top: 10px; padding-bottom: 10px; } } /* En escritorio el fondo no existe: el cajón es un menú fijo de siempre. */ @media (min-width: 901px) { .k-sidenav__backdrop { display: none; } } /* Tablas densas */ .k-table { width: 100%; border-collapse: collapse; background: var(--k-layer); } .k-table th { text-align: left; font-weight: 600; font-size: 13px; background: var(--k-layer-hover); padding: 12px 16px; border-bottom: 1px solid var(--k-border-strong); } .k-table td { padding: 10px 16px; border-bottom: 1px solid var(--k-border); } .k-table tbody tr:hover { background: #f6f6f6; } .k-table .is-numeric { text-align: right; font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; } /* Botones (rectos, estilo Carbon) */ .k-btn { display: inline-block; padding: 10px 16px; border: 1px solid transparent; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; background: transparent; color: var(--k-interactive); border-radius: 0; } .k-btn--primary { background: var(--k-interactive); color: #fff; } .k-btn--primary:hover { background: var(--k-interactive-hover); } .k-btn--secondary { background: #393939; color: #fff; } .k-btn--danger { background: var(--k-danger); color: #fff; } .k-btn--danger:hover { background: var(--k-danger-hover); } .k-btn--ghost { border-color: var(--k-border-strong); color: var(--k-text); } /* Ghost de peligro: para la acción irreversible que vive en una fila de botones iguales. Borde y texto en rojo, fondo transparente — el rojo sólido se reserva para la pantalla de confirmación, que es donde de verdad se decide. */ .k-btn--danger-ghost { border-color: var(--k-danger); color: var(--k-danger); background: transparent; } .k-btn--danger-ghost:hover { background: #fff1f1; } .k-btn:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 1px; } a.k-btn:hover { text-decoration: none; } /* Formularios */ .k-field { margin-bottom: 20px; max-width: 480px; } .k-field label { display: block; font-size: 12px; color: var(--k-text-secondary); margin-bottom: 6px; } .k-input, .k-select, .k-textarea { width: 100%; padding: 10px 12px; font: inherit; background: var(--k-layer); color: var(--k-text); border: none; border-bottom: 1px solid var(--k-border-strong); border-radius: 0; } .k-input:focus, .k-select:focus, .k-textarea:focus { outline: 2px solid var(--k-focus); outline-offset: -2px; } .k-field__error { color: var(--k-danger); font-size: 12px; margin-top: 4px; } .k-field__help { color: var(--k-text-placeholder); font-size: 12px; margin-top: 4px; } /* Tags y notificaciones */ .k-tag { display: inline-block; padding: 2px 10px; font-size: 12px; border-radius: 999px; background: #e0e0e0; color: var(--k-text); } .k-tag--green { background: #a7f0ba; color: #044317; } .k-tag--red { background: #ffd7d9; color: #750e13; } .k-tag--blue { background: #d0e2ff; color: #002d9c; } /* Etiqueta recta, para tablas donde convive con botones: .k-btn es border-radius 0 por decisión de este sistema, y una píldora de 999px al lado se ve prestada de otra interfaz. No se cambia .k-tag a secas porque la usan 87 lugares. */ .k-tag--recto { border-radius: 0; } /* Celda de acciones. Existe porque se venía usando .is-numeric sólo para alinear a la derecha, y esa clase es de NÚMEROS: arrastraba la tipografía monoespaciada a textos que no lo son («Ya generó contratos» salía en mono). Alinea a la izquierda para que el primer botón caiga en la misma columna en todas las filas, aunque una tenga dos botones y otra uno. */ .k-table td.k-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Botones de acción del mismo ancho: en una columna de acciones lo que se lee es la pila de cuadros, y cuadros de anchos distintos se ven como un error de alineación aunque estén perfectamente alineados. El texto va centrado porque si no, las etiquetas cortas quedan pegadas a la izquierda dentro de su caja. */ .k-table td.k-acciones .k-btn { min-width: 104px; text-align: center; } .k-notification { border-left: 3px solid var(--k-success); background: var(--k-layer); padding: 12px 16px; margin-bottom: 24px; max-width: 640px; } .k-notification--error { border-left-color: var(--k-danger); } .k-notification--warning { border-left-color: var(--k-warning); } /* Card / login */ .k-card { background: var(--k-layer); border: 1px solid var(--k-border); padding: 32px; } .k-login { min-height: 100vh; display: grid; place-items: center; background: var(--k-bg); } .k-login .k-card { width: min(400px, 92vw); } /* Puente entre los dos logins: separado del formulario por una línea, para que se lea como "¿te equivocaste de puerta?" y no como una opción del formulario. */ .k-login__cross { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--k-border); font-size: 14px; color: var(--k-text-secondary); } .k-mono { font-family: var(--k-font-mono); } /* ── Pestañas del contrato (admin) ── */ .k-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--k-border); overflow-x: auto; scrollbar-width: thin; margin: 8px 0 0; } .k-tabs::-webkit-scrollbar { display: none; } .k-tab { appearance: none; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--k-text-secondary); padding: 14px 16px; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; } .k-tab:hover { color: var(--k-text); } .k-tab[aria-selected="true"] { color: var(--k-text); font-weight: 600; border-bottom-color: var(--k-interactive); } .k-tab:focus-visible { outline: 2px solid var(--k-focus); outline-offset: -2px; } .k-panel { display: none; padding-top: 26px; } .k-panel.is-active { display: block; } @media (prefers-reduced-motion: no-preference) { .k-panel.is-active { animation: k-fade .18s ease; } @keyframes k-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } } /* ── Tarjetas KPI ── */ .k-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--k-border); border: 1px solid var(--k-border); margin-bottom: 24px; } .k-kpi { background: var(--k-layer); padding: 18px 20px; } .k-kpi__label { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #6f6f6f; } .k-kpi__num { font-size: 30px; font-weight: 600; margin: 6px 0 2px; font-variant-numeric: tabular-nums; } .k-kpi__num--accent { color: var(--k-interactive); } .k-kpi__sub { font-size: 12.5px; color: #6f6f6f; } /* Impresión: solo el contenido (estado de cuenta imprimible, spec §5) */ @media print { .k-header, .k-sidenav, .no-print { display: none !important; } .k-main { margin: 0; padding: 0; } body { background: #fff; } } /* ============================================================ Portal del inquilino — "libro mayor industrial" Mismo lenguaje Carbon: tinta #161616, Plex Mono para dinero, esquinas rectas, grid 8px, un acento azul. Prefijo .p- ============================================================ */ .p-wrap { max-width: 880px; margin: 0 auto; } /* Hero de tinta: el saldo manda */ .p-hero { background: #161616; color: #f4f4f4; padding: 32px 24px 0; margin: -24px -24px 0; position: relative; overflow: hidden; } .p-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--k-interactive) 0 33%, transparent 33%); } .p-hero__eyebrow { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #8d8d8d; margin: 0 0 4px; animation: p-rise .5s ease both; } .p-hero__title { font-size: 24px; font-weight: 300; margin: 0 0 24px; color: #fff; animation: p-rise .5s .05s ease both; } .p-hero__title strong { font-weight: 600; } .p-hero__grid { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid #393939; } .p-hero__cell { flex: 1 1 160px; padding: 16px 24px 24px 0; border-right: 1px solid #393939; margin-right: 24px; animation: p-rise .5s ease both; } .p-hero__cell:nth-child(2) { animation-delay: .08s; } .p-hero__cell:nth-child(3) { animation-delay: .16s; } .p-hero__cell:last-child { border-right: 0; margin-right: 0; } .p-hero__label { font-family: var(--k-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8d8d8d; margin: 0 0 6px; } .p-hero__value { font-family: var(--k-font-mono); font-size: 28px; font-weight: 500; margin: 0; font-variant-numeric: tabular-nums; color: #fff; } .p-hero__value--danger { color: #ff8389; } .p-hero__value--ok { color: #42be65; } .p-hero__sub { font-size: 12px; color: #a8a8a8; margin: 4px 0 0; } @keyframes p-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Pestañas Carbon: subrayado que viaja */ .p-tabs { display: flex; margin: 0 -24px; padding: 0 24px; background: #161616; overflow-x: auto; scrollbar-width: none; position: sticky; top: var(--k-header-h); z-index: 50; } .p-tabs::-webkit-scrollbar { display: none; } .p-tab { appearance: none; background: none; border: 0; border-bottom: 3px solid transparent; color: #a8a8a8; font: 600 14px var(--k-font-sans); padding: 14px 16px 11px; cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: 8px; transition: color .15s ease, border-color .15s ease; } .p-tab:hover { color: #fff; } .p-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--k-interactive); } .p-tab:focus-visible { outline: 2px solid var(--k-focus); outline-offset: -2px; } .p-tab__badge { font-family: var(--k-font-mono); font-size: 11px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; background: var(--k-interactive); color: #fff; } .p-tab__badge--alert { background: var(--k-danger); } /* Paneles de pestaña con revelado */ .p-panel { display: none; padding: 24px 0 48px; } .p-panel.is-active { display: block; animation: p-fade .25s ease both; } @keyframes p-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Chips de filtro (mono, industriales) */ .p-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; } .p-chip { appearance: none; cursor: pointer; background: var(--k-layer); border: 1px solid var(--k-border-strong); font: 500 11px var(--k-font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; color: var(--k-text-secondary); transition: all .12s ease; } .p-chip:hover { border-color: var(--k-text); color: var(--k-text); } .p-chip[aria-pressed="true"] { background: #161616; color: #fff; border-color: #161616; } /* Ledger: tabla densa que se vuelve timeline en móvil */ .p-ledger { width: 100%; border-collapse: collapse; background: var(--k-layer); } .p-ledger th { text-align: left; font-family: var(--k-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-secondary); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--k-border-strong); background: var(--k-layer-hover); } .p-ledger td { padding: 10px 12px; border-bottom: 1px solid var(--k-border); vertical-align: top; } .p-ledger tr:hover td { background: #f8f8f8; } .p-ledger .is-num { text-align: right; font-family: var(--k-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .p-ledger tr.is-hidden { display: none; } .p-kind { display: inline-block; font-family: var(--k-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border: 1px solid currentColor; } .p-kind--cargo { color: var(--k-text-secondary); } .p-kind--pago { color: var(--k-success); } .p-kind--mora, .p-kind--reverso { color: var(--k-danger); } .p-kind--ajuste { color: var(--k-interactive); } /* Antigüedad como barra segmentada */ .p-aging { margin: 24px 0 0; } .p-aging__bar { display: flex; height: 12px; background: var(--k-layer-hover); overflow: hidden; } .p-aging__seg { transition: flex-basis .6s ease; position: relative; } .p-aging__seg--current { background: #a8a8a8; } .p-aging__seg--d1_30 { background: #f1c21b; } .p-aging__seg--d31_60 { background: #ff832b; } .p-aging__seg--d61_90 { background: #da1e28; } .p-aging__seg--d90_plus { background: #750e13; } .p-aging__legend { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 10px; } .p-aging__item { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-text-secondary); display: flex; align-items: center; gap: 6px; } .p-aging__dot { width: 10px; height: 10px; display: inline-block; } /* Panel de acción colapsable */ .p-action { background: var(--k-layer); border: 1px solid var(--k-border); border-left: 3px solid var(--k-interactive); margin-bottom: 24px; } .p-action__head { width: 100%; appearance: none; background: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px; font: 600 15px var(--k-font-sans); color: var(--k-text); text-align: left; } .p-action__head:hover { background: #f8f8f8; } .p-action__head::after { content: '+'; font: 300 24px/1 var(--k-font-mono); color: var(--k-interactive); transition: transform .2s ease; } .p-action[data-open] .p-action__head::after { content: '−'; } .p-action__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; } .p-action[data-open] .p-action__body { grid-template-rows: 1fr; } .p-action__inner { overflow: hidden; } .p-action__content { padding: 0 16px 16px; } /* Dropzone de archivos con preview */ .p-file { position: relative; border: 1px dashed var(--k-border-strong); padding: 16px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .p-file:hover, .p-file.is-drag { border-color: var(--k-interactive); background: #f2f6ff; } .p-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .p-file__hint { font-size: 12px; color: var(--k-text-secondary); margin: 0; pointer-events: none; } .p-file__hint strong { color: var(--k-interactive); } .p-previews { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .p-previews img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--k-border-strong); } .p-previews .p-previews__file { font-family: var(--k-font-mono); font-size: 11px; padding: 4px 8px; background: var(--k-layer-hover); border: 1px solid var(--k-border); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; } /* Cards de reportes / avisos */ .p-item { background: var(--k-layer); border: 1px solid var(--k-border); padding: 16px; margin-bottom: 12px; display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; transition: border-color .15s ease; } .p-item:hover { border-color: var(--k-border-strong); } .p-item__main { flex: 1 1 260px; min-width: 0; } .p-item__title { font-weight: 600; margin: 0 0 4px; } .p-item__meta { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-text-secondary); margin: 0; } .p-item__amount { font-family: var(--k-font-mono); font-size: 18px; font-weight: 500; white-space: nowrap; } .p-status { display: inline-block; font-family: var(--k-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; } .p-status--pendiente { background: #fff8e1; color: #8a6a00; border: 1px solid #f1c21b; } .p-status--confirmado, .p-status--ok { background: #defbe6; color: #0e6027; border: 1px solid #24a148; } .p-status--descartado, .p-status--alert { background: #fff1f1; color: #a2191f; border: 1px solid #da1e28; } .p-status--info { background: #edf5ff; color: #0043ce; border: 1px solid #0f62fe; } .p-empty { border: 1px dashed var(--k-border-strong); padding: 32px 16px; text-align: center; color: var(--k-text-secondary); } .p-empty p { margin: 0 0 4px; } /* Timeline móvil: el ledger se apila */ @media (max-width: 640px) { .p-hero { padding: 24px 16px 0; margin: -16px -16px 0; } .p-hero__value { font-size: 22px; } .p-hero__cell { padding-right: 16px; margin-right: 16px; } .p-tabs { margin: 0 -16px; padding: 0 8px; } .p-ledger thead { display: none; } .p-ledger, .p-ledger tbody, .p-ledger tr, .p-ledger td { display: block; width: 100%; } .p-ledger tr { border-left: 3px solid var(--k-border-strong); border-bottom: 1px solid var(--k-border); background: var(--k-layer); margin-bottom: 8px; padding: 8px 0; } .p-ledger tr[data-kind="pago"] { border-left-color: var(--k-success); } .p-ledger tr[data-kind="mora"], .p-ledger tr[data-kind="reverso"] { border-left-color: var(--k-danger); } .p-ledger tr[data-kind="ajuste"] { border-left-color: var(--k-interactive); } .p-ledger td { border: 0; padding: 2px 12px; } .p-ledger td[data-label]::before { content: attr(data-label); display: inline-block; width: 88px; font-family: var(--k-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-placeholder); } .p-ledger .is-num { text-align: left; } } /* ── Chat interno (Fase 3): burbujas estilo WhatsApp, lenguaje Carbon ── */ .chat { display: flex; flex-direction: column; height: calc(100vh - var(--k-header-h) - 140px); max-width: 760px; background: var(--k-layer); border: 1px solid var(--k-border); } .chat__scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fafafa; } .chat__msg { max-width: 75%; align-self: flex-start; background: #fff; border: 1px solid var(--k-border); padding: 8px 12px; } .chat__msg--mine { align-self: flex-end; background: #edf5ff; border-color: #d0e2ff; } .chat__msg p { margin: 0 0 2px; white-space: pre-wrap; word-break: break-word; } .chat__meta { display: block; font-family: var(--k-font-mono); font-size: 10px; color: var(--k-text-placeholder); text-align: right; } .chat__composer { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--k-border); background: var(--k-layer); } .chat__composer input { flex: 1; } .chat__empty { margin: auto; color: var(--k-text-secondary); text-align: center; } .chat__attach { flex: 0 0 auto; padding: 6px 10px; font-size: 16px; line-height: 1; } .chat__chip { flex: 0 1 auto; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--k-font-mono); font-size: 11px; background: #edf5ff; border: 1px solid #d0e2ff; padding: 4px 8px; cursor: pointer; } .chat__chip::after { content: ' ✕'; color: var(--k-text-placeholder); } .chat__img { display: block; max-width: 240px; max-height: 240px; margin: 4px 0; border: 1px solid var(--k-border); } .chat__file { display: inline-block; margin: 4px 0 2px; font-size: 13px; background: #f4f4f4; border: 1px solid var(--k-border); padding: 6px 10px; text-decoration: none; color: inherit; word-break: break-all; } .chat__file:hover { background: #e8e8e8; } .chat__msg--mine .chat__file { background: #fff; } @media (max-width: 640px) { .chat { height: calc(100vh - var(--k-header-h) - 96px); } } /* ── Donut de mora por antigüedad ── */ .k-donut { position: relative; } .k-donut__svg { display: block; width: 100%; max-width: 200px; margin: 0 auto; } .k-donut__pista { fill: none; stroke: var(--k-border); stroke-width: 12; } .k-donut__arco { fill: none; stroke-width: 12; /* A escuadra, no redondeado. Todo donut de plantilla lleva linecap: round y por eso todos se parecen; Carbon no redondea nada. Esta línea es lo que hace que el donut se vea de la misma familia que la tabla de al lado. */ stroke-linecap: butt; stroke-dasharray: var(--k-len) 339.292; transform: rotate(-90deg); /* arrancar a las 12, no a las 3 */ transform-origin: 64px 64px; animation: k-donut-draw 400ms var(--k-motion-productive) both; transition: opacity 150ms var(--k-motion-productive); } .k-donut__arco--1 { stroke: var(--k-aging-1); } .k-donut__arco--2 { stroke: var(--k-aging-2); } .k-donut__arco--3 { stroke: var(--k-aging-3); } .k-donut__arco--4 { stroke: var(--k-aging-4); } .k-donut__arco.is-tenue { opacity: .15; } .k-donut a:hover .k-donut__arco { opacity: .8; } /* El foco por defecto sobre un es prácticamente invisible. NO usar outline en el : dibujaría una caja alrededor del bounding box del círculo entero. El color solo (azul foco sobre --k-aging-3, rojo, es ~1.03:1 de contraste: indistinguible) no puede ser el único portador — se engrosa el trazo también, para que el foco se note por FORMA sin importar el tono. */ .k-donut a:focus-visible { outline: none; } .k-donut a:focus-visible .k-donut__arco { stroke: var(--k-focus); stroke-width: 18; opacity: 1; } @keyframes k-donut-draw { from { stroke-dasharray: 0 339.292; } to { stroke-dasharray: var(--k-len) 339.292; } } .k-donut__centro { position: absolute; top: 0; left: 0; right: 0; height: 200px; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; /* el clic tiene que llegar a las rebanadas */ } .k-donut__n { font-family: var(--k-font-mono); font-size: 40px; line-height: 1; } .k-donut__pie { font-size: 11px; color: var(--k-text-secondary); margin-top: 4px; } .k-donut__leyenda { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12px; } .k-donut__leyenda li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--k-text-secondary); } .k-donut__leyenda li.is-activo { color: var(--k-text); font-weight: 600; } .k-donut__cuenta { margin-left: auto; font-family: var(--k-font-mono); color: var(--k-text); } .k-donut__punto { width: 8px; height: 8px; flex: none; } /* cuadrado: Carbon no redondea */ .k-donut__punto--1 { background: var(--k-aging-1); } .k-donut__punto--2 { background: var(--k-aging-2); } .k-donut__punto--3 { background: var(--k-aging-3); } .k-donut__punto--4 { background: var(--k-aging-4); } @media (prefers-reduced-motion: reduce) { .k-donut__arco { animation: none; } } /* ── Bandeja en dos columnas ── */ /* El espacio vacío a la derecha y las filas de 1,200px para un nombre eran el mismo defecto visto por sus dos lados. El donut ocupa uno y acorta el otro. */ .k-bandeja { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 24px; } .k-bandeja__donut { flex: none; width: 280px; padding: 16px; } .k-bandeja__lista { flex: 1; min-width: 0; } /* min-width:0 o los nombres largos desbordan el flex */ .k-chip-filtro { display: inline-flex; align-items: center; gap: 6px; background: var(--k-text); color: var(--k-text-inverse); padding: 4px 10px; font-size: 12px; margin-bottom: 8px; } .k-chip-filtro:hover { background: var(--k-text-secondary); text-decoration: none; } @media (max-width: 900px) { /* El donut arriba, entero: con el menú móvil recién puesto (#25) esta pantalla ya se usa de verdad. */ .k-bandeja { flex-direction: column; } .k-bandeja__donut { width: 100%; } } /* ── Reinicio de datos de demo (superadmin) ── */ /* La pantalla más destructiva de la aplicación. El rojo no es decoración: es la única señal de que lo que sigue no se puede deshacer. */ .k-reset__aviso { border-left: 3px solid var(--k-danger); background: #fff1f1; padding: 16px 20px; margin-bottom: 24px; max-width: 720px; } .k-reset__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--k-border); border: 1px solid var(--k-border); margin-bottom: 24px; } .k-reset__col { background: var(--k-layer); padding: 20px 24px; } .k-reset__col h2 { font-size: 14px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; } .k-reset__col--borra h2 { color: var(--k-danger); } .k-reset__col--conserva h2 { color: #0e6027; } .k-reset__col ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--k-text-secondary); } /* La cadena que hay que transcribir. Vive dentro del