/* ============================================================
   Zerp Design System — CSS standalone
   ============================================================ */

:root {
  --zerp-primary:        #1456b8;
  --zerp-primary-hover:  #0f408a;
  --zerp-primary-bg:     #d9e4f3;
  --zerp-danger:         #e93535;
  --zerp-danger-hover:   #af2828;
  --zerp-danger-bg:      #fbdede;
  --zerp-success:        #1daf2b;
  --zerp-success-hover:  #168320;
  --zerp-success-bg:     #dbf2dd;
  --zerp-warning:        #e5a800;
  --zerp-warning-bg:     #fbf1d6;

  --zerp-text:           #313947;
  --zerp-text-muted:     #677fa2;
  --zerp-border:         #edf2fa;
  --zerp-border-dark:    #d4deed;
  --zerp-bg-main:        #f5f7fb;
  --zerp-bg-white:       #ffffff;
  --zerp-bg-table-head:  #ecf2fa;
  --zerp-bg-table-hover: #f8fafd;
  --zerp-bg-btn:         #eceff3;

  --zerp-sidebar-bg:        #143a80;
  --zerp-sidebar-border:    #11306a;
  --zerp-sidebar-text:      #d0d7e5;
  --zerp-sidebar-muted:     #7289b3;
  --zerp-sidebar-active:    #274a8a;
  --zerp-sidebar-indicator: #5489eb;
  --zerp-sidebar-children:  #113372;
  --zerp-sidebar-sep:       #3a5a95;
  --zerp-sidebar-width:     230px;

  --zerp-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --zerp-size:     13px;
  --zerp-radius:   6px;
  --zerp-header-h: 53px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: var(--zerp-font); font-size: var(--zerp-size); color: var(--zerp-text); background: var(--zerp-bg-main); }
::-webkit-scrollbar { width: 6px; background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }
.zerp-content::-webkit-scrollbar-thumb,
.nav-tree::-webkit-scrollbar-thumb { background: var(--zerp-border-dark); }

/* ============================================================
   LAYOUT
   ============================================================ */
.zerp-layout { display: flex; height: 100vh; overflow: hidden; }

/* --- Sidebar --- */
.zerp-sidebar {
  width: var(--zerp-sidebar-width);
  min-width: var(--zerp-sidebar-width);
  background: var(--zerp-sidebar-bg);
  border-right: 1px solid var(--zerp-sidebar-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  transition: width .2s, min-width .2s;
}
.zerp-sidebar.collapsed { width: 0; min-width: 0; }


.nav-search {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 10px;
  padding: 6px 10px;
  background: #274a8a;
  border: 1px solid var(--zerp-sidebar-sep);
  border-radius: 4px; flex-shrink: 0;
}
.nav-search input {
  background: transparent; border: none; outline: none;
  color: var(--zerp-sidebar-text); flex: 1; font-size: .8rem;
  font-family: var(--zerp-font);
}
.nav-search input::placeholder { color: var(--zerp-sidebar-muted); }

.nav-tree { padding-top: 4px; flex: 1; overflow-y: auto; }

.nav-section:not(:first-child)::before {
  content: ''; display: block; height: 1px;
  background: var(--zerp-sidebar-sep); margin: .75rem 0;
}
.nav-section-header {
  padding: 6px 12px;
  color: var(--zerp-sidebar-muted);
  font-size: .67rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  user-select: none;
}

.nav-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin: 1px 6px;
  border-radius: var(--zerp-radius);
  color: var(--zerp-sidebar-text);
  cursor: pointer; user-select: none;
  font-size: .82rem; transition: background .15s;
}
.nav-group-header:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-group-header span { flex: 1; }
.nav-group-toggle {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: var(--zerp-sidebar-muted); display: flex; align-items: center;
  border-radius: 2px; transition: color .15s, transform .2s;
}
.nav-group-toggle:hover { color: var(--zerp-sidebar-text); }
.nav-group.is-open .nav-group-toggle { transform: rotate(180deg); }
.nav-group-items { background: var(--zerp-sidebar-children); }
.nav-group.is-closed .nav-group-items { display: none; }

.nav-item {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 22px; margin: 1px 6px;
  border-radius: var(--zerp-radius);
  color: var(--zerp-sidebar-text); text-decoration: none;
  font-size: .82rem; cursor: pointer; user-select: none;
  transition: background .15s;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active {
  background: var(--zerp-sidebar-active); color: #fff; font-weight: 600;
}
.nav-item.active::before {
  content: ''; position: absolute;
  left: -6px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  border-radius: 0 3px 3px 0;
  background: var(--zerp-sidebar-indicator);
}

/* --- Main --- */
.zerp-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* --- Header --- */
.zerp-header {
  height: var(--zerp-header-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: var(--zerp-bg-white);
  box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  z-index: 100; flex-shrink: 0;
}
.zerp-sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; padding: 0; flex-shrink: 0;
  transition: opacity .2s;
}
.zerp-sidebar-toggle:hover { opacity: .6; }
.zerp-sidebar-toggle:focus { outline: none; box-shadow: none; }
.zerp-sep { width: 1px; height: 30px; background: var(--zerp-border); flex-shrink: 0; }
.zerp-header-logo { flex: 1; display: flex; justify-content: center; }
.zerp-header-logo img { height: 28px; object-fit: contain; }
.zerp-header-actions { display: flex; align-items: center; gap: 8px; }


/* --- Contenido --- */
.zerp-content { flex: 1; padding: 20px 24px; overflow: auto; background: var(--zerp-bg-white); }

/* ============================================================
   COMPONENTES
   ============================================================ */

/* Breadcrumb */
.z-breadcrumb {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--zerp-text-muted);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px;
}
.z-breadcrumb a { color: var(--zerp-text-muted); text-decoration: none; }
.z-breadcrumb a:hover { color: var(--zerp-primary); }
.z-breadcrumb-sep { color: var(--zerp-border-dark); }

/* Título */
.z-page-title { font-size: 22px; font-weight: 700; color: var(--zerp-text); margin: 0 0 16px; }

/* Toolbar */
.z-toolbar { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }

/* ============================================================
   BOTONES
   ============================================================ */
.z-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: var(--zerp-radius);
  border: 1px solid transparent;
  font-size: .8rem; font-weight: 500;
  cursor: pointer; font-family: var(--zerp-font);
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
  line-height: 1.4;
}
.z-btn svg { flex-shrink: 0; }

/* Verde — acción principal (Nuevo) */
.z-btn-success { background: var(--zerp-success); color: #fff; border-color: var(--zerp-success); }
.z-btn-success:hover { background: var(--zerp-success-hover); border-color: var(--zerp-success-hover); }

/* Azul — acción alternativa principal */
.z-btn-primary { background: var(--zerp-primary); color: #fff; border-color: var(--zerp-primary); }
.z-btn-primary:hover { background: var(--zerp-primary-hover); border-color: var(--zerp-primary-hover); }

/* Rojo — eliminar / destructivo */
.z-btn-danger { background: var(--zerp-danger); color: #fff; border-color: var(--zerp-danger); }
.z-btn-danger:hover { background: var(--zerp-danger-hover); border-color: var(--zerp-danger-hover); }

/* Outline gris — acciones secundarias (Columnas, Filtros, Exportar) */
.z-btn-outline {
  background: var(--zerp-bg-white); color: var(--zerp-text);
  border-color: var(--zerp-border-dark);
}
.z-btn-outline:hover { background: var(--zerp-bg-main); }

.z-btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   TABLA
   ============================================================ */
.z-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--zerp-size);
  background: var(--zerp-bg-white);
  border: 1px solid var(--zerp-border);
  border-radius: var(--zerp-radius);
  overflow: hidden;
}
.z-table thead th {
  background: var(--zerp-bg-table-head);
  color: var(--zerp-text-muted);
  font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--zerp-border);
  white-space: nowrap;
}
.z-table tbody tr {
  border-bottom: 1px solid var(--zerp-border);
  transition: background .1s;
}
.z-table tbody tr:last-child { border-bottom: none; }
.z-table tbody tr:hover { background: var(--zerp-bg-table-hover); }
.z-table tbody td { padding: 9px 12px; color: var(--zerp-text); }

/* Paginación simple */
.z-pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  border-top: 1px solid var(--zerp-border);
  font-size: .8rem; color: var(--zerp-text-muted);
  background: var(--zerp-bg-white);
}
.z-pagination-controls { display: flex; align-items: center; gap: 4px; }
.z-page-btn {
  min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid var(--zerp-border); border-radius: 4px;
  background: var(--zerp-bg-white); cursor: pointer;
  font-size: .8rem; color: var(--zerp-text-muted);
  font-family: var(--zerp-font); transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.z-page-btn:hover { background: var(--zerp-bg-main); }
.z-page-btn.active { background: var(--zerp-primary); color: #fff; border-color: var(--zerp-primary); font-weight: 600; }
.z-pagination-right select {
  padding: 3px 6px; border: 1px solid var(--zerp-border); border-radius: 4px;
  font-size: .8rem; font-family: var(--zerp-font); background: var(--zerp-bg-white); color: var(--zerp-text);
}

/* Badges */
.z-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 9999px; font-size: .72rem; font-weight: 500; }
.z-badge-success { background: var(--zerp-success-bg); color: var(--zerp-success-hover); }
.z-badge-danger  { background: var(--zerp-danger-bg);  color: var(--zerp-danger-hover); }
.z-badge-warning { background: var(--zerp-warning-bg); color: #8a6000; }
.z-badge-primary { background: var(--zerp-primary-bg); color: var(--zerp-primary); }
.z-badge-neutral { background: var(--zerp-bg-btn);     color: var(--zerp-text-muted); }

/* Misc */
.z-divider { height: 1px; background: var(--zerp-border); margin: 16px 0; }
.z-card { background: var(--zerp-bg-white); border: 1px solid var(--zerp-border); border-radius: var(--zerp-radius); padding: 16px; }

@media print {
  .zerp-sidebar, .zerp-header { display: none !important; }
  .zerp-layout { display: block; height: auto; }
  .zerp-content { padding: 0; background: white; }
}