/* ===========================================================================
css/organigrama.css — UI del Organigrama (Staff + Portal del Socio + Web)
---------------------------------------------------------------------------
⚠️ IMPORTANTE: css/app-tailwind.css es un build PURGADO y css/input.css NO
existe en el repo, así que `npm run build:css` no puede regenerarlo.
Cualquier clase Tailwind NUEVA (ej. sm:rounded-2xl, sm:gap-4, max-h-[92dvh])
NO está compilada y no haría absolutamente nada.
Por eso toda la UI nueva se escribe aquí, en CSS plano, con prefijo .orgi-.
(El prefijo es .orgi- y no .org- porque css/website.css ya define .org-card
con otro diseño, y ambas hojas conviven en las páginas públicas.)
Enlazar en: staff.html, portal-socio.html e index.html / nosotros.html
=========================================================================== */
/* ---------- 1. Tokens locales (se adaptan solos al modo oscuro) ---------- */
:root{
--orgi-surface:#ffffff;
--orgi-surface-alt:#f8fafc;
--orgi-border:#e5e7eb;
--orgi-text:#111827;
--orgi-text-soft:#6b7280;
--orgi-honor:#b45309; /* ámbar 700 */
--orgi-honor-soft:#fffbeb; /* ámbar 50 */
--orgi-honor-line:#f59e0b; /* ámbar 500 */
--orgi-radius:1rem;
}
html.dark{
--orgi-surface:#260A0D;
--orgi-surface-alt:#1A0709;
--orgi-border:#331015;
--orgi-text:#fafafa;
--orgi-text-soft:#a1a1aa;
--orgi-honor:#fcd34d;
--orgi-honor-soft:rgba(245,158,11,.10);
--orgi-honor-line:#f59e0b;
}
/* Esta hoja no depende del preflight de Tailwind: fija su propio box-sizing
para que width:100% + padding + borde no desborde el contenedor. */
[class^="orgi-"], [class*=" orgi-"],
.orgi-sheet input, .orgi-sheet select, .orgi-sheet textarea{box-sizing:border-box;}
/* El atributo [hidden] debe ganarle a .orgi-btn{display:inline-flex}: sin esto,
los botones que se ocultan por permisos (Nuevo Puesto, Institución, Eliminar)
se seguirían viendo. */
[hidden]{display:none !important;}
/* ---------- 2. Encabezado (se desplaza) + barra de herramientas (fija) ---------- */
.orgi-encabezado{min-width:0; padding:.25rem 0 .75rem;}
.orgi-encabezado h2{font-size:1.25rem; font-weight:800; color:var(--orgi-text); margin:0;}
.orgi-encabezado p{font-size:.8rem; color:var(--orgi-text-soft); margin:.15rem 0 0;}
.orgi-toolbar{
position:sticky; top:0; z-index:20;
display:flex; flex-wrap:wrap; align-items:center; gap:.75rem;
padding:.75rem 0 1rem;
background:var(--orgi-surface-alt);
border-bottom:1px solid var(--orgi-border);
margin-bottom:1.25rem;
}
/* Compatibilidad: si algún otro punto del proyecto sigue inyectando el título
dentro de la barra, no se rompe. */
.orgi-toolbar__title{flex:1 1 100%; min-width:0;}
.orgi-toolbar__title h2{font-size:1.25rem; font-weight:800; color:var(--orgi-text); margin:0;}
.orgi-toolbar__title p{font-size:.8rem; color:var(--orgi-text-soft); margin:.15rem 0 0;}
.orgi-toolbar__tools{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; width:100%;}
.orgi-search{position:relative; flex:1 1 200px; min-width:0;}
.orgi-search svg{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); width:1rem; height:1rem; color:var(--orgi-text-soft); pointer-events:none;}
.orgi-search input{
width:100%; padding:.6rem .8rem .6rem 2.2rem;
border:1px solid var(--orgi-border); border-radius:.75rem;
background:var(--orgi-surface); color:var(--orgi-text); font-size:.9rem;
}
.orgi-search input:focus{outline:2px solid var(--orgi-honor-line); outline-offset:1px;}
.orgi-btn{
display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
padding:.6rem .9rem; border-radius:.75rem; font-size:.85rem; font-weight:700;
border:1px solid var(--orgi-border); background:var(--orgi-surface); color:var(--orgi-text);
cursor:pointer; transition:filter .15s ease, transform .05s ease;
}
.orgi-btn:hover{filter:brightness(.97);}
.orgi-btn:active{transform:scale(.98);}
.orgi-btn--primary{background:var(--color-primary,#14B8A6); border-color:transparent; color:#fff;}
.orgi-btn svg{width:1.05rem; height:1.05rem; flex:0 0 auto;}
.orgi-btn[disabled]{opacity:.4; cursor:not-allowed;}
/* ---------- 2b. Toolbar en móvil: que deje de comerse media pantalla ----------
Antes, en un teléfono de 360 px, la barra pegajosa se apilaba en 4 filas
(título + resumen, buscador, 3 botones de vista, Institución, y "Nuevo
Puesto" a lo ancho): ~190 px fijos, casi un tercio del alto útil, en un
módulo que se usa justamente para recorrer una lista larga.
Ahora sólo el buscador y el selector de vista quedan pegajosos (~92 px);
el título se va con el scroll y "Nuevo Puesto" pasa a ser un botón flotante. */
@media (max-width:639px){
.orgi-toolbar{gap:.5rem; padding:.6rem 0 .7rem; margin-bottom:1rem;}
/* El pseudo-elemento que tapa el hueco mide 17 px hacia arriba: el
encabezado reserva al menos ese espacio para que no le coma el subtítulo. */
.orgi-encabezado{padding:0 0 1.2rem;}
.orgi-encabezado h2{font-size:1.05rem;}
.orgi-encabezado p{font-size:.74rem;}
.orgi-toolbar__title h2{font-size:1.05rem;}
.orgi-toolbar__title p{font-size:.74rem;}
.orgi-toolbar__tools{gap:.4rem;}
/* Fila 1: el buscador solo, a lo ancho — con 5 elementos en la misma fila
quedaba en ~100 px y no cabía ni la palabra que estabas escribiendo. */
.orgi-search{flex:1 1 100%; order:1;}
/* Fila 2: las tres vistas repartidas + los dos botones de acción en ícono */
.orgi-vistas{flex:1 1 auto; order:2;}
.orgi-vistas .orgi-btn{flex:1 1 0; justify-content:center; padding:.6rem .35rem; font-size:.78rem;}
#btn-config-institucion, #btn-new-organigrama{order:3; flex:0 0 auto; padding:.6rem .7rem;}
#btn-config-institucion .orgi-btn__label,
#btn-new-organigrama .orgi-btn__label{
/* Sólo para lectores de pantalla: el ícono basta y libera el ancho */
position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
#btn-new-organigrama{gap:0;}
#btn-new-organigrama svg{width:1.25rem; height:1.25rem;}
}
/* ---------- 3. Secciones por nivel (colapsables) ---------- */
.orgi-section{margin-bottom:1.75rem;}
.orgi-section__head{
display:flex; align-items:center; gap:.75rem; width:100%;
padding:.65rem .25rem; background:none; border:0; cursor:pointer; text-align:left;
border-bottom:2px solid var(--orgi-border);
}
.orgi-section__head h3{margin:0; font-size:1rem; font-weight:800; color:var(--orgi-text);}
.orgi-section__head small{display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--orgi-text-soft); font-weight:600;}
.orgi-section__count{
margin-left:auto; font-size:.72rem; font-weight:700; color:var(--orgi-text-soft);
background:var(--orgi-surface); border:1px solid var(--orgi-border);
padding:.15rem .5rem; border-radius:999px;
}
.orgi-section__chevron{width:1rem; height:1rem; color:var(--orgi-text-soft); transition:transform .2s ease;}
.orgi-section[data-collapsed="true"] .orgi-section__chevron{transform:rotate(-90deg);}
.orgi-section[data-collapsed="true"] .orgi-grid{display:none;}
/* ---------- 4. Grid fluido (sin depender de breakpoints de Tailwind) ---------- */
.orgi-grid{
display:grid; gap:.75rem; padding-top:1rem;
grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width:640px){ .orgi-grid{gap:1rem; grid-template-columns:repeat(auto-fill, minmax(175px, 1fr));} }
/* Vista lista compacta (toggle en la toolbar) — ideal en móvil */
.orgi-wrap[data-vista="lista"] .orgi-grid{grid-template-columns:1fr; gap:.5rem;}
.orgi-wrap[data-vista="lista"] .orgi-card{flex-direction:row; align-items:center; text-align:left; padding:.65rem .75rem;}
.orgi-wrap[data-vista="lista"] .orgi-card__foto{width:44px; height:44px; margin:0 .75rem 0 0;}
.orgi-wrap[data-vista="lista"] .orgi-card__acciones{margin-left:auto; width:auto; border-top:0; padding-top:0;}
/* ---------- 5. Tarjeta de perfil ---------- */
.orgi-card{
position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
padding:1rem .75rem; background:var(--orgi-surface);
border:1px solid var(--orgi-border); border-radius:var(--orgi-radius);
transition:box-shadow .18s ease, transform .18s ease;
}
.orgi-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px);}
.orgi-card__foto{
width:72px; height:72px; border-radius:999px; object-fit:cover; margin-bottom:.6rem;
border:3px solid var(--orgi-surface); box-shadow:0 2px 8px rgba(0,0,0,.10); background:var(--orgi-surface-alt);
}
.orgi-card__nombre{font-size:.85rem; font-weight:700; color:var(--orgi-text); line-height:1.25; margin:0;}
.orgi-card__cargo{font-size:.75rem; font-weight:600; color:var(--color-primary,#14B8A6); margin:.15rem 0 0;}
.orgi-card__periodo{
display:inline-block; margin-top:.4rem; font-size:.68rem; font-weight:800; letter-spacing:.04em;
color:var(--orgi-honor); background:var(--orgi-honor-soft);
border:1px solid color-mix(in srgb, var(--orgi-honor-line) 40%, transparent);
padding:.1rem .45rem; border-radius:999px;
}
.orgi-card__meta{font-size:.68rem; color:var(--orgi-text-soft); margin:.25rem 0 .5rem; overflow-wrap:anywhere; line-height:1.35; max-width:100%;}
.orgi-card__badge{
position:absolute; top:.5rem; right:.5rem; font-size:.6rem; font-weight:700;
padding:.1rem .35rem; border-radius:.35rem; color:#fff;
}
.orgi-card__badge--pub{background:#16a34a;}
.orgi-card__badge--int{background:#475569;}
.orgi-card__acciones{
/* margin-top:auto alinea la fila de botones al pie de TODAS las tarjetas
de la misma fila, aunque unas tengan periodo/correo y otras no. */
display:flex; gap:.35rem; width:100%; margin-top:auto; padding-top:.6rem;
border-top:1px solid var(--orgi-border);
}
.orgi-card__acciones .orgi-btn{flex:1 1 auto; justify-content:center; padding:.45rem .5rem; font-size:.75rem;}
.orgi-mover{flex:0 0 auto !important; padding:.45rem .55rem !important;}
/* ---------- 6. Banda honorífica (Nivel Cero — Expresidentes) ---------- */
.orgi-section--honor .orgi-section__head{border-bottom-color:var(--orgi-honor-line);}
.orgi-section--honor .orgi-section__head h3{color:var(--orgi-honor);}
.orgi-section--honor{
background:var(--orgi-honor-soft);
border:1px solid color-mix(in srgb, var(--orgi-honor-line) 35%, transparent);
border-radius:var(--orgi-radius);
padding:.5rem 1rem 1rem;
}
.orgi-section--honor .orgi-card{border-color:color-mix(in srgb, var(--orgi-honor-line) 45%, transparent);}
.orgi-section--honor .orgi-card::before{
content:""; position:absolute; inset:0 0 auto 0; height:3px;
border-radius:var(--orgi-radius) var(--orgi-radius) 0 0;
background:linear-gradient(90deg, var(--orgi-honor-line), #fde68a);
}
.orgi-section--honor .orgi-card__cargo{color:var(--orgi-honor);}
/* Las tarjetas de la banda se centran en lugar de alinearse a la izquierda:
como suelen ser pocas, la rejilla auto-fill dejaba huecos vacíos a la derecha. */
.orgi-section--honor .orgi-grid{
display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:.75rem;
}
.orgi-section--honor .orgi-card{flex:0 1 160px; max-width:200px;}
/* En pantallas angostas se estrechan para que quepan dos por fila */
@media (max-width:479px){
.orgi-section--honor .orgi-card{flex-basis:132px; max-width:170px;}
}
@media (min-width:640px){
.orgi-section--honor .orgi-grid{gap:1rem;}
.orgi-section--honor .orgi-card{flex-basis:180px;}
}
/* En vista lista la banda también se apila a lo ancho */
.orgi-wrap[data-vista="lista"] .orgi-section--honor .orgi-grid{flex-direction:column;}
.orgi-wrap[data-vista="lista"] .orgi-section--honor .orgi-card{flex-basis:auto; max-width:none; width:100%;}
.orgi-honor-nota{font-size:.72rem; color:var(--orgi-text-soft); margin:.5rem 0 0;}
/* ---------- 7. Modal → hoja inferior (bottom sheet) en móvil ----------
⚠️ z-index 90, NO 60: la barra de pestañas del staff (#staff-tabs) vive en
z-index 80 y es `position:fixed`, igual que esta hoja, y ambas cuelgan del
mismo contexto de apilamiento (#staff-content no crea uno). Con z-index 60
la barra de pestañas se pintaba ENCIMA del pie de la hoja — que en móvil se
ancla abajo — y tapaba justo los botones Guardar / Cancelar / Eliminar.
90 queda por encima de las pestañas y por debajo de SweetAlert2 (1060). */
.orgi-sheet{position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.5);}
.orgi-sheet.is-open{display:flex;}
/* Con la hoja abierta el fondo dejaba de estar disponible pero seguía
desplazándose bajo el dedo; en iOS eso mueve la página detrás del teclado. */
body.orgi-sheet-abierta{overflow:hidden;}
.orgi-sheet__panel{
width:100%; max-width:34rem; max-height:90vh; max-height:90dvh;
display:flex; flex-direction:column; overflow:hidden;
background:var(--orgi-surface); color:var(--orgi-text);
border-radius:var(--orgi-radius); box-shadow:0 25px 50px -12px rgba(0,0,0,.45);
}
/* El