/* Datos · identidad por sección (T11). Todo queda acotado a #dataView; se carga después de data-v2.css. Cada sección define su color en #dataView[data-section] y lo reutilizan menú, franja, selector móvil y botones. */ #dataView { --data-accent: #5b50e8; --data-accent-deep: #272079; --data-accent-ink: #4338ca; } #dataView[data-section="collections"] { --data-accent: #0e9f6e; --data-accent-deep: #064e3b; --data-accent-ink: #047857; } #dataView[data-section="debtors"] { --data-accent: #db2777; --data-accent-deep: #6b1238; --data-accent-ink: #be185d; } #dataView[data-section="expenses"] { --data-accent: #e0443e; --data-accent-deep: #7a1717; --data-accent-ink: #b91c1c; } #dataView[data-section="coverage"] { --data-accent: #0d9488; --data-accent-deep: #0b3d43; --data-accent-ink: #0f766e; } #dataView[data-section="payables"] { --data-accent: #2563eb; --data-accent-deep: #132f6b; --data-accent-ink: #1d4ed8; } /* Los diálogos de Pagos viven fuera de Datos porque también se abren desde Caja (T14): llevan el azul de Pagos. */ #payablesDialogs { --data-accent: #2563eb; --data-accent-deep: #132f6b; --data-accent-ink: #1d4ed8; } #dataView[data-section="budgets"] { --data-accent: #7c3aed; --data-accent-deep: #3b1a7a; --data-accent-ink: #6d28d9; } #dataView[data-section="reminders"] { --data-accent: #00c853; --data-accent-deep: #04522b; --data-accent-ink: #00843c; } #dataView[data-section="activity"] { --data-accent: #0284c7; --data-accent-deep: #0c3a5c; --data-accent-ink: #0369a1; } /* Color propio de cada botón del menú y del selector móvil, aunque no esté activo. */ #dataView [data-data-view="overview"], #dataView [data-data-sheet-view="overview"] { --data-tone: #5b50e8; --data-tone-ink: #4338ca; } #dataView [data-data-view="collections"], #dataView [data-data-sheet-view="collections"] { --data-tone: #0e9f6e; --data-tone-ink: #047857; } #dataView [data-data-view="debtors"], #dataView [data-data-sheet-view="debtors"] { --data-tone: #db2777; --data-tone-ink: #be185d; } #dataView [data-data-view="expenses"], #dataView [data-data-sheet-view="expenses"] { --data-tone: #e0443e; --data-tone-ink: #b91c1c; } #dataView [data-data-view="coverage"], #dataView [data-data-sheet-view="coverage"] { --data-tone: #0d9488; --data-tone-ink: #0f766e; } #dataView [data-data-view="payables"], #dataView [data-data-sheet-view="payables"] { --data-tone: #2563eb; --data-tone-ink: #1d4ed8; } #dataView [data-data-view="budgets"], #dataView [data-data-sheet-view="budgets"] { --data-tone: #7c3aed; --data-tone-ink: #6d28d9; } #dataView [data-data-view="reminders"], #dataView [data-data-sheet-view="reminders"] { --data-tone: #00c853; --data-tone-ink: #00843c; } #dataView [data-data-view="activity"], #dataView [data-data-sheet-view="activity"] { --data-tone: #0284c7; --data-tone-ink: #0369a1; } /* Menú lateral */ #dataView .data-sidebar > header { background: linear-gradient(120deg, var(--data-accent-deep), var(--data-accent)); transition: background .35s ease; } #dataView .data-sidebar nav button > span { color: var(--data-tone, #5e5bd6); background: color-mix(in srgb, var(--data-tone, #5e5bd6) 11%, #fff); transition: background .2s ease, color .2s ease; } #dataView .data-sidebar nav button:hover { background: color-mix(in srgb, var(--data-tone, #5e5bd6) 6%, #fff); } #dataView .data-sidebar nav button.is-active { color: var(--data-tone-ink); background: color-mix(in srgb, var(--data-tone) 10%, #fff); box-shadow: inset 4px 0 var(--data-tone); } #dataView .data-sidebar nav button.is-active > span { color: #fff; background: var(--data-tone); box-shadow: 0 8px 18px color-mix(in srgb, var(--data-tone) 30%, transparent); } #dataView .data-sidebar nav button.is-active small { color: var(--data-tone-ink); } /* Franja de entrada de cada sección */ #dataView .data-section-hero { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px 18px; align-items: center; overflow: hidden; margin-bottom: 14px; padding: 20px 24px; border-radius: 22px; color: #fff; background: linear-gradient(115deg, var(--data-accent-deep), var(--data-accent)); box-shadow: 0 14px 32px color-mix(in srgb, var(--data-accent) 22%, transparent); animation: data-hero-in .35s ease; } #dataView .data-section-hero[hidden] { display: none; } #dataView .data-section-hero__art { position: absolute; top: 6%; right: 26%; height: 88%; width: auto; aspect-ratio: 320 / 200; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .17; pointer-events: none; } #dataView .data-section-hero > :not(.data-section-hero__art) { position: relative; z-index: 1; } #dataView .data-section-hero__icon { display: grid; width: 50px; height: 50px; place-items: center; align-self: start; border: 1px solid rgba(255,255,255,.26); border-radius: 15px; background: rgba(255,255,255,.16); } #dataView .data-section-hero__icon .app-icon { width: 25px; height: 25px; } #dataView .data-section-hero__text { min-width: 0; } #dataView .data-section-hero__text > span { display: block; color: rgba(255,255,255,.8); font-size: 12px; font-weight: 900; letter-spacing: .12em; } #dataView .data-section-hero__text h2 { margin: 2px 0 0; color: #fff; font-size: clamp(20px, 2vw, 24px); letter-spacing: -.02em; } #dataView .data-section-hero__text p { max-width: 640px; margin: 6px 0 0; color: rgba(255,255,255,.88); font-size: 13.5px; line-height: 1.4; } #dataView .data-section-hero__signal { margin-top: 12px; } #dataView .data-section-hero__signal strong { display: block; color: #fff; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; } #dataView .data-section-hero__signal p { margin-top: 2px; } #dataView .data-section-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-self: end; max-width: 440px; } #dataView .data-section-hero__actions button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.38); border-radius: 12px; color: #fff; background: rgba(255,255,255,.12); font-size: 13px; font-weight: 850; white-space: nowrap; box-shadow: none; } #dataView .data-section-hero__actions button:first-child { border-color: #fff; color: var(--data-accent-deep); background: #fff; box-shadow: 0 8px 18px rgba(7,17,40,.16); } #dataView .data-section-hero__actions button:hover { transform: translateY(-1px); } #dataView .data-section-hero__actions .app-icon { width: 16px; height: 16px; } @keyframes data-hero-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Período: una sola franja compacta */ #dataView .data-period-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; padding: 10px 14px; } #dataView .data-presets button.is-active { color: var(--data-accent-deep); background: #fff; box-shadow: 0 2px 8px rgba(20,30,70,.1); } #dataView .data-filters { align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; } #dataView .data-filters > label { min-width: 0; } #dataView .data-filters > label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #dataView .data-custom-dates { flex-wrap: wrap; } #dataView .data-custom-dates label > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; } #dataView .data-custom-dates button, #dataView #dataApplyDates { background: var(--data-accent-ink); } #dataView .data-period-panel > p { flex: 1 1 auto; justify-content: flex-end; margin: 0; padding: 0; border: 0; color: #5b6580; font-size: 13px; font-weight: 700; text-transform: none; } #dataView .data-period-panel > p .app-icon { color: var(--data-accent); } #dataView .data-period-panel > p strong { color: #29334d; } #dataView .data-period-panel > p span { margin-left: 4px; color: #5b6580; } #dataView .data-period-panel > p span::before { content: "· "; } #dataView .data-period-summary { display: none; } /* Franja con acciones y gráfico a la vez: el botón arriba y las barras abajo */ #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__actions { grid-column: 3; grid-row: 1; align-self: start; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__visual { grid-column: 3; grid-row: 2; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__text { grid-column: 2; grid-row: 1 / 3; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__icon { grid-column: 1; grid-row: 1 / 3; } #dataView .data-hero-split.is-expenses .is-second { background: #fecaca; } #dataView .data-hero-split .is-third { background: rgba(255,255,255,.4); } #dataView .data-hero-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12.5px; } #dataView .data-hero-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; } #dataView .data-hero-legend .is-main { background: #fff; } #dataView .data-hero-legend .is-second { background: #fecaca; } #dataView .data-hero-legend .is-third { background: rgba(255,255,255,.45); } #dataView .data-hero-legend b { color: #fff; } /* Listas: estado vacío con forma, y paginación legible */ #dataView .data-empty-state.data-inline-empty { display: grid; justify-items: center; gap: 6px; margin: 16px 20px; padding: 26px 20px; border: 1.5px dashed #d5dbe8; border-radius: 18px; background: #fafbfe; text-align: center; } #dataView .data-empty-state strong { color: #18233f; font-size: 16px; } #dataView .data-empty-state p { max-width: 460px; margin: 0; color: #4a5470; font-size: 14px; line-height: 1.45; } #dataView .data-empty-state button { min-height: 44px; margin-top: 8px; padding: 9px 18px; border: 0; border-radius: 12px; color: #fff; background: var(--data-accent-ink); font-size: 14px; font-weight: 850; } #dataView .data-inline-empty:not(.data-empty-state) { color: #4a5470; font-size: 14px; } #dataView [class$="-pagination"] { gap: 12px; } #dataView [class$="-pagination"] p { color: #4a5470; font-size: 14px; } #dataView [class$="-pagination"] button { min-height: 42px; padding: 9px 16px; font-size: 14px; } #dataView [class$="-pagination"] button:disabled { opacity: .55; } /* Botones de las listas (Imprimir, Exportar) en el color de la sección */ #dataView .data-table-card > header button { color: var(--data-accent-ink); font-size: 14px; } #dataView .data-table-card > header button:last-child { border-color: var(--data-accent-ink); color: #fff; background: var(--data-accent-ink); box-shadow: 0 6px 16px color-mix(in srgb, var(--data-accent) 25%, transparent); } #dataView .data-table-card > header button:disabled { border-color: #d8dde8; color: #8a93a6; background: #f3f5f9; box-shadow: none; } /* Gastos y caja */ #dataView #dataExpenses .data-expense-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); } #dataView #dataExpenses .data-expense-kpis article.is-total { display: none; } #dataView #dataExpenses .data-expense-kpis article { min-height: 0; border-top: 4px solid #e0443e; } #dataView #dataExpenses .data-expense-kpis article > span { background: #e0443e; } #dataView #dataExpenses .data-expense-kpis article.is-digital { border-top-color: #be123c; } #dataView #dataExpenses .data-expense-kpis article.is-digital > span { background: #be123c; } #dataView #dataExpenses .data-expense-kpis article.is-legacy { border-top-color: #94a3b8; } #dataView #dataExpenses .data-expense-kpis article.is-legacy > span { color: #475569; background: #e8edf4; } #dataView #dataExpenses .data-expense-kpis b { color: #5b6580; font-size: 13px; } #dataView #dataExpenses .data-expense-filters { grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(0, 1fr)); } #dataView #dataExpenses .data-expense-filters label > span { color: #4a5470; font-size: 13px; } #dataView #dataExpenses .data-expense-filter-actions button { min-height: 44px; font-size: 14px; } #dataView #dataExpenses .data-expense-filter-actions button:first-child { border-color: #e0443e; background: #e0443e; } #dataView #dataExpenses .data-expense-row { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 14px; align-items: center; padding: 0 18px; } #dataView #dataExpenses .data-expense-main { grid-template-columns: 58px minmax(0,1.3fr) minmax(0,1fr) minmax(120px,auto); gap: 16px; min-height: 0; padding: 12px 0; } #dataView #dataExpenses .data-expense-actions { grid-column: 2; padding: 0; } #dataView #dataExpenses .data-expense-details { grid-column: 1 / -1; } #dataView #dataExpenses .data-expense-details summary { color: #b91c1c; font-size: 13px; } #dataView #dataExpenses .data-expense-identity strong { font-size: 15px; } #dataView #dataExpenses .data-expense-identity span { color: #5b6580; font-size: 13px; } #dataView #dataExpenses .data-expense-identity .data-expense-hour { margin-top: 2px; color: #8790a1; font-size: 12px; } #dataView #dataExpenses .data-expense-amount { color: #b91c1c; font-size: 18px; white-space: nowrap; } #dataView #dataExpenses .data-expense-row.is-voided .data-expense-amount { color: #8a93a6; } #dataView #dataExpenses .data-expense-main .data-day-chip strong { display: block; color: var(--data-accent-deep); font-size: 19px; } #dataView #dataExpenses .data-expense-main .data-day-chip span { display: block; margin-top: 1px; color: var(--data-accent-deep); font-size: 12px; font-weight: 800; } #dataView #dataExpenses .data-daily-card > header p { color: #b91c1c; } /* Coberturas: contadores que filtran, guía en pasos, orden en el encabezado y acciones al pie */ #dataView .data-coverage-worklist__stages { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; } #dataView .data-coverage-worklist__stages button { position: relative; display: grid; gap: 4px; min-width: 0; padding: 14px 16px; border: 1.5px solid #e2e7f0; border-radius: 16px; color: inherit; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } #dataView .data-coverage-worklist__stages button:hover { border-color: color-mix(in srgb, #0d9488 45%, #fff); } #dataView .data-coverage-worklist__stages button[aria-pressed="true"] { border-color: #0d9488; background: #f0fbf9; box-shadow: 0 0 0 3px rgba(13,148,136,.16); } #dataView .data-coverage-worklist__stages button[aria-pressed="true"] small { color: #0b3d43; } #dataView .data-coverage-worklist__stages button.is-issue { border-style: dashed; } #dataView .data-coverage-worklist__stages button.is-issue strong { color: #be123c; } #dataView .data-coverage-worklist__stages button.is-issue[aria-pressed="true"] { border-color: #e11d48; background: #fff1f4; box-shadow: 0 0 0 3px rgba(225,29,72,.14); } #dataView .data-coverage-worklist__stages button:focus-visible { outline: 3px solid rgba(13,148,136,.35); outline-offset: 2px; } #dataView .data-coverage-worklist__stages strong { font-size: 28px; } #dataView .data-coverage-worklist__filters button[type="submit"] { background: #0d9488; } #dataView .data-coverage-worklist__guide { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 14px 0 0; padding: 10px 14px; border-radius: 14px; color: #0b3d43; background: #f0fbf9; font-size: 13.5px; font-weight: 750; list-style: none; } #dataView .data-coverage-worklist__guide[hidden] { display: none; } #dataView .data-coverage-worklist__guide li { display: inline-flex; align-items: center; gap: 7px; } #dataView .data-coverage-worklist__guide li + li::before { margin-right: 5px; color: #0d9488; content: "→"; } #dataView .data-coverage-worklist__guide b { display: inline-grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: #fff; background: #0d9488; font-size: 12px; } #dataView .data-coverage-worklist__listhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; padding: 12px 4px; border-bottom: 1px solid #e4e8f1; } #dataView .data-coverage-worklist__listhead > div:not(.data-coverage-worklist__order) { flex: 1 1 220px; min-width: 0; } #dataView .data-coverage-worklist__listhead h3 { margin: 0; color: #18233f; font-size: 17px; } #dataView .data-coverage-worklist__listhead p { margin: 2px 0 0; color: #5b6580; font-size: 13px; } #dataView .data-coverage-worklist__all { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; color: #5b6580; font-size: 12px; font-weight: 800; cursor: pointer; } #dataView .data-coverage-worklist__all input { appearance: none; -webkit-appearance: none; display: inline-grid; width: 22px; height: 22px; place-content: center; margin: 0; border: 1.5px solid #aeb9ce; border-radius: 7px; background: #fff; cursor: pointer; } #dataView .data-coverage-worklist__all input:checked { border-color: #0d9488; background: #0d9488; } #dataView .data-coverage-worklist__all input:checked::after { width: 6px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; content: ""; transform: rotate(45deg); } #dataView .data-coverage-worklist__all input:focus-visible { outline: 3px solid rgba(13,148,136,.3); outline-offset: 2px; } #dataView .data-coverage-worklist__listhead .data-coverage-worklist__order { margin: 0; } #dataView .data-coverage-worklist__items { max-height: none; overflow: visible; margin-top: 10px; } #dataView .data-coverage-worklist__item input[type="checkbox"]:checked { border-color: #0d9488; background: #0d9488; box-shadow: 0 3px 8px rgba(13,148,136,.25); } #dataView .data-coverage-worklist__item:has(input[type="checkbox"]:checked) { border-color: #5eb8ae; background: #f3fbfa; box-shadow: 0 0 0 2px rgba(13,148,136,.1); } #dataView .data-coverage-worklist__item small:empty { display: none; } /* overflow: clip recorta las esquinas sin crear un contenedor de desplazamiento, así la barra de acciones queda fija al pie. */ #dataView #dataCoverage { overflow: clip; } #dataView .data-coverage-worklist__toolbar { position: sticky; bottom: 34px; z-index: 5; margin: 12px 0; padding: 10px 12px; border-radius: 16px; color: #fff; background: #0b3d43; box-shadow: 0 12px 30px rgba(10,40,45,.28); animation: data-hero-in .2s ease; } #dataView .data-coverage-worklist__toolbar[hidden] { display: none; } #dataView[data-section="coverage"]:has(.data-coverage-worklist__toolbar:not([hidden])) .data-to-top { display: none; } #dataView .data-coverage-worklist__toolbar span { color: #fff; font-size: 14px; font-weight: 800; } #dataView .data-coverage-worklist__toolbar button { min-height: 44px; border: 1px solid #fff; color: #0b3d43; background: #fff; font-size: 14px; } #dataView .data-coverage-worklist__toolbar button:disabled { display: none; } #dataView .data-coverage-worklist__toolbar #coverageWorkExport { order: 1; border-color: rgba(255,255,255,.4); color: #fff; background: transparent; } #dataView .data-coverage-worklist__toolbar #coverageWorkWriteOff { order: 2; border-color: rgba(255,255,255,.4); color: #fff; background: transparent; } #dataView .data-coverage-worklist__toolbar #coverageWorkPresent, #dataView .data-coverage-worklist__toolbar #coverageWorkPay, #dataView .data-coverage-worklist__toolbar #coverageWorkResubmit { order: 3; } /* Por debajo de 1200 px el diálogo se lee de arriba abajo con un único desplazamiento y los totales fijos al pie. */ @media (max-width: 1199px) { #dataView .data-coverage-batch-dialog.is-payment .data-coverage-batch-lines__list { max-height: none; overflow: visible; } #dataView .data-coverage-batch-dialog.is-payment .data-coverage-batch-lines__totals { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 18px rgba(20,30,70,.08); } } #dataView .data-coverage-batch-dialog header small { color: #0f766e; } #dataView .data-coverage-batch-dialog #coverageWorkBatchSubmit { border-color: #0d9488; background: #0d9488; } /* Lista de Coberturas compacta, como en la propuesta: filas con separador, paciente en negrita */ #dataView .data-coverage-worklist__items { gap: 0; } #dataView .data-coverage-worklist__items > .data-coverage-worklist__item { padding: 11px 6px; border: 0; border-bottom: 1px solid #eef1f6; border-radius: 0; box-shadow: none; } #dataView .data-coverage-worklist__items > .data-coverage-worklist__item:hover { background: #fafcfd; box-shadow: none; } #dataView .data-coverage-worklist__items > .data-coverage-worklist__item:has(input:checked) { background: #f0fbf9; box-shadow: none; } #dataView .data-coverage-worklist__item strong { color: #18233f; font-size: 14.5px; } #dataView .data-coverage-worklist__item > div:nth-of-type(1) p { margin: 2px 0 0; color: #5b6580; font-size: 13px; } #dataView .data-coverage-worklist__item > div:last-child { text-align: right; } #dataView .data-coverage-worklist__item > div:last-child small { color: #8a93a6; font-size: 12px; } #dataView .data-coverage-worklist__item > div:last-child b { display: block; color: #0b3d43; font-size: 16px; } #dataView .data-coverage-worklist__order .smart-select:has(#coverageWorkSort), #dataView #coverageWorkSort { display: none !important; } #dataView .data-coverage-worklist__order { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; } #dataView #coverageWorkSearch { min-height: 40px; width: 200px; max-width: 100%; padding: 7px 12px; border: 1px solid #d5dce8; border-radius: 11px; font: inherit; font-size: 14px; } #dataView .data-coverage-sortbar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: #f1f4f8; } #dataView .data-coverage-sortbar > span { padding: 0 6px; color: #5b6580; font-size: 13px; font-weight: 800; } #dataView .data-coverage-sortbar button { display: inline-flex; min-height: 36px; align-items: center; gap: 4px; padding: 6px 11px; border: 0; border-radius: 9px; color: #4a5470; background: transparent; font-size: 13px; font-weight: 800; } #dataView .data-coverage-sortbar button[aria-pressed="true"] { color: #0b3d43; background: #fff; box-shadow: 0 2px 6px rgba(20,30,70,.1); } #dataView .data-coverage-sortbar button[data-direction="desc"]::after { content: "↓"; color: #0d9488; } #dataView .data-coverage-sortbar button[data-direction="asc"]::after { content: "↑"; color: #0d9488; } /* Diálogo de pago con muchas atenciones: en computadora, la lista a la izquierda con un único desplazamiento y el importe y los totales fijos a la derecha */ @media (min-width: 1200px) { #dataView .data-coverage-batch-dialog.is-payment { width: min(1180px, calc(100vw - 48px)); max-width: none; max-height: calc(100vh - 48px); overflow: hidden; } #dataView .data-coverage-batch-dialog.is-payment form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto minmax(0, 1fr) auto auto; max-height: calc(100vh - 48px); } #dataView .data-coverage-batch-dialog.is-payment form > header { grid-column: 1 / -1; } #dataView .data-coverage-batch-dialog.is-payment #coverageWorkBatchSummary { grid-column: 1 / -1; margin-bottom: 4px; } #dataView .data-coverage-batch-dialog.is-payment .coverage-form-grid { grid-column: 2; grid-row: 3; align-content: start; grid-template-columns: 1fr; margin: 0 20px 0 0; padding: 0; } #dataView .data-coverage-batch-dialog.is-payment .data-coverage-batch-lines { display: flex; flex-direction: column; grid-column: 1; grid-row: 3 / 6; min-height: 0; margin-bottom: 18px; } #dataView .data-coverage-batch-dialog.is-payment .data-coverage-batch-lines__list { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; } #dataView .data-coverage-batch-dialog.is-payment #coverageWorkBatchNote { grid-column: 2; grid-row: 4; margin: 12px 20px 0 0; } #dataView .data-coverage-batch-dialog.is-payment form > footer { grid-column: 2; grid-row: 5; align-self: end; margin: 0 20px 18px 0; padding: 0; border: 0; } } /* Pagos: tarjetas sin numeración, en el azul de la sección */ /* Pagos: estados que se entienden por color y botones en el azul de la sección */ #dataView #dataPayables .payables-row > em { font-size: 12px; } #dataView #dataPayables .payables-row.is-overdue > em { color: #be123c; background: #fff1f4; } #dataView #dataPayables .payables-row.is-paid > em { color: #047857; background: #ecfdf5; } #dataView #dataPayables .payables-row.is-open:not(.is-overdue) > em, #dataView #dataPayables .payables-row.is-partially_paid:not(.is-overdue) > em { color: #1d4ed8; background: #eff5ff; } #dataView #dataPayables .payables-row.is-overdue p b { color: #be123c; } #dataView #dataPayables .data-legacy-payment-filters button[type="submit"] { border-color: #2563eb; background: #2563eb; } /* Pagos como en la propuesta: tarjetas separadas con su borde de color, recorrido conectado y paneles con presencia */ #dataView .data-panel-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 12px; color: #fff; background: #2563eb; } #dataView .is-pending .data-panel-icon { background: #7c3aed; } #dataView .data-panel-icon .app-icon { width: 20px; height: 20px; } #dataView #dataPayables .data-payable-row { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; } #dataView #dataPayables .data-payable-row > div > strong { display: block; color: #18233f; font-size: 14.5px; white-space: normal; } #dataView #dataPayables .data-payable-row .data-day-chip { width: 54px; color: #132f6b; background: #eaf1fe; } #dataView #dataPayables .data-payable-row.is-overdue .data-day-chip { color: #9f1239; background: #fff1f4; } #dataView #dataPayables .data-payable-row .data-day-chip strong { display: block; font-size: 18px; } #dataView #dataPayables .data-payable-row .data-day-chip span { display: block; font-size: 12px; font-weight: 800; } #dataView #dataPayables .data-payable-row .data-row-meta { justify-content: flex-start; margin-top: 4px; } #dataView #dataPayables .data-payable-row .data-row-text { color: #5b6580; font-size: 13px; } #dataView .data-payable-amount { color: #132f6b; font-size: 16px; white-space: nowrap; } #dataView .is-overdue .data-payable-amount { color: #be123c; } #dataView .data-row-tag.is-overdue { color: #be123c; background: #fff1f4; } #dataView .data-row-tag.is-open { color: #1d4ed8; background: #eff5ff; } /* Nueva cuenta a pagar: dos pasos, atajos de vencimiento, lo opcional plegado y una vista previa */ :is(#dataView, #payablesDialogs) .data-bill-dialog { width: min(980px, calc(100vw - 28px)); } :is(#dataView, #payablesDialogs) .data-bill-dialog header small { color: #1d4ed8; font-size: 12px; } :is(#dataView, #payablesDialogs) .data-bill-dialog header h2 { font-size: 21px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__form { min-width: 0; padding: 4px 0 12px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__form > section { padding: 10px 0; border-bottom: 1px solid #eef1f6; } :is(#dataView, #payablesDialogs) .data-bill-dialog__form h3 { display: flex; align-items: center; gap: 9px; margin: 8px 22px 0; color: #18233f; font-size: 16px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__form h3 b { display: inline-grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #fff; background: #2563eb; font-size: 13px; } :is(#dataView, #payablesDialogs) .data-bill-dialog .coverage-form-grid label > span { color: #4a5470; font-size: 13px; font-weight: 800; } :is(#dataView, #payablesDialogs) .data-bill-dialog .coverage-form-grid input, :is(#dataView, #payablesDialogs) .data-bill-dialog .coverage-form-grid select, :is(#dataView, #payablesDialogs) .data-bill-dialog .coverage-form-grid textarea { min-height: 44px; font-size: 14px; } :is(#dataView, #payablesDialogs) .data-bill-dialog .coverage-form-grid .is-amount input { font-size: 17px; font-weight: 800; } :is(#dataView, #payablesDialogs) .data-bill-dialog__label { margin: 4px 22px 6px; color: #4a5470; font-size: 13px; font-weight: 800; } :is(#dataView, #payablesDialogs) .data-bill-dialog__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 22px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__chips button { min-height: 42px; padding: 8px 14px; border: 1.5px solid #e2e7f0; border-radius: 12px; color: #29334d; background: #fff; font-size: 14px; font-weight: 800; } :is(#dataView, #payablesDialogs) .data-bill-dialog__chips button[aria-pressed="true"] { border-color: #2563eb; color: #132f6b; background: #eff5ff; } :is(#dataView, #payablesDialogs) .data-bill-dialog__more { margin: 10px 22px 0; } :is(#dataView, #payablesDialogs) .data-bill-dialog__more summary { min-height: 40px; padding: 8px 0; color: #1d4ed8; font-size: 14px; font-weight: 850; cursor: pointer; } :is(#dataView, #payablesDialogs) .data-bill-dialog__more .coverage-form-grid { padding-left: 0; padding-right: 0; } :is(#dataView, #payablesDialogs) .data-bill-dialog__preview { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-left: 1px solid #e4e8f1; background: #f8fafc; } :is(#dataView, #payablesDialogs) .data-bill-dialog__preview > small { color: #5b6580; font-size: 12px; font-weight: 850; letter-spacing: .1em; } :is(#dataView, #payablesDialogs) .data-bill-dialog__card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 6px 18px rgba(30,40,90,.08); } :is(#dataView, #payablesDialogs) .data-bill-dialog__card .data-day-chip { width: 54px; color: #132f6b; background: #eaf1fe; } :is(#dataView, #payablesDialogs) .data-bill-dialog__card .data-day-chip strong { display: block; font-size: 18px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__card .data-day-chip span { display: block; font-size: 12px; font-weight: 800; } :is(#dataView, #payablesDialogs) .data-bill-dialog__card b { display: block; color: #18233f; font-size: 14px; overflow-wrap: anywhere; } :is(#dataView, #payablesDialogs) .data-bill-dialog__card p { margin: 2px 0 0; color: #5b6580; font-size: 13px; overflow-wrap: anywhere; } :is(#dataView, #payablesDialogs) .data-bill-dialog__card > strong { grid-column: 1 / -1; color: #132f6b; font-size: 19px; text-align: right; white-space: nowrap; } :is(#dataView, #payablesDialogs) .data-bill-dialog__preview .coverage-dialog-note { margin: 0; color: #29334d; background: #eef4ff; font-size: 13px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__preview footer { display: flex; flex-direction: column-reverse; gap: 8px; margin-top: auto; padding: 0; border: 0; } :is(#dataView, #payablesDialogs) .data-bill-dialog__preview footer button { min-height: 46px; font-size: 14px; } :is(#dataView, #payablesDialogs) .data-bill-dialog__preview footer button[type="submit"] { border-color: #2563eb; color: #fff; background: #2563eb; } /* Recordatorios: un listado por canal con el color de cada canal; el resumen ya está en la franja */ #dataView .data-section-hero .data-reminder-channels--hero { display: inline-flex; margin-top: 12px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.14); } #dataView .data-section-hero .data-reminder-channels--hero button { display: inline-flex; color: var(--data-channel-ink); background: transparent; border: 0; box-shadow: none; } #dataView .data-section-hero .data-reminder-channels--hero button[aria-pressed="true"] { color: #fff; background: var(--data-channel); } #dataView .data-reminder-channels--hero button { min-height: 42px; padding: 8px 15px; font-size: 14px; } #dataView #dataReminders .data-reminder-summary article > span.is-channel { color: var(--data-channel-ink); background: color-mix(in srgb, var(--data-channel) 12%, #fff); } #dataView #dataReminders .data-reminder-summary article[data-channel] small { color: var(--data-channel-ink); } #dataView #dataReminders .data-reminder-summary article.is-delivered > span { color: #047857; background: #ecfdf5; } #dataView #dataReminders .data-reminder-history > header h3 .data-channel-name { display: inline; margin: 0; font-size: inherit; } #dataView #dataReminders .data-reminder-summary article.is-attention > span { color: #be123c; background: #fff1f4; } #dataView #dataReminders .data-reminder-summary small { color: #4a5470; } #dataView #dataReminders .data-reminder-summary b { color: #5b6580; font-size: 13px; } #dataView #dataReminders .data-reminder-history > header p { color: #00843c; } #dataView #dataReminders .data-reminder-history > header span { color: #4a5470; font-size: 14px; } #dataView #dataReminders .data-reminder-history > header button { background: #00843c; } #dataView #dataReminders .data-reminder-filters { grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(0, 1fr)) auto; } #dataView #dataReminders .data-reminder-filters label > span { color: #4a5470; font-size: 13px; } #dataView #dataReminders .data-reminder-filters button { min-height: 44px; padding: 8px 14px; font-size: 14px; } #dataView #dataReminders .data-reminder-filters button[type="submit"] { border-color: #00843c; background: #00843c; } #dataView #dataReminders .data-reminder-main { grid-template-columns: 44px minmax(0, 1fr) auto minmax(110px, auto); } #dataView #dataReminders .data-reminder-channel { color: #128a43; background: #e3f7ec; } #dataView #dataReminders .data-reminder-channel.is-email { color: #1d4ed8; background: #eaf1fe; } #dataView #dataReminders .data-reminder-state.is-failed, #dataView #dataReminders .data-reminder-state.is-not-delivered, #dataView #dataReminders .data-reminder-state.is-no-balance { color: #be123c; background: #fff1f4; } #dataView #dataReminders .data-reminder-row summary { color: #00843c; font-size: 13px; } /* Actividad: anillo general, un anillo por profesional y la duración de las consultas en columnas */ #dataView #dataActivity .data-activity-overview { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 6px 24px 18px; } #dataView #dataActivity .data-activity-ring { width: 150px; height: 150px; margin: 0; } #dataView #dataActivity .data-activity-ring::before { width: 108px; height: 108px; } #dataView #dataActivity .data-activity-totals { padding: 0; } #dataView #dataActivity .data-activity-totals strong { color: #0c3a5c; } @media (min-width: 1000px) { #dataView #dataFoldAttendanceBody:not([hidden]) { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); align-items: center; } #dataView #dataFoldAttendanceBody > .data-professional-list, #dataView #dataFoldAttendanceBody > .data-activity-months { grid-column: 1 / -1; } #dataView #dataActivity .data-activity-overview { flex-direction: column; text-align: center; } #dataView #dataActivity .data-activity-bars { padding-top: 6px; } } #dataView #dataActivity > header p, #dataView #dataConsultationDurations > header p { color: #0369a1; } #dataView #dataActivity .data-activity-bars > div:nth-child(1) > i > b { background: #2daf80; } #dataView #dataActivity .data-activity-bars > div:nth-child(2) > i > b { background: #4f78cf; } #dataView #dataActivity .data-activity-bars > div:nth-child(3) > i > b { background: #e87668; } #dataView #dataActivity .data-activity-bars > div:nth-child(4) > i > b { background: #b8c0cf; } #dataView #dataActivity .data-activity-bars p { color: #4a5470; font-size: 14px; } #dataView #dataActivity .data-activity-months { margin: 4px 24px 18px; padding-top: 16px; border-top: 1px solid #e4e8f1; } #dataView #dataActivity .data-activity-months[hidden] { display: none; } #dataView #dataActivity .data-activity-months > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 0; } #dataView #dataActivity .data-activity-months h3 { margin: 0; color: #18233f; font-size: 16px; } #dataView #dataActivity .data-activity-months > header p { margin: 3px 0 0; color: #5b6580; font-size: 13px; font-weight: 500; letter-spacing: 0; } #dataView #dataActivity .data-activity-months .data-professional-legend .is-other { background: #c7cdd9; } #dataView .data-activity-months__chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(22px, 1fr)); gap: 8px; align-items: end; height: 230px; margin: 14px 0 0; padding: 0; list-style: none; } #dataView .data-activity-months__chart li { display: flex; height: 100%; min-width: 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; } #dataView .data-activity-months__column { display: flex; width: 100%; max-width: 40px; flex-direction: column; gap: 2px; overflow: hidden; border-radius: 8px 8px 3px 3px; } #dataView .data-activity-months__column i { display: block; min-height: 3px; } #dataView .data-activity-months__column .is-attended { background: #2daf80; } #dataView .data-activity-months__column .is-absent { background: #4f78cf; } #dataView .data-activity-months__column .is-cancelled { background: #e87668; } #dataView .data-activity-months__column .is-other { background: #c7cdd9; } #dataView .data-activity-months__chart b { color: #18233f; font-size: 12px; } #dataView .data-activity-months__chart small { color: #5b6580; font-size: 12px; white-space: nowrap; } #dataView #dataProfessionalList h3 { color: #18233f; font-size: 16px; } #dataView #dataProfessionalList .data-professional-chart { display: grid; } #dataView #dataConsultationDurations .data-duration-bands { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 10px; height: 230px; } #dataView #dataConsultationDurations .data-duration-bands:has(> .data-duration-empty) { display: block; height: auto; } /* Cada columna tiene tres filas fijas: valor, zona de barras y etiqueta (reserva dos líneas). Así las bases de todas las barras quedan a la misma altura aunque una etiqueta ocupe dos líneas. */ #dataView #dataConsultationDurations .data-duration-band { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 6px; justify-items: center; height: 100%; min-height: 0; text-align: center; } #dataView #dataConsultationDurations .data-duration-band b { color: #18233f; font-size: 14px; line-height: 1.2; } #dataView #dataConsultationDurations .data-duration-track { display: flex; width: 100%; max-width: 64px; height: 100%; min-height: 0; align-items: flex-end; overflow: visible; border-radius: 0; background: none; } #dataView #dataConsultationDurations .data-duration-track i { width: 100%; border-radius: 10px 10px 3px 3px; background: linear-gradient(#38bdf8, #0284c7); } #dataView #dataConsultationDurations .data-duration-band span { display: block; min-height: 2.5em; color: #4a5470; font-size: 12px; line-height: 1.25; } /* Etapas dentro de una franja (Presupuestos) */ #dataView .data-hero-pipe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 0; padding: 0; list-style: none; } #dataView .data-hero-pipe li { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 12px; background: rgba(255,255,255,.16); color: #fff; font-size: 13.5px; font-weight: 800; } #dataView .data-hero-pipe li + li::before { margin-right: 4px; color: rgba(255,255,255,.7); content: "→"; } #dataView .data-hero-pipe b { font-size: 18px; } #dataView .data-hero-pipe li.is-issue { background: rgba(255,255,255,.28); } /* Datos críticos siempre completos: importes de Caja sin cortar, nombres y textos de las filas que pasan de línea y desplegables que muestran todo su valor */ #dataView #dataExpenses .data-daily-list dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } #dataView #dataExpenses .data-daily-list dd { overflow: visible; text-overflow: clip; white-space: nowrap; } #dataView #dataCollections .data-collection-identity > strong, #dataView #dataCollections .data-collection-identity > span, #dataView #dataCollections .data-collection-identity > p, #dataView #dataExpenses .data-expense-identity strong, #dataView #dataExpenses .data-expense-identity span { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } :is(#dataView, #payablesDialogs) .smart-select-value { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.25; } /* Franjas como en la propuesta: número grande y dato o anillo a la derecha */ #dataView .data-section-hero { padding: 22px 26px; } #dataView .data-section-hero__signal strong { font-size: clamp(26px, 2.6vw, 32px); } #dataView .data-hero-side { display: flex; align-items: center; gap: 14px; color: #fff; text-align: left; } #dataView .data-hero-side strong { display: block; font-size: 24px; letter-spacing: -.02em; white-space: nowrap; } #dataView .data-hero-side small { display: block; max-width: 200px; color: rgba(255,255,255,.85); font-size: 13px; } #dataView .data-hero-ring { --p: 0; display: grid; flex: none; width: 84px; height: 84px; place-items: center; border-radius: 50%; background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.24) 0); transition: transform .2s ease; } #dataView .data-hero-ring span { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; color: #fff; background: var(--data-accent-deep); font-size: 17px; font-weight: 900; } #dataView .data-hero-ring:hover { transform: scale(1.06); } /* Interacción liviana (sólo transformaciones): barras y anillos responden al mouse */ #dataView #dataMonthly .data-monthly-bar { position: relative; } #dataView #dataMonthly .data-monthly-bar:hover i, #dataView #dataMonthly .data-monthly-bar:focus-visible i { transform: translateY(-4px) scaleX(1.08); box-shadow: 0 6px 14px color-mix(in srgb, var(--monthly-tone) 35%, transparent); } #dataView #dataMonthly .data-monthly-bar:hover::after, #dataView #dataMonthly .data-monthly-bar:focus-visible::after { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 3; padding: 7px 11px; border-radius: 10px; color: #fff; background: #18233f; box-shadow: 0 8px 20px rgba(20,30,70,.25); font-size: 14px; font-weight: 850; white-space: nowrap; content: attr(data-value); transform: translateX(-50%); pointer-events: none; } #dataView #dataMonthly .data-monthly-bars { padding-top: 34px; height: 174px; } #dataView #dataMonthly .data-monthly-readout { display: inline-block; margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; color: var(--monthly-tone); background: color-mix(in srgb, var(--monthly-tone) 10%, #fff); font-size: 14px; font-weight: 850; } #dataView .data-attendance-ring, #dataView .data-reminder-gauge, #dataView .data-professional-ring__chart, #dataView .data-donut { transition: transform .22s ease, filter .22s ease; } #dataView .data-attendance-ring:hover, #dataView .data-reminder-gauge:hover, #dataView .data-professional-ring__chart:hover, #dataView .data-donut:hover { transform: scale(1.05) translateY(-3px); filter: drop-shadow(0 10px 16px rgba(20,30,70,.18)); } #dataView .data-dashboard-attendance dl > div, #dataView .data-professional-ring dl > div, #dataView .data-activity-bars > div { border-radius: 8px; transition: background .15s ease, transform .15s ease; } #dataView .data-dashboard-attendance dl > div:hover, #dataView .data-professional-ring dl > div:hover, #dataView .data-activity-bars > div:hover { background: #f2f5fa; transform: translateX(3px); } #dataView .data-activity-months__column, #dataView .data-hero-bars i, #dataView .data-duration-track i, #dataView .data-kpi-spark i { transition: transform .18s ease; transform-origin: bottom; } #dataView .data-activity-months__chart li:hover .data-activity-months__column, #dataView .data-hero-bars i:hover, #dataView .data-duration-band:hover .data-duration-track i, #dataView .data-kpi-spark i:hover { transform: scaleY(1.06) translateY(-2px); } #dataView .data-activity-months__chart li { position: relative; } #dataView .data-activity-months__chart li:hover::after { position: absolute; bottom: calc(100% + 4px); left: 50%; z-index: 3; padding: 7px 11px; border-radius: 10px; color: #fff; background: #18233f; font-size: 13px; font-weight: 800; white-space: nowrap; content: attr(data-tip); font-style: normal; transform: translateX(-50%); pointer-events: none; } /* Dato de la barrita: discreto, arriba del grupo de barras y separado de ellas */ #dataView .data-hero-bars { position: relative; } #dataView .data-hero-bars i, #dataView .data-kpi-spark i { cursor: default; } #dataView .data-hero-bars[data-tip]::before, #dataView .data-kpi-spark[data-tip]::before { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 4; padding: 4px 9px; border-radius: 8px; color: #fff; background: rgba(15, 23, 42, .78); font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; content: attr(data-tip); pointer-events: none; } #dataView .data-hero-bars[data-tip]::before { right: calc(100% + 12px); bottom: 0; } @media (prefers-reduced-motion: reduce) { :is(#dataView, #payablesDialogs) *, #dataView *::after { transition: none !important; animation: none !important; } } /* Línea bajo el nombre: etiquetas de estado y medio, detalle y hora en gris */ #dataView .data-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin: 4px 0 0; color: #5b6580; font-size: 13px; } #dataView .data-row-tag { padding: 2px 8px; border-radius: 7px; font-size: 12px; font-weight: 800; white-space: nowrap; } #dataView .data-row-tag.is-ok { color: #047857; background: #ecfdf5; } #dataView .data-row-tag.is-wait { color: #6d28d9; background: #f3efff; } #dataView .data-row-tag.is-muted { color: #64748b; background: #f1f5f9; } #dataView .data-row-tag.is-info { color: #4338ca; background: #eef0ff; } #dataView .data-row-tag.is-method { color: #0f766e; background: #effaf8; } #dataView .data-row-tag.is-expense { color: #b91c1c; background: #fef2f2; } #dataView .data-row-text { overflow-wrap: anywhere; } #dataView .data-row-hour { color: #8a93a6; font-size: 12px; } #dataView .data-collection-labels[hidden], #dataView .data-expense-labels[hidden], #dataView .data-debtor-reason[hidden] { display: none; } #dataView #dataCollections .data-collection-main, #dataView #dataExpenses .data-expense-main { grid-template-columns: 58px minmax(0,1fr) auto !important; } #dataView #dataCollections .data-collection-amount, #dataView #dataExpenses .data-expense-amount { grid-column: 3 !important; grid-row: 1 !important; } #dataView #dataCollections .data-collection-main .data-day-chip, #dataView #dataExpenses .data-expense-main .data-day-chip { grid-row: 1 !important; } #dataView #dataCollections .data-collection-actions { display: flex; gap: 8px; } #dataView .data-open-record { min-height: 38px; padding: 7px 13px; border: 1px solid #c7d7f5; border-radius: 10px; color: #1d4ed8; background: #fff; font-size: 13px; font-weight: 850; } #dataView .data-open-record:hover { background: #eff5ff; } #dataView #dataDebtors .data-debtor-row { grid-template-columns: 44px minmax(0,1fr) auto auto; } /* Presupuestos: paciente con estado y tratamiento debajo, fechas e importe a la derecha */ #dataView #dataBudgets .data-budget-state[hidden] { display: none; } #dataView #dataBudgets .data-budget-main { grid-template-columns: minmax(0,1.6fr) minmax(160px,.8fr) minmax(170px,.8fr); padding: 14px 22px; } #dataView #dataBudgets .data-budget-identity strong { color: #18233f; font-size: 15px; } @media (max-width: 760px) { #dataView #dataBudgets .data-budget-main { grid-template-columns: 1fr; } } /* Recordatorios como tabla */ #dataView #dataReminders .data-reminder-head, #dataView #dataReminders .data-reminder-main { display: grid; grid-template-columns: 140px minmax(0,1.2fr) minmax(0,1fr) minmax(0,.9fr) 150px; gap: 12px; align-items: center; } #dataView #dataReminders .data-reminder-head { padding: 10px 20px; border-bottom: 1px solid #e4e8f1; color: #5b6580; font-size: 12px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } #dataView #dataReminders .data-reminder-main { padding: 11px 20px; } #dataView #dataReminders .data-reminder-main time { text-align: left; } #dataView #dataReminders .data-reminder-main time strong, #dataView #dataReminders .data-reminder-main time span { display: inline; margin: 0 6px 0 0; } #dataView #dataReminders .data-reminder-channel { display: none; } #dataView #dataReminders .data-reminder-identity strong { font-size: 14.5px; } #dataView #dataReminders .data-reminder-identity [hidden] { display: none; } #dataView #dataReminders .data-reminder-cell { color: #29334d; font-size: 13.5px; overflow-wrap: anywhere; } #dataView #dataReminders .data-reminder-cell.is-muted { color: #5b6580; } #dataView #dataReminders .data-reminder-state { justify-self: start; } #dataView #dataReminders .data-reminder-row { position: relative; } #dataView #dataReminders .data-reminder-main { padding: 10px 20px 26px; } #dataView #dataReminders .data-reminder-main time { white-space: nowrap; } #dataView #dataReminders .data-reminder-main time span { color: #8a93a6; font-size: 12px; } #dataView #dataReminders .data-reminder-row > details { border-top: 0; background: transparent; } #dataView #dataReminders .data-reminder-row > details > summary { position: absolute; left: 20px; top: calc(100% - 26px); padding: 0; font-size: 12.5px; } #dataView #dataReminders .data-reminder-row > details[open] { padding-bottom: 4px; } #dataView #dataReminders .data-reminder-row > details[open] > summary { position: static; padding: 0 20px 8px; margin-top: -22px; } @media (max-width: 900px) { #dataView #dataReminders .data-reminder-head { display: none; } #dataView #dataReminders .data-reminder-main { grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; padding: 12px 14px; } #dataView #dataReminders .data-reminder-main time { grid-column: 1; grid-row: 2; } #dataView #dataReminders .data-reminder-identity { grid-column: 1; grid-row: 1; } #dataView #dataReminders .data-reminder-cell { grid-column: 1; } #dataView #dataReminders .data-reminder-state { grid-column: 2; grid-row: 1; justify-self: end; } } /* Actividad: tarjetas de arriba como en la propuesta */ /* Deudores muestra la deuda de hoy: el período no aplica, sólo el profesional */ #dataView[data-section="debtors"] .data-presets, #dataView[data-section="debtors"] .data-custom-dates, #dataView[data-section="debtors"] .data-period-panel > p, #dataView[data-section="debtors"] .data-period-summary { display: none; } #dataView[data-section="debtors"] .data-period-panel { display: flex; } /* Selector de sección y botón para volver arriba (teléfono y tablet) */ #dataView .data-section-switch { display: none; } #dataView .data-to-top { position: fixed; right: 22px; bottom: 24px; z-index: 40; display: grid; width: 50px; height: 50px; place-items: center; border: 0; border-radius: 16px; color: #fff; background: var(--data-accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--data-accent) 40%, transparent); animation: data-hero-in .2s ease; } #dataView .data-to-top[hidden] { display: none; } #dataView .data-to-top .app-icon { width: 22px; height: 22px; } #dataView .data-section-sheet { width: min(560px, 100%); max-width: 100%; max-height: 100dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -18px 50px rgba(20,28,55,.25); } #dataView .data-section-sheet::backdrop { background: rgba(20,28,55,.45); } #dataView .data-section-sheet[open] { animation: data-sheet-up .25s ease; } #dataView .data-section-sheet__panel { padding: 16px 16px max(16px, env(safe-area-inset-bottom)); } #dataView .data-section-sheet header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } #dataView .data-section-sheet h2 { margin: 0; color: #18233f; font-size: 17px; } #dataView .data-section-sheet header button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #e4e8f1; border-radius: 12px; color: #5b6580; background: #fff; } #dataView .data-section-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; } #dataView .data-section-sheet__grid button { padding: 12px 4px; border: 1.5px solid transparent; border-radius: 16px; color: #29334d; background: color-mix(in srgb, var(--data-tone) 8%, #fff); font-size: 13px; font-weight: 850; text-align: center; } #dataView .data-section-sheet__grid button[hidden] { display: none; } #dataView .data-section-sheet__grid button > span { display: grid; width: 40px; height: 40px; margin: 0 auto 6px; place-items: center; border-radius: 12px; color: var(--data-tone); background: color-mix(in srgb, var(--data-tone) 16%, #fff); } #dataView .data-section-sheet__grid button[aria-current="page"] { border-color: var(--data-tone); background: color-mix(in srgb, var(--data-tone) 14%, #fff); } #dataView .data-section-sheet .app-icon { width: 20px; height: 20px; } @keyframes data-sheet-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } } /* Resumen: tarjetas con el color de lo que representan (cobros verde, egresos rojo, deudas frambuesa) */ #dataView .data-kpi-outflow { color: #8a2a25; background: linear-gradient(145deg, #fff3f2, #fffafa); } #dataView .data-kpi-outflow header { color: #b4322d; } #dataView .data-kpi-outflow > strong { color: #18233f; } #dataView .data-kpi-outflow > p { color: #8f5753; } #dataView .data-kpi-outflow > div > i { background: #f6dcda; } #dataView .data-kpi-outflow > div > i::after { width: var(--data-outflow-share, 0%); background: #e0443e; } #dataView .data-kpi-outflow > div > b { color: #b4322d; } #dataView .data-kpi-debt { color: #6b1238; background: linear-gradient(145deg, #fdf0f6, #fffafc); } #dataView .data-kpi-debt > span { color: #db2777; background: #fbe1ee; } #dataView .data-kpi-debt strong { color: #9d174d; } #dataView .data-kpi-debt p { color: #8c4a68; } #dataView .data-kpi-debt > button { color: #db2777; background: #fbe1ee; } /* Tarjetas del Resumen iguales a la propuesta: títulos grises y legibles, deuda compacta con la flecha abajo a la derecha */ #dataView .data-kpi-income header small, #dataView .data-kpi-outflow header > span, #dataView .data-kpi-debt small { color: #5b6580; font-size: 12px; font-weight: 800; letter-spacing: .1em; } #dataView .data-kpi-income > strong, #dataView .data-kpi-outflow > strong { color: #18233f; } #dataView .data-kpi-net > span { color: rgba(255,255,255,.88); letter-spacing: .1em; } #dataView .data-kpi-debt { position: relative; grid-template-columns: 40px minmax(0,1fr); align-items: start; gap: 12px; } #dataView .data-kpi-debt > span { width: 40px; height: 40px; border-radius: 12px; } #dataView .data-kpi-debt small { display: block; white-space: nowrap; } #dataView .data-kpi-debt strong { margin-top: 12px; } #dataView .data-kpi-debt > button { position: absolute; right: 14px; bottom: 14px; } #dataView #dataMonthly { --monthly-payments: #2563eb; } #dataView #dataMonthly .data-monthly-bars:not(:has(.data-monthly-bar:not(.is-empty))) { height: 44px; } /* Resumen · recordatorios: el anillo conserva el color de la sección; WhatsApp va en su verde y e-mail en azul */ #dataView .data-dashboard-reminders > header { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: start; column-gap: 12px; } #dataView .data-dashboard-reminders > header > p { grid-column: 1; margin-bottom: 0; color: #00843c; } #dataView .data-dashboard-reminders > header > h3 { grid-column: 1; } #dataView .data-dashboard-reminders > header > .data-reminder-channels { grid-column: 2; grid-row: 1 / 3; align-self: center; } #dataView .data-reminder-channels { display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: #f1f3f8; } #dataView .data-reminder-channels button { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; padding: 6px 11px; border: 0; border-radius: 10px; color: var(--data-channel-ink); background: transparent; font-size: 13px; font-weight: 850; } #dataView .data-reminder-channels button .app-icon { width: 17px; height: 17px; color: var(--data-channel); } #dataView .data-reminder-channels button[aria-pressed="true"], #dataView .data-reminder-channels button[aria-pressed="true"] .app-icon { color: #fff; background: var(--data-channel); box-shadow: 0 4px 10px color-mix(in srgb, var(--data-channel) 30%, transparent); } #dataView .data-reminder-channels button[aria-pressed="true"] .app-icon { color: #fff; } #dataView [data-reminder-channel="WHATSAPP"], #dataView [data-reminder-tab="WHATSAPP"], #dataView [data-channel="WHATSAPP"] { --data-channel: #1faa59; --data-channel-ink: #128a43; } #dataView [data-reminder-channel="EMAIL"], #dataView [data-reminder-tab="EMAIL"], #dataView [data-channel="EMAIL"] { --data-channel: #2563eb; --data-channel-ink: #1d4ed8; } #dataView .data-channel-name { color: var(--data-channel-ink); font-weight: 850; } #dataView .data-reminder-gauge { background: conic-gradient(#00c853 0 var(--data-reminder-rate, 0%), #dcf5e6 var(--data-reminder-rate, 0%) 100%); } #dataView .data-reminder-gauge strong { color: #18233f; } #dataView .data-dashboard-reminders > button { min-height: 42px; color: #5b6580; background: #fff; font-size: 13px; } /* Resumen · asistencia por profesional: un anillo por profesional, como el de Actividad clínica */ #dataView .data-professional-chart { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; } #dataView .data-professional-chart .data-professional-ring { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; padding: 14px; border: 1px solid #e4e8f1; border-radius: 16px; } #dataView .data-professional-chart .data-professional-ring > div { display: block; height: auto; overflow: visible; border-radius: 0; background: none; } #dataView .data-professional-chart .data-professional-ring > .data-professional-ring__chart { display: grid; width: 104px; height: 104px; place-items: center; border-radius: 50%; background: #eef1f5; } #dataView .data-professional-ring__chart::before { grid-area: 1/1; width: 72%; height: 72%; border-radius: 50%; background: #fff; content: ""; } #dataView .data-professional-ring__chart span { z-index: 1; grid-area: 1/1; text-align: center; } #dataView .data-professional-ring__chart strong { display: block; color: #18233f; font-size: 20px; } #dataView .data-professional-ring__chart small { color: #6f7990; font-size: 12px; } #dataView .data-professional-ring b { display: block; color: #18233f; font-size: 14.5px; } #dataView .data-professional-ring p { margin: 3px 0 6px; color: #29334d; font-size: 13px; font-weight: 800; } #dataView .data-professional-ring dl { display: grid; gap: 3px; margin: 0; font-size: 12.5px; } #dataView .data-professional-ring dl > div { display: flex; justify-content: space-between; gap: 8px; } #dataView .data-professional-ring dt { color: #5b6580; } #dataView .data-professional-ring dt i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; } #dataView .data-professional-ring dt .is-attended { background: #2daf80; } #dataView .data-professional-ring dt .is-absent { background: #4f78cf; } #dataView .data-professional-ring dt .is-cancelled { background: #e87668; } #dataView .data-professional-ring dd { margin: 0; color: #18233f; font-weight: 800; } /* Franja con datos: reparto y barras */ #dataView .data-section-hero__visual { display: flex; align-items: flex-end; justify-content: flex-end; align-self: end; } #dataView .data-hero-split { display: flex; width: min(260px, 100%); height: 10px; margin-top: 10px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.2); } #dataView .data-hero-split i { display: block; height: 100%; } #dataView .data-hero-split .is-main { background: #fff; } #dataView .data-hero-split .is-second { background: #6ee7b7; } #dataView .data-hero-bars { display: flex; width: 220px; height: 64px; align-items: flex-end; gap: 4px; } #dataView .data-hero-bars[hidden] { display: none; } #dataView .data-hero-bars i { flex: 1 1 0; max-width: 12px; min-width: 2px; border-radius: 4px 4px 1px 1px; background: rgba(255,255,255,.62); } #dataView .data-hero-bars i.is-top { background: #fff; } /* Cobros: indicadores con el color de cada parte y filas compactas con la fecha en un recuadro */ /* El total ya está en la franja: los indicadores muestran sus partes. */ #dataView #dataCollections .data-section-stats { grid-template-columns: repeat(3, minmax(0,1fr)); } #dataView #dataCollections .data-section-stats article:first-child { display: none; } #dataView #dataCollections .data-section-stats article { border-top: 4px solid var(--data-stat, #0e9f6e); border-left: 1px solid #e8ebf2; } #dataView #dataCollections .data-section-stats article:nth-child(2) { border-left: 0; } #dataView #dataCollections .data-section-stats article:nth-child(3) { --data-stat: #0d9488; } #dataView #dataCollections .data-section-stats .is-balance { --data-stat: #db2777; background: linear-gradient(145deg, #fdf0f6, #fffafc); } #dataView #dataCollections .data-section-stats .is-balance strong { color: #9d174d; } #dataView #dataCollections .data-collection-row { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 14px; align-items: center; padding: 0 18px; } #dataView #dataCollections .data-collection-main { grid-template-columns: 58px minmax(0,1.3fr) minmax(0,1fr) minmax(120px,auto); gap: 16px; min-height: 0; padding: 12px 0; } #dataView #dataCollections .data-collection-actions { grid-column: 2; padding: 0; } #dataView #dataCollections .data-collection-actions .data-void-note { grid-column: 1 / -1; } #dataView #dataCollections .data-collection-details { grid-column: 1 / -1; } #dataView #dataCollections .data-collection-details summary { padding: 6px 0 10px; color: #047857; font-size: 13px; } #dataView #dataCollections .data-collection-identity > strong { font-size: 15px; } #dataView #dataCollections .data-collection-identity > p { margin: 2px 0 0; color: #5b6580; font-size: 13px; } #dataView #dataCollections .data-collection-hour { display: block; margin-top: 2px; color: #8790a1; font-size: 12px; } #dataView #dataCollections .data-collection-amount strong { color: #064e3b; font-size: 18px; } #dataView #dataCollections .data-collection-row.is-voided .data-collection-amount strong { color: #8a93a6; } :is(#dataView, #payablesDialogs) .data-day-chip { display: grid; width: 58px; place-items: center; padding: 6px 0; border-radius: 12px; color: var(--data-accent-deep); background: color-mix(in srgb, var(--data-accent) 10%, #fff); line-height: 1.1; text-align: center; } #dataView .data-collection-main .data-day-chip strong { display: block; color: var(--data-accent-deep); font-size: 19px; } #dataView .data-collection-main .data-day-chip span { display: block; margin-top: 1px; color: var(--data-accent-deep); font-size: 12px; font-weight: 800; } /* Deudores: iniciales, saldo y barra proporcional a la mayor deuda de la lista */ #dataView #dataDebtors { margin-top: 0; } #dataView #dataDebtors .data-debtor-row { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr) auto auto; gap: 8px 16px; min-height: 0; padding: 14px 20px; } #dataView .data-debtor-initials { display: grid; width: 44px; height: 44px; place-items: center; grid-row: 1 / 3; border-radius: 13px; color: #9d174d; background: #fbe1ee; font-size: 14px; font-weight: 900; } #dataView #dataDebtors .data-debtor-amount { color: #9d174d; font-size: 19px; } #dataView #dataDebtors .data-debtor-row > button { color: #be185d; border-color: #f3c6dc; } #dataView #dataDebtors .data-debtor-row > button:hover { background: #fdf0f6; } #dataView .data-debtor-share { display: block; grid-column: 2 / -1; height: 7px; overflow: hidden; border-radius: 9px; background: #fdf2f8; } #dataView .data-debtor-share b { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #f472b6, #db2777); } #dataView #dataDebtors .data-debtor-filter-actions button:first-child { border-color: #db2777; background: #db2777; } @media (max-width: 1180px) { #dataView .data-section-hero__art { right: 6%; } #dataView .data-section-hero__actions { grid-column: 2 / -1; justify-content: flex-start; max-width: none; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__actions { grid-column: 2 / -1; grid-row: 3; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__visual { grid-row: 1 / 3; } } @media (max-width: 1250px) { #dataView #dataExpenses .data-expense-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } #dataView #dataExpenses .data-expense-filters .is-search { grid-column: span 2; } } @media (max-width: 900px) and (min-width: 561px) { #dataView .data-coverage-worklist__stages { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 1420px) { #dataView #dataCollections .data-collection-main, #dataView #dataExpenses .data-expense-main { grid-template-columns: 58px minmax(0,1fr) minmax(120px,auto); } #dataView #dataCollections .data-collection-labels, #dataView #dataExpenses .data-expense-labels { grid-column: 2 / 3; grid-row: 2; } #dataView #dataCollections .data-collection-amount, #dataView #dataExpenses .data-expense-amount { grid-column: 3; grid-row: 1 / 3; justify-self: end; } #dataView #dataCollections .data-collection-main .data-day-chip, #dataView #dataExpenses .data-expense-main .data-day-chip { grid-row: 1 / 3; } } @media (max-width: 1100px) { #dataView #dataExpenses .data-daily-columns { grid-template-columns: 1fr; } #dataView #dataReminders .data-reminder-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } #dataView #dataReminders .data-reminder-filters .is-wide { grid-column: 1 / -1; } #dataView #dataReminders .data-reminder-filters > div { grid-column: 1 / -1; justify-content: flex-end; } #dataView #dataExpenses .data-expense-main { grid-template-columns: 58px minmax(0,1fr) minmax(120px,auto); } #dataView #dataExpenses .data-expense-labels { grid-column: 2 / 3; grid-row: 2; } #dataView #dataExpenses .data-expense-amount { grid-column: 3; grid-row: 1 / 3; } #dataView #dataExpenses .data-expense-main .data-day-chip { grid-row: 1 / 3; } #dataView #dataCollections .data-collection-main { grid-template-columns: 58px minmax(0,1fr) minmax(120px,auto); } #dataView #dataCollections .data-collection-labels { grid-column: 2 / 3; grid-row: 2; } #dataView #dataCollections .data-collection-amount { grid-column: 3; grid-row: 1 / 3; } #dataView #dataCollections .data-collection-main .data-day-chip { grid-row: 1 / 3; } } @media (max-width: 900px) { :is(#dataView, #payablesDialogs) .data-bill-dialog__grid { grid-template-columns: 1fr; } :is(#dataView, #payablesDialogs) .data-bill-dialog__preview { border-left: 0; border-top: 1px solid #e4e8f1; } #dataView .data-sidebar { display: none; } #dataView #dataDebtors .data-debtor-row { grid-template-columns: 44px minmax(0,1fr) auto; } #dataView #dataDebtors .data-debtor-reason { grid-column: 2 / -1; grid-row: 2; } #dataView #dataDebtors .data-debtor-row > button { grid-column: 2 / -1; grid-row: 3; justify-self: start; } #dataView .data-debtor-share { grid-row: 4; } #dataView .data-debtor-initials { grid-row: 1 / 2; } #dataView .data-section-switch { display: flex; width: 100%; align-items: center; gap: 12px; margin-bottom: 12px; padding: 10px 12px; border: 0; border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 6px 18px rgba(30,40,90,.07); } #dataView .data-section-switch__icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 13px; color: #fff; background: var(--data-accent); } #dataView .data-section-switch__icon .app-icon { width: 21px; height: 21px; } #dataView .data-section-switch__text { min-width: 0; } #dataView .data-section-switch__text small { display: block; color: #6f7990; font-size: 12px; font-weight: 850; letter-spacing: .08em; } #dataView .data-section-switch__text b { display: block; color: #18233f; font-size: 16px; } #dataView .data-section-switch__more { display: inline-flex; flex: none; align-items: center; gap: 7px; margin-left: auto; padding: 10px 13px; border-radius: 13px; color: #fff; background: var(--data-accent-ink); font-size: 13.5px; font-weight: 850; white-space: nowrap; box-shadow: 0 6px 16px color-mix(in srgb, var(--data-accent) 35%, transparent); } #dataView .data-section-switch__more .app-icon { width: 17px; height: 17px; } #dataView .data-section-switch:active .data-section-switch__more { transform: scale(.97); } #dataView .data-section-hero { grid-template-columns: auto minmax(0,1fr); } #dataView .data-section-hero__actions { grid-column: 1 / -1; justify-content: flex-start; } } @media (max-width: 560px) { #dataView .data-section-hero__visual:not(.data-hero-side) { display: none; } #dataView #dataPayables .data-payable-row { padding: 10px 12px; } #dataView .data-hero-side { grid-column: 1 / -1; } #dataView .data-hero-ring { width: 70px; height: 70px; } #dataView .data-hero-ring span { width: 54px; height: 54px; font-size: 15px; } #dataView #dataActivity .data-activity-months { margin: 4px 14px 16px; } #dataView .data-activity-months__chart { gap: 3px; height: 190px; } #dataView .data-activity-months__chart b { display: none; } #dataView .data-activity-months__chart small { writing-mode: vertical-rl; transform: rotate(180deg); } #dataView #dataConsultationDurations .data-duration-bands { gap: 5px; height: 200px; } #dataView #dataActivity .data-activity-overview { justify-content: center; text-align: center; } #dataView #dataReminders .data-reminder-summary { grid-template-columns: 1fr; gap: 8px; } #dataView #dataReminders .data-reminder-summary article { min-height: 0; padding: 14px; } #dataView #dataReminders .data-reminder-history > header { flex-direction: column; } #dataView #dataReminders .data-reminder-filters { grid-template-columns: 1fr; padding: 14px; } #dataView #dataReminders .data-reminder-filters > div button { flex: 1; } #dataView #dataReminders .data-reminder-main { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px; } #dataView #dataReminders .data-reminder-main time { grid-column: 2; grid-row: 2; text-align: left; } #dataView #dataReminders .data-reminder-main time strong, #dataView #dataReminders .data-reminder-main time span { display: inline; margin: 0 6px 0 0; } #dataView #dataReminders .data-reminder-state { grid-column: 3; grid-row: 1; } #dataView #dataReminders .data-reminder-detail-grid { grid-template-columns: 1fr 1fr; padding: 0 14px 14px; } #dataView #dataReminders .data-reminder-row summary { padding: 10px 14px; } #dataView .data-coverage-worklist__stages { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } #dataView .data-coverage-worklist__stages button { padding: 12px; } #dataView .data-coverage-worklist__stages strong { font-size: 24px; } #dataView .data-coverage-worklist__guide { display: none; } #dataView .data-coverage-worklist__toolbar { flex-direction: column; align-items: stretch; } #dataView .data-coverage-worklist__toolbar button { width: 100%; } #dataView .data-coverage-worklist__toolbar #coverageWorkPresent, #dataView .data-coverage-worklist__toolbar #coverageWorkPay, #dataView .data-coverage-worklist__toolbar #coverageWorkResubmit { order: 0; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__icon { grid-row: 1; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__text { grid-row: 1; } #dataView .data-section-hero:has(.data-section-hero__visual):has(.data-section-hero__actions) .data-section-hero__actions { grid-column: 1 / -1; grid-row: 2; } #dataView #dataExpenses .data-expense-kpis { grid-template-columns: 1fr; gap: 8px; } #dataView #dataExpenses .data-expense-kpis article { padding: 14px; } #dataView #dataExpenses .data-expense-kpis strong { margin-top: 6px; font-size: 21px; } #dataView #dataExpenses .data-expense-filters { grid-template-columns: 1fr; } #dataView #dataExpenses .data-expense-filters .is-search { grid-column: auto; } #dataView #dataExpenses .data-expense-row { grid-template-columns: 1fr; padding: 0 14px; } #dataView #dataExpenses .data-expense-main { grid-template-columns: 52px minmax(0,1fr) auto; gap: 6px 12px; } #dataView #dataExpenses .data-expense-main .data-day-chip { width: 52px; grid-column: 1; grid-row: 1 / 3; } #dataView #dataExpenses .data-expense-identity { grid-column: 2; grid-row: 1; } #dataView #dataExpenses .data-expense-amount { grid-column: 3; grid-row: 1; } #dataView #dataExpenses .data-expense-labels { grid-column: 2 / -1; grid-row: 2; } #dataView #dataExpenses .data-expense-actions { grid-column: 1; justify-content: flex-start; padding-bottom: 6px; } #dataView .data-empty-state.data-inline-empty { margin: 12px; padding: 20px 14px; } #dataView [class$="-pagination"] > div { width: 100%; } #dataView [class$="-pagination"] > div button { flex: 1; } #dataView #dataCollections .data-section-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } #dataView #dataCollections .data-section-stats article { padding: 14px; border-top-width: 4px; } #dataView #dataCollections .data-section-stats article:nth-child(4) { grid-column: 1 / -1; border-left: 0; } #dataView #dataCollections .data-section-stats strong { font-size: 19px; } #dataView #dataCollections .data-section-stats .is-balance { padding: 0; } #dataView #dataCollections .data-section-stats .is-balance > button { padding: 14px; } #dataView #dataCollections .data-collection-row { grid-template-columns: 1fr; padding: 0 14px; } #dataView #dataCollections .data-collection-main { grid-template-columns: 52px minmax(0,1fr) auto; gap: 6px 12px; } #dataView #dataCollections .data-collection-main .data-day-chip { width: 52px; grid-column: 1; grid-row: 1 / 3; } #dataView #dataCollections .data-collection-identity { grid-column: 2; grid-row: 1; } #dataView #dataCollections .data-collection-amount { grid-column: 3; grid-row: 1; } #dataView #dataCollections .data-collection-labels { grid-column: 2 / -1; grid-row: 2; } #dataView #dataCollections .data-collection-actions { grid-column: 1; justify-content: flex-start; padding-bottom: 6px; } #dataView #dataDebtors .data-debtor-row { padding: 14px; } #dataView .data-professional-chart .data-professional-ring { grid-template-columns: 1fr; justify-items: center; text-align: center; } #dataView .data-professional-ring dl { width: 100%; text-align: left; } #dataView .data-section-hero { grid-template-columns: auto minmax(0,1fr); gap: 12px 14px; padding: 16px; border-radius: 20px; } #dataView .data-section-hero__icon { width: 40px; height: 40px; border-radius: 12px; } #dataView .data-section-hero__icon .app-icon { width: 21px; height: 21px; } #dataView .data-section-hero__actions { grid-column: 1 / -1; } #dataView .data-section-hero__text h2 { font-size: 19px; } #dataView .data-section-hero__art { top: 8%; right: -50px; height: 56%; opacity: .14; } #dataView .data-section-hero__actions button { flex: 1 1 auto; } #dataView .data-period-summary { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 12px 14px; border: 0; border-radius: 15px; color: #29334d; background: #fff; font-size: 13px; font-weight: 750; text-align: left; box-shadow: 0 4px 14px rgba(30,40,90,.06); } #dataView .data-period-summary b { flex: none; color: var(--data-accent-ink); font-weight: 850; } #dataView .data-period-panel { display: none; } #dataView .data-period-panel.is-open { display: flex; } #dataView .data-period-panel > p { display: none; } #dataView .data-presets { width: 100%; flex-wrap: wrap; } #dataView .data-presets button { flex: 1 1 40%; } #dataView .data-filters, #dataView .data-filters > label, #dataView .data-custom-dates, #dataView .data-custom-dates label { width: 100%; } #dataView .data-to-top { right: 14px; bottom: 16px; } } @media print { #dataView .data-section-hero, #dataView .data-section-switch, #dataView .data-period-summary, #dataView .data-to-top { display: none !important; } } /* Revisión 07/10: franjas como la propuesta. El número y el texto de debajo arrancan alineados con el ícono */ #dataView .data-section-hero { grid-template-columns: auto minmax(0,1fr) auto; grid-auto-rows: auto; align-items: start; column-gap: 16px; row-gap: 0; } #dataView .data-section-hero > .data-section-hero__text { display: contents; } #dataView .data-section-hero__icon { grid-column: 1; grid-row: 1 / 3; } #dataView .data-section-hero__text > span { grid-column: 2; grid-row: 1; align-self: end; } #dataView .data-section-hero__text > h2 { grid-column: 2; grid-row: 2; align-self: start; } #dataView .data-section-hero__text > :not(span):not(h2) { grid-column: 1 / 3; position: relative; z-index: 1; margin-top: 12px; } #dataView .data-section-hero__text > :not(span):not(h2) + :not(span):not(h2) { margin-top: 6px; } #dataView .data-section-hero > .data-section-hero__actions { grid-column: 3; grid-row: 1 / 3; align-self: start; } #dataView .data-section-hero > .data-section-hero__visual { grid-column: 3; grid-row: 3 / 8; align-self: end; } #dataView .data-section-hero__signal { margin-top: 14px; } /* Botones de la franja: los dos iguales, translúcidos */ #dataView .data-section-hero__actions button, #dataView .data-section-hero__actions button:first-child { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.14); box-shadow: none; } #dataView .data-section-hero__actions button:hover { background: rgba(255,255,255,.24); } /* Sin filas: apagado pero visible, con el motivo en el title (no parece roto). */ #dataView .data-section-hero__actions button:disabled { cursor: not-allowed; opacity: .5; transform: none; background: rgba(255,255,255,.08); } /* Período en una sola línea, todo alineado al centro */ #dataView .data-period-panel { align-items: center; } #dataView .data-period-panel .data-filters, #dataView .data-period-panel .data-filters > label { display: flex; align-items: center; margin: 0; } #dataView .data-period-panel .data-filters > label { display: block; } #dataView .data-presets { align-self: center; } /* Tarjetas de Cobros separadas, como en la propuesta */ #dataView #dataCollections .data-section-stats { gap: 12px; overflow: visible; border: 0; background: transparent; box-shadow: none; } #dataView #dataCollections .data-section-stats article { border: 1px solid #e4e8f1 !important; border-top: 4px solid var(--data-stat, #0e9f6e) !important; border-radius: 18px; background: #fff; box-shadow: 0 6px 18px rgba(30,40,90,.06); } #dataView #dataCollections .data-section-stats article:nth-child(3) { --data-stat: #0d9488; } #dataView #dataCollections .data-section-stats .is-balance { --data-stat: #db2777; background: #fff; overflow: hidden; } #dataView #dataCollections .data-section-stats span { display: flex; align-items: center; gap: 7px; color: #5b6580; font-size: 12px; font-weight: 850; letter-spacing: .1em; } #dataView #dataCollections .data-section-stats span .app-icon { width: 17px; height: 17px; color: var(--data-stat, #0e9f6e); } #dataView #dataCollections .data-section-stats strong { color: #18233f; } #dataView #dataCollections .data-section-stats .is-balance strong { color: #9d174d; } @media (max-width: 1180px) { #dataView .data-section-hero > .data-section-hero__actions { grid-column: 1 / -1; grid-row: auto; margin-top: 14px; justify-content: flex-start; } #dataView .data-section-hero > .data-section-hero__visual { grid-row: 1 / 3; align-self: center; } } @media (max-width: 560px) { #dataView .data-section-hero > .data-section-hero__visual.data-hero-side { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; } #dataView .data-section-hero__text > :not(span):not(h2) { grid-column: 1 / -1; } } #dataView .data-section-hero__text > .data-reminder-channels { justify-self: start; width: auto; } #dataView .data-section-hero__text > .data-hero-pipe { justify-self: start; } #dataView .data-section-hero__text > p, #dataView .data-section-hero__signal p { max-width: 720px; } @media (max-width: 1180px) { #dataView .data-section-hero > .data-section-hero__actions { grid-row: 20; } } @media (max-width: 1180px) { #dataView .data-section-hero.data-section-hero > .data-section-hero__actions.data-section-hero__actions { grid-column: 1 / -1; grid-row: 20; } #dataView .data-section-hero.data-section-hero > .data-section-hero__icon { grid-row: 1 / 3; } } #dataView .data-section-hero.data-section-hero > .data-section-hero__visual.data-section-hero__visual { grid-column: 3; grid-row: 3 / 8; align-self: end; } #dataView .data-section-hero.data-section-hero > .data-section-hero__icon { grid-row: 1 / 3; align-self: center; } @media (max-width: 1180px) { #dataView .data-section-hero.data-section-hero > .data-section-hero__visual.data-section-hero__visual { grid-row: 3 / 8; } } /* Revisión 07/10 (teléfono): la franja usa todo el ancho, el botón de subir queda sobre el pie y el selector de sección acompaña al desplazamiento */ @media (max-width: 560px) { #dataView .data-section-hero.data-section-hero > .data-section-hero__visual.data-hero-side { grid-column: 1 / -1; grid-row: auto; align-self: start; justify-content: flex-start; margin-top: 12px; } } #dataView .data-to-top { bottom: 44px; } @media (max-width: 900px) { #dataView .data-section-switch { position: sticky; top: var(--data-switch-top, 76px); z-index: 9; } } /* Pagos (rediseño aprobado el 21/10/2026): dos acciones grandes, Para pagar al lado de los pagos del período y formularios donde el rubro y el proveedor se eligen o se crean ahí mismo. Todo acotado a #dataView. */ #dataView #dataPayables:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; } #dataView #dataPayables .payables-deck { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr); gap: 14px; } #dataView #dataPayables .payables-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 104px; padding: 18px 20px; border: 1px solid #dfe5f1; border-radius: 20px; color: #18233f; background: #fff; text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } #dataView #dataPayables .payables-action:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(19,47,107,.12); } #dataView #dataPayables .payables-action:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 3px; } #dataView #dataPayables .payables-action__icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: #1d4ed8; background: #eaf1ff; } #dataView #dataPayables .payables-action__icon .app-icon { width: 26px; height: 26px; } #dataView #dataPayables .payables-action__copy { min-width: 0; } #dataView #dataPayables .payables-action__copy > b { display: block; font-size: 17px; letter-spacing: -.01em; } #dataView #dataPayables .payables-action__copy > span { display: block; margin-top: 3px; color: #5b6580; font-size: 13px; line-height: 1.4; } #dataView #dataPayables .payables-action > .app-icon { width: 18px; height: 18px; color: #9aa6c0; } #dataView #dataPayables .payables-action.is-main { border-color: transparent; color: #fff; background: linear-gradient(120deg, #1d4ed8, #3b82f6); box-shadow: 0 14px 30px rgba(37,99,235,.28); } #dataView #dataPayables .payables-action.is-main .payables-action__copy > span { color: rgba(255,255,255,.9); } #dataView #dataPayables .payables-action.is-main .payables-action__icon { color: #fff; background: rgba(255,255,255,.18); } #dataView #dataPayables .payables-action.is-main > .app-icon { color: #fff; } #dataView #dataPayables .payables-action.is-quiet { background: #f4f6fb; } #dataView #dataPayables .payables-action.is-quiet .payables-action__icon { color: #514bc8; background: #fff; } #dataView #dataPayables .payables-counts { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 7px !important; } #dataView #dataPayables .payables-counts i { padding: 3px 9px; border: 1px solid #dfe5f1; border-radius: 999px; color: #4a5470; background: #fff; font-size: 12px; font-style: normal; font-weight: 800; white-space: nowrap; } #dataView #dataPayables .payables-side { display: grid; gap: 16px; min-width: 0; } #dataView #dataPayables .payables-card, #dataView #dataPayables .data-legacy-payments { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #dfe5f1; border-radius: 20px; background: #fff; box-shadow: 0 6px 18px rgba(30,40,90,.05); } #dataView #dataPayables .payables-card > header, #dataView #dataPayables .data-legacy-payments > header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid #e8ecf4; background: #fff; } #dataView #dataPayables .payables-card > header > div, #dataView #dataPayables .data-legacy-payments > header > div { flex: 1; min-width: 0; } #dataView #dataPayables .payables-card > header h3, #dataView #dataPayables .data-legacy-payments > header h3 { margin: 0; color: #18233f; font-size: 17px; letter-spacing: -.01em; } #dataView #dataPayables .payables-card > header p, #dataView #dataPayables .data-legacy-payments > header p { margin: 2px 0 0; color: #5b6580; font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; } #dataView #dataPayables .payables-pill { flex: none; padding: 5px 11px; border-radius: 999px; color: #1d4ed8; background: #eaf1ff; font-size: 13px; font-weight: 850; white-space: nowrap; } #dataView #dataPayables .payables-pill.is-paid { color: #0b6b4a; background: #e8f8f1; } #dataView #dataPayables .payables-pending-card .payables-pill { color: #4338ca; background: #eef0ff; } #dataView #dataPayables .payables-list { max-height: 520px; overflow-y: auto; } #dataView #dataPayables .payables-list > .data-inline-empty { margin: 0; padding: 22px 24px; color: #5b6580; font-size: 13px; line-height: 1.5; text-align: center; } #dataView #dataPayables .data-payable-row { grid-template-columns: 54px minmax(0, 1fr) auto; } #dataView #dataPayables .payables-row__side { display: grid; justify-items: end; gap: 6px; } #dataView #dataPayables .payables-row__side .data-payable-amount { font-size: 15px; white-space: nowrap; } #dataView #dataPayables .payables-row__side > button, #dataView #dataPayables .payables-pending-card .payables-row > button { min-height: 34px; padding: 5px 13px; border: 1px solid #c9d6f5; border-radius: 10px; color: #1d4ed8; background: #fff; font-size: 13px; font-weight: 850; white-space: nowrap; cursor: pointer; } #dataView #dataPayables .payables-row__side > button:hover, #dataView #dataPayables .payables-pending-card .payables-row > button:hover { border-color: #2563eb; background: #eff5ff; } #dataView #dataPayables .payables-pending-card .payables-row strong, #dataView #dataPayables .payables-pending-card .payables-row p b { font-size: 14px; } #dataView #dataPayables .payables-pending-card .payables-row div > span { font-size: 12px; } #dataView #dataPayables .payables-history-summary { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 12px 18px 0; color: #5b6580; font-size: 13px; } #dataView #dataPayables .payables-history-summary b { color: #18233f; } #dataView #dataPayables .payables-rubro-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; } #dataView #dataPayables .payables-history-filters { border-top: 1px solid #eef1f6; border-bottom: 1px solid #eef1f6; background: #f7f9fc; } #dataView #dataPayables .payables-history-filters > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; color: #1d4ed8; font-size: 13px; font-weight: 850; cursor: pointer; } #dataView #dataPayables .payables-history-filters > summary .app-icon { width: 16px; height: 16px; } #dataView #dataPayables .payables-history-filters .data-legacy-payment-filters { padding-top: 4px; border: 0; background: transparent; } :is(#dataView, #payablesDialogs) .payables-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 13px; border: 1.5px solid #e2e7f0; border-radius: 999px; color: #34405e; background: #fff; font-size: 13px; font-weight: 750; cursor: pointer; } :is(#dataView, #payablesDialogs) .payables-chip:hover { border-color: #b9c9ee; } :is(#dataView, #payablesDialogs) .payables-chip[aria-pressed="true"], :is(#dataView, #payablesDialogs) .payables-chip:has(input:checked) { border-color: #2563eb; color: #132f6b; background: #eff5ff; } :is(#dataView, #payablesDialogs) .payables-chip:has(input:focus-visible), :is(#dataView, #payablesDialogs) button.payables-chip:focus-visible { outline: 3px solid rgba(37,99,235,.35); outline-offset: 2px; } :is(#dataView, #payablesDialogs) .payables-chip > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } :is(#dataView, #payablesDialogs) .payables-chip.is-add { border-style: dashed; color: #1d4ed8; } /* Formularios de pago y de cuenta a pagar */ :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-field { margin: 10px 22px 0; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .coverage-form-grid label > span { text-transform: none; letter-spacing: 0; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .data-bill-dialog__label { margin-top: 16px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .data-bill-dialog__form > section > .payables-chips + .data-bill-dialog__label, :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-cash-note + .data-bill-dialog__label { margin-top: 18px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-label, :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo label > span { display: block; margin-bottom: 7px; color: #4a5470; font-size: 13px; font-weight: 800; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo label > span em { color: #6b7590; font-style: normal; font-weight: 600; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-chips { display: flex; flex-wrap: wrap; gap: 8px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .data-bill-dialog__form > section > .payables-chips { margin: 0 22px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-inline-new:not([hidden]) { display: flex; gap: 8px; margin-top: 8px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-inline-new input, :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #ccd5e6; border-radius: 12px; color: #18233f; background: #fff; font: inherit; font-size: 14px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-inline-new button { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; color: #fff; background: #2563eb; font-size: 14px; font-weight: 850; cursor: pointer; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__list { margin-top: 6px; max-height: 300px; overflow-y: auto; padding: 6px; border: 1px solid #dfe5f1; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgba(16,26,51,.16); } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__list button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 10px; color: #18233f; background: transparent; font-size: 14px; text-align: left; cursor: pointer; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__list button:hover, :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__list button:focus-visible { outline: none; background: #f1f5fd; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__list button small { flex: none; color: #5b6580; font-size: 12px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__list .is-create { color: #1d4ed8; font-weight: 850; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__picked:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-tag { padding: 4px 10px; border-radius: 8px; color: #1d4ed8; background: #eaf1ff; font-size: 12px; font-weight: 850; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-tag.is-new { color: #0b6b4a; background: #e8f8f1; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__picked label { display: flex; align-items: center; gap: 8px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__picked label > span { margin: 0; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-combo__picked select { min-height: 38px; padding: 4px 10px; border: 1px solid #ccd5e6; border-radius: 10px; font: inherit; font-size: 14px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-apply:not([hidden]) { display: block; margin: 12px 22px 0; padding: 12px 14px; border: 1px solid #c9d6f5; border-radius: 14px; background: #f5f8ff; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-apply > p { margin: 0 0 8px; color: #1d4ed8; font-size: 13px; font-weight: 850; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-apply label { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; color: #29334d; font-size: 13px; line-height: 1.4; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-apply input { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: #2563eb; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-apply .payables-apply__note { margin: 6px 0 0; color: #9f1239; font-weight: 700; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-cash-note { margin: 8px 22px 0; padding: 10px 12px; border-radius: 12px; color: #1e3a8a; background: #eef4ff; font-size: 13px; line-height: 1.4; } /* T14: efectivo de hoy con el cajón sin abrir; el tilde lo abre con el pago. */ :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-cash-open:not([hidden]) { display: grid; gap: 8px; margin: 10px 22px 0; padding: 12px 14px; border: 1px solid #c9d6f5; border-radius: 14px; color: #29334d; background: #f5f8ff; font-size: 13px; line-height: 1.45; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-cash-open p { margin: 0; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-cash-open b { color: #1d4ed8; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-cash-open label { display: flex; align-items: center; gap: 10px; color: #18233f; font-size: 14px; font-weight: 800; cursor: pointer; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-cash-open input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #2563eb; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 22px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when label { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1.5px solid #e2e7f0; border-radius: 14px; background: #fff; cursor: pointer; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #0e9f6e; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when .is-later input { accent-color: #2563eb; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when b { display: block; color: #18233f; font-size: 14px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when small { display: block; margin-top: 2px; color: #5b6580; font-size: 12px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when label:has(input:checked) { border-color: #0e9f6e; background: #e8f8f1; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when label.is-later:has(input:checked) { border-color: #2563eb; background: #eef3ff; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-preview { grid-template-columns: minmax(0, 1fr); } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-preview > strong { text-align: left; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-state { justify-self: start; padding: 4px 10px; border-radius: 999px; color: #0b6b4a; background: #e8f8f1; font-size: 12px; font-weight: 850; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-state.is-later { color: #1d4ed8; background: #eaf1ff; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-entry-error:not([hidden]) { margin: 0; padding: 10px 12px; border-radius: 12px; color: #9f1239; background: #fff1f4; font-size: 13px; font-weight: 700; line-height: 1.4; } /* Proveedores y rubros */ :is(#dataView, #payablesDialogs) .payables-manage-dialog { width: min(920px, calc(100vw - 28px)); } :is(#dataView, #payablesDialogs) .payables-manage > header { display: flex; align-items: flex-start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid #e4e8f1; } :is(#dataView, #payablesDialogs) .payables-manage > header > div { flex: 1; min-width: 0; } :is(#dataView, #payablesDialogs) .payables-manage > header small { color: #1d4ed8; font-size: 12px; font-weight: 850; letter-spacing: .1em; } :is(#dataView, #payablesDialogs) .payables-manage > header h2 { margin: 2px 0 0; color: #18233f; font-size: 21px; } :is(#dataView, #payablesDialogs) .payables-manage > header p { margin: 4px 0 0; color: #5b6580; font-size: 13px; } :is(#dataView, #payablesDialogs) .payables-manage__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } :is(#dataView, #payablesDialogs) .payables-manage__grid > section { min-width: 0; padding: 18px 22px 22px; } :is(#dataView, #payablesDialogs) .payables-manage__grid > section + section { border-left: 1px solid #e4e8f1; } :is(#dataView, #payablesDialogs) .payables-manage__grid h3 { margin: 0 0 10px; color: #18233f; font-size: 16px; } :is(#dataView, #payablesDialogs) .payables-manage__list { display: grid; gap: 6px; max-height: 260px; margin: 0 0 14px; padding: 0; overflow-y: auto; list-style: none; } :is(#dataView, #payablesDialogs) .payables-manage__list li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; color: #18233f; background: #f4f6fb; font-size: 14px; } :is(#dataView, #payablesDialogs) .payables-manage__list li span { color: #5b6580; font-size: 12px; white-space: nowrap; } :is(#dataView, #payablesDialogs) .payables-manage__list li.is-empty { color: #5b6580; background: transparent; padding-left: 0; font-size: 13px; } :is(#dataView, #payablesDialogs) .payables-manage__list.is-rubros { display: flex; flex-wrap: wrap; align-content: flex-start; } :is(#dataView, #payablesDialogs) .payables-manage__list.is-rubros li:not(.is-empty) { padding: 6px 12px; border-radius: 999px; color: #514bc8; background: #f1effe; font-size: 13px; font-weight: 750; } :is(#dataView, #payablesDialogs) .payables-manage__form { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid #eef1f6; } :is(#dataView, #payablesDialogs) .payables-manage__form .coverage-form-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding: 0; } :is(#dataView, #payablesDialogs) .payables-manage__form .coverage-form-grid label { min-width: 0; } :is(#dataView, #payablesDialogs) .payables-manage__form .coverage-form-grid label > span { color: #4a5470; font-size: 13px; font-weight: 800; letter-spacing: 0; text-transform: none; } :is(#dataView, #payablesDialogs) .payables-manage__form .coverage-form-grid input, :is(#dataView, #payablesDialogs) .payables-manage__form .coverage-form-grid select { width: 100%; min-width: 0; } :is(#dataView, #payablesDialogs) .payables-manage__form details summary { color: #1d4ed8; font-size: 13px; font-weight: 800; cursor: pointer; } :is(#dataView, #payablesDialogs) .payables-manage__form details .coverage-form-grid { margin-top: 8px; } :is(#dataView, #payablesDialogs) .payables-manage__form > button { display: inline-flex; justify-self: start; align-items: center; gap: 7px; min-height: 42px; padding: 8px 16px; border: 0; border-radius: 12px; color: #fff; background: #2563eb; font-size: 14px; font-weight: 850; cursor: pointer; } :is(#dataView, #payablesDialogs) .payables-manage__form > button .app-icon { width: 16px; height: 16px; } @media (min-width: 1360px) { #dataView #dataPayables:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } #dataView #dataPayables .payables-deck { grid-column: 1 / -1; } } @media (max-width: 1359px) { #dataView #dataPayables .payables-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } #dataView #dataPayables .payables-action.is-quiet { grid-column: 1 / -1; min-height: 0; } } @media (max-width: 900px) { :is(#dataView, #payablesDialogs) .payables-manage__grid { grid-template-columns: 1fr; } :is(#dataView, #payablesDialogs) .payables-manage__grid > section + section { border-left: 0; border-top: 1px solid #e4e8f1; } } @media (max-width: 620px) { #dataView #dataPayables .payables-deck { grid-template-columns: 1fr; } #dataView #dataPayables .payables-action { min-height: 0; padding: 15px 16px; } #dataView #dataPayables .payables-action__icon { width: 44px; height: 44px; } :is(#dataView, #payablesDialogs) .payables-entry-dialog .payables-when { grid-template-columns: 1fr; } #dataView #dataPayables .payables-card > header, #dataView #dataPayables .data-legacy-payments > header { flex-wrap: wrap; } }