/* ═══════════════════════════════════════════════════════════════════
   pages-shared.css  —  Sistema de diseño unificado MegaRad
   Aplica a todas las páginas de gestión del sistema.
   Paleta oscura coherente con MainLayout (mega-sidebar / mega-workspace)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────────────── */
:root {
    --ps-bg:          #0f172a;          /* fondo general de página      */
    --ps-surface:     #1e293b;          /* superficie de cards/header   */
    --ps-surface-2:   #253347;          /* superficie elevada           */
    --ps-border:      #334155;          /* borde estándar               */
    --ps-border-soft: rgba(255,255,255,.06);
    --ps-text:        #f1f5f9;
    --ps-text-muted:  #94a3b8;
    --ps-text-dim:    #64748b;

    --ps-primary:     #6366f1;
    --ps-primary-dim: rgba(99,102,241,.15);
    --ps-green:       #10b981;
    --ps-green-dim:   rgba(16,185,129,.15);
    --ps-amber:       #f59e0b;
    --ps-amber-dim:   rgba(245,158,11,.15);
    --ps-red:         #ef4444;
    --ps-red-dim:     rgba(239,68,68,.15);
    --ps-blue:        #3b82f6;
    --ps-blue-dim:    rgba(59,130,246,.15);

    --ps-radius:      14px;
    --ps-radius-sm:   9px;
    --ps-shadow:      0 4px 24px rgba(0,0,0,.35);
    --ps-shadow-sm:   0 2px 10px rgba(0,0,0,.25);
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE WRAPPER  —  contenedor raíz de cada página
   Uso: <div class="ps-page">
   ═══════════════════════════════════════════════════════════════════ */
.ps-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: .25rem .1rem;
    min-height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE HEADER  —  banda superior de cada página
   Uso:
     <div class="ps-header">
       <div class="ps-header-left">
         <div class="ps-header-icon" style="--icon-color:#6366f1">
           <i class="fas fa-something"></i>
         </div>
         <div>
           <h2 class="ps-title">Título</h2>
           <span class="ps-subtitle">Subtítulo</span>
         </div>
       </div>
       <div class="ps-header-right">
         <button class="ps-btn ps-btn-primary">Nuevo</button>
       </div>
     </div>
   ═══════════════════════════════════════════════════════════════════ */
.ps-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: linear-gradient(135deg, var(--ps-surface) 0%, #162032 100%);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    padding: 1.1rem 1.5rem;
    box-shadow: var(--ps-shadow);
}

.ps-header-left  { display: flex; align-items: center; gap: 1rem; }
.ps-header-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Ícono de sección */
.ps-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--icon-color, #6366f1) 80%, #000),
        color-mix(in srgb, var(--icon-color, #6366f1) 55%, #000));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--icon-color, #6366f1) 45%, transparent);
}
/* Fallback para navegadores sin color-mix */
.ps-header-icon { background: var(--icon-color, #6366f1); }

.ps-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ps-text);
    letter-spacing: .2px;
}

.ps-subtitle {
    display: block;
    font-size: .78rem;
    color: var(--ps-text-muted);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   STAT CHIPS  —  pequeños contadores en el header
   Uso: <div class="ps-chips">
          <div class="ps-chip ps-chip-green">
            <i class="fas fa-users"></i><span>10 empleados</span>
          </div>
        </div>
   ═══════════════════════════════════════════════════════════════════ */
.ps-chips { display: flex; gap: .5rem; flex-wrap: wrap; }

.ps-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .9rem;
    border-radius: 50px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.ps-chip-green  { background: var(--ps-green-dim);   color: #6ee7b7; border: 1px solid rgba(16,185,129,.3); }
.ps-chip-blue   { background: var(--ps-blue-dim);    color: #93c5fd; border: 1px solid rgba(59,130,246,.3); }
.ps-chip-amber  { background: var(--ps-amber-dim);   color: #fcd34d; border: 1px solid rgba(245,158,11,.3); }
.ps-chip-red    { background: var(--ps-red-dim);     color: #fca5a5; border: 1px solid rgba(239,68,68,.3);  }
.ps-chip-indigo { background: var(--ps-primary-dim); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); }

/* ═══════════════════════════════════════════════════════════════════
   STATS ROW  —  fila de tarjetas de resumen
   Uso: <div class="ps-stats-row">
          <div class="ps-stat-card ps-stat-blue">
            <div class="ps-stat-icon"><i class="fas fa-box"></i></div>
            <div class="ps-stat-body">
              <div class="ps-stat-value">42</div>
              <div class="ps-stat-label">Total</div>
            </div>
          </div>
        </div>
   ═══════════════════════════════════════════════════════════════════ */
.ps-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .9rem;
}

.ps-stat-card {
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    box-shadow: var(--ps-shadow-sm);
    transition: transform .18s;
}
.ps-stat-card:hover { transform: translateY(-2px); }

.ps-stat-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ps-stat-body { display: flex; flex-direction: column; gap: 1px; }
.ps-stat-value { font-size: 1.35rem; font-weight: 800; color: var(--ps-text); line-height: 1; }
.ps-stat-label { font-size: .72rem; color: var(--ps-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }

/* Variantes de color para stat cards */
.ps-stat-blue  .ps-stat-icon { background: var(--ps-blue-dim);    color: #60a5fa; }
.ps-stat-green .ps-stat-icon { background: var(--ps-green-dim);   color: #34d399; }
.ps-stat-amber .ps-stat-icon { background: var(--ps-amber-dim);   color: #fbbf24; }
.ps-stat-red   .ps-stat-icon { background: var(--ps-red-dim);     color: #f87171; }
.ps-stat-indigo.ps-stat-icon { background: var(--ps-primary-dim); color: #a5b4fc; }

.ps-stat-blue  { border-left: 3px solid var(--ps-blue);    }
.ps-stat-green { border-left: 3px solid var(--ps-green);   }
.ps-stat-amber { border-left: 3px solid var(--ps-amber);   }
.ps-stat-red   { border-left: 3px solid var(--ps-red);     }
.ps-stat-indigo{ border-left: 3px solid var(--ps-primary); }

/* ═══════════════════════════════════════════════════════════════════
   GRID WRAPPER  —  contenedor del DxGrid
   ═══════════════════════════════════════════════════════════════════ */
.ps-grid-wrap {
    background: var(--ps-surface);
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    overflow: hidden;
    box-shadow: var(--ps-shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.ps-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .52rem 1.15rem;
    border: none;
    border-radius: var(--ps-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all .18s ease;
    line-height: 1;
}

/* Primary — verde (acción principal: Nuevo / Guardar) */
.ps-btn-primary {
    background: linear-gradient(135deg, var(--ps-green), #059669);
    color: #fff;
    box-shadow: 0 3px 12px rgba(16,185,129,.35);
}
.ps-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(16,185,129,.5);
    color: #fff;
}

/* Secondary — azul (acciones de navegación / editar) */
.ps-btn-secondary {
    background: var(--ps-blue-dim);
    color: #93c5fd;
    border: 1px solid rgba(59,130,246,.3);
}
.ps-btn-secondary:hover { background: var(--ps-blue); color: #fff; }

/* Ghost — neutro (cancelar / regresar) */
.ps-btn-ghost {
    background: rgba(148,163,184,.1);
    color: var(--ps-text-muted);
    border: 1px solid var(--ps-border);
}
.ps-btn-ghost:hover { background: var(--ps-surface-2); color: var(--ps-text); }

/* Danger — rojo (eliminar) */
.ps-btn-danger {
    background: var(--ps-red-dim);
    color: #fca5a5;
    border: 1px solid rgba(239,68,68,.3);
}
.ps-btn-danger:hover { background: var(--ps-red); color: #fff; }

/* Icono puro — para celdas de acciones */
.ps-btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s;
}
.ps-btn-icon.edit   { background: var(--ps-blue-dim);    color: #60a5fa; border-color: rgba(59,130,246,.3); }
.ps-btn-icon.print  { background: var(--ps-green-dim);   color: #34d399; border-color: rgba(16,185,129,.3); }
.ps-btn-icon.delete { background: var(--ps-red-dim);     color: #f87171; border-color: rgba(239,68,68,.3);  }
.ps-btn-icon.view   { background: var(--ps-amber-dim);   color: #fbbf24; border-color: rgba(245,158,11,.3); }

.ps-btn-icon:hover.edit   { background: var(--ps-blue);  color: #fff; }
.ps-btn-icon:hover.print  { background: var(--ps-green); color: #fff; }
.ps-btn-icon:hover.delete { background: var(--ps-red);   color: #fff; }
.ps-btn-icon:hover.view   { background: var(--ps-amber); color: #fff; }

/* Grupo de acciones en celda */
.ps-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* ═══════════════════════════════════════════════════════════════════
   ACTION BAR  —  barra entre header y grid (filtros + acciones)
   ═══════════════════════════════════════════════════════════════════ */
.ps-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .6rem;
}
.ps-action-left, .ps-action-right {
    display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════ */
.ps-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.5rem 1rem;
    color: var(--ps-text-dim);
    text-align: center;
    gap: .75rem;
    background: var(--ps-surface);
    border-radius: var(--ps-radius);
    border: 1px solid var(--ps-border);
}
.ps-empty-icon { font-size: 3rem; opacity: .4; }
.ps-empty h4   { color: var(--ps-text-muted); font-weight: 600; margin: 0; }
.ps-empty p    { font-size: .88rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════════════ */
.ps-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    gap: 1rem;
    color: var(--ps-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════
   AVATAR INICIALES  —  usado en celdas de empleado
   ═══════════════════════════════════════════════════════════════════ */
.ps-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ps-primary), #8b5cf6);
    color: #fff;
    font-size: .7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(99,102,241,.3);
}

.ps-emp-cell {
    display: flex; align-items: center; gap: .55rem;
}
.ps-emp-name {
    font-weight: 600; color: var(--ps-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-size: .86rem;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER DE PÁGINA  —  barra inferior con botón regresar
   ═══════════════════════════════════════════════════════════════════ */
.ps-page-footer {
    display: flex;
    align-items: center;
    padding: .5rem 0;
    margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════════════
   Filas coloreadas para Control de Movimientos
   ═══════════════════════════════════════════════════════════════════ */
::deep .row-ingreso td { border-left: 3px solid #10b981 !important; }
::deep .row-egreso  td { border-left: 3px solid #ef4444 !important; }