/* Prestamito — diseño Apple · verde militar · dark #1e1c1c 4 breakpoints: Mobile <768 · Tablet 768–1179 · Desktop 1180–1799 · TV ≥1800 Tema por [data-theme]; el script inline del lo setea antes del paint. */ :root { /* ---- LIGHT (default) ---- */ --page: #f4f4f1; --page-2: #ececE8; --surface: #ffffff; --surface-2: #f7f6f3; --elev: #ffffff; --ink: #1c1c1e; --ink-2: #46453f; --muted: #8a877f; --grid: #ececE6; --baseline: #d9d8d1; --border: rgba(20, 18, 18, 0.09); --border-2: rgba(20, 18, 18, 0.14); /* verde militar */ --accent: #5c6b34; --accent-strong: #47531f; --accent-soft: #7c8a4e; --accent-wash: #e9edda; --on-accent: #ffffff; --good: #3a7d2c; --good-text: #2f6a22; --warning: #b7791f; --serious: #c26a3a; --critical: #c0392b; --nav-h: 62px; --main-max: 1180px; --radius: 16px; --radius-sm: 12px; --radius-xs: 10px; --shadow-sm: 0 1px 2px rgba(20, 18, 18, .05); --shadow: 0 1px 2px rgba(20, 18, 18, .05), 0 6px 20px rgba(20, 18, 18, .05); --shadow-lg: 0 10px 40px rgba(20, 18, 18, .14); --glass: color-mix(in srgb, var(--surface) 72%, transparent); --ease: cubic-bezier(.4, 0, .2, 1); --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, Roboto, sans-serif; } :root[data-theme="dark"] { --page: #141312; --page-2: #0e0d0c; --surface: #1e1c1c; /* gris pedido por Franco */ --surface-2: #262322; --elev: #2a2725; --ink: #f3f1ee; --ink-2: #bab5ad; --muted: #8b867e; --grid: #302d2b; --baseline: #3a3734; --border: rgba(255, 255, 255, 0.09); --border-2: rgba(255, 255, 255, 0.15); --accent: #94a95a; --accent-strong: #b3c47e; --accent-soft: #7f9048; --accent-wash: #262a1b; --on-accent: #16180f; --good: #6fbf5a; --good-text: #7fce69; --warning: #e0a33a; --serious: #de8b5a; --critical: #e46b5c; --shadow-sm: none; --shadow: 0 1px 0 rgba(255, 255, 255, .02), 0 8px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 16px 50px rgba(0, 0, 0, .55); --glass: color-mix(in srgb, var(--surface) 78%, transparent); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { overflow-x: clip; } body { margin: 0; font-family: var(--sans); background: var(--page); color: var(--ink); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s var(--ease), color .3s var(--ease); } h1, h2, h3 { margin: 0; font-weight: 680; letter-spacing: -.021em; } h1 { font-size: 1.4rem; } h2 { font-size: 1.08rem; } a { color: var(--accent-strong); text-decoration: none; } button { font: inherit; cursor: pointer; } ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); } /* ---------- layout & nav ---------- */ .app { min-height: 100dvh; } .sin-nav .nav { display: none; } @media (min-width: 768px) { .sin-nav .app { grid-template-columns: 1fr; } .sin-nav .main { grid-column: 1; } } .main { padding: 18px 16px calc(var(--nav-h) + 28px); max-width: var(--main-max); margin: 0 auto; width: 100%; } .nav { position: fixed; inset: auto 0 0 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border-top: 1px solid var(--border); display: flex; justify-content: space-around; align-items: stretch; z-index: 40; padding-bottom: env(safe-area-inset-bottom); } .nav-brand { display: none; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 550; position: relative; border-radius: 12px; transition: color .18s var(--ease), background .18s var(--ease); } .nav-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--ease); } .nav-item.active { color: var(--accent); font-weight: 650; } .nav-item.active svg { transform: translateY(-1px); } .nav-item:active svg { transform: scale(.9); } .badge { position: absolute; top: 7px; left: calc(50% + 7px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--critical); color: #fff; font-size: .64rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--surface); } /* tablet: barra lateral compacta (íconos) */ @media (min-width: 768px) { :root { --nav-w: 82px; --main-max: 1180px; } .app { display: grid; grid-template-columns: var(--nav-w) 1fr; } .main { padding: 26px 30px 44px; grid-column: 2; } .nav { inset: 0 auto 0 0; width: var(--nav-w); height: auto; flex-direction: column; justify-content: flex-start; border-top: none; border-right: 1px solid var(--border); padding: 16px 10px; gap: 6px; } .nav-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; } .nav-logo { font-size: 1.7rem; } .nav-title { display: none; } .nav-item { flex: none; padding: 11px 0; width: 100%; } .nav-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink-2); } .nav-item.active { background: var(--accent-wash); color: var(--accent-strong); } .badge { left: auto; right: 12px; } } /* desktop: barra lateral completa */ @media (min-width: 1180px) { :root { --nav-w: 228px; --main-max: 1360px; } .nav { padding: 22px 14px; } .nav-brand { flex-direction: row; gap: 11px; align-self: flex-start; padding: 0 12px 10px; } .nav-title { display: block; font-weight: 720; font-size: 1.18rem; letter-spacing: -.02em; } .nav-item { flex-direction: row; justify-content: flex-start; gap: 13px; padding: 11px 15px; font-size: .93rem; font-weight: 560; } .badge { position: static; margin-left: auto; box-shadow: none; } } /* TV / pantallas grandes */ @media (min-width: 1800px) { :root { --nav-w: 260px; --main-max: 1680px; } body { font-size: 17px; } .main { padding: 40px 48px 60px; } h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } .nav { padding: 30px 18px; } .nav-item { padding: 13px 18px; font-size: 1rem; } .tiles { gap: 20px; } } /* ---------- encabezado de sección ---------- */ .page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; } .page-head .spacer { flex: 1; } .page-head h1 { line-height: 1.15; } .subtitle { color: var(--muted); font-size: .86rem; } /* acciones del header: íconos, avatar, tema */ .head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .lbl-min { display: none; } @media (max-width: 400px) { .lbl-full { display: none; } .lbl-min { display: inline; } } .icon-btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font-size: 1.15rem; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .icon-btn:hover { color: var(--ink); border-color: var(--border-2); } .icon-btn:active { transform: scale(.94); } .icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .avatar-btn { width: 42px; height: 42px; border-radius: 50%; border: none; background: linear-gradient(140deg, var(--accent-soft), var(--accent-strong)); color: var(--on-accent); font-weight: 750; font-size: .92rem; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .avatar-btn:hover { box-shadow: var(--shadow); } .avatar-btn:active { transform: scale(.94); } /* ---------- tarjetas / tiles ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; } @media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } } .tile { transition: transform .18s var(--ease), border-color .18s var(--ease); } .tile .label { color: var(--ink-2); font-size: .82rem; font-weight: 550; } .tile .value { font-size: 1.55rem; font-weight: 720; margin-top: 3px; letter-spacing: -.025em; } @media (min-width: 768px) { .tile .value { font-size: 1.8rem; } } @media (min-width: 1800px) { .tile .value { font-size: 2.1rem; } } .tile .delta { font-size: .76rem; margin-top: 3px; color: var(--muted); } .tile .delta.up { color: var(--good-text); } .tile .delta.down { color: var(--critical); } .tile.alert .value { color: var(--critical); } /* ---------- gráfico ---------- */ .chart-card { margin-bottom: 18px; } .chart-card h2 { margin-bottom: 4px; } .chart-wrap { overflow-x: auto; } .chart-wrap svg { display: block; } .chart-tip { position: fixed; z-index: 60; background: var(--elev); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 8px 11px; font-size: .8rem; pointer-events: none; max-width: 220px; } .chart-tip b { display: block; } /* ---------- listas / tablas responsivas ---------- */ .list { display: grid; gap: 11px; } .row-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 15px; display: grid; gap: 5px; color: inherit; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease); } .row-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); } .row-card:active { transform: scale(.995); } .row-top { display: flex; align-items: center; gap: 8px; } .row-top .who { font-weight: 680; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row-sub { color: var(--ink-2); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 4px 14px; } .row-money { display: flex; align-items: baseline; gap: 8px; font-size: .9rem; } .row-money b { font-size: 1.03rem; } .table-wrap { overflow-x: auto; border-radius: var(--radius); -webkit-overflow-scrolling: touch; } /* tabla suelta (no dentro de una card): que tenga su propio marco */ .table-wrap:not(.card .table-wrap) { border: 1px solid var(--border); box-shadow: var(--shadow-sm); } /* ---------- lista de cuotas (cronograma responsive) ---------- */ .cuotas { display: grid; gap: 8px; } .cuota-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; box-shadow: var(--shadow-sm); } .cuota-item .ci-n { font-weight: 750; color: var(--muted); font-variant-numeric: tabular-nums; align-self: start; padding-top: 1px; } .cuota-item .ci-main { min-width: 0; } .cuota-item .ci-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cuota-item .ci-top b { font-size: 1.04rem; font-variant-numeric: tabular-nums; } .cuota-item .ci-sub { color: var(--ink-2); font-size: .82rem; margin-top: 2px; } .cuota-item.pagada { opacity: .68; } .cuota-item.vencida { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); } /* que las cajas de grid/flex puedan encoger (evita desbordes en mobile) */ .list, .row-card, .row-top, .row-sub, .tiles, .tile, .page-head, .head-actions { min-width: 0; } .row-top .who { min-width: 0; } .row-sub .push { margin-left: auto; } /* tablas: compactas y claramente deslizables en mobile */ @media (max-width: 640px) { .table-wrap table { font-size: .82rem; } .table-wrap th, .table-wrap td { padding: 8px 9px; } } table { border-collapse: collapse; width: 100%; background: var(--surface); font-size: .89rem; } th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--grid); white-space: nowrap; } th { color: var(--muted); font-weight: 650; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } tr:last-child td { border-bottom: none; } tbody tr { transition: background .12s var(--ease); } tbody tr:hover { background: color-mix(in srgb, var(--ink) 3.5%, transparent); } /* ---------- chips de estado ---------- */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 650; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 70%, transparent); white-space: nowrap; } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .chip.aldia { color: var(--good-text); } .chip.porvencer { color: var(--warning); } .chip.vencido { color: var(--critical); } .chip.pagado { color: var(--accent-strong); } .chip.cancelado, .chip.neutro { color: var(--muted); } /* ---------- barra de progreso ---------- */ .meter { height: 8px; border-radius: 999px; background: var(--accent-wash); overflow: hidden; } .meter > i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s var(--ease); } .meter-line { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-2); margin-top: 5px; } /* ---------- botones y formularios ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: var(--radius-sm); padding: 10px 15px; font-weight: 640; font-size: .89rem; box-shadow: var(--shadow-sm); transition: transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease), filter .14s var(--ease); } .btn:hover { border-color: var(--border-2); } .btn:active { transform: scale(.97); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); } .btn.primary:hover { filter: brightness(1.06); border-color: var(--accent); } .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); } .btn.ghost:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } .btn.danger { color: var(--critical); } .btn.danger:hover { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, transparent); } .btn.small { padding: 6px 11px; font-size: .8rem; border-radius: 9px; } .btn.block { width: 100%; } .btn.wa { color: #128c4a; } :root[data-theme="dark"] .btn.wa { color: #25d366; } .btn:disabled { opacity: .5; cursor: not-allowed; } .field { display: grid; gap: 5px; margin-bottom: 13px; } .field label { font-size: .8rem; font-weight: 640; color: var(--ink-2); } .field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 11px 12px; width: 100%; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .field .hint { font-size: .75rem; color: var(--muted); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; } @media (max-width: 420px) { .grid3 { grid-template-columns: 1fr 1fr; } } /* campo de contraseña con ojo */ .pw-wrap { position: relative; display: block; } .pw-wrap > input { padding-right: 46px !important; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: color .14s var(--ease), background .14s var(--ease); } .pw-toggle:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); } .pw-toggle:active { transform: translateY(-50%) scale(.9); } .pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* control segmentado (tema, etc) */ .seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 3px; width: 100%; } .seg button { flex: 1; border: none; background: transparent; color: var(--ink-2); padding: 8px 10px; border-radius: 8px; font-size: .85rem; font-weight: 640; transition: background .15s var(--ease), color .15s var(--ease); } .seg button.on { background: var(--elev); color: var(--ink); box-shadow: var(--shadow-sm); } .search { flex: 1; min-width: 140px; max-width: 340px; padding: 10px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; box-shadow: var(--shadow-sm); } .search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } select.filter { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: .86rem; box-shadow: var(--shadow-sm); } /* ---------- resumen del plan en el alta de préstamo ---------- */ .plan-preview { background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: var(--radius-sm); padding: 13px 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 13px; font-size: .85rem; } .plan-preview b { display: block; font-size: 1.05rem; } /* ---------- modal (sheet en mobile, centrado en tablet+) ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 50; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s var(--ease); } .modal { background: var(--surface); width: 100%; max-height: 92dvh; overflow-y: auto; border-radius: 22px 22px 0 0; border: 1px solid var(--border); border-bottom: none; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); box-shadow: var(--shadow-lg); animation: sheet-up .28s var(--ease); } @media (min-width: 768px) { .modal-backdrop { align-items: center; padding: 24px; } .modal { width: 540px; border-radius: 20px; max-height: 88dvh; border-bottom: 1px solid var(--border); animation: pop .22s var(--ease); } } @media (min-width: 1800px) { .modal { width: 640px; } } .modal h2 { margin-bottom: 15px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; } @keyframes fade { from { opacity: 0; } } @keyframes sheet-up { from { transform: translateY(100%); } } @keyframes pop { from { transform: scale(.96); opacity: 0; } } /* handle del sheet en mobile */ .modal::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 999px; background: var(--border-2); margin: -6px auto 14px; } @media (min-width: 768px) { .modal::before { display: none; } } /* filas de menú (cuenta, "más") */ .menu-list { display: grid; gap: 4px; } .menu-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; color: var(--ink); padding: 13px 12px; border-radius: var(--radius-xs); font-size: .95rem; font-weight: 550; transition: background .14s var(--ease); } .menu-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .menu-row .ic { width: 22px; text-align: center; font-size: 1.05rem; color: var(--ink-2); } .menu-row .chev { margin-left: auto; color: var(--muted); } .menu-row.danger { color: var(--critical); } .menu-row.danger .ic { color: var(--critical); } .menu-sep { height: 1px; background: var(--border); margin: 6px 4px; } .menu-id { padding: 4px 12px 12px; } .menu-id .n { font-weight: 700; font-size: 1.05rem; } .menu-id .s { color: var(--muted); font-size: .84rem; } /* ---------- detalle de préstamo ---------- */ .detail-grid { display: grid; gap: 15px; min-width: 0; } .detail-grid > * { min-width: 0; } @media (min-width: 1180px) { .detail-grid { grid-template-columns: 360px 1fr; align-items: start; } } .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .89rem; min-width: 0; } .kv dt { color: var(--muted); margin: 0; min-width: 0; } .kv dd { margin: 0; text-align: right; font-weight: 570; min-width: 0; overflow-wrap: anywhere; } .cuota-row td .btn { visibility: visible; } .section-title { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; } .section-title h2 { flex: 1; } /* ---------- avisos ---------- */ .aviso { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--warning); border-radius: var(--radius-sm); padding: 13px 15px; box-shadow: var(--shadow-sm); } .aviso.vencida { border-left-color: var(--critical); } .aviso .txt { flex: 1; min-width: 0; } .aviso .txt b { display: block; } .aviso .txt span { color: var(--ink-2); font-size: .84rem; } /* ---------- calendario ---------- */ .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-head div { text-align: center; font-size: .7rem; color: var(--muted); font-weight: 700; padding: 4px 0; } .cal-cell { min-height: 54px; border: 1px solid var(--grid); border-radius: 10px; padding: 5px 6px; display: flex; flex-direction: column; gap: 1px; position: relative; font-size: .72rem; } @media (min-width: 768px) { .cal-cell { min-height: 72px; padding: 7px 9px; font-size: .8rem; } } @media (min-width: 1800px) { .cal-cell { min-height: 92px; font-size: .9rem; } } .cal-cell.vacia { border: none; } .cal-cell.hoy { outline: 2px solid var(--accent); outline-offset: -1px; } .cal-cell.con-items { cursor: pointer; background: var(--accent-wash); } .cal-cell.con-items.porvencer { background: color-mix(in srgb, var(--warning) 18%, var(--surface)); } .cal-cell.con-items.vencida { background: color-mix(in srgb, var(--critical) 14%, var(--surface)); } .cal-cell.con-items:hover { border-color: var(--accent); } .cal-num { color: var(--ink-2); font-weight: 600; } .cal-monto { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal-count { position: absolute; top: 4px; right: 5px; background: var(--accent); color: var(--on-accent); border-radius: 8px; min-width: 15px; height: 15px; font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .cal-cell.vencida .cal-count { background: var(--critical); color: #fff; } .cal-cell.porvencer .cal-count { background: var(--warning); color: #fff; } /* ---------- vacíos y toast ---------- */ .empty { text-align: center; color: var(--muted); padding: 48px 16px; border: 1.5px dashed var(--baseline); border-radius: var(--radius); } .empty .big { font-size: 2.2rem; display: block; margin-bottom: 8px; } .toast { position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--page); padding: 11px 19px; border-radius: 999px; font-size: .86rem; font-weight: 640; z-index: 70; box-shadow: var(--shadow-lg); max-width: 90vw; animation: toast-in .25s var(--ease); } @keyframes toast-in { from { transform: translate(-50%, 12px); opacity: 0; } } @media (min-width: 768px) { .toast { bottom: 26px; } } .toast.err { background: var(--critical); color: #fff; } /* respeta a quien pide menos movimiento */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }