/* * aim-drawer.css — Rediseño v2 según canónica Design 2026-08-07. * * Panel lateral de "ficha de detalle" que se abre desde una tabla. * NO es un modal — amplía, no interrumpe. Velo verde translúcido, * jerarquía por secciones (nada de tarjetas dentro), tipografía y * spacing alineados al sistema v2 del área socio. * * Anatomía: header (eyebrow + título + subtítulo + × ) * → cuerpo desplazable con secciones → pie sticky (acciones si las hay). * * En móvil (<760px) se convierte en bottom-sheet arrastrable. * * Ver docs de la API en aim-drawer.js. */ /* ============================================================================ * VELO Y PANEL * ============================================================================ */ .aim-drawer-velo { position: fixed; inset: 0; background: rgba(15, 58, 22, .34); /* verde oscuro translúcido, no negro */ z-index: 9000; opacity: 0; transition: opacity .26s ease; } .aim-drawer-velo.is-open { opacity: 1; } .aim-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); display: flex; flex-direction: column; background: #FFFFFF; box-shadow: -18px 0 40px -20px rgba(15, 58, 22, .45); z-index: 9010; /* bajo los modales (10000) */ transform: translateX(105%); /* 105% para que la sombra no asome */ transition: transform .26s cubic-bezier(.22, .61, .36, 1); font-family: inherit; color: #1F2937; } .aim-drawer.is-open { transform: translateX(0); } /* Cuando el user está logueado como admin, WP añade la clase `admin-bar` al * y mete una barra fija de 32px (46px en móvil) arriba con z-index * 99999 — por encima del drawer. Bajamos el drawer para que la barra no * lo tape, y el velo también para no ver la barra "flotando" sobre él. */ body.admin-bar .aim-drawer, body.admin-bar .aim-drawer-velo { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .aim-drawer, body.admin-bar .aim-drawer-velo { top: 46px; } } @media (prefers-reduced-motion: reduce) { .aim-drawer, .aim-drawer-velo { transition: none; } } /* ============================================================================ * CABECERA * ============================================================================ */ .aim-drawer__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid #E5E7EB; flex: none; position: relative; } .aim-drawer__ident { min-width: 0; flex: 1; } /* Avatar circular opcional (retrocompat con paneles admin: foto del socio). */ .aim-drawer__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid #C8E6C9; background: #E8F5E9; } .aim-drawer__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .aim-drawer__eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; color: #2E7D32; /* verde AIM — identifica tipo de ficha */ letter-spacing: 1.3px; text-transform: uppercase; } .aim-drawer__titulo { margin: 6px 0 0; font-size: 20px; font-weight: 700; color: #2E7D32; /* verde AIM — pedido user */ letter-spacing: -.3px; text-wrap: pretty; outline: none; } .aim-drawer__titulo:focus-visible { outline: 2px solid #2E7D32; outline-offset: 2px; border-radius: 4px; } .aim-drawer__sub { margin: 4px 0 0; font-size: 13.5px; color: #6B7280; } .aim-drawer__x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #6B7280; font-size: 22px; line-height: 1; cursor: pointer; font-family: inherit; } .aim-drawer__x:hover { background: #F3F4F6; color: #1F2937; } .aim-drawer__x:focus-visible { outline: 2px solid #2E7D32; outline-offset: 2px; } /* Asa de arrastre — solo visible en <760px (bottom-sheet). */ .aim-drawer__asa { display: none; } /* ============================================================================ * CUERPO DESPLAZABLE * ============================================================================ */ .aim-drawer__cuerpo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; outline: none; } .aim-drawer__cuerpo:focus-visible { outline: 2px solid #2E7D32; outline-offset: -2px; } /* ============================================================================ * SECCIONES * ============================================================================ */ .aim-drawer__seccion + .aim-drawer__seccion { margin-top: 22px; } .aim-drawer__seccion-t { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; color: #2E7D32; /* verde AIM — coherente con .aim-v2-bloque__titular */ letter-spacing: 1.2px; text-transform: uppercase; } .aim-drawer__filas { margin: 0; } .aim-drawer__fila { display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: start; padding: 11px 0; border-top: 1px solid #F3F4F6; } .aim-drawer__fila dt { font-size: 13.5px; font-weight: 600; color: #4B5563; text-wrap: pretty; margin: 0; } .aim-drawer__fila dd { margin: 0; font-size: 14px; color: #1F2937; overflow-wrap: anywhere; } /* Fila destacada — el dato que motiva la ficha. Una por sección como máximo. */ .aim-drawer__fila.is-destacada { background: #F7FBF7; border-left: 3px solid #2E7D32; padding-left: 12px; margin-left: -15px; /* filete alineado con borde panel */ padding-right: 12px; margin-right: -12px; border-radius: 0 4px 4px 0; } /* ============================================================================ * CLASES DE VALOR (cls de la API) * ============================================================================ */ .aim-drawer__fila dd.is-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: #4B5563; } .aim-drawer__fila dd.is-num { font-variant-numeric: tabular-nums; font-weight: 600; } .aim-drawer__fila dd.is-muted { color: #9CA3AF; } .aim-drawer__fila dd.is-strong { font-weight: 600; } .aim-drawer__fila dd.is-long { line-height: 1.55; text-wrap: pretty; } /* ============================================================================ * DIFF (Anterior → Nuevo) — marcador especial de valor * ============================================================================ */ .aim-diff { display: flex; flex-direction: column; gap: 3px; } .aim-diff__antes { font-size: 13.5px; color: #9CA3AF; } .aim-diff__antes s { text-decoration-color: #C7CDD3; } .aim-diff__flecha { font-size: 12px; color: #9CA3AF; line-height: 1; } .aim-diff__nuevo { font-size: 14px; font-weight: 600; color: #1B5E20; background: #F1F8E9; border-radius: 4px; padding: 2px 7px; align-self: flex-start; } /* Utility para anuncios de screen reader (usado por el JS del diff). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ * ADJUNTOS — marcador especial de valor * ============================================================================ */ .aim-adjunto { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 8px; border: 1px solid #E5E7EB; border-radius: 8px; text-decoration: none; color: #1F2937; transition: border-color .12s ease, background-color .12s ease; } .aim-adjunto:hover, .aim-adjunto:focus-visible { border-color: #2E7D32; background: #F7FBF7; } .aim-adjunto__ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #E8F5E9; color: #2E7D32; font-size: 16px; } .aim-adjunto__txt { flex: 1; min-width: 0; } .aim-adjunto__n { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; } .aim-adjunto__m { display: block; font-size: 12px; color: #9CA3AF; margin-top: 2px; } .aim-adjunto > .fa-download { color: #6B7280; font-size: 15px; flex: none; } /* ============================================================================ * PIE — acciones sticky * ============================================================================ */ .aim-drawer__pie { flex: none; padding: 16px 22px; border-top: 1px solid #E5E7EB; background: #FFF; display: flex; flex-direction: column; gap: 10px; } .aim-drawer__btn { height: 40px; padding: 0 16px; border-radius: 8px; border: 1px solid; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease; } .aim-drawer__btn--primary { background: #2E7D32; border-color: #2E7D32; color: #FFF; } .aim-drawer__btn--primary:hover, .aim-drawer__btn--primary:focus-visible { background: #1B5E20; border-color: #1B5E20; color: #FFF; } .aim-drawer__btn--secondary { background: #F5F5F5; border-color: transparent; color: #333; } .aim-drawer__btn--secondary:hover, .aim-drawer__btn--secondary:focus-visible { background: #ECECEC; color: #333; } .aim-drawer__btn--danger { background: #FFEBEE; border-color: #FFCDD2; color: #C62828; } .aim-drawer__btn--danger:hover, .aim-drawer__btn--danger:focus-visible { background: #FFCDD2; color: #C62828; } .aim-drawer__btn:focus-visible { outline: 2px solid #2E7D32; outline-offset: 2px; } .aim-drawer__btn--primary:focus-visible { outline-color: #FFF; /* sobre fondo verde, contorno blanco */ } /* ============================================================================ * BOTTOM-SHEET EN MÓVIL (<760px) * ============================================================================ */ @media (max-width: 759px) { .aim-drawer { top: auto; left: 0; right: 0; width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; transform: translateY(102%); box-shadow: 0 -18px 40px -20px rgba(15, 58, 22, .45); } .aim-drawer.is-open { transform: translateY(0); } .aim-drawer__cab { padding-top: 8px; /* deja sitio al asa */ padding-bottom: 16px; } .aim-drawer__asa { display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; background: #D8DCD8; border-radius: 999px; } .aim-drawer__fila { grid-template-columns: 1fr; gap: 3px; } .aim-drawer__fila.is-destacada { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; } .aim-drawer__pie { padding-bottom: max(16px, env(safe-area-inset-bottom)); } .aim-drawer__btn { height: 48px; /* objetivo táctil */ width: 100%; } } /* Tablet — panel más estrecho, objetivos táctiles algo mayores */ @media (min-width: 760px) and (max-width: 1024px) { .aim-drawer { width: min(440px, 70vw); } .aim-drawer__btn { height: 44px; } } /* ============================================================================ * BADGES — usados dentro del drawer vía {html: '...'} en rows (estado, etc.) * Variantes de la clase base .aim-badge de censo-mandatos.css, aquí ampliadas * con las semánticas ok/warn/error/muted para reusar dentro del drawer sin * arrastrar dependencias de otros CSS. * ============================================================================ */ .aim-drawer .aim-badge { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; line-height: 1.4; } .aim-drawer .aim-badge--ok { background: #E8F5E9; color: #1B5E20; } .aim-drawer .aim-badge--warn { background: #FFF3E0; color: #A04A00; } .aim-drawer .aim-badge--error { background: #FFEBEE; color: #C62828; } .aim-drawer .aim-badge--muted { background: #F3F4F6; color: #6B7280; } .aim-drawer .aim-badge--info { background: #E3F2FD; color: #0D47A1; }