/* ========================================================================= JAMES M.D. — Design System ========================================================================= Sistema de DOS ZONAS visualmente diferenciadas. NO unificar. .zone-patient → Audiencia A Pacientes y acompañantes (Compañero/Asistente). 60-85 años, motor fino afectado por Parkinson. Tipografía 20px, targets ≥56px, una columna, contraste AAA, espaciado generoso, lenguaje natural. .zone-pro → Audiencia B Profesionales (Neurólogo, Especialista, Terapeuta). Densidad estándar Bootstrap, tablas, dashboards. Asume desktop con teclado. Cómo aplicar: poner la clase en vía {% block bodyclass %}zone-patient{% endblock %} en el template de página. Componentes deben funcionar en ambas zonas; las variables --zone-* se reescalan automáticamente. Para extender el sistema (nuevos tokens, ajustes de auditoría UX) editar este archivo y documentar en docs/frontend/design-system.md. ========================================================================= */ /* ---------- Tokens compartidos ----------------------------------------- */ :root { /* ----- Paleta brand: teal-azul institucional cálido ----- Inspirada en instituciones de salud chilenas. Más cálida que un azul corporativo y menos clínica que el verde de hospital. */ --color-brand-50: #e6f1f3; --color-brand-100: #cfe6ea; --color-brand-200: #a2d0d7; --color-brand-500: #0e6b75; /* fills, CTA backgrounds, badges activos */ --color-brand-600: #08515a; /* text on white = 7.5:1 (AAA) — links, iconos, headers */ --color-brand-700: #043b42; /* énfasis, navbar brand */ --color-brand: var(--color-brand-500); --color-brand-dark: var(--color-brand-600); /* ----- Estados ----- */ --color-success-50: #e6f4ec; --color-success-100: #cfe7d8; --color-success-500: #1f7a3d; --color-success-600: #15602f; /* text on white = 7.4:1 (AAA) */ --color-success-700: #0f4422; --color-success: var(--color-success-600); --color-warn-50: #fff4dd; --color-warn-100: #ffe5b3; --color-warn-500: #b06a04; --color-warn-600: #8a5300; /* text on white = 7.5:1 (AAA) */ --color-warn-700: #5e3900; --color-warn: var(--color-warn-600); --color-danger-50: #fdeae6; --color-danger-100: #f8cfc7; --color-danger-500: #c1331f; --color-danger-600: #9c2a1a; /* text on white = 7.5:1 (AAA) */ --color-danger-700: #6e1d12; --color-danger: var(--color-danger-600); /* ----- Texto / superficies ----- */ --color-text: #1a1a1a; /* contraste 16:1 sobre #fff */ --color-text-muted: #4a4a4a; /* contraste 9:1 */ --color-bg: #ffffff; --color-surface: #f7f7f9; /* cards en hover */ --color-surface-pro: #fbfbfd; /* fondo zona-pro: off-white sutil, reduce fatiga */ --color-border: #d6d6db; --color-border-strong: #b9b9c1; /* Focus ring (visible en ambas zonas) — usa brand para cohesión */ --focus-ring: 0 0 0 3px rgba(14, 107, 117, 0.45); /* Stack tipográfico — system fonts, sin Google Fonts */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ----- Sombras (tres niveles, low-saturation azuladas) ----- */ --shadow-xs: 0 1px 2px rgba(15, 30, 40, 0.05); --shadow-sm: 0 1px 3px rgba(15, 30, 40, 0.06), 0 1px 2px rgba(15, 30, 40, 0.04); --shadow-md: 0 4px 8px rgba(15, 30, 40, 0.07), 0 2px 4px rgba(15, 30, 40, 0.05); --shadow-lg: 0 10px 24px rgba(15, 30, 40, 0.10), 0 4px 8px rgba(15, 30, 40, 0.06); /* ----- Radii semánticos ----- */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* ----- Transiciones ----- */ --transition-fast: 120ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; /* ----- Tokens compartidos por zonas (override en cada zona) ----- */ --zone-base-font-size: 1rem; --zone-line-height: 1.5; --zone-target-min: 44px; --zone-input-min: 38px; --zone-spacing: 0.75rem; --zone-radius: var(--radius-sm); } /* =========================================================================== ZONA A — paciente / acompañante =========================================================================== */ .zone-patient { /* Tokens — base inicial razonable; ajustables por auditoría UX posterior */ --zone-base-font-size: 1.25rem; /* 20px */ --zone-line-height: 1.6; --zone-target-min: 56px; /* WCAG SC 2.5.5 + Parkinson buffer */ --zone-input-min: 56px; --zone-spacing: 1rem; --zone-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--zone-base-font-size); line-height: var(--zone-line-height); color: var(--color-text); background-color: var(--color-bg); /* Mejor renderizado en monitores LCD viejos / Windows ClearType */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Texto largo: limita ancho de párrafo a ~65ch para presbicia */ .zone-patient p { max-width: 65ch; } .zone-patient h1 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 1rem; } .zone-patient h2 { font-size: 2rem; line-height: 1.25; margin-bottom: 0.875rem; } .zone-patient h3 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 0.75rem; } .zone-patient p, .zone-patient li, .zone-patient label { font-size: var(--zone-base-font-size); } /* Contenedor: una columna, ancho cómodo de lectura */ .zone-patient .page { max-width: 720px; margin-inline: auto; padding: 1.5rem 1.25rem; } /* Botones — todos los .btn dentro de .zone-patient se reescalan */ .zone-patient .btn { min-height: var(--zone-target-min); padding: 1rem 2rem; font-size: 1.125rem; border-radius: var(--zone-radius); font-weight: 600; cursor: pointer; transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease; } .zone-patient .btn + .btn { margin-top: 1rem; } /* anti-mistap entre acciones apiladas */ .zone-patient .btn:focus-visible { box-shadow: var(--focus-ring); outline: 2px solid var(--color-brand-dark); } /* Feedback táctil al apretar (importante con temblor: confirma que el tap entró) */ .zone-patient .btn:active { transform: translateY(1px); } /* Botón secundario claramente menos prominente que el primario. Refuerza la regla "una sola acción primaria por pantalla". */ .zone-patient .btn-secondary, .zone-patient .btn-outline-secondary { background-color: #fff; color: var(--color-text); border: 2px solid var(--color-border); } .zone-patient .btn-secondary:hover, .zone-patient .btn-outline-secondary:hover { background-color: var(--color-surface); color: var(--color-text); border-color: var(--color-text-muted); } /* Acción primaria de confirmación full-width — la pieza UX más importante. Botones tipo "Tomé el remedio" / "Recibí al profesional". Verde-saludable acompañado de check; full-width para que el dedo grueso con temblor acierte aún sin precisión. */ .zone-patient .btn-confirm { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; min-height: 80px; padding: 1rem 1.5rem; font-size: 1.25rem; font-weight: 700; background-color: var(--color-success-500); color: #fff; border: 2px solid var(--color-success-500); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer; transition: background-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast); } .zone-patient .btn-confirm:hover, .zone-patient .btn-confirm:focus-visible { background-color: var(--color-success-600); border-color: var(--color-success-600); color: #fff; box-shadow: var(--shadow-md); } .zone-patient .btn-confirm:active { transform: translateY(1px) scale(0.995); } .zone-patient .btn-confirm:disabled, .zone-patient .btn-confirm.disabled { opacity: 0.65; cursor: not-allowed; box-shadow: none; } .zone-patient .btn-confirm .icon, .zone-patient .btn-confirm .bi { font-size: 1.75rem; line-height: 1; } /* Botón secundario "tranquilo" en zona-patient: transparente con borde */ .zone-patient .btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; background-color: #fff; color: var(--color-brand-700); border: 2px solid var(--color-brand-200); font-weight: 600; } .zone-patient .btn-soft:hover, .zone-patient .btn-soft:focus-visible { background-color: var(--color-brand-50); border-color: var(--color-brand-500); color: var(--color-brand-700); } /* Inputs y form controls */ .zone-patient .form-control, .zone-patient .form-select { min-height: var(--zone-input-min); padding: 0.875rem 1rem; font-size: 1.125rem; border-radius: var(--zone-radius); border-width: 2px; } .zone-patient .form-control:focus, .zone-patient .form-select:focus { box-shadow: var(--focus-ring); border-color: var(--color-brand-dark); } .zone-patient .form-label { font-weight: 600; margin-bottom: 0.5rem; } /* Cards — generosos, separados, sombra suave para jerarquía */ .zone-patient .card { border-radius: var(--radius-lg); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); } .zone-patient .card + .card { margin-top: 1.25rem; } .zone-patient .card-body { padding: 1.75rem; } .zone-patient .card-title { font-size: 1.5rem; font-weight: 700; color: var(--color-brand-700); margin-bottom: 0.75rem; } .zone-patient .card-title .bi { color: var(--color-brand-600); margin-right: 0.5rem; vertical-align: -0.05em; } /* Card variant: estado pendiente / completado / atrasado. Borde lateral grueso = "estado del día" escaneable a un vistazo. */ .zone-patient .card-status { border-left: 6px solid var(--color-border); } .zone-patient .card-status-pending { border-left-color: var(--color-brand-500); } .zone-patient .card-status-done { border-left-color: var(--color-success-500); background: var(--color-success-50); } .zone-patient .card-status-overdue { border-left-color: var(--color-warn-500); background: var(--color-warn-50); } /* Links */ .zone-patient a { color: var(--color-brand-dark); text-decoration: underline; text-underline-offset: 3px; } .zone-patient a:visited { color: #5a3a8a; } /* distinción visible para link visitado */ .zone-patient a:hover { text-decoration-thickness: 2px; } .zone-patient a:focus-visible { box-shadow: var(--focus-ring); outline: 2px solid var(--color-brand-dark); } /* Espaciado mínimo entre clickeables (anti-mistap) */ .zone-patient .stack > * + * { margin-top: 1rem; } /* =========================================================================== ZONA B — profesional =========================================================================== */ .zone-pro { font-family: var(--font-sans); font-size: 1rem; /* Bootstrap default 16px */ line-height: 1.5; color: var(--color-text); background-color: var(--color-surface-pro); } .zone-pro .page { padding: 1.25rem; max-width: 1400px; margin-inline: auto; } /* Cards profesionales con sombra suave */ .zone-pro .card { box-shadow: var(--shadow-sm); border-color: var(--color-border); } /* Tabla densa con sort/filter — compacta pero legible */ .zone-pro .table { font-size: 0.95rem; background: #fff; } .zone-pro .table th { font-weight: 600; white-space: nowrap; color: var(--color-brand-700); } .zone-pro .table td { vertical-align: middle; } .zone-pro .table tbody tr { transition: background-color var(--transition-fast); } .zone-pro .table tbody tr:hover { background-color: var(--color-brand-50); } /* Indicador de sort en headers de tabla */ .zone-pro .table th.sortable { cursor: pointer; user-select: none; } .zone-pro .table th.sortable:hover { color: var(--color-brand-600); } .zone-pro .table th.sortable .bi { font-size: 0.85em; opacity: 0.5; margin-left: 0.25rem; } .zone-pro .table th.sortable[aria-sort="ascending"] .bi, .zone-pro .table th.sortable[aria-sort="descending"] .bi { opacity: 1; color: var(--color-brand-600); } /* Tabs con densidad pro */ .zone-pro .nav-tabs .nav-link { padding: 0.5rem 1rem; color: var(--color-text-muted); border-bottom: 3px solid transparent; } .zone-pro .nav-tabs .nav-link:hover { color: var(--color-brand-600); border-color: var(--color-brand-200); } .zone-pro .nav-tabs .nav-link.active { color: var(--color-brand-700); font-weight: 600; border-bottom-color: var(--color-brand-500); background: transparent; } /* Filtros y barras de acción */ .zone-pro .toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; } /* Header de paciente / sección — chip-like */ .zone-pro .meta-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.125rem 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.85rem; color: var(--color-text-muted); } .zone-pro .meta-chip .bi { color: var(--color-brand-600); } /* Badge prominente de disciplina activa (dashboard_therapist) */ .zone-pro .discipline-active { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.875rem; background: var(--color-brand-500); color: #fff; border-radius: 999px; font-weight: 600; font-size: 0.95rem; box-shadow: var(--shadow-xs); } .zone-pro .discipline-active .bi { font-size: 1.05em; } /* Badges de estado — con iconos para no depender solo del color */ .badge-status { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; font-weight: 600; font-size: 0.85rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .badge-status .bi { font-size: 0.95em; } .badge-status-stable { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-100); } .badge-status-attention { background: var(--color-warn-50); color: var(--color-warn-700); border-color: var(--color-warn-100); } .badge-status-alert { background: var(--color-danger-50); color: var(--color-danger-700); border-color: var(--color-danger-100); } .badge-status-paused { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border); } /* =========================================================================== COMPONENTES TRANSVERSALES =========================================================================== */ /* PIN pad numérico — usado por paciente para ingresar PIN. Visualmente similar a un teclado de cajero (referencia familiar para adultos mayores chilenos). Layout 3×4, botones 80×80, dígitos en bold, feedback táctil de ~150ms al presionar. */ .pin-pad-container { padding: 1rem 0; } .pin-pad { display: grid; grid-template-columns: repeat(3, 80px); gap: 14px; justify-content: center; } .pin-pad__btn { width: 80px; height: 80px; font-size: 2rem; font-weight: 700; background-color: #fff; border: 2px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); cursor: pointer; box-shadow: var(--shadow-xs); transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .pin-pad__btn:hover, .pin-pad__btn:focus-visible { background-color: var(--color-brand-50); border-color: var(--color-brand-500); outline: 2px solid var(--color-brand-dark); box-shadow: var(--focus-ring); } .pin-pad__btn:active { transform: translateY(1px) scale(0.97); background-color: var(--color-brand-100); border-color: var(--color-brand-600); box-shadow: inset 0 2px 4px rgba(15, 30, 40, 0.1); } /* Botones de acción (Borrar / Limpiar) — icono pequeño + texto legible. Tono más tranquilo (gris) para diferenciar del teclado numérico. */ .pin-pad__btn--action { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; background-color: var(--color-surface); border-color: var(--color-border-strong); font-size: 1.5rem; line-height: 1; color: var(--color-text-muted); } .pin-pad__btn--action:hover, .pin-pad__btn--action:focus-visible { background-color: #fff; border-color: var(--color-text-muted); color: var(--color-text); } .pin-pad__btn--action .pin-pad__btn-label { font-size: 0.875rem; font-weight: 600; letter-spacing: 0; } .pin-pad__display { font-size: 2.5rem; letter-spacing: 0.5rem; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; margin-bottom: 1.25rem; padding: 0.5rem 1rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-brand-700); } /* File row — listado de documentos en zona pro (densidad alta, no cards) */ .file-row { display: grid; grid-template-columns: 36px 1fr auto auto auto; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); transition: background-color var(--transition-fast); } .file-row:hover { background-color: var(--color-brand-50); } .file-row:last-child { border-bottom: 0; } .file-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); font-size: 1.25rem; background: var(--color-surface); color: var(--color-brand-600); } .file-row__icon--pdf { color: var(--color-danger-600); background: var(--color-danger-50); } .file-row__icon--image { color: var(--color-brand-600); background: var(--color-brand-50); } .file-row__icon--doc { color: var(--color-warn-700); background: var(--color-warn-50); } .file-row__name { font-weight: 500; color: var(--color-text); } .file-row__meta { color: var(--color-text-muted); font-size: 0.875rem; } .file-row__actions { display: flex; gap: 0.375rem; } .file-row__group-header { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); padding: 0.875rem 1rem 0.375rem; background: var(--color-surface-pro); border-bottom: 1px solid var(--color-border); } /* HTMX: indicador de carga para hx-* requests. Pareado con aria-busy en el target o aria-live en la región. */ .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } [aria-busy="true"] { cursor: progress; } /* Spinner inline pequeño para HTMX. Texto "Guardando..." sigue presente para screen readers vía .visually-hidden. */ .spinner-inline { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spinner-rotate 700ms linear infinite; vertical-align: -0.15em; } @keyframes spinner-rotate { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner-inline { animation-duration: 1500ms; } } /* =========================================================================== ESTADO VACÍO — pantallas sin datos =========================================================================== */ .empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--color-text-muted); } .empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--color-brand-50); color: var(--color-brand-500); font-size: 1.75rem; margin-bottom: 1rem; } .empty-state__title { color: var(--color-text); font-weight: 700; font-size: 1.125rem; margin-bottom: 0.5rem; } .empty-state__hint { max-width: 32rem; margin: 0 auto 1.25rem; font-size: 0.95rem; } .zone-patient .empty-state__icon { width: 5rem; height: 5rem; font-size: 2.25rem; } .zone-patient .empty-state__title { font-size: 1.5rem; } .zone-patient .empty-state__hint { font-size: 1.125rem; } /* =========================================================================== SKELETON — placeholders de carga (alternativa a spinner para listas) =========================================================================== */ .skeleton { display: inline-block; background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.04) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.6s ease-in-out infinite; border-radius: var(--radius-sm); color: transparent; user-select: none; } .skeleton-line { display: block; height: 0.875rem; margin-bottom: 0.5rem; } .skeleton-line--lg { height: 1.5rem; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; opacity: 0.6; } } /* =========================================================================== TOAST — feedback efímero de éxito/info post-acción Usar como contenedor con role="status" o aria-live="polite" según urgencia. =========================================================================== */ .toast-james { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: var(--color-brand-700); color: #fff; padding: 0.875rem 1.25rem; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 1080; display: flex; gap: 0.75rem; align-items: center; font-weight: 500; max-width: calc(100% - 2rem); animation: toast-in 250ms ease-out; } .toast-james .bi { font-size: 1.25em; } .toast-james--success { background: var(--color-success-600); } .toast-james--warning { background: var(--color-warn-600); } .toast-james--danger { background: var(--color-danger-600); } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } @media (prefers-reduced-motion: reduce) { .toast-james { animation: none; } } /* =========================================================================== HERO / LANDING — home pública y entrance =========================================================================== */ .hero { background: linear-gradient(135deg, var(--color-brand-50) 0%, #ffffff 70%); border-radius: var(--radius-xl); padding: 2.5rem 1.75rem; margin-bottom: 1.5rem; border: 1px solid var(--color-brand-100); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-brand-100); color: var(--color-brand-700); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; } .hero__title { color: var(--color-brand-700); margin-bottom: 0.75rem; } .hero__subtitle { color: var(--color-text-muted); max-width: 50ch; } /* =========================================================================== LOGIN SURFACE — pantalla con un formulario aislado =========================================================================== */ .login-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2rem 1.75rem; box-shadow: var(--shadow-md); max-width: 480px; margin: 1rem auto; } .login-card h1 { color: var(--color-brand-700); margin-bottom: 0.5rem; } .login-card .form-text { color: var(--color-text-muted); } .login-trust { display: flex; align-items: center; gap: 0.5rem; justify-content: center; font-size: 0.875rem; color: var(--color-text-muted); margin-top: 1rem; } .login-trust .bi { color: var(--color-success-600); } /* =========================================================================== STEPPER — pasos numerados (password reset, signup futuro) =========================================================================== */ .stepper { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; font-size: 0.875rem; } .stepper__step { flex: 1; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); border-left: 3px solid var(--color-border); } .stepper__step--active { background: var(--color-brand-50); color: var(--color-brand-700); border-left-color: var(--color-brand-500); font-weight: 600; } .stepper__step--done { color: var(--color-success-700); border-left-color: var(--color-success-500); } .stepper__num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-border); color: #fff; font-weight: 700; } .stepper__step--active .stepper__num { background: var(--color-brand-500); } .stepper__step--done .stepper__num { background: var(--color-success-500); } /* =========================================================================== ICON-WRAP — círculo decorativo para iconos en empty-states / hero =========================================================================== */ .icon-wrap { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .icon-wrap--brand { background: var(--color-brand-50); color: var(--color-brand-600); } .icon-wrap--success { background: var(--color-success-50); color: var(--color-success-600); } .icon-wrap--warn { background: var(--color-warn-50); color: var(--color-warn-700); } .icon-wrap--danger { background: var(--color-danger-50); color: var(--color-danger-700); } .icon-wrap--xl { width: 5.5rem; height: 5.5rem; font-size: 2.5rem; } .icon-wrap--lg { width: 4rem; height: 4rem; font-size: 1.75rem; } .icon-wrap--md { width: 2.5rem; height: 2.5rem; font-size: 1.125rem; } /* =========================================================================== ALERTS heredados del cookiecutter base =========================================================================== */ .alert-debug { color: black; background-color: white; border-color: #d6e9c6; } .alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; } /* =========================================================================== FOCUS visible global — nunca outline:none =========================================================================== */ *:focus-visible { outline-offset: 2px; } /* =========================================================================== SKIP LINK — primera tabulación, salta al contenido principal =========================================================================== */ .skip-link { position: absolute; left: 0; top: -100px; background: var(--color-brand-dark); color: #fff; padding: 0.75rem 1rem; font-weight: 600; text-decoration: none; border-radius: 0 0 var(--zone-radius) 0; z-index: 1000; transition: top 150ms ease-in; } .skip-link:focus, .skip-link:focus-visible { top: 0; outline: 3px solid #fff; outline-offset: -6px; } /* =========================================================================== PREFERS-REDUCED-MOTION — respeta sensibilidad a movimiento. Especialmente relevante en pacientes con Parkinson o cinetosis. =========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }