/* =============================================================================
   «ACERCA DE GS» — autor, licencia y contacto (lámina 37, ganó A, 02/11/2026)
   -----------------------------------------------------------------------------
   El diálogo que abre «Acerca de GS» (menú del usuario en el rail y menú del
   teléfono). Lo dibuja `core/acerca-de.js`. La firma del login (la banda) es de
   la puerta y vive en `acceso-ui.css` §8.

   Scope `.gsi-ui` en el PROPIO panel. El velo va aparte (`.gsi-velo`) porque
   cuelga de <body> como el toast y no hereda nada de ningún módulo: la ficha se
   ve igual salga de donde salga.
   ============================================================================= */

.gsi-velo {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(8, 20, 45, .46);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    font-family: 'Inter', system-ui, sans-serif;
    animation: gsiVelo 180ms linear both;
}
.gsi-ui.gsi-dlg {
    width: min(460px, 100%);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    background: var(--surface, #fff);
    border-radius: 18px;
    box-shadow: var(--e3, 0 20px 60px rgba(10, 25, 60, .28));
    color: var(--ink, #1e2733);
    animation: gsiSube 260ms var(--curva, cubic-bezier(.2, .8, .3, 1)) both;
}
.gsi-ui :focus-visible { outline: 2px solid var(--navy-500, #154a94); outline-offset: 2px; }

/* --- La cabecera navy --- */
.gsi-ui .gsi-cab {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    padding: 22px 52px 20px 22px;
    background: linear-gradient(135deg, #002b6b 0%, #0b3d86 60%, #154a94 100%);
    color: #fff;
}
.gsi-ui .gsi-ico {
    width: 52px; height: 52px; flex: 0 0 auto;
    border-radius: 14px;
    background: #fff url('../../Imagenes/gs-icono-192.png') center / cover no-repeat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.gsi-ui .gsi-eb { margin: 0 0 2px; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9fc0ea; }
.gsi-ui .gsi-nom { margin: 0; font-size: 1.18rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.gsi-ui .gsi-ver { margin: 3px 0 0; font-size: .74rem; color: #c9d9f0; min-height: 1.2em; }
.gsi-ui .gsi-ver code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .72rem;
    background: rgba(255, 255, 255, .13); padding: 1px 6px; border-radius: 5px; }
.gsi-ui .gsi-x {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border: 0; border-radius: 9px;
    background: transparent; color: #c9d9f0; cursor: pointer;
    display: grid; place-items: center;
}
.gsi-ui .gsi-x:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* --- Las filas --- */
.gsi-ui .gsi-cuerpo { padding: 18px 22px 6px; }
.gsi-ui .gsi-filas { margin: 0; }
.gsi-ui .gsi-fila {
    display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: baseline;
    padding: 11px 0; border-bottom: 1px solid var(--hair, #e4e8f0);
}
.gsi-ui .gsi-fila:last-child { border-bottom: 0; }
.gsi-ui .gsi-fila dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint, #6b7787); }
.gsi-ui .gsi-fila dd { margin: 0; font-size: .9rem; color: var(--ink, #1e2733); }
.gsi-ui .gsi-fila dd b { color: var(--navy, #002b6b); font-weight: 800; }
.gsi-ui .gsi-fila dd .s { display: block; font-size: .75rem; color: var(--muted, #64707f); margin-top: 1px; }

.gsi-ui .gsi-tel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gsi-ui .gsi-tel .n { flex: 0 0 100%; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy, #002b6b); }
.gsi-ui .gsi-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px 4px 8px; border-radius: 999px;
    border: 1px solid var(--hair-strong, #d4dbe7); background: #fff;
    font-size: .74rem; font-weight: 600; color: var(--navy-500, #154a94); text-decoration: none;
}
.gsi-ui .gsi-chip:hover { background: var(--navy-050, #edf2fa); border-color: var(--navy-300, #4d82c8); }
.gsi-ui .gsi-chip .material-symbols-outlined { font-size: 16px; }
.gsi-ui .gsi-chip.wa { color: var(--ok, #0f7a52); }
.gsi-ui .gsi-chip.wa:hover { background: var(--ok-050, #eef7f3); border-color: #9fd0b8; }

/* --- El texto legal y los terceros --- */
.gsi-ui .gsi-legal {
    margin: 14px 0 0; padding: 12px 14px;
    background: var(--canvas, #f1f2f5); border-radius: 12px;
    font-size: .74rem; line-height: 1.5; color: var(--muted, #64707f);
}
.gsi-ui .gsi-legal b { color: var(--ink, #1e2733); }

.gsi-ui .gsi-terceros { margin: 12px 0 0; font-size: .76rem; color: var(--muted, #64707f); }
.gsi-ui .gsi-terceros summary { cursor: pointer; font-weight: 600; color: var(--navy-500, #154a94); list-style: none; display: inline-flex; align-items: center; gap: 4px; }
.gsi-ui .gsi-terceros summary::-webkit-details-marker { display: none; }
.gsi-ui .gsi-terceros summary .material-symbols-outlined { font-size: 18px; transition: transform .2s; }
.gsi-ui .gsi-terceros[open] summary .material-symbols-outlined { transform: rotate(90deg); }
.gsi-ui .gsi-terceros ul { margin: 8px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 18px; }
.gsi-ui .gsi-terceros li { padding: 2px 0; break-inside: avoid; }
.gsi-ui .gsi-terceros li i { font-style: normal; color: var(--faint, #6b7787); font-size: .7rem; }

.gsi-ui .gsi-pie { display: flex; justify-content: flex-end; padding: 14px 22px 18px; }
.gsi-ui .gsi-btn {
    border: 1px solid var(--navy, #002b6b); background: var(--navy, #002b6b); color: #fff;
    font: 700 .82rem 'Inter', system-ui, sans-serif; padding: 9px 18px; border-radius: 10px; cursor: pointer;
}
.gsi-ui .gsi-btn:hover { background: var(--navy-700, #001a41); }

@media (max-width: 520px) {
    .gsi-ui .gsi-fila { grid-template-columns: 1fr; gap: 3px; }
    .gsi-ui .gsi-terceros ul { columns: 1; }
}

@keyframes gsiVelo { from { opacity: 0; } to { opacity: 1; } }
@keyframes gsiSube { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .gsi-velo, .gsi-ui.gsi-dlg { animation: none; }
}