/* Sistema visual · plataforma de diseño dental digital (Omar Mata) Agencia Garvil · 2026-08-26 · REESCRITO el 2026-09-08 como sistema Apple --------------------------------------------------------------------------- Robmar: «haz que todo el diseño, tanto del sistema interno como administrativo, esté Apple». Esta hoja aplica la skill apple-design (emilkowalski/skills) a los paneles: fuente del sistema, blanco y gris #F5F5F7, negro #1D1D1F, UN azul #0071E3, cápsulas, esquinas de 12–18 px, hairlines #E5E5EA, y respuesta al pulsar en :active. LOS NOMBRES DE LAS VARIABLES NO CAMBIAN. Se llaman --void, --ivory, --lime porque nacieron en el sistema oscuro de agosto (grafito + lima); panel.css, rx.css, arcadas.css y las páginas las usan por ese nombre. Cambiarles el nombre habría obligado a tocar treinta archivos para el mismo resultado. Lo que cambia es lo que valen: --void → fondo de página gris claro (antes negro azulado) --panel → superficie blanca (antes grafito) --ivory → tinta casi negra (antes marfil) --lime → azul de acción #0071E3 (antes lima) --lime-dim → el azul como texto #0066CC (5,4:1 sobre blanco) --lime-ink → blanco, el texto encima del azul Lo que NO cambia: todo dato en monoespaciada con cifras tabulares, nada por debajo de 12 px, 16 px en los campos, 44 px de blanco táctil, :hover solo con ratón. Los estados (nuevo, en curso, entregado, revisión) son cápsulas tintadas con texto que pasa AA sobre su fondo. --------------------------------------------------------------------------- */ /* ---------- Monoespaciada autoalojada para los datos --------------------- */ @font-face{font-family:'Plex';src:url('PlexMono-400.woff2') format('woff2'); font-weight:400;font-display:swap;font-style:normal} @font-face{font-family:'Plex';src:url('PlexMono-500.woff2') format('woff2'); font-weight:500;font-display:swap;font-style:normal} @font-face{font-family:'Plex';src:url('PlexMono-600.woff2') format('woff2'); font-weight:600;font-display:swap;font-style:normal} :root{ /* ---------- Superficies ---------------------------------------------- */ --void: #F5F5F7; /* fondo de página */ --panel: #FFFFFF; /* superficie */ --panel-2: #F5F5F7; /* superficie hundida / fila alterna */ --panel-3: #E8E8ED; /* fila activa, control segmentado */ --line: #E5E5EA; /* hairline */ --line-2: #D2D2D7; /* borde de campo */ --ivory: #1D1D1F; /* titulares. 16,1:1 sobre --panel */ --body: #424245; /* texto corrido. 9,4:1 */ --muted: #6E6E73; /* secundario. 4,9:1 sobre --panel · 4,5:1 sobre --void ← AA */ --faint: #AEAEB2; /* solo bordes y separadores, NUNCA texto */ /* ---------- El documento (mismo sistema: aquí ya todo es claro) ------- */ --paper: #FFFFFF; --paper-2: #F5F5F7; --rule: #D2D2D7; --ink: #1D1D1F; --ink-body: #424245; --ink-muted: #6E6E73; /* ---------- Acentos --------------------------------------------------- */ --lime: #0071E3; /* acción y selección (el azul de Apple) */ --lime-2: #0077ED; /* hover */ --lime-dim: #0066CC; /* el acento COMO TEXTO sobre claro. 5,4:1 */ --lime-ink: #FFFFFF; /* texto encima del acento. 4,6:1 sobre #0071E3 */ --lime-soft: #E3F0FD; /* tinte de selección */ --mint: #1F7A35; /* entregado / correcto, como texto. 5,4:1 */ --mint-soft: #E6F6EA; --amber: #B25000; /* en curso / atención, como texto. 5,2:1 */ --amber-soft:#FFF3E0; --rojo: #B3261E; /* revisión / error, como texto. 6,5:1 */ --rojo-soft: #FDECEC; --clay: #C0737C; /* encía. Nunca es un estado, es anatomía */ /* ---------- Métricas -------------------------------------------------- */ --ancho: 1320px; --ancho-doc: 940px; --r-s: 8px; --r-m: 12px; --r-l: 18px; --pill: 980px; --paso: 8px; --sombra: 0 1px 2px rgba(0,0,0,.04),0 8px 30px rgba(0,0,0,.06); /* lo que antes iba a pelo en panel.css: la barra translúcida, los campos, los bordes de los avisos y los hovers. Dos juegos, más abajo. */ --barra: rgba(255,255,255,.72); --barra-linea:rgba(0,0,0,.08); --campo: #FFFFFF; --aviso-ok-b:#BFE6C8; --aviso-mal-b:#F5C2C2; --aviso-info-b:#BBD8F7; --panel-hover:#DCDCE1; --ink-hover:#2C2C2E; color-scheme: light; /* lo que antes iba a pelo en panel.css: la barra translúcida, los campos, los bordes de los avisos y los hovers. Dos juegos, más abajo. */ --barra: rgba(255,255,255,.72); --barra-linea:rgba(0,0,0,.08); --campo: #FFFFFF; --aviso-ok-b:#BFE6C8; --aviso-mal-b:#F5C2C2; --aviso-info-b:#BBD8F7; --panel-hover:#DCDCE1; --ink-hover:#2C2C2E; color-scheme: light; --t-rapida: 120ms; --t-media: 200ms; --curva: cubic-bezier(.2,.6,.3,1); --sys: -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono: ui-monospace,"SF Mono",Menlo,Consolas,'Plex',monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--void);color:var(--body); font-family:var(--sys); font-size:17px;line-height:1.47;letter-spacing:0;font-synthesis-weight:none; -webkit-font-smoothing:antialiased} /* Suelo tipográfico REAL. rem mide contra el (16px), no contra el body (17px). .75rem = 12px exactos. No bajar de aquí. */ .t-xs{font-size:.75rem;letter-spacing:.012em} /* 12px */ .t-s {font-size:.8125rem} /* 13px */ h1,h2,h3,h4{font-family:var(--sys);color:var(--ivory); font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0} h1{font-size:clamp(2rem,4.2vw,3.25rem)} h2{font-size:clamp(1.5rem,2.8vw,2.25rem);letter-spacing:-.015em} h3{font-size:1.125rem;letter-spacing:-.01em} p{margin:0} a{color:inherit} /* -------------------------------------------------------------------------- LA REGLA QUE DEFINE ESTE SITIO Todo lo que es un dato — número de diente, código de caso, dinero, plazo, cantidad, fecha, porcentaje — se pinta en monoespaciada con cifras tabulares. En una herramienta clínica el número ES el contenido. -------------------------------------------------------------------------- */ .n,.num,code,kbd{font-family:var(--mono); font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1; letter-spacing:-.01em} /* Etiqueta de sección de un panel, como los rótulos grises de Ajustes: 12 px, mayúsculas cortas, gris. NO se usa como kicker encima de los H2. */ .rotulo{font-family:var(--sys);font-size:.75rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);font-weight:500} .env{width:min(100% - 40px,var(--ancho));margin-inline:auto} .env-doc{width:min(100% - 40px,var(--ancho-doc));margin-inline:auto} /* ---------- Superficies ---------------------------------------------- */ .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-m)} .panel-2{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-m)} /* ---------- Botones: cápsula, respuesta al pulsar ----------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px; font:400 .9375rem var(--sys);letter-spacing:-.01em; padding:12px 20px;line-height:1.2;border-radius:var(--pill); border:1px solid transparent;min-height:44px; cursor:pointer;text-decoration:none;text-align:center; transition:background-color var(--t-rapida) var(--curva), border-color var(--t-rapida) var(--curva), color var(--t-rapida) var(--curva), transform 100ms ease-out} .btn:active{transform:scale(.97)} .btn-1{background:var(--lime);color:var(--lime-ink);font-weight:500} .btn-2{background:var(--panel-3);color:var(--ivory)} .btn-doc{background:var(--ink);color:var(--paper)} .btn:focus-visible{outline:2px solid var(--lime);outline-offset:2px} /* ---------- Odontograma: zona de toque -------------------------------- */ .dt-hit{fill:transparent;stroke:none} /* ---------- Estados: cápsulas tintadas, texto AA sobre su tinte -------- */ .est{font-family:var(--sys);font-size:.75rem;letter-spacing:0;font-weight:600; text-transform:none;padding:4px 10px;border-radius:var(--pill); border:1px solid transparent;display:inline-block;white-space:nowrap} .est-nuevo {color:var(--lime-dim);background:var(--lime-soft)} .est-curso {color:var(--amber); background:var(--amber-soft)} .est-entregado{color:var(--mint); background:var(--mint-soft)} .est-revision {color:var(--rojo); background:var(--rojo-soft)} /* ---------- Tablas de datos ------------------------------------------- */ .tabla{width:100%;border-collapse:collapse;font-size:.875rem} .tabla th{font-family:var(--sys);font-size:.75rem;letter-spacing:.06em; text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left; padding:10px 12px;border-bottom:1px solid var(--line)} .tabla td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--body)} .tabla tr:last-child td{border-bottom:0} .tabla tbody tr{transition:background-color var(--t-rapida) var(--curva)} /* ---------- Táctiles: 44px de mínimo ----------------------------------- */ .tap{min-height:44px;min-width:44px;display:inline-flex;align-items:center; justify-content:center} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important} } /* ---------- Hover: SOLO donde hay ratón --------------------------------- */ @media (hover:hover) and (pointer:fine){ .btn-1:hover{background:var(--lime-2)} .btn-2:hover{background:var(--panel-hover)} .btn-doc:hover{background:var(--ink-hover)} .tabla tbody tr:hover{background:var(--panel-2)} } /* =========================================================================== MODO OSCURO · 2026-09-09 --------------------------------------------------------------------------- Los mismos nombres, el otro juego. Sin preferencia guardada manda el sistema; con data-tema en manda la persona (el script del lo pone antes de pintar y tema.js enchufa el botón). La misma clave «tema» que la portada, así que elegir fuera vale dentro. Medido: cuerpo 12:1, secundario 6,5:1, azul como texto 5,6:1, estados de 4,7 a 8 sobre su tinte. =========================================================================== */ .tema-btn{width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ivory); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:0 0 auto; transition:background-color var(--t-rapida) var(--curva)} .tema-btn svg{width:20px;height:20px;fill:currentColor} .tema-btn .sol{display:none} .tema-btn .luna{display:block} @media (hover:hover) and (pointer:fine){ .tema-btn:hover{background:var(--panel-3)} } @media (prefers-color-scheme:dark){ :root:not([data-tema="claro"]){ --void:#000000; --panel:#1D1D1F; --panel-2:#2C2C2E; --panel-3:#3A3A3C; --line:#2C2C2E; --line-2:#48484A; --ivory:#F5F5F7; --body:#D2D2D7; --muted:#A1A1A6; --faint:#636366; --paper:#1D1D1F; --paper-2:#2C2C2E; --rule:#48484A; --ink:#F5F5F7; --ink-body:#D2D2D7; --ink-muted:#A1A1A6; --lime:#0071E3; --lime-2:#0077ED; --lime-dim:#2997FF; --lime-ink:#FFFFFF; --lime-soft:#0E2A4A; --mint:#5DD48A; --mint-soft:#0F2A1A; --amber:#F0A24E; --amber-soft:#2E1E08; --rojo:#FF7B72; --rojo-soft:#3A1414; --sombra:0 1px 2px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.6); --barra:rgba(29,29,31,.78); --barra-linea:rgba(255,255,255,.1); --campo:#2C2C2E; --aviso-ok-b:#1F5A32; --aviso-mal-b:#6B2323; --aviso-info-b:#1F4B7A; --panel-hover:#48484A; --ink-hover:#E5E5EA; color-scheme:dark; } :root:not([data-tema="claro"]) .tema-btn .sol{display:block} :root:not([data-tema="claro"]) .tema-btn .luna{display:none} } :root[data-tema="oscuro"]{ --void:#000000; --panel:#1D1D1F; --panel-2:#2C2C2E; --panel-3:#3A3A3C; --line:#2C2C2E; --line-2:#48484A; --ivory:#F5F5F7; --body:#D2D2D7; --muted:#A1A1A6; --faint:#636366; --paper:#1D1D1F; --paper-2:#2C2C2E; --rule:#48484A; --ink:#F5F5F7; --ink-body:#D2D2D7; --ink-muted:#A1A1A6; --lime:#0071E3; --lime-2:#0077ED; --lime-dim:#2997FF; --lime-ink:#FFFFFF; --lime-soft:#0E2A4A; --mint:#5DD48A; --mint-soft:#0F2A1A; --amber:#F0A24E; --amber-soft:#2E1E08; --rojo:#FF7B72; --rojo-soft:#3A1414; --sombra:0 1px 2px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.6); --barra:rgba(29,29,31,.78); --barra-linea:rgba(255,255,255,.1); --campo:#2C2C2E; --aviso-ok-b:#1F5A32; --aviso-mal-b:#6B2323; --aviso-info-b:#1F4B7A; --panel-hover:#48484A; --ink-hover:#E5E5EA; color-scheme:dark; } :root[data-tema="oscuro"] .tema-btn .sol{display:block} :root[data-tema="oscuro"] .tema-btn .luna{display:none} :root[data-tema="claro"] .tema-btn .sol{display:none} :root[data-tema="claro"] .tema-btn .luna{display:block}