/* ========================================================================== GoRifa Design System — base Premium · minimal · claro. Inspirado en la filosofía de diseño de Apple. ========================================================================== */ :root { --bg: #ffffff; --bg-soft: #f5f5f7; --bg-softer: #fafafa; --bg-elev: #ffffff; --ink: #1d1d1f; --ink-2: #424245; --muted: #6e6e73; --muted-2: #86868b; --line: rgba(0, 0, 0, .08); --line-2: rgba(0, 0, 0, .14); --fill: rgba(0, 0, 0, .04); --fill-2: rgba(0, 0, 0, .06); /* Superficies y tokens de tema */ --on-ink: #ffffff; /* texto sobre fondos "ink" (botón primario, chips) */ --field: #ffffff; /* fondo de inputs */ --surface-2: #f6f6f8; --sidebar: rgba(250, 250, 252, .9); --sidebar-solid: #fbfbfd; --glass: rgba(255, 255, 255, .72); --glass-strong: rgba(255, 255, 255, .88); --glass-app: rgba(250, 250, 250, .8); --seg-active: #ffffff; --track: #e5e5ea; --placeholder: linear-gradient(160deg, #f5f5f7, #e8e8ed); --avatar: linear-gradient(135deg, #e9e9ee, #d9d9e0); --toast: rgba(29, 29, 31, .92); --gold-soft: linear-gradient(135deg, #fff8e1, #fdecc0); --gold-ink: #6b4a00; --gold-ink-2: #8a6a1f; --dark-section: #000000; /* Acento de marca (se sobrescribe por empresa) */ --accent: #0071e3; --accent-ink: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--bg)); --accent-line: color-mix(in srgb, var(--accent) 28%, var(--bg)); /* Semánticos (suaves) */ --green: #1f8a4c; --green-bg: #e9f7ef; --yellow: #a15c00; --yellow-bg: #fff4dc; --orange: #b4540a; --orange-bg: #fff0e3; --red: #c4302b; --red-bg: #fdecec; --blue: #0060c7; --blue-bg: #e8f1fd; --purple: #7a3fc4; --purple-bg: #f3ecfc; --gray: #6e6e73; --gray-bg: #f1f1f3; --radius-xs: 8px; --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --shadow-xs: 0 1px 1px rgba(0, 0, 0, .03); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .02); --shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 6px 20px rgba(0, 0, 0, .04); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .03), 0 24px 64px rgba(0, 0, 0, .08); --shadow-xl: 0 4px 12px rgba(0, 0, 0, .04), 0 40px 100px rgba(0, 0, 0, .12); --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace; --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.36, .64, 1); } /* Tema oscuro: automático según el sistema, o forzado con */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0a0a0b; --bg-soft: #1c1c1e; --bg-softer: #0a0a0b; --bg-elev: #161618; --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #a1a1a6; --muted-2: #7c7c82; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); --fill: rgba(255, 255, 255, .06); --fill-2: rgba(255, 255, 255, .1); --green: #30d158; --green-bg: rgba(48, 209, 88, .14); --yellow: #ffd60a; --yellow-bg: rgba(255, 214, 10, .13); --orange: #ff9f0a; --orange-bg: rgba(255, 159, 10, .14); --red: #ff6961; --red-bg: rgba(255, 69, 58, .15); --blue: #409cff; --blue-bg: rgba(10, 132, 255, .17); --purple: #bf5af2; --purple-bg: rgba(191, 90, 242, .16); --gray: #a1a1a6; --gray-bg: rgba(255, 255, 255, .08); --shadow-xs: 0 1px 1px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 64px rgba(0, 0, 0, .55); --shadow-xl: 0 4px 12px rgba(0, 0, 0, .45), 0 40px 100px rgba(0, 0, 0, .65); --on-ink: #1d1d1f; --field: #1c1c1e; --surface-2: #1f1f22; --sidebar: rgba(18, 18, 20, .9); --sidebar-solid: #121214; --glass: rgba(16, 16, 18, .72); --glass-strong: rgba(28, 28, 30, .88); --glass-app: rgba(10, 10, 11, .78); --seg-active: #3a3a3c; --track: #39393d; --placeholder: linear-gradient(160deg, #1f1f22, #2a2a2e); --avatar: linear-gradient(135deg, #2c2c2e, #3a3a3c); --toast: rgba(58, 58, 62, .94); --gold-soft: linear-gradient(135deg, rgba(233, 196, 106, .2), rgba(233, 196, 106, .08)); --gold-ink: #f5d77a; --gold-ink-2: #d9b85c; --dark-section: #111113; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0a0a0b; --bg-soft: #1c1c1e; --bg-softer: #0a0a0b; --bg-elev: #161618; --ink: #f5f5f7; --ink-2: #d1d1d6; --muted: #a1a1a6; --muted-2: #7c7c82; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); --fill: rgba(255, 255, 255, .06); --fill-2: rgba(255, 255, 255, .1); --green: #30d158; --green-bg: rgba(48, 209, 88, .14); --yellow: #ffd60a; --yellow-bg: rgba(255, 214, 10, .13); --orange: #ff9f0a; --orange-bg: rgba(255, 159, 10, .14); --red: #ff6961; --red-bg: rgba(255, 69, 58, .15); --blue: #409cff; --blue-bg: rgba(10, 132, 255, .17); --purple: #bf5af2; --purple-bg: rgba(191, 90, 242, .16); --gray: #a1a1a6; --gray-bg: rgba(255, 255, 255, .08); --shadow-xs: 0 1px 1px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 24px 64px rgba(0, 0, 0, .55); --shadow-xl: 0 4px 12px rgba(0, 0, 0, .45), 0 40px 100px rgba(0, 0, 0, .65); --on-ink: #1d1d1f; --field: #1c1c1e; --surface-2: #1f1f22; --sidebar: rgba(18, 18, 20, .9); --sidebar-solid: #121214; --glass: rgba(16, 16, 18, .72); --glass-strong: rgba(28, 28, 30, .88); --glass-app: rgba(10, 10, 11, .78); --seg-active: #3a3a3c; --track: #39393d; --placeholder: linear-gradient(160deg, #1f1f22, #2a2a2e); --avatar: linear-gradient(135deg, #2c2c2e, #3a3a3c); --toast: rgba(58, 58, 62, .94); --gold-soft: linear-gradient(135deg, rgba(233, 196, 106, .2), rgba(233, 196, 106, .08)); --gold-ink: #f5d77a; --gold-ink-2: #d9b85c; --dark-section: #111113; } :root { color-scheme: light; } :root[data-theme="light"] { color-scheme: light; } /* Transición suave al cambiar de tema */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), fill .35s, stroke .35s !important; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss01", "ss03"; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; } .icon { display: inline-block; flex-shrink: 0; vertical-align: middle; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; } ::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; border-radius: 6px; } /* ---------- Tipografía ---------- */ h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -.022em; line-height: 1.1; } h1 { font-size: clamp(32px, 4vw, 44px); letter-spacing: -.03em; } h2 { font-size: clamp(24px, 3vw, 32px); } h3 { font-size: 20px; letter-spacing: -.018em; } h4 { font-size: 16px; letter-spacing: -.012em; } p { margin: 0; } .display { font-size: clamp(44px, 8vw, 96px); font-weight: 700; letter-spacing: -.045em; line-height: 1.02; } .title-xl { font-size: clamp(36px, 5.6vw, 64px); font-weight: 700; letter-spacing: -.04em; line-height: 1.04; } .title-lg { font-size: clamp(30px, 4vw, 48px); font-weight: 650; letter-spacing: -.035em; line-height: 1.08; } .lead { font-size: clamp(17px, 1.8vw, 21px); line-height: 1.45; color: var(--muted); letter-spacing: -.01em; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--accent); } .muted { color: var(--muted); } .muted-2 { color: var(--muted-2); } .small { font-size: 13px; } .tiny { font-size: 12px; } .mono { font-family: var(--mono); font-feature-settings: normal; } .num { font-variant-numeric: tabular-nums; } .strong { font-weight: 600; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-right { text-align: right; } .text-center { text-align: center; } .text-green { color: var(--green); } .text-red { color: var(--red); } /* ---------- Botones ---------- */ .btn { --h: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h); padding: 0 18px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; border: 1px solid transparent; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease), opacity .2s; user-select: none; } .btn:active:not(:disabled) { transform: scale(.97); } .btn:disabled, .btn.is-loading { opacity: .5; pointer-events: none; } .btn-primary { background: var(--ink); color: var(--on-ink); } .btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--bg)); } .btn-accent { background: var(--accent); color: var(--accent-ink); } .btn-accent:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } .btn-secondary { background: var(--fill); color: var(--ink); } .btn-secondary:hover { background: var(--fill-2); } .btn-outline { background: var(--bg); border-color: var(--line-2); color: var(--ink); } .btn-outline:hover { border-color: rgba(0, 0, 0, .28); } .btn-ghost { color: var(--ink-2); padding: 0 12px; } .btn-ghost:hover { background: var(--fill); color: var(--ink); } .btn-link { color: var(--accent); padding: 0; height: auto; } .btn-link:hover { text-decoration: underline; } .btn-danger { background: var(--red-bg); color: var(--red); } .btn-danger:hover { background: color-mix(in srgb, var(--red) 22%, var(--bg)); } .btn-wa { background: #25d366; color: #fff; } .btn-wa:hover { background: #1fb957; } .btn-sm { --h: 32px; padding: 0 13px; font-size: 13px; } .btn-lg { --h: 50px; padding: 0 26px; font-size: 16px; } .btn-xl { --h: 56px; padding: 0 30px; font-size: 17px; } .btn-block { width: 100%; } .btn-icon { width: var(--h); padding: 0; } .btn .spinner { width: 16px; height: 16px; } .spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Formularios ---------- */ .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; } .field > label, .label { font-size: 13px; font-weight: 500; color: var(--ink-2); } .field .hint { font-size: 12px; color: var(--muted-2); } .field-error { font-size: 12.5px; color: var(--red); margin-top: -2px; } .input, .select, .textarea { width: 100%; height: 46px; padding: 0 14px; background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; font-size: 15px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s; appearance: none; } .input::placeholder, .textarea::placeholder { color: #a1a1a6; } .input:hover, .select:hover, .textarea:hover { border-color: rgba(0, 0, 0, .24); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); } .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--red); } .textarea { height: auto; min-height: 110px; padding: 12px 14px; resize: vertical; line-height: 1.5; } .select { padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .input-sm { height: 36px; font-size: 14px; border-radius: 10px; } .input-group { position: relative; } .input-group .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; } .input-group .input { padding-left: 40px; } .input-prefix { position: relative; } .input-prefix span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; } .input-prefix .input { padding-left: 28px; } .check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; user-select: none; } .check input { width: 20px; height: 20px; accent-color: var(--ink); margin: 0; cursor: pointer; } .switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; } .switch input { position: absolute; opacity: 0; pointer-events: none; } .switch .track { width: 44px; height: 26px; border-radius: 99px; background: var(--track); position: relative; transition: background .25s var(--ease); flex-shrink: 0; } .switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform .3s var(--spring); } .switch input:checked + .track { background: #34c759; } .switch input:checked + .track::after { transform: translateX(18px); } .switch input:focus-visible + .track { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } .form-grid .span-2 { grid-column: span 2; } .form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; } @media (max-width: 640px) { .form-grid, .form-grid-3 { grid-template-columns: minmax(0, 1fr); } .form-grid .span-2 { grid-column: auto; } } /* Segmented control estilo iOS */ .segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--fill); overflow-x: auto; max-width: 100%; scrollbar-width: none; } .segmented::-webkit-scrollbar { display: none; } .segmented > * { height: 32px; padding: 0 14px; border-radius: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background .2s var(--ease), color .2s, box-shadow .2s; } .segmented > *:hover { color: var(--ink); } .segmented > .active, .segmented > [aria-selected="true"] { background: var(--seg-active); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 .5px rgba(0, 0, 0, .06); } .segmented .count { font-size: 11px; color: var(--muted-2); font-weight: 600; } /* Selector de opciones en tarjeta (radio cards) */ .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .choice { position: relative; cursor: pointer; } .choice input { position: absolute; opacity: 0; } .choice .choice-body { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--bg-elev); transition: border-color .2s, box-shadow .2s, background .2s; height: 100%; } .choice:hover .choice-body { border-color: rgba(0, 0, 0, .24); } .choice input:checked + .choice-body { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); } .choice input:focus-visible + .choice-body { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; } .choice .choice-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--fill); display: grid; place-items: center; flex-shrink: 0; } .choice strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 2px; } .choice span.muted { font-size: 13px; } /* ---------- Tarjetas ---------- */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .card-pad { padding: 24px; } .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; } .card-header h3 { font-size: 17px; } .card-body { padding: 20px 24px 24px; } .card-footer { padding: 16px 24px; border-top: 1px solid var(--line); } .card-soft { background: var(--bg-soft); border: 0; box-shadow: none; } @media (max-width: 640px) { .card-pad { padding: 18px; } .card-header { padding: 16px 18px 0; } .card-body { padding: 16px 18px 18px; } } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--gray-bg); color: var(--gray); } .badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge-green { background: var(--green-bg); color: var(--green); } .badge-yellow { background: var(--yellow-bg); color: var(--yellow); } .badge-orange { background: var(--orange-bg); color: var(--orange); } .badge-red { background: var(--red-bg); color: var(--red); } .badge-blue { background: var(--blue-bg); color: var(--blue); } .badge-purple { background: var(--purple-bg); color: var(--purple); } .badge-dark { background: var(--ink); color: var(--on-ink); } .badge-plain i { display: none; } .chip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 10px; border-radius: 9px; background: var(--fill); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; } .chip-dark { background: var(--ink); color: var(--on-ink); } .chip-list { display: flex; flex-wrap: wrap; gap: 6px; } /* ---------- Tablas (limpias, sin bordes pesados) ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } .table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted-2); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; } .table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; } .table tbody tr { transition: background .15s; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--bg-softer); } .table tr[data-href] { cursor: pointer; } .table .t-right { text-align: right; } .table .t-main { font-weight: 550; color: var(--ink); } .table .t-sub { font-size: 12.5px; color: var(--muted-2); margin-top: 1px; } .table th:first-child, .table td:first-child { padding-left: 24px; } .table th:last-child, .table td:last-child { padding-right: 24px; } @media (max-width: 640px) { .table th:first-child, .table td:first-child { padding-left: 18px; } .table th:last-child, .table td:last-child { padding-right: 18px; } .table .hide-sm { display: none; } } /* Lista estilo iOS */ .list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); } .list-item:last-child { border-bottom: 0; } .list-item .grow { flex: 1; min-width: 0; } .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--avatar); color: var(--ink-2); font-size: 13px; font-weight: 600; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; } .avatar-lg { width: 56px; height: 56px; font-size: 19px; } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .progress { height: 6px; border-radius: 99px; background: var(--fill-2); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transition: width 1s var(--ease-out); } .progress-accent > span { background: var(--accent); } .progress-lg { height: 10px; } /* ---------- Alerts / flash ---------- */ .alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius); font-size: 14px; background: var(--bg-soft); color: var(--ink-2); } .alert .icon { margin-top: 1px; } .alert-error { background: var(--red-bg); color: var(--red); } .alert-success { background: var(--green-bg); color: var(--green); } .alert-info { background: var(--blue-bg); color: var(--blue); } .alert-warn { background: var(--yellow-bg); color: var(--yellow); } /* ---------- Toasts ---------- */ .toasts { position: fixed; z-index: 1000; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: calc(100% - 32px); max-width: 420px; } .toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--toast); color: #fff; font-size: 14px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--shadow-lg); animation: toast-in .45s var(--spring) both; } .toast.out { animation: toast-out .3s var(--ease) both; } .toast.error .icon { color: #ff6961; } .toast.success .icon { color: #30d158; } @keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } } /* ---------- Modal / Sheet ---------- */ .modal { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: 20px; } .modal.open { display: flex; } .modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade-in .25s var(--ease) both; } .modal-panel { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow: auto; background: var(--bg-elev); border-radius: 24px; box-shadow: var(--shadow-xl); animation: modal-in .45s var(--spring) both; } .modal-panel.wide { max-width: 640px; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px 4px; } .modal-head h3 { font-size: 19px; } .modal-body { padding: 16px 24px 24px; } .modal-close { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); color: var(--muted); transition: background .2s; } .modal-close:hover { background: var(--fill-2); color: var(--ink); } @keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.97); } } @keyframes fade-in { from { opacity: 0; } } @media (max-width: 640px) { .modal { align-items: flex-end; padding: 0; } .modal-panel, .modal-panel.wide { max-width: none; border-radius: 24px 24px 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom); animation: sheet-in .5s var(--ease-out) both; } @keyframes sheet-in { from { transform: translateY(100%); } } } /* ---------- Empty state ---------- */ .empty { text-align: center; padding: 56px 24px; } .empty-icon { width: 64px; height: 64px; border-radius: 20px; background: var(--bg-soft); display: grid; place-items: center; margin: 0 auto 18px; color: var(--muted); } .empty h3 { font-size: 18px; margin-bottom: 6px; } .empty p { color: var(--muted); max-width: 360px; margin: 0 auto 20px; font-size: 14.5px; } /* ---------- Grilla de números (compartida app / público) ---------- */ .numgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; } .numgrid.compact { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 6px; } .num-cell { position: relative; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; background: var(--bg-elev); border: 1px solid var(--line-2); color: var(--ink); transition: transform .18s var(--ease), background .18s, border-color .18s, color .18s, box-shadow .18s; user-select: none; } button.num-cell:hover { border-color: var(--ink); transform: translateY(-1px); } .num-cell.s-a { background: var(--yellow-bg); border-color: transparent; color: var(--yellow); } .num-cell.s-v, .num-cell.s-p { background: var(--red-bg); border-color: transparent; color: color-mix(in srgb, var(--red) 70%, var(--bg)); } .num-cell.s-p.admin { background: var(--blue-bg); color: var(--blue); } .num-cell.s-x { background: var(--gray-bg); border-color: transparent; color: #b8b8bd; text-decoration: line-through; } .num-cell.s-g { background: linear-gradient(135deg, #f7e7b4, #e9c46a); border-color: transparent; color: #6b4a00; } .num-cell.is-selected { background: var(--ink); border-color: var(--ink); color: var(--on-ink); transform: scale(1.04); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); } .num-cell.is-selected:hover { transform: scale(1.04); } .num-cell.pop { animation: pop .35s var(--spring); } .num-cell[disabled] { cursor: not-allowed; } @keyframes pop { 40% { transform: scale(1.12); } } .legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--muted); } .legend span { display: inline-flex; align-items: center; gap: 7px; } .legend i { width: 10px; height: 10px; border-radius: 50%; } .legend .l-d { background: #34c759; } .legend .l-a { background: #ffcc00; } .legend .l-v { background: #ff3b30; } .legend .l-p { background: #0a84ff; } .legend .l-x { background: #c7c7cc; } .legend .l-g { background: #e9c46a; } .legend .l-s { background: var(--ink); } /* ---------- Animaciones de aparición ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); } .reveal.in { opacity: 1; transform: none; } .reveal-scale { opacity: 0; transform: scale(.96); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); } .reveal-scale.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal, .reveal-scale { opacity: 1; transform: none; } } /* ---------- Utilidades ---------- */ .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 22px; } .container-sm { max-width: 760px; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .between { justify-content: space-between; } .center { justify-content: center; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-0 { margin-bottom: 0; } .w-full { width: 100%; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .divider { height: 1px; background: var(--line); margin: 20px 0; } .dot-sep::before { content: "·"; margin: 0 6px; color: var(--muted-2); } /* Logo */ .logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; letter-spacing: -.035em; color: var(--ink); } .logo-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } .logo-mark svg { width: 16px; height: 16px; } .logo b { font-weight: 700; color: var(--muted-2); } /* Segmented control con radios */ .segmented > label { cursor: pointer; } .segmented > label:has(input:checked) { background: var(--seg-active); color: var(--ink); box-shadow: var(--shadow-sm), 0 0 0 .5px rgba(0, 0, 0, .06); } .segmented > label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; } /* Tarjeta dorada (ganadores) */ .gold-soft { background: var(--gold-soft); color: var(--gold-ink); border: 0; } .gold-soft .muted, .gold-soft small { color: var(--gold-ink-2); } /* Selector de tema: muestra el ícono que corresponde */ .theme-ico-dark { display: none; } :root[data-theme="dark"] .theme-ico-light { display: none; } :root[data-theme="dark"] .theme-ico-dark { display: inline-block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-ico-light { display: none; } :root:not([data-theme="light"]) .theme-ico-dark { display: inline-block; } } .theme-switch { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--fill); } .theme-switch button { flex: 1; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); transition: background .2s, color .2s; } .theme-switch button:hover { color: var(--ink); } .theme-switch button.active { background: var(--seg-active); color: var(--ink); box-shadow: var(--shadow-sm); }