/* ============================================================
   assets/css/styles.css  –  Moros Viejos Intranet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary:        #1a5f7a;
    --primary-light:  #2a7fa5;
    --secondary:      #ff8c42;
    --secondary-light:#ffb366;
    --bg-dark:        #0f3f52;
    --bg-light:       #f5f7fa;
    --text-dark:      #1a1a1a;
    --text-light:     #6a7d8c;
    --muted:          #6a7d8c;
    --border:         #e0e6eb;
    --success:        #52c41a;
    --error:          #f5222d;
    --sidebar-w:      280px;
}

html {
    background: #f5f7fa; /* mismo que --bg-light — elimina el flash blanco entre páginas */
}

html, body {
    height: 100%;
    font-family: 'Poppins', sans-serif;
    background: var(--bg-light);
    color: var(--text-dark);
    overflow-x: hidden;
}
.content-wrapper { animation: contentIn .15s ease; }
@keyframes contentIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }
@media (max-width:768px) {
    @keyframes contentIn { from { opacity:0 } to { opacity:1 } }
}

.swal2-container {
    z-index: 12000 !important;
}

/* ── UTILITIES ───────────────────────────────── */
.hidden  { display: none !important; }
.visible { opacity: 1 !important; pointer-events: auto !important; }

/* ── LOGIN ───────────────────────────────────── */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    padding: 20px;
}

.login-box {
    background: #fff;
    padding: 42px 36px;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.28);
    width: 100%;
    max-width: 420px;
    animation: slideUp .55s ease;
}

@keyframes slideUp {
    from { opacity:0; transform:translateY(28px); }
    to   { opacity:1; transform:translateY(0);    }
}

.login-logo        { text-align:center; margin-bottom:32px; }
.logo-circle {
    width:78px; height:78px;
    background: linear-gradient(135deg,var(--secondary),var(--secondary-light));
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin:0 auto 14px; font-size:36px;
}
.login-box h1      { font-family:'Lora',serif; font-size:26px; color:var(--primary); text-align:center; margin-bottom:5px; }
.login-box > p     { text-align:center; color:var(--text-light); font-size:13px; margin-bottom:28px; }

/* form */
.form-group                { margin-bottom:20px; }
.form-group label          { display:block; margin-bottom:7px; font-weight:500; font-size:13px; }
.form-group input, .form-group select {
    width:100%; padding:12px 14px;
    border:2px solid var(--border); border-radius:9px;
    font-size:14px; font-family:'Poppins',sans-serif;
    background:#fafafa;
    transition: border-color .25s, box-shadow .25s;
}
.form-group input:focus, .form-group select:focus {
    outline:none; border-color:var(--primary); background:#fff;
    box-shadow:0 0 0 3px rgba(26,95,122,.1);
}
.form-error { color:var(--error); font-size:12px; margin-top:5px; display:none; }
.form-error.show { display:block; }

.btn-primary {
    width:100%; padding:13px;
    background: linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff; border:none; border-radius:9px;
    font-weight:600; font-size:15px; cursor:pointer;
    font-family:'Poppins',sans-serif;
    transition: transform .2s, box-shadow .2s;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(26,95,122,.28); }
.btn-primary:active { transform:translateY(0); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }

/* ── MODAL BUTTON SYSTEM ─────────────────────────────────────
   Usar .btn + modificador en todos los footers de modales.
   .btn.btn-primary  → ocupa el ancho disponible (flex:1)
   .btn.btn-ghost    → tamaño automático (cancelar / cerrar)
   .btn.btn-danger   → tamaño automático (acciones destructivas)
──────────────────────────────────────────────────────────── */
.btn {
    display:inline-flex; align-items:center; gap:6px;
    border:none; border-radius:8px;
    padding:8px 16px;
    font-size:13px; font-weight:600; cursor:pointer;
    font-family:'Poppins',sans-serif;
    transition:all .2s; white-space:nowrap;
}
.btn.btn-primary {
    background:linear-gradient(135deg,var(--primary),var(--primary-light));
    color:#fff; padding:8px 16px; font-size:13px;
    width:100%; justify-content:center;
}
.btn.btn-primary:hover  { transform:translateY(-1px); box-shadow:0 5px 14px rgba(26,95,122,.28); }
.btn.btn-primary:active { transform:none; }
.btn.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn.btn-ghost {
    background:var(--bg,#f8fafc); color:var(--text,#1e293b);
    border:1.5px solid var(--border,#e2e8f0);
    padding:8px 16px; font-size:13px; width:auto;
}
.btn.btn-ghost:hover { background:#e8ecf0; }
.btn.btn-danger {
    background:#fff1f0; color:var(--error,#f5222d);
    border:1.5px solid #ffa39e;
    padding:8px 16px; font-size:13px; width:auto;
}
.btn.btn-danger:hover { background:#ffe4e4; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }

/* ── MODAL FOOTER (estandarizado) ───────────────────────────
   Usar .modal-foot en todos los footers de modales.
──────────────────────────────────────────────────────────── */
.modal-foot {
    padding:14px 24px; border-top:1px solid var(--border,#e2e8f0);
    display:flex; justify-content:flex-end; align-items:center;
    gap:9px; flex-shrink:0; background:#fff;
}
@media(max-width:600px) { .modal-foot { padding:10px 14px; } }

/* ── MODAL ALERT BANNER ──────────────────────── */
.modal-alert { padding:10px 20px; font-size:13px; font-weight:500; display:none; flex-shrink:0; border-top:1px solid transparent; border-bottom:1px solid transparent; }
.modal-alert.show { display:block; }
.alert-ok  { background:#f6ffed; color:var(--success); border-color:#b7eb8f; }
.alert-err { background:#fff1f0; color:var(--error);   border-color:#ffa39e; }

/* ── CREATE-ALERT (tira de alerta entre cabecera y cuerpo de modal) ── */
.create-alert { display:none; padding:10px 20px; font-size:13px; font-weight:500; flex-shrink:0; border-top:1px solid transparent; border-bottom:1px solid transparent; }
.create-alert.success { display:block; background:#f6ffed; color:#389e0d; border-color:#b7eb8f; }
.create-alert.error   { display:block; background:#fff1f0; color:#cf1322; border-color:#ffa39e; }

/* ── SAVE ALERT / TOAST GLOBAL ───────────────── */
.save-alert {
    position:fixed; left:50%; top:64px; z-index:99999;
    display:flex; align-items:center; gap:8px;
    padding:11px 20px; border-radius:10px;
    font-size:13px; font-weight:500;
    box-shadow:0 6px 22px rgba(0,0,0,.16);
    max-width:min(420px,calc(100vw - 2rem));
    transform:translateX(-50%) translateY(-14px);
    opacity:0; visibility:hidden;
    transition:transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
}
.save-alert.show {
    transform:translateX(-50%) translateY(0);
    opacity:1; visibility:visible;
    transition:transform .3s ease, opacity .3s ease, visibility 0s linear 0s;
}
.save-alert.alert-ok, .save-alert.alert-err { border-width:1px; border-style:solid; }

/* ── MAIN LAYOUT ─────────────────────────────── */
.main-container {
    display:flex; width:100%; height:100vh; height:100dvh;
    opacity:0; pointer-events:none; transition:opacity .3s ease;
}

/* sidebar overlay */
.sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.48); backdrop-filter:blur(2px); z-index:100;
}
.sidebar-overlay.show { display:block; }

/* ── SIDEBAR ─────────────────────────────────── */
.sidebar {
    width:var(--sidebar-w);
    background:linear-gradient(180deg,var(--primary) 0%,var(--bg-dark) 100%);
    color:#fff; padding:26px 16px 20px;
    flex-shrink:0;
    box-shadow:2px 0 14px rgba(0,0,0,.12);
    transition:width .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
    z-index:101;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* ── Badge en botón colapsar sidebar (mensajes sin leer, admin) ── */
.sidebar-toggle-badge {
    position:absolute; top:2px; right:2px;
    min-width:16px; height:16px; padding:0 4px;
    border-radius:8px; background:#e53e3e; color:#fff;
    font-size:10px; font-weight:700; line-height:16px;
    text-align:center; pointer-events:none;
}

/* ── Sidebar toggle button in header (desktop only) ── */
.sidebar-toggle-btn-header {
    display:none; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; width:36px; height:36px; flex-shrink:0;
    background:var(--bg-light); border:none; border-radius:8px;
    cursor:pointer; transition:background .2s;
}
.sidebar-toggle-btn-header:hover { background:#e4e9ee; }
.sidebar-toggle-btn-header span:not(.sidebar-toggle-badge) { display:block; height:2px; background:var(--primary); border-radius:2px; transition:width .25s; }
.sidebar-toggle-btn-header span.line-1 { width:16px; }
.sidebar-toggle-btn-header span.line-2 { width:11px; }
.sidebar-toggle-btn-header span.line-3 { width:16px; }
.sidebar-toggle-btn-header.is-collapsed span.line-2 { width:16px; }
@media (min-width:769px) { .sidebar-toggle-btn-header { display:flex; } }

/* ── Sidebar collapsed (desktop only) ────────── */
@media (min-width:769px) {
    .sidebar.collapsed { width:60px; padding:26px 6px 20px; }
    .sidebar.collapsed .sidebar-logo { justify-content:center; gap:0; }
    .sidebar.collapsed .sidebar-logo-text { display:none; }
    .sidebar.collapsed .sidebar-section { margin-bottom:12px; }
    .sidebar.collapsed .sidebar-section-title { display:none; }
    .sidebar.collapsed .sidebar-item { justify-content:center; padding:11px 0; position:relative; }
    .sidebar.collapsed .sidebar-item-label { display:none; }
    .sidebar.collapsed .dot { display:none; }
    .sidebar.collapsed .notif-badge { position:absolute; top:5px; right:5px; min-width:8px; height:8px; padding:0; border-radius:50%; font-size:0; }
    .sidebar.collapsed .user-section { align-items:center; padding:12px 4px; }
    .sidebar.collapsed .user-details,
    .sidebar.collapsed .user-actions { display:none; }
    .sidebar.collapsed .user-info { justify-content:center; }
    .sidebar.collapsed .sidebar-toggle-btn span:nth-child(2) { width:16px; }
}
.sidebar-scroll {
    flex:1;
    overflow-y:auto;
    padding-bottom:120px;
    padding-right:6px;
}

@media (max-width:768px) {
    .sidebar { position:fixed; top:0; left:0; height:100%; height:100dvh; transform:translateX(-100%); }
    .sidebar.open { transform:translateX(0); }
}

.sidebar-logo {
    display:flex; align-items:center; gap:11px;
    margin-bottom:34px; padding-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.18);
    cursor:pointer; transition:opacity .2s, transform .2s;
}
.sidebar-logo:hover { opacity:.82; transform:translateX(3px); }
.sidebar-logo-circle {
    width:46px; height:46px; background:var(--secondary);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:21px; flex-shrink:0;
}
.sidebar-logo-text h2 { font-size:14px; font-weight:700; }
.sidebar-logo-text p  { font-size:11px; opacity:.72; margin-top:2px; }

.sidebar-section       { margin-bottom:28px; }
.sidebar-section-title { font-size:10px; font-weight:700; text-transform:uppercase; opacity:.62; letter-spacing:1.1px; margin-bottom:10px; padding-left:5px; }

.sidebar-item {
    padding:11px 13px; margin-bottom:5px;
    cursor:pointer; border-radius:9px;
    font-size:13px; font-weight:500;
    display:flex; align-items:center; gap:9px;
    transition: background .22s;
    user-select:none;
}
.sidebar-item:hover          { background:rgba(255,255,255,.13); }
.sidebar-item.active         { background:var(--secondary); }
.sidebar-item .dot           { width:6px; height:6px; background:currentColor; border-radius:50%; opacity:0; flex-shrink:0; transition:opacity .2s; }
.sidebar-item.active .dot    { opacity:1; }

/* ── Notification badge ─────────────────────────────────── */
.notif-badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px;
    border-radius:9px; background:#e53e3e; color:#fff;
    font-size:10px; font-weight:700; line-height:1;
    margin-left:auto; flex-shrink:0;
    animation:notifPop .25s ease;
}
@keyframes notifPop {
    from { transform:scale(.6); opacity:0; }
    to   { transform:scale(1);  opacity:1; }
}
/* Hamburger wrapper for badge positioning */
.hamburger-wrapper {
    position:relative; display:inline-flex; flex-shrink:0;
}
.hamburger-badge {
    position:absolute; top:-5px; right:-5px;
    min-width:16px; height:16px; padding:0 4px;
    border-radius:8px; background:#e53e3e; color:#fff;
    font-size:10px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none; line-height:1;
    animation:notifPop .25s ease;
}

.user-section {
    padding:16px 16px 20px;
    border-top:1px solid rgba(255,255,255,.16);
    background:linear-gradient(180deg,transparent,var(--bg-dark));
    display:flex; flex-direction:column; gap:14px;
    width:100%;
    align-items:flex-start;
    margin-top:auto;
}
.user-info { display:flex; align-items:center; gap:10px; }
.user-avatar {
    width:36px; height:36px; background:var(--secondary);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px; flex-shrink:0; overflow:hidden;
}
.user-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.user-details h4 { font-size:13px; font-weight:600; }
.user-details p  { font-size:11px; opacity:.72; margin-top:1px; }
.user-actions { width:100%; display:flex; justify-content:flex-start; }
.logout-btn {
    width:100%; padding:9px 16px;
    background:rgba(255,255,255,.12); color:#fff;
    border:1px solid rgba(255,255,255,.26); border-radius:7px;
    font-size:12px; font-weight:500; cursor:pointer;
    transition:background .22s; font-family:'Poppins',sans-serif;
    touch-action:manipulation; position:relative; z-index:10;
}
.logout-btn:hover { background:rgba(255,255,255,.22); }

/* ── HEADER ──────────────────────────────────── */
.content-wrapper { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.header {
    background:#fff; padding:15px 24px;
    border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    flex-shrink:0;
}
.header-left { display:flex; align-items:center; gap:13px; min-width:0; }
.header-title h1 { font-family:'Lora',serif; font-size:19px; color:var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-title p  { font-size:11px; color:var(--text-light); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.hamburger-btn {
    display:none; width:40px; height:40px;
    background:var(--bg-light); border:none; border-radius:9px;
    cursor:pointer; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; flex-shrink:0; transition:background .2s;
}
.hamburger-btn:hover { background:#e4e9ee; }
.hamburger-btn span { display:block; width:19px; height:2px; background:var(--primary); border-radius:2px; transition:all .28s ease; }
.hamburger-btn.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity:0; }
.hamburger-btn.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

@media (max-width:768px) { .hamburger-btn { display:flex; } }
/* Cuando hay campana en el header (socios), ocultar el badge del hamburger */
body.has-bell .hamburger-badge { display:none !important; }
@media (min-width:769px) { .hamburger-badge { display:none !important; } }

/* ── Header right icon buttons (socios global) ── */
.header-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* ── Header notification bell (socios — visible escritorio y móvil) ── */
.header-bell {
    display:flex; align-items:center; gap:7px;
    padding:7px 14px; border-radius:999px;
    background:#f0f7ff; border:1.5px solid #bfdbfe;
    color:var(--primary); font-size:13px; font-weight:600;
    cursor:pointer; white-space:nowrap; flex-shrink:0;
    transition:background .2s, box-shadow .2s;
}
.header-bell:hover { background:#dbeafe; box-shadow:0 2px 8px rgba(26,95,122,.12); }
.header-bell-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:20px; height:20px; padding:0 5px;
    border-radius:10px; background:#e53e3e; color:#fff;
    font-size:11px; font-weight:700; line-height:1;
}
/* En móvil: solo icono + badge, sin texto */
@media (max-width:768px) {
    .header-bell { padding:7px 10px; gap:4px; }
    .header-bell .bell-label { display:none; }
}
@media (max-width:480px) {
    .header { padding:11px 14px; }
    .header-title h1 { font-size:17px; }
    .header-title p  { display:none; }
}

/* ── Bell popover ────────────────────────────── */
.bell-popover {
    position:fixed; z-index:2000;
    width:340px; max-width:calc(100vw - 24px);
    background:#fff; border-radius:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
    border:1px solid #e0e6eb;
    overflow:hidden;
    animation:bellPopIn .18s ease;
}
@keyframes bellPopIn {
    from { opacity:0; transform:translateY(-8px) scale(.97); }
    to   { opacity:1; transform:translateY(0)   scale(1);   }
}
.bell-pop-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px 12px;
    border-bottom:1px solid #e8edf2;
    background:#f8fafb;
}
.bell-pop-header strong {
    font-size:14px; font-weight:700; color:#1a5f7a;
}
.bell-pop-close {
    background:none; border:none; cursor:pointer;
    font-size:18px; line-height:1; color:#7a8fa0;
    padding:0 2px; transition:color .15s;
}
.bell-pop-close:hover { color:#1a5f7a; }
.bell-pop-body {
    max-height:320px; overflow-y:auto;
}
.bell-pop-item {
    display:flex; align-items:flex-start; gap:12px;
    padding:12px 16px; cursor:pointer;
    border-bottom:1px solid #f0f4f7;
    transition:background .15s;
}
.bell-pop-item:last-child { border-bottom:none; }
.bell-pop-item:hover { background:#f0f7ff; }
.bell-pop-icon {
    font-size:22px; flex-shrink:0; margin-top:1px;
}
.bell-pop-info { flex:1; min-width:0; }
.bell-pop-title {
    font-size:13px; font-weight:600; color:#1a2a3a;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    margin-bottom:3px;
}
.bell-pop-meta {
    font-size:11px; color:#7a8fa0;
}
.bell-pop-empty {
    padding:32px 16px; text-align:center;
    font-size:13px; color:#9aabb8;
}
.bell-pop-footer {
    padding:12px 16px;
    border-top:1px solid #e8edf2;
    background:#f0f7ff; text-align:center;
}
.bell-pop-footer a {
    display:inline-flex; align-items:center; gap:6px;
    font-size:12px; font-weight:700; color:#1a5f7a;
    text-decoration:none; letter-spacing:.2px;
    padding:6px 16px; border-radius:20px;
    background:#fff; border:1.5px solid #bfdbfe;
    transition:background .15s, box-shadow .15s;
}
.bell-pop-footer a::after { content:'→'; font-size:13px; }
.bell-pop-footer a:hover {
    background:#dbeafe; box-shadow:0 2px 6px rgba(26,95,122,.12);
    text-decoration:none;
}

/* Msg popover — elementos adicionales */
.msg-pop-av {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    background:var(--secondary,#2a7fa5); color:#fff;
    font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
}
.msg-pop-badge {
    display:inline-block; background:#e53e3e; color:#fff;
    font-size:10px; font-weight:700; border-radius:8px;
    padding:1px 5px; vertical-align:middle; margin-left:4px;
}
.msg-pop-preview {
    font-size:11px; color:#7a8fa0; margin-top:2px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Bell popover — detail view */
.bell-detail { padding:16px; }
.bell-detail-back {
    display:inline-flex; align-items:center; gap:6px;
    background:none; border:none; cursor:pointer;
    font-size:12px; color:#1a5f7a; font-weight:600;
    padding:0; margin-bottom:14px; font-family:inherit;
    transition:opacity .15s;
}
.bell-detail-back:hover { opacity:.7; }
.bell-detail-icon { font-size:36px; text-align:center; margin-bottom:10px; }
.bell-detail-title {
    font-size:15px; font-weight:700; color:#1a2a3a;
    margin-bottom:6px; line-height:1.35;
}
.bell-detail-meta {
    font-size:11px; color:#7a8fa0; margin-bottom:12px;
}
.bell-detail-msg {
    font-size:13px; color:#2c3e50; line-height:1.6;
    background:#f8fafb; border-radius:8px; padding:12px;
    border:1px solid #e8edf2;
}
.bell-detail-attach {
    margin-top:10px; display:inline-flex; align-items:center; gap:6px;
    font-size:12px; color:#1a5f7a; font-weight:600; text-decoration:none;
}
.bell-detail-attach:hover { text-decoration:underline; }

/* ── CONTENT ─────────────────────────────────── */
.content {
    flex:1; overflow-y:auto; overflow-x:hidden;
    padding:24px; -webkit-overflow-scrolling:touch;
}
@media (max-width:480px) { .content { padding:14px; } }

/* ── VIEWS ───────────────────────────────────── */
.view { display:none; animation:fadeIn .28s ease; }
.view.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(7px)} to{opacity:1;transform:translateY(0)} }

/* ── DASHBOARD ───────────────────────────────── */
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:1100px; }
@media (max-width:620px) { .dashboard-grid { grid-template-columns:1fr; gap:14px; } }
.section-group  { display:flex; flex-direction:column; gap:22px; }

.menu-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.07); transition:transform .25s,box-shadow .25s; cursor:pointer; }
.menu-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.12); }
.menu-card-header { background:linear-gradient(135deg,var(--primary),var(--primary-light)); padding:17px 20px; color:#fff; display:flex; align-items:center; gap:12px; }
.menu-card-icon   { font-size:26px; }
.menu-card-header h2 { font-size:16px; font-family:'Lora',serif; }
.menu-card-body   { padding:15px; display:flex; flex-direction:column; gap:9px; }
.menu-item {
    padding:12px 14px; background:var(--bg-light); border-radius:8px;
    font-weight:500; font-size:13px; color:var(--text-dark);
    transition:all .22s; border-left:4px solid transparent;
}
.menu-item:hover { background:#fff; border-left-color:var(--secondary); transform:translateX(4px); box-shadow:0 2px 8px rgba(0,0,0,.07); }

/* ── SOCIO ───────────────────────────────────── */
.socio-card { background:#fff; border-radius:14px; padding:28px; box-shadow:0 2px 12px rgba(0,0,0,.07); max-width:900px; }
@media (max-width:480px) { .socio-card { padding:18px 14px; } }

.socio-header { display:flex; align-items:center; gap:18px; margin-bottom:26px; padding-bottom:22px; border-bottom:2px solid var(--border); }
@media (max-width:480px) { .socio-header { flex-direction:column; align-items:flex-start; gap:10px; } .socio-header-info { width:100%; } }
.socio-avatar {
    width:86px; height:86px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,var(--secondary),var(--secondary-light));
    display:flex; align-items:center; justify-content:center;
    font-size:38px; color:#fff; font-weight:700;
    position:relative; overflow:hidden;
}
.socio-avatar-img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; display:none;
}
.socio-avatar-initials{position:relative; z-index:2;}
.socio-avatar.has-foto{background:#000;}
.socio-avatar.has-foto .socio-avatar-img{display:block;}
.socio-avatar.has-foto .socio-avatar-initials{opacity:0;}
@media (max-width:480px) { .socio-avatar { width:68px; height:68px; font-size:28px; } }
.socio-header-info h2 { font-family:'Lora',serif; font-size:19px; color:var(--primary); margin-bottom:4px; }
.socio-header-info p  { color:var(--text-light); font-size:13px; }

.socio-section     { margin-bottom:24px; }
.socio-section h3  { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--primary); margin-bottom:12px; letter-spacing:.7px; }
.socio-grid        { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (max-width:520px) { .socio-grid { grid-template-columns:1fr; gap:9px; } }
.socio-item        { padding:13px; background:var(--bg-light); border-radius:9px; border-left:4px solid var(--secondary); }
.socio-label       { font-size:11px; color:var(--text-light); font-weight:600; text-transform:uppercase; margin-bottom:4px; }
.socio-value       { font-size:14px; color:var(--text-dark); font-weight:500; }

.status-badge   { display:inline-block; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.status-alta    { background:#e6f7ed; color:var(--success); }
.status-corriente { background:#e6f4fb; color:#1890ff; }
.status-baja    { background:#fff1f0; color:var(--error); }
.status-pendiente { background:#fffbe6; color:#d4b106; }
.status-moroso  { background:#fff1f0; color:var(--error); }

.btn-secondary {
    display:inline-flex; align-items:center; gap:8px;
    margin-top:18px; padding:11px 26px;
    background:var(--primary); color:#fff;
    border:none; border-radius:9px; cursor:pointer;
    font-weight:600; font-size:14px;
    transition:background .22s, transform .2s;
    font-family:'Poppins',sans-serif;
}
.btn-secondary:hover { background:var(--primary-light); transform:translateY(-1px); }

/* ── TIENDA ──────────────────────────────────── */
.tienda-tabs-wrap {
    position:relative;
    display:flex;
    align-items:stretch;
    margin-bottom:22px;
}
.tabs-arrow {
    display:none;
    align-items:center;
    justify-content:center;
    width:32px;
    flex-shrink:0;
    background:#fff;
    border:none;
    border-bottom:2px solid var(--border);
    font-size:22px;
    line-height:1;
    color:var(--text-light);
    cursor:pointer;
    padding:0;
    transition:color .18s;
    user-select:none;
}
.tabs-arrow:hover { color:var(--primary); }
.tabs-arrow.hidden { opacity:0; pointer-events:none; }
@media (max-width:700px) {
    .tabs-arrow { display:flex; }
}
.tienda-tabs {
    flex:1;
    display:flex; gap:0;
    border-bottom:2px solid var(--border);
    overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
}
.tienda-tabs::-webkit-scrollbar { display:none; }
.tab-btn {
    padding:11px 20px; background:none; border:none;
    border-bottom:3px solid transparent; margin-bottom:-2px;
    cursor:pointer; font-weight:500; color:var(--text-light);
    transition:color .2s, border-color .2s; font-size:13px; white-space:nowrap;
    font-family:'Poppins',sans-serif; flex-shrink:0;
}
.tab-btn.active          { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.tab-btn:hover:not(.active) { color:var(--text-dark); }

.subtab-btn { padding:4px 12px; border:1.5px solid var(--border); border-radius:20px; background:#fff; font-size:11px; font-weight:500; cursor:pointer; font-family:'Poppins',sans-serif; color:var(--muted); transition:all .2s; white-space:nowrap; }
.subtab-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:600; }
.subtab-btn:hover:not(.active) { border-color:var(--primary); color:var(--primary); }

.tienda-layout {
    display:flex;
    gap:24px;
    align-items:flex-start;
    flex-wrap:wrap;
}
.tienda-main { flex:1 1 0; min-width:0; }
@media (max-width:900px) {
    .tienda-layout { flex-direction:column; gap:16px; }
    .cart-summary { width:100%; }
}

.product-grid {
    display:grid;
    /* clamp(min, preferred, max): en móvil usa ~44vw → ~2 cols; en tablet/desktop topa en 220px */
    grid-template-columns:repeat(auto-fill, minmax(clamp(130px, 44vw, 220px), 1fr));
    gap:clamp(8px, 2vw, 18px);
    margin-bottom:22px;
}

.product-card { background:#fff; border-radius:clamp(12px,2vw,18px); box-shadow:0 8px 24px rgba(15,23,42,.08); transition:transform .25s, box-shadow .25s; overflow:hidden; }
.product-card.is-disabled { opacity:.55; }
.product-card:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(15,23,42,.12); }
.product-card-btn {
    display:flex;
    flex-direction:column;
    width:100%;
    border:none;
    background:none;
    text-align:left;
    padding:0;
    cursor:pointer;
}
.product-card-btn:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.product-card-media {
    height:clamp(100px, 20vw, 180px);
    border-radius:0;
    overflow:hidden;
    background:linear-gradient(135deg,var(--bg-light),#e8eef5);
    display:flex;
    align-items:center;
    justify-content:center;
}
.product-card-media img { width:100%; height:100%; object-fit:cover; }
.product-emoji { font-size:clamp(32px, 7vw, 60px); }
.product-card-body { padding:clamp(8px,2.5vw,18px); display:flex; flex-direction:column; gap:clamp(5px,1vw,10px); }
.product-card-top { display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.product-chip {
    padding:2px 8px;
    border-radius:999px;
    background:var(--bg-light);
    font-size:clamp(9px,1.8vw,11px);
    font-weight:600;
    color:var(--primary);
    text-transform:uppercase;
    white-space:nowrap;
}
.product-card-price { font-weight:700; color:var(--secondary); font-size:clamp(12px,2.5vw,15px); white-space:nowrap; }
.product-card h4 { margin:0; font-size:clamp(12px,2.8vw,15px); color:var(--text-dark); line-height:1.3; }
.product-card p { margin:0; font-size:clamp(11px,2.2vw,13px); color:var(--text-light); min-height:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-stock { font-size:clamp(10px,2vw,12px); color:var(--text-light); }

.product-empty {
    padding:24px;
    text-align:center;
    color:var(--text-light);
    background:#fff;
    border-radius:14px;
    border:1px solid var(--border);
}

.cart-summary {
    background:#fff;
    border-radius:18px;
    padding:24px;
    box-shadow:0 20px 50px rgba(15,23,42,.12);
    width:300px;
    max-width:100%;
    position:sticky;
    top:90px;
}
@media (max-width:900px) {
    .cart-summary { position:static; width:100%; padding:18px; }
    .cart-items { max-height:220px; }
}
.cart-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cart-header h3 { margin:0; font-size:18px; color:var(--primary); }
.cart-header span { font-size:12px; color:var(--text-light); font-weight:600; }
.cart-items { border-top:1px solid var(--border); border-bottom:1px solid var(--border); max-height:360px; overflow-y:auto; padding:6px 0; }
.cart-item { display:flex; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); }
.cart-item:last-child { border-bottom:none; }
.cart-item-name { font-size:14px; font-weight:600; margin-bottom:4px; }
.cart-item-meta { display:flex; flex-wrap:wrap; gap:6px; font-size:11px; color:var(--text-light); }
.cart-chip { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:var(--bg-light); font-size:11px; font-weight:600; }
.cart-item-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.cart-item-price { font-weight:700; color:var(--secondary); font-size:14px; }
.cart-empty { padding:26px 0; text-align:center; color:var(--text-light); font-size:13px; }
.cart-total { display:flex; justify-content:space-between; align-items:center; padding:16px 0; font-size:16px; font-weight:700; color:var(--primary); }
.cart-note { margin-top:12px; font-size:11px; color:var(--text-light); line-height:1.5; }

.checkout-btn {
    width:100%;
    padding:13px;
    background:linear-gradient(135deg,var(--secondary),var(--secondary-light));
    color:#fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
    font-size:14px;
    margin-top:14px;
    transition:transform .22s,box-shadow .22s;
    font-family:'Poppins',sans-serif;
}
.checkout-btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(255,140,66,.3); }
.checkout-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }

/* Overlay: flex-start + margin:auto on panel = centered when short, scrollable when tall */
.product-detail-overlay {
    position:fixed;
    inset:0;
    background:rgba(13,18,30,.68);
    backdrop-filter:blur(6px);
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:20px;
    z-index:9000;
    overflow-y:auto;
}
.product-detail-overlay.show { display:flex; }
.product-detail-panel {
    background:#fff;
    border-radius:20px;
    width:100%;
    max-width:720px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:24px;
    padding:24px;
    box-shadow:0 30px 80px rgba(15,23,42,.25);
    position:relative;
    margin:auto;       /* centers vertically when shorter than viewport */
    flex-shrink:0;
}
@media (max-width:720px) {
    .product-detail-panel { grid-template-columns:1fr; }
    .detail-media { min-height:200px; }
}
/* ≤600px: bottom-sheet pattern */
@media (max-width:600px) {
    .product-detail-overlay {
        padding:0;
        align-items:flex-end;
        overflow:hidden;    /* panel scrolls, not the overlay */
    }
    .product-detail-panel {
        margin:0;
        width:100%;
        max-width:100%;
        border-radius:24px 24px 0 0;
        grid-template-columns:1fr;
        gap:14px;
        padding:20px 18px 32px;
        max-height:90svh;
        overflow-y:auto;
        box-shadow:0 -8px 40px rgba(15,23,42,.18);
    }
    .product-detail-panel::before {
        content:'';
        display:block;
        width:40px; height:4px;
        background:#d1d5db;
        border-radius:2px;
        margin:0 auto 16px;
    }
    .detail-media { min-height:170px; max-height:200px; border-radius:12px; }
    .detail-close { top:18px; right:16px; }
}
.detail-close {
    position:absolute;
    top:12px;
    right:12px;
    border:none;
    background:#f1f5f9;
    width:32px;
    height:32px;
    border-radius:50%;
    font-size:16px;
    cursor:pointer;
}
.detail-media {
    border-radius:16px;
    background:var(--bg-light);
    height:100%;
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.detail-media img { width:100%; height:100%; object-fit:cover; display:none; }
.detail-emoji { font-size:72px; color:var(--primary); display:none; align-items:center; justify-content:center; width:100%; height:100%; }
.detail-body { display:flex; flex-direction:column; gap:14px; }
.detail-chip { align-self:flex-start; padding:4px 12px; border-radius:999px; background:var(--bg-light); font-size:11px; font-weight:700; text-transform:uppercase; color:var(--primary); }
.detail-price-row { display:flex; flex-direction:column; gap:4px; }
.detail-price { font-size:20px; font-weight:700; color:var(--secondary); }
.detail-stock { font-size:12px; color:var(--text-light); }
.detail-field { display:flex; flex-direction:column; gap:6px; }
#detailSizesWrapper { display:none; }
.size-pills { display:flex; flex-wrap:wrap; gap:8px; }
.size-pill {
    border:1px solid var(--border);
    padding:6px 10px;
    border-radius:10px;
    font-size:12px;
    background:#fff;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:60px;
    text-align:center;
}
.size-pill span { font-size:10px; color:var(--text-light); }
.size-pill.active { border-color:var(--primary); color:var(--primary); font-weight:600; }
.size-pill.disabled { opacity:.4; cursor:not-allowed; }
.qty-input { display:flex; align-items:center; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.qty-input button { width:40px; height:38px; border:none; background:#f1f5f9; font-size:18px; cursor:pointer; }
.qty-input input { width:70px; border:none; text-align:center; font-size:14px; padding:6px; }
.detail-limit { font-size:11px; color:var(--text-light); min-height:16px; }
.detail-add-btn {
    padding:12px;
    border:none;
    background:var(--primary);
    color:#fff;
    border-radius:10px;
    font-weight:600;
    cursor:pointer;
    transition:opacity .2s;
}
.detail-add-btn:disabled { opacity:.5; cursor:not-allowed; }


/* ── NOTIFICACIONES ──────────────────────────── */
.notifications-filters { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.filter-btn { padding:7px 16px; background:#fff; border:2px solid var(--border); border-radius:8px; cursor:pointer; font-weight:500; font-size:12px; font-family:'Poppins',sans-serif; transition:all .22s; }
.filter-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.notifications-table { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.table-header { display:grid; grid-template-columns:60px 1fr 150px 110px 90px; gap:16px; padding:13px 18px; background:var(--bg-light); font-weight:700; font-size:11px; color:var(--text-light); text-transform:uppercase; letter-spacing:.5px; border-bottom:2px solid var(--border); }
.table-row    { display:grid; grid-template-columns:60px 1fr 150px 110px 90px; gap:16px; padding:14px 18px; align-items:center; border-bottom:1px solid var(--border); transition:background .18s; cursor:pointer; }
.table-header div:nth-child(1),
.table-header div:nth-child(2) { text-align:left; }
.table-header div:nth-child(n+3) { text-align:center; }
.table-row:last-child { border-bottom:none; }
.table-row:hover { background:var(--bg-light); }

@media (max-width:580px) {
    .table-header { display:none; }
    .table-row { grid-template-columns:52px 1fr; grid-auto-rows:auto; gap:10px; align-items:flex-start; }
    .table-row .notification-icon { grid-column:1; grid-row:1; }
    .table-row .notification-info { grid-column:2; grid-row:1; }
    .table-row .notification-date { grid-column:1 / span 2; grid-row:2; justify-content:space-between; text-align:left; width:100%; }
    .table-row .notification-download { display:none; }
    .notification-attach { margin-left:0; }
    .notification-attach-inline { display:inline-flex; margin-left:auto; }
    .notification-status-desktop { display:none; }
    .notification-status-pill { display:inline-flex; }
}
.notification-icon   { width:48px; height:48px; border-radius:14px; background:#eef2ff; color:#4338ca; font-size:26px; display:flex; align-items:center; justify-content:center; text-align:center; box-shadow:inset 0 0 0 1px rgba(67,56,202,.06); }
.notification-info   { display:flex; flex-direction:column; gap:4px; }
.notification-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.notification-title  { font-weight:600; font-size:13px; }
.notification-sender { font-size:11px; color:var(--text-light); margin-top:2px; }
.notification-date   { font-size:12px; color:var(--text-light); display:flex; align-items:center; gap:8px; justify-content:center; text-align:center; }
.notification-date-text { display:inline-flex; align-items:center; }
.notification-download { display:flex; align-items:center; justify-content:center; }
.notification-download-placeholder { color:var(--text-light); font-size:12px; }
.notification-attach-inline { display:none; }
@media (min-width:581px) {
    .notification-date .notification-attach-inline { display:none !important; }
}
.notification-status { display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; font-size:10px; font-weight:700; white-space:nowrap; }
.notification-status-desktop { display:none; }
.notification-status-pill { display:inline-flex; }
@media (min-width:581px) {
    .notification-status-desktop { display:inline-flex; justify-self:center; align-self:center; }
    .notification-status-pill { display:none; }
}
.notification-attach { border:none; background:#f1f5f9; color:var(--secondary); cursor:pointer; margin-left:8px; width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; box-shadow:inset 0 0 0 1px rgba(15,23,42,.08); transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.notification-attach:hover { background:#dbeafe; box-shadow:0 10px 20px rgba(37,99,235,.25); }
.notification-attach:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.notification-attach-icon { width:22px; height:22px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%232563eb%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%202h7l5%205v13a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V4a2%202%200%200%201%202-2z%22%20fill%3D%22%23eef2ff%22%2F%3E%3Cpath%20d%3D%22M12%2016V8%22%2F%3E%3Cpath%20d%3D%22M9%2011l3-3%203%203%22%2F%3E%3C%2Fsvg%3E"); background-size:contain; background-repeat:no-repeat; background-position:center; display:block; }
/* Notification modal content */
.notif-m-content { display:flex; flex-direction:column; gap:14px; text-align:left; }
.modal-text .notif-m-content { text-align:left; }
.notif-m-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--text-light); }
.notif-m-from strong { color:var(--text-dark); font-weight:600; }
.notif-m-dot { color:var(--border); }
.notif-m-badge { font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; letter-spacing:.3px; }
.notif-m-badge-new  { background:#e6f7ff; color:#1890ff; }
.notif-m-badge-read { background:#f0f0f0; color:#999; }
.notif-m-divider { border:none; border-top:1px solid var(--border); margin:0; }
.notif-m-body { margin:0; font-size:14px; line-height:1.7; color:var(--text-dark); white-space:normal; }
.notif-m-body-empty { color:var(--text-light); font-style:italic; }
.notif-m-attach { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:var(--bg-light); border:1.5px solid var(--border); color:var(--primary); font-weight:600; font-size:13px; text-decoration:none; transition:background .18s, border-color .18s, transform .18s; }
.notif-m-attach:hover { background:#e0f2fe; border-color:var(--primary); transform:translateY(-1px); }
.status-new  { background:#e6f7ff; color:#1890ff; }
.status-read { background:#f0f0f0; color:#999; }

/* ── CALENDARIO ──────────────────────────────── */
.calendar-wrapper { display:grid; grid-template-columns:290px 1fr; gap:22px; max-width:980px; }
@media (max-width:750px) { .calendar-wrapper { grid-template-columns:1fr; } }

.calendar { background:#fff; border-radius:14px; padding:19px; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.calendar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:13px; border-bottom:2px solid var(--border); }
.calendar-header h3 { font-size:12px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:.5px; }
.calendar-header button {
    background:var(--bg-light); border:none; width:30px; height:30px;
    border-radius:7px; font-size:15px; cursor:pointer; color:var(--primary);
    transition:background .18s,color .18s;
    display:flex; align-items:center; justify-content:center;
}
.calendar-header button:hover { background:var(--primary); color:#fff; }

.weekdays { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:5px; }
.weekday  { text-align:center; font-weight:700; font-size:10px; color:var(--text-light); padding:5px 0; }
.days     { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.day {
    aspect-ratio:1; display:flex; align-items:center; justify-content:center;
    border-radius:7px; cursor:pointer; font-size:12px; font-weight:500;
    background:var(--bg-light); color:var(--text-dark); transition:all .18s;
}
.day:hover         { background:#d9e3ea; }
.day.other-month   { color:#ccc; background:transparent; cursor:default; }
.day.has-event     { background:var(--secondary); color:#fff; font-weight:700; }
.day.has-event:hover { background:#e87a2e; }
.day.today         { box-shadow:inset 0 0 0 2px var(--primary); }

.events-list   { background:#fff; border-radius:14px; padding:20px; box-shadow:0 2px 12px rgba(0,0,0,.07); }
.events-list h3 { font-family:'Lora',serif; font-size:16px; font-weight:700; color:var(--primary); margin-bottom:16px; }
.event-item  { padding:13px; background:var(--bg-light); border-radius:9px; margin-bottom:10px; border-left:4px solid var(--secondary); transition:background .18s, transform .18s; cursor:pointer; }
.event-item:hover { background:#ecf0f5; transform:translateY(-1px); }
.event-date  { font-size:10px; font-weight:700; color:var(--secondary); text-transform:uppercase; margin-bottom:4px; letter-spacing:.5px; }
.event-title { font-size:13px; font-weight:600; margin-bottom:4px; }
.event-desc  { font-size:12px; color:var(--text-light); line-height:1.5; }
.event-tag   { display:inline-flex; align-items:center; gap:4px; font-size:10px; text-transform:uppercase; letter-spacing:.4px; padding:2px 8px; border-radius:999px; background:#fff; border:1px solid var(--border); margin-bottom:6px; }
.no-events   { text-align:center; padding:28px 18px; color:var(--text-light); font-size:13px; }

.event-day-overlay { position:fixed; inset:0; background:rgba(15,23,42,.6); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; z-index:10000; }
.event-day-overlay.show { display:flex; }
.event-day-card { background:#fff; border-radius:18px; width:min(420px,92vw); max-height:90vh; overflow:auto; padding:24px 24px 18px; box-shadow:0 30px 80px rgba(15,23,42,.35); animation:scaleIn .25s ease; }
.event-day-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.event-day-label { font-size:11px; font-weight:600; text-transform:uppercase; color:var(--muted); letter-spacing:.5px; margin:0; }
.event-day-date { font-family:'Lora',serif; font-size:18px; font-weight:600; margin:2px 0 0; color:var(--primary); }
.event-day-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--muted); transition:color .15s; }
.event-day-close:hover { color:var(--text); }
.event-day-list { display:flex; flex-direction:column; gap:10px; }
/* Event day list items */
.event-day-item { border:1px solid var(--border); border-radius:14px; padding:14px 16px; cursor:pointer; transition:all .2s; display:flex; flex-direction:column; gap:3px; }
.event-day-item:hover { background:var(--bg-light); border-color:var(--primary); box-shadow:0 4px 14px rgba(0,0,0,.07); transform:translateY(-1px); }
.event-day-item .badge { font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--primary); color:#fff; display:inline-block; letter-spacing:.4px; text-transform:uppercase; align-self:flex-start; margin-bottom:2px; }
.event-day-item .title { font-weight:700; font-size:15px; color:var(--text-dark); line-height:1.3; }
.event-day-item .meta { font-size:12px; color:var(--text-light); margin-top:2px; }
/* Event day detail */
.event-day-detail { display:none; animation:fadeIn .2s ease; }
.event-day-detail.active { display:block; }
.event-day-back {
    display:inline-flex; align-items:center; gap:7px;
    padding:7px 16px 7px 12px;
    background:transparent; border:1.5px solid var(--primary);
    border-radius:999px; color:var(--primary);
    font-family:'Poppins',sans-serif; font-size:13px; font-weight:600;
    cursor:pointer; margin-bottom:16px;
    transition:background .18s, color .18s;
}
.event-day-back::before { content:'‹'; font-size:18px; line-height:1; margin-right:1px; }
.event-day-back:hover { background:var(--primary); color:#fff; }
/* Event detail hero + body */
.evd-hero { background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%); border-radius:14px; padding:20px; margin-bottom:14px; color:#fff; }
.evd-tipo { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; background:rgba(255,255,255,.22); border-radius:999px; padding:3px 10px; margin-bottom:8px; }
.evd-hero-title { font-family:'Lora',serif; font-size:20px; font-weight:700; line-height:1.25; margin:0 0 10px; }
.evd-hero-meta { display:flex; flex-direction:column; gap:5px; font-size:12px; opacity:.92; }
.evd-hero-meta span { display:flex; align-items:center; gap:6px; }
.evd-body { display:flex; flex-direction:column; gap:10px; }
.evd-row { display:flex; align-items:center; gap:9px; padding:10px 14px; background:var(--bg-light); border-radius:10px; font-size:13px; color:var(--text-dark); }
.evd-row-icon { flex-shrink:0; }
.evd-desc { margin:0; padding:16px 18px; font-size:14.5px; line-height:1.8; color:var(--text-dark); background:var(--bg-light); border-radius:12px; border-left:4px solid var(--primary); font-family:'Lora',serif; letter-spacing:.01em; }
.evd-desc-empty { color:var(--text-light); font-style:italic; font-size:13px; background:none; border-left:none; padding:0; font-family:'Poppins',sans-serif; }
.evd-link { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:10px; background:var(--primary); color:#fff; font-weight:600; text-decoration:none; font-size:13px; transition:opacity .18s, transform .18s; align-self:flex-start; }
.evd-link:hover { opacity:.88; transform:translateY(-1px); }

@keyframes fadeIn { from {opacity:0; transform:translateY(6px);} to {opacity:1; transform:translateY(0);} }

/* ── Toggle notificación email ──────────────────────────────── */
.cr-notif-wrap { display:flex; flex-direction:column; gap:5px; }
.cr-notif-wrap label.fg-label { font-size:12px; font-weight:600; color:var(--text-dark); }
.cr-notif-toggle { display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.cr-notif-toggle input[type=checkbox] { display:none; }
.cr-notif-slider { width:36px; height:20px; background:#d1d5db; border-radius:999px; position:relative; transition:background .2s; flex-shrink:0; }
.cr-notif-slider::after { content:''; position:absolute; top:3px; left:3px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .2s; }
.cr-notif-toggle input:checked + .cr-notif-slider { background:var(--primary); }
.cr-notif-toggle input:checked + .cr-notif-slider::after { transform:translateX(16px); }
.cr-notif-toggle .cr-notif-txt { font-size:12px; font-weight:500; color:var(--text-light); transition:color .2s; }
.cr-notif-toggle input:checked ~ .cr-notif-txt { color:var(--primary); font-weight:600; }

/* ── MODAL (genérico) ────────────────────────── */
.modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
    z-index:9999; align-items:center; justify-content:center; padding:18px;
}
.modal-overlay.show { display:flex; }

.modal-dialog {
    background:#fff; border-radius:16px;
    max-width:520px; width:min(92vw,520px);
    text-align:center; padding:38px 32px;
    box-shadow:0 20px 58px rgba(0,0,0,.28);
    animation:scaleIn .28s ease;
}
@media (max-width:600px) { .modal-dialog { width:94vw; padding:30px 22px; } }
@keyframes scaleIn { from{transform:scale(.88);opacity:0} to{transform:scale(1);opacity:1} }

.modal-icon  { font-size:46px; margin-bottom:12px; display:inline-block; }
.modal-title { font-family:'Lora',serif; font-size:19px; font-weight:600; color:var(--text-dark); margin-bottom:8px; }
.modal-text  { font-size:13px; color:var(--text-light); margin-bottom:26px; line-height:1.55; max-height:65vh; overflow-y:auto; width:100%; text-align:center; }
.modal-text::-webkit-scrollbar { width:6px; }
.modal-text::-webkit-scrollbar-thumb { background:rgba(148,163,184,.7); border-radius:999px; }
.modal-buttons { display:flex; gap:9px; justify-content:center; }
.modal-btn { padding:11px 24px; border:none; border-radius:9px; font-weight:600; font-size:13px; cursor:pointer; min-width:105px; font-family:'Poppins',sans-serif; transition:all .22s; }
.modal-btn-confirm { background:linear-gradient(135deg,var(--secondary),#ff7a1a); color:#fff; }
.modal-btn-confirm:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(255,140,66,.32); }
.modal-btn-cancel  { background:var(--bg-light); color:var(--text-dark); border:2px solid var(--border); }
.modal-btn-cancel:hover  { border-color:#bbb; background:#eee; }

/* ── MODAL EDICIÓN SOCIO ─────────────────────── */
.edit-modal-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
    z-index:9998; align-items:flex-start; justify-content:center;
    padding:20px; overflow-y:auto;
}
.edit-modal-overlay.show { display:flex; }

.edit-modal {
    background:#fff; border-radius:16px;
    width:100%; max-width:560px;
    padding:32px 28px; margin:auto;
    box-shadow:0 20px 58px rgba(0,0,0,.28);
    animation:scaleIn .28s ease;
}
@media (max-width:480px) { .edit-modal { padding:22px 16px; } }

.edit-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; padding-bottom:16px; border-bottom:2px solid var(--border); }
.edit-modal-header h2 { font-family:'Lora',serif; font-size:19px; color:var(--primary); }
.close-modal-btn { background:none; border:none; font-size:22px; cursor:pointer; color:var(--text-light); line-height:1; transition:color .18s; }
.close-modal-btn:hover { color:var(--text-dark); }

.edit-section       { margin-bottom:22px; }
.edit-section-title { font-size:11px; font-weight:700; text-transform:uppercase; color:var(--primary); letter-spacing:.7px; margin-bottom:14px; }
.edit-grid          { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:480px) { .edit-grid { grid-template-columns:1fr; } }
.edit-grid .full    { grid-column:1/-1; }

.edit-modal-footer  { display:flex; gap:11px; justify-content:flex-end; padding-top:20px; border-top:2px solid var(--border); margin-top:8px; }
@media (max-width:400px) { .edit-modal-footer { flex-direction:column; } }

.alert-success, .alert-error {
    padding:10px 14px; border-radius:8px; font-size:13px; font-weight:500;
    margin-bottom:16px; display:none;
}
.alert-success { background:#f6ffed; color:var(--success); border:1px solid #b7eb8f; }
.alert-error   { background:#fff1f0; color:var(--error);   border:1px solid #ffa39e; }
.alert-success.show, .alert-error.show { display:block; }

/* ── MISC ────────────────────────────────────── */
.remove-btn { background:#ff4d4f; color:#fff; border:none; padding:4px 7px; border-radius:5px; cursor:pointer; font-size:11px; transition:background .18s; }
.remove-btn:hover { background:#d9363e; }

::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--text-light); }

/* Loading spinner */
.spinner { display:inline-block; width:20px; height:20px; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:7px; }
@keyframes spin { to{ transform:rotate(360deg); } }

/* ── Gestor Documental: Arrastrar y soltar archivos ───────── */
.doc-form .file-dropzone {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    margin-top: 8px;
    border: 2px dashed var(--border);
    border-radius: 16px;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    min-height: 120px;
    cursor: pointer;
}
@media (max-width:600px) {
    .doc-form .file-dropzone {
        flex-direction: column;
        text-align: center;
    }
}
.file-dropzone-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(26,95,122,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.file-dropzone-body { flex: 1; }
.file-dropzone-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
}
.file-dropzone-actions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    color: var(--text-light);
}
.file-dropzone-btn {
    background: var(--primary);
    color: #fff;
    padding: 6px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 8px 18px rgba(26,95,122,.18);
}
.file-dropzone-hint { font-size: 13px; color: var(--text-light); }
.file-dropzone-meta {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-light);
}
.file-dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.file-dropzone.dragover {
    border-color: var(--primary);
    background: #f0f7fb;
    box-shadow: 0 10px 26px rgba(26,95,122,.18);
}
.file-dropzone:focus-within {
    border-color: var(--primary);
    box-shadow: 0 10px 26px rgba(26,95,122,.12);
}
.file-dropzone.has-file {
    border-color: var(--success);
}
.file-dropzone.has-file .file-dropzone-meta {
    color: var(--text-dark);
    font-weight: 600;
}

/* ── Confirm overlay global ─────────────────────────────── */
@keyframes scConfirmIn {
    from { opacity:0; transform:scale(.92) translateY(10px); }
    to   { opacity:1; transform:scale(1)   translateY(0);    }
}
.sc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    backdrop-filter: blur(3px);
    z-index: 1000000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    touch-action: manipulation;
}
.sc-overlay.show { display: flex; }
.sc-box {
    background: #fff;
    border-radius: 18px;
    max-width: 360px;
    width: 100%;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    animation: scConfirmIn .22s ease;
}
.sc-icon  { font-size: 46px; display: block; margin-bottom: 12px; line-height: 1; }
.sc-title { font-family: 'Lora', serif; font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.sc-text  { font-size: 13px; color: var(--text-light, #64748b); line-height: 1.6; margin-bottom: 24px; }
.sc-btns  { display: flex; gap: 10px; justify-content: center; }
.sc-btn-cancel  { background: var(--bg-light, #f1f5f9); color: var(--text-dark); border: none; border-radius: 10px; padding: 10px 22px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; font-family: inherit; touch-action: manipulation; }
.sc-btn-cancel:hover  { background: var(--border, #e2e8f0); }
.sc-btn-confirm { border: none; border-radius: 10px; padding: 10px 22px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s; font-family: inherit; color: #fff; touch-action: manipulation; }
.sc-btn-confirm:hover { opacity: .88; }

/* ── SHARED ADMIN COMPONENTS ─────────────────────────────────────────── */

/* KPI cards */
.kpi-grid  { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-bottom:28px; }
.kpi-grid .kpi-icon { display:none; }           /* icono oculto en 6 cols — demasiado estrecho */
@media(max-width:780px) {
    /* Base móvil: 3 cols (cubre 3, 5, 6, 9, 12… items) */
    .kpi-grid { grid-template-columns:repeat(3,1fr); gap:14px; }
    .kpi-grid .kpi-icon { display:block; }
    /* 1 item → 1 col */
    .kpi-grid:has(> :nth-child(1):last-child) { grid-template-columns:repeat(1,1fr); }
    /* 2 items → 2 cols */
    .kpi-grid:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,1fr); }
    /* 4 items → 2 cols (evita fila de 3+1) */
    .kpi-grid:has(> :nth-child(4):last-child) { grid-template-columns:repeat(2,1fr); }
    /* 7 items → 4 cols (4+3, evita 3+3+1) */
    .kpi-grid:has(> :nth-child(7):last-child) { grid-template-columns:repeat(4,1fr); }
    /* 8 items → 4 cols (4+4) */
    .kpi-grid:has(> :nth-child(8):last-child) { grid-template-columns:repeat(4,1fr); }
}
@media(max-width:480px) {
    .kpi-grid { gap:10px; }
    .kpi-grid .kpi-card { padding:12px 10px; }
    .kpi-grid .kpi-icon { display:none; }
    .kpi-grid .kpi-label { font-size:9px; letter-spacing:.3px; }
    .kpi-grid .kpi-sub   { font-size:10px; }
}
.kpi-card  { background:#fff; border-radius:14px; padding:16px 18px; border:1px solid var(--border,#e0e6eb); box-shadow:0 2px 8px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden; }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--kpi-color,var(--primary,#1a5f7a)); }
.kpi-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-light,#64748b); }
.kpi-value { font-size:clamp(12px,1.7vw,22px); font-weight:800; color:var(--text-dark,#1e293b); line-height:1.1; word-break:break-word; }
.kpi-sub   { font-size:11px; color:var(--text-light,#64748b); }
.kpi-icon  { position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:28px; opacity:.12; pointer-events:none; }

/* Toolbar / search */
.toolbar      { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; align-items:flex-start; }
.search-wrap  { position:relative; order:1; flex:1; min-width:160px; max-width:300px; }
.search-wrap input { width:100%; height:34px; padding:0 28px 0 32px; border:1.5px solid var(--border,#e0e6eb); border-radius:8px; font-size:12px; font-family:'Poppins',sans-serif; background:#fff; transition:border-color .2s; box-sizing:border-box; }
.search-wrap input:focus { outline:none; border-color:var(--primary,#1a5f7a); }
.si           { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:12px; pointer-events:none; }
.search-clear { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:var(--muted,#6a7d8c); color:#fff; font-size:10px; line-height:16px; text-align:center; cursor:pointer; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.search-clear:hover { background:var(--error,#f5222d); }
@media(max-width:600px) { .search-wrap { max-width:none; flex:1 1 0; } }

/* Table card */
.tcard   { background:#fff; border-radius:14px; box-shadow:0 2px 10px rgba(0,0,0,.07); overflow:hidden; margin-bottom:16px; }
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tcard table  { width:100%; border-collapse:collapse; }
.tcard thead  { background:var(--bg,#f5f7fa); }
.tcard th     { padding:11px 14px; font-size:10px; font-weight:700; text-transform:uppercase; color:var(--muted,#6a7d8c); letter-spacing:.5px; text-align:left; border-bottom:2px solid var(--border,#e0e6eb); white-space:nowrap; }
.tcard th.center, .tcard td.center { text-align:center; }
.tcard tbody tr { border-bottom:1px solid var(--border,#e0e6eb); transition:background .15s; }
.tcard tbody tr.tr-clickable { cursor:pointer; }
.tcard tbody tr:last-child { border-bottom:none; }
.tcard tbody tr:hover { background:#f8fafc; }
.tcard td { padding:12px 14px; font-size:13px; vertical-align:middle; }
.td-actions { display:flex; gap:5px; white-space:nowrap; }
.empty      { padding:44px 20px; text-align:center; color:var(--muted,#6a7d8c); }
.empty > span, .empty > .empty-icon { font-size:44px; display:block; margin-bottom:10px; }

/* Badge */
.badge       { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; }
.b-alta      { background:#f6ffed; color:var(--success,#52c41a); }
.b-baja      { background:#fff1f0; color:var(--error,#f5222d); }
.b-susp      { background:#fffbe6; color:#d4880a; }
.b-corriente { background:#e6f4fb; color:var(--primary,#1a5f7a); }
.b-moroso    { background:#fff1f0; color:var(--error,#f5222d); }
.b-pendiente { background:#fffbe6; color:#d4880a; }
.b-familiar  { background:#f3eeff; color:#722ed1; }
.b-individual{ background:#e6f4fb; color:var(--primary,#1a5f7a); }
.b-juvenil   { background:#f0fdf4; color:#16a34a; }
.b-joven     { background:#fef9c3; color:#a16207; }

/* Pagination */
.pagination { display:flex; align-items:center; gap:4px; margin-top:14px; flex-wrap:wrap; padding-bottom:4px; }
.pg-btn     { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 8px; border:1.5px solid var(--border,#e0e6eb); border-radius:7px; font-size:13px; font-weight:500; color:var(--text,#1a1a1a); text-decoration:none; background:#fff; transition:all .15s; font-family:'Poppins',sans-serif; }
.pg-btn:hover  { border-color:var(--primary,#1a5f7a); color:var(--primary,#1a5f7a); }
.pg-btn.active { background:var(--primary,#1a5f7a); border-color:var(--primary,#1a5f7a); color:#fff; pointer-events:none; }
.pg-dots { color:var(--muted,#6a7d8c); padding:0 2px; font-size:13px; }
.pg-info { margin-left:auto; font-size:12px; color:var(--muted,#6a7d8c); }

/* Toggle switch */
.toggle { position:relative; display:inline-block; width:36px; height:20px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#ccc; border-radius:20px; cursor:pointer; transition:.2s; }
.toggle-slider::before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .toggle-slider { background:var(--success,#52c41a); }
.toggle input:checked + .toggle-slider::before { transform:translateX(16px); }

/* Header action button (+ Nuevo …) */
.btn-action-new { border:none; background:linear-gradient(135deg,#1a5f7a,#2a7fa5); color:#fff; padding:10px 18px; border-radius:999px; font-weight:600; cursor:pointer; box-shadow:0 8px 20px rgba(26,95,122,.25); display:inline-flex; align-items:center; gap:6px; font-size:14px; transition:transform .18s,box-shadow .18s; white-space:nowrap; flex-shrink:0; }
.btn-action-new:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(26,95,122,.28); }
@media(max-width:500px) { .btn-action-new-label { display:none; } }

/* Small button — same specificity (0,2,0) as .btn.btn-primary/.btn.btn-danger → always wins */
.btn.btn-sm { padding:5px 12px; font-size:12px; }

/* ── Push-notification toasts (SSE) ─────────────────────────
   Aparecen en la esquina inferior derecha.
   Generados por slider.php EventSource.
──────────────────────────────────────────────────────────── */
.evt-toast-container {
    position:fixed; bottom:24px; right:24px; z-index:9000;
    display:flex; flex-direction:column-reverse; gap:10px;
    pointer-events:none;
}
.evt-toast {
    pointer-events:all;
    background:#fff; border-radius:12px;
    box-shadow:0 6px 28px rgba(0,0,0,.16);
    border-left:4px solid var(--primary);
    padding:12px 14px; min-width:280px; max-width:340px;
    display:flex; gap:10px; align-items:flex-start;
    animation:evtToastIn .25s ease;
    font-family:'Poppins',sans-serif;
}
.evt-toast.evt-toast-notif { border-left-color:var(--secondary); }
.evt-toast-icon { font-size:22px; flex-shrink:0; line-height:1.2; }
.evt-toast-body { flex:1; min-width:0; }
.evt-toast-title { font-size:13px; font-weight:700; color:var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-toast.evt-toast-notif .evt-toast-title { color:var(--secondary); }
.evt-toast-sub   { font-size:11px; color:var(--text-light); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-toast-actions { display:flex; gap:6px; margin-top:8px; }
.evt-toast-btn {
    padding:4px 10px; border-radius:6px; font-size:11px; font-weight:600;
    cursor:pointer; border:none; font-family:'Poppins',sans-serif;
}
.evt-toast-btn-primary { background:var(--primary); color:#fff; }
.evt-toast.evt-toast-notif .evt-toast-btn-primary { background:var(--secondary); }
.evt-toast-btn-close  { background:#f1f5f9; color:var(--text-light); }
.evt-toast-dismiss { position:absolute; top:8px; right:8px; }
.evt-toast-out { animation:evtToastOut .2s ease forwards; }
@keyframes evtToastIn  { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes evtToastOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(14px); } }

@media(max-width:480px) {
    .evt-toast-container { bottom:12px; right:12px; left:12px; }
    .evt-toast { min-width:0; max-width:none; }
}