/*
 * gestion-mi-empresa.css
 * Panel de Gestión del Dueño — estilos específicos
 * Requires: /css/empresas.css loaded before this file
 */

/* ── Hero ─────────────────────────────────────────────── */
.gmp-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--emp-bg-card);
    border: 1px solid var(--emp-border);
    border-radius: var(--emp-radius-lg);
    position: relative;
    overflow: hidden;
    transition: border-color .3s;
}
.gmp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(59,130,246,.09) 0%, transparent 60%);
    pointer-events: none;
}
.gmp-hero:hover { border-color: rgba(96,165,250,.25); }

.gmp-hero-logo {
    width: 76px; height: 76px;
    border-radius: var(--emp-radius-sm);
    object-fit: cover; flex-shrink: 0;
    border: 2px solid var(--emp-border);
    background: var(--emp-bg-panel);
}
.gmp-hero-initial {
    width: 76px; height: 76px;
    border-radius: var(--emp-radius-sm);
    background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 800; color: #fff; flex-shrink: 0;
    border: 2px solid rgba(96,165,250,.25);
    box-shadow: 0 0 28px rgba(109,40,217,.2);
}
.gmp-hero-info { flex: 1; min-width: 0; }
.gmp-hero-info h1 {
    font-size: 1.45rem; font-weight: 800; margin: 0 0 .25rem;
    letter-spacing: -.015em;
}
.gmp-hero-info p  { margin: 0; color: var(--emp-text-muted); font-size: .85rem; }
.gmp-hero-badges  { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }

/* ── Badges ───────────────────────────────────────────── */
.gmp-badge {
    padding: 3px 10px; border-radius: 9999px; font-size: .72rem; font-weight: 600;
    border: 1px solid; display: inline-flex; align-items: center; gap: 4px;
    letter-spacing: .01em;
}
.gmp-badge.green  { color: var(--emp-success); border-color: rgba(16,185,129,.3);  background: rgba(16,185,129,.08); }
.gmp-badge.red    { color: var(--emp-danger);  border-color: rgba(239,68,68,.3);   background: rgba(239,68,68,.08);  }
.gmp-badge.blue   { color: #60a5fa;            border-color: rgba(96,165,250,.3);  background: rgba(96,165,250,.08); }
.gmp-badge.purple { color: #a78bfa;            border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.1); }
.gmp-badge.gold   { color: #fbbf24;            border-color: rgba(251,191,36,.3);  background: rgba(251,191,36,.08); }
.gmp-badge.gray   { color: var(--emp-text-muted); border-color: var(--emp-border); background: rgba(255,255,255,.04); }
.gmp-badge.amber  { color: #fcd34d;            border-color: rgba(252,211,77,.3);  background: rgba(252,211,77,.06); }

/* ── Stats row ────────────────────────────────────────── */
.gmp-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .75rem; margin-bottom: 1.5rem;
}
.gmp-stat-card {
    background: var(--emp-bg-card); border: 1px solid var(--emp-border);
    border-radius: var(--emp-radius-md); padding: 1.1rem;
    display: flex; align-items: center; gap: .75rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    cursor: default;
}
.gmp-stat-card:hover {
    border-color: rgba(255,255,255,.16);
    transform: translateY(-2px);
    box-shadow: var(--emp-shadow-md);
}
.gmp-stat-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
.si-blue   { background: rgba(59,130,246,.15);  color: #60a5fa; }
.si-green  { background: rgba(16,185,129,.15);  color: var(--emp-success); }
.si-purple { background: rgba(139,92,246,.15);  color: #a78bfa; }
.si-gold   { background: rgba(251,191,36,.15);  color: #fbbf24; }
.gmp-stat-val   { font-size: 1.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.gmp-stat-label { font-size: .73rem; color: var(--emp-text-muted); margin-top: 3px; }

/* ── Tab nav ──────────────────────────────────────────── */
.gmp-tab-nav {
    display: flex; gap: 4px; margin-bottom: 1.5rem;
    background: var(--emp-bg-card); border: 1px solid var(--emp-border);
    border-radius: var(--emp-radius-md); padding: .35rem;
}
.gmp-tab {
    flex: 1; border: none; background: transparent; color: var(--emp-text-muted);
    padding: .6rem 1rem; border-radius: 10px; cursor: pointer; font-size: .88rem;
    font-weight: 500; display: flex; align-items: center; justify-content: center;
    gap: .45rem; transition: all .2s; font-family: var(--emp-font-sans);
}
.gmp-tab:hover  { color: var(--emp-text-main); background: rgba(255,255,255,.06); }
.gmp-tab.active { background: var(--emp-primary); color: #fff; box-shadow: 0 4px 12px var(--emp-primary-glow); }
.gmp-section        { display: none; }
.gmp-section.active { display: block; animation: gmpFadeIn .22s ease; }
@keyframes gmpFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Section header row ───────────────────────────────── */
.gmp-section-hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .85rem; gap: .75rem; flex-wrap: wrap;
}
.gmp-section-hd h3 {
    margin: 0; font-size: 1rem; font-weight: 700;
    display: flex; align-items: center; gap: .45rem;
}

/* ── Search input ─────────────────────────────────────── */
.gmp-search-wrap { position: relative; display: flex; align-items: center; }
.gmp-search-wrap > i {
    position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
    color: var(--emp-text-muted); font-size: 1rem; pointer-events: none;
}
.gmp-search-input {
    padding: .4rem .85rem .4rem 2.1rem;
    border-radius: 9999px; border: 1px solid var(--emp-border);
    background: rgba(255,255,255,.04); color: var(--emp-text-main);
    font-family: var(--emp-font-sans); font-size: .82rem;
    outline: none; min-width: 185px; transition: border-color .2s, box-shadow .2s;
}
.gmp-search-input:focus        { border-color: var(--emp-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.gmp-search-input::placeholder { color: var(--emp-text-muted); }

/* ── Worker / socio cards ─────────────────────────────── */
.gmp-person-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem;
}
.gmp-person-card {
    background: var(--emp-bg-card); border: 1px solid var(--emp-border);
    border-radius: var(--emp-radius-md); padding: 1.15rem;
    transition: border-color .22s, box-shadow .22s, transform .22s;
    position: relative;
}
.gmp-person-card:hover {
    border-color: rgba(255,255,255,.16);
    box-shadow: var(--emp-shadow-md);
    transform: translateY(-2px);
}
.gmp-person-card.is-pending       { border-color: rgba(245,158,11,.25); background: rgba(245,158,11,.03); }
.gmp-person-card.is-pending:hover { border-color: rgba(245,158,11,.45); }
.gmp-person-card.is-gerente       { border-color: rgba(251,191,36,.25); }
.gmp-person-card.is-gerente:hover {
    border-color: rgba(251,191,36,.5);
    box-shadow: 0 4px 24px rgba(251,191,36,.07);
}

.gmp-card-header { display: flex; align-items: flex-start; gap: .85rem; margin-bottom: .85rem; }
.gmp-avatar {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 100%);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 700; color: #fff; text-transform: uppercase;
    border: 2px solid rgba(255,255,255,.07);
}
.gmp-avatar.gerente-avatar {
    background: linear-gradient(135deg, #92400e 0%, #d97706 100%);
    border-color: rgba(251,191,36,.3);
    box-shadow: 0 0 14px rgba(251,191,36,.15);
}
.gmp-card-name  { font-size: .96rem; font-weight: 600; margin: 0 0 2px; line-height: 1.2; }
.gmp-card-cargo { font-size: .78rem; color: var(--emp-text-muted); margin: 0; }
.gmp-card-badges { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .75rem; }

.gmp-perm-chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .85rem; min-height: 22px; }
.gmp-chip {
    font-size: .68rem; font-weight: 600; padding: 2px 8px;
    border-radius: 9999px; border: 1px solid; letter-spacing: .01em;
}
.chip-rrhh      { color: #60a5fa;              border-color: rgba(96,165,250,.35);  background: rgba(96,165,250,.1);  }
.chip-finanzas  { color: var(--emp-success);   border-color: rgba(16,185,129,.35);  background: rgba(16,185,129,.1);  }
.chip-logistica { color: #fcd34d;              border-color: rgba(252,211,77,.35);  background: rgba(252,211,77,.08); }
.chip-legal     { color: #a78bfa;              border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.1); }
.chip-none      { color: var(--emp-text-muted); border-color: var(--emp-border);   background: transparent; font-style: italic; }

.gmp-card-footer {
    display: flex; gap: .4rem; flex-wrap: wrap;
    padding-top: .75rem; border-top: 1px solid var(--emp-border);
}
.gmp-card-meta {
    font-size: .75rem; color: var(--emp-text-muted);
    margin-bottom: .5rem; display: flex; gap: 1rem; flex-wrap: wrap;
}

/* ── Modal ────────────────────────────────────────────── */
.gmp-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
    z-index: 999; display: flex; align-items: center; justify-content: center;
    padding: 1rem; animation: gmpFadeIn .15s ease;
}
.gmp-modal {
    background: var(--emp-bg-card); border: 1px solid var(--emp-glass-border);
    border-radius: var(--emp-radius-lg); width: min(560px, 100%);
    box-shadow: var(--emp-shadow-xl); overflow: hidden;
    animation: gmpSlideUp .22s ease;
}
@keyframes gmpSlideUp {
    from { transform: translateY(14px) scale(.98); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.gmp-modal-hd {
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, transparent 60%);
    border-bottom: 1px solid var(--emp-border);
    display: flex; align-items: center; justify-content: space-between;
    position: relative;
}
.gmp-modal-hd::after {
    content: '';
    position: absolute; bottom: -1px; left: 1.5rem; right: 1.5rem; height: 1px;
    background: linear-gradient(90deg, var(--emp-primary) 0%, transparent 70%);
    opacity: .45;
}
.gmp-modal-hd h3 {
    margin: 0; font-size: 1.05rem; font-weight: 700;
    display: flex; align-items: center; gap: .5rem;
}
.gmp-modal-x {
    background: none; border: none; color: var(--emp-text-muted);
    cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 0;
    transition: color .2s, transform .2s;
}
.gmp-modal-x:hover { color: var(--emp-text-main); transform: rotate(90deg); }
.gmp-modal-bd {
    padding: 1.5rem; max-height: 72vh; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--emp-border) transparent;
}
.gmp-modal-bd::-webkit-scrollbar       { width: 5px; }
.gmp-modal-bd::-webkit-scrollbar-track { background: transparent; }
.gmp-modal-bd::-webkit-scrollbar-thumb { background: var(--emp-border); border-radius: 9999px; }
.gmp-modal-ft {
    padding: 1rem 1.5rem; border-top: 1px solid var(--emp-border);
    display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap;
}

/* ── Permission toggle rows ───────────────────────────── */
.gmp-perm-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1rem; border-radius: 10px; border: 1px solid var(--emp-border);
    background: rgba(255,255,255,.02); margin-bottom: .5rem;
    transition: border-color .2s, background .2s;
}
.gmp-perm-row:hover    { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); }
.gmp-perm-row.perm-on  { background: rgba(59,130,246,.06); border-color: rgba(59,130,246,.3); }
.gmp-perm-info { display: flex; align-items: center; gap: .75rem; }
.gmp-perm-icon {
    width: 36px; height: 36px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.gmp-perm-name { font-size: .9rem; font-weight: 600; margin: 0; }
.gmp-perm-desc { font-size: .75rem; color: var(--emp-text-muted); margin: 0; }

/* ── Toggle switch ────────────────────────────────────── */
.gmp-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.gmp-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.gmp-track {
    width: 46px; height: 26px; background: rgba(255,255,255,.1);
    border-radius: 9999px; transition: background .2s; position: relative;
    border: 1px solid var(--emp-border);
}
.gmp-track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%; background: var(--emp-text-muted);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.gmp-toggle input:checked ~ .gmp-track         { background: var(--emp-primary); border-color: var(--emp-primary); }
.gmp-toggle input:checked ~ .gmp-track::after  { transform: translateX(20px); background: #fff; }
.gmp-toggle:hover .gmp-track::after            { box-shadow: 0 1px 8px rgba(0,0,0,.35); }

/* ── Gerente row ──────────────────────────────────────── */
.gmp-gerente-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem; border-radius: var(--emp-radius-sm);
    background: rgba(251,191,36,.05); border: 1px solid rgba(251,191,36,.2);
    margin-bottom: 1.1rem; transition: border-color .2s, background .2s;
}
.gmp-gerente-row.perm-on  { background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.45); }
.gmp-gerente-info { display: flex; align-items: center; gap: .75rem; }
.gmp-gerente-icon { font-size: 1.5rem; color: #fbbf24; }

/* ── Modal meta info ──────────────────────────────────── */
.gmp-modal-meta {
    font-size: .82rem; color: var(--emp-text-muted); margin-bottom: 1.1rem;
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    padding: .75rem 1rem; background: rgba(255,255,255,.03);
    border-radius: 10px; border: 1px solid var(--emp-border);
}
.gmp-modal-meta strong { color: var(--emp-text-main); }

/* ── Inline edit row ──────────────────────────────────── */
.gmp-edit-row { display: flex; gap: .6rem; margin-bottom: 1rem; }
.gmp-edit-row .emp-input { flex: 1; }

/* ── Empty state ──────────────────────────────────────── */
.gmp-empty { text-align: center; padding: 3.5rem 1rem; color: var(--emp-text-muted); }
.gmp-empty i { font-size: 2.8rem; opacity: .3; display: block; margin-bottom: .75rem; }
.gmp-empty p { margin: 0; font-size: .9rem; }

/* ── Pending banner ───────────────────────────────────── */
.gmp-pending-section { margin-bottom: 1.5rem; }
.gmp-pending-section h4 {
    font-size: .82rem; font-weight: 700; color: var(--emp-warning);
    text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .75rem;
    display: flex; align-items: center; gap: .4rem;
    padding: .5rem .85rem; background: rgba(245,158,11,.07);
    border-radius: 8px; border: 1px solid rgba(245,158,11,.2);
}

/* ── No-access view ───────────────────────────────────── */
#view-no-access { display: none; }
.gmp-no-access-card {
    max-width: 480px; margin: 6rem auto;
    background: var(--emp-bg-card); border: 1px solid rgba(239,68,68,.3);
    border-radius: var(--emp-radius-lg); padding: 2.5rem; text-align: center;
    animation: gmpFadeIn .3s ease;
}
.gmp-no-access-icon { font-size: 3.5rem; color: var(--emp-danger); margin-bottom: 1rem; }
.gmp-no-access-card h2 { margin: 0 0 .5rem; }
.gmp-no-access-card p  { color: var(--emp-text-muted); margin: 0 0 1.5rem; }

/* ── Add socio form ───────────────────────────────────── */
.gmp-add-form {
    background: rgba(255,255,255,.02); border: 1px solid var(--emp-border);
    border-radius: var(--emp-radius-md); padding: 1.25rem; margin-top: 1.25rem;
    transition: border-color .2s;
}
.gmp-add-form:hover { border-color: rgba(255,255,255,.1); }
.gmp-add-form h4 {
    margin: 0 0 1rem; font-size: .92rem; font-weight: 700;
    display: flex; align-items: center; gap: .4rem;
}

/* ── Filter bar ───────────────────────────────────────── */
.gmp-filter-bar { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.gmp-filter-btn {
    padding: .35rem .9rem; border-radius: 9999px; border: 1px solid var(--emp-border);
    background: transparent; color: var(--emp-text-muted); cursor: pointer;
    font-size: .8rem; font-weight: 500; font-family: var(--emp-font-sans); transition: all .2s;
}
.gmp-filter-btn:hover  { border-color: rgba(255,255,255,.2); color: var(--emp-text-main); }
.gmp-filter-btn.active { background: var(--emp-primary); border-color: var(--emp-primary); color: #fff; }

/* ── Loading spinner ──────────────────────────────────── */
#view-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 60vh; flex-direction: column; gap: 1rem;
}
.gmp-spinner {
    width: 46px; height: 46px;
    border: 3px solid rgba(255,255,255,.08);
    border-top-color: var(--emp-primary);
    border-radius: 50%; animation: gmpSpin .65s linear infinite;
}
@keyframes gmpSpin { to { transform: rotate(360deg); } }

/* ── Toast progress bar ───────────────────────────────── */
.gmp-toast-bar {
    position: absolute; bottom: 0; left: 0; height: 2px; width: 100%;
    background: currentColor; opacity: .4; border-radius: 0 0 6px 6px;
    transform-origin: left; animation: gmpToastBar 4.5s linear forwards;
}
@keyframes gmpToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
    .gmp-tab          { font-size: .78rem; padding: .45rem .6rem; }
    .gmp-tab i        { display: none; }
    .gmp-stats        { grid-template-columns: 1fr 1fr; }
    .gmp-person-grid  { grid-template-columns: 1fr; }
    .gmp-modal-ft     { justify-content: stretch; }
    .gmp-modal-ft .emp-btn { flex: 1; justify-content: center; }
    .gmp-search-input { min-width: 140px; }
    .gmp-filter-bar   { gap: .3rem; }
}
@media (max-width: 480px) {
    .gmp-hero       { flex-direction: column; align-items: flex-start; gap: .85rem; }
    .gmp-modal-meta { flex-direction: column; gap: .4rem; }
    .gmp-section-hd { flex-direction: column; align-items: flex-start; }
}