/* assets/css/sgi.css — Estilos globales SGI Documental */

/* Variables de marca */
:root {
  --navy:      #1B2E6B;
  --navy-dark: #0F1E4A;
  --navy-mid:  #243580;
  --green:     #1A5C38;
  --purple:    #5B1B8C;
  --amber:     #8C7A1B;
  --brown:     #8C4A1B;
  --teal:      #1A6B5C;
  --red:       #8C1B1B;
  --slate:     #4B5563;
  --gray-50:   #F8F9FC;
  --gray-100:  #F1F3F9;
  --gray-200:  #E5E8F0;
  --gray-300:  #CDD1DC;
  --gray-500:  #6B7280;
  --gray-700:  #374151;
  --gray-900:  #111827;
  --white:     #ffffff;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; color: var(--gray-900); background: var(--gray-50); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* -- TOPBAR -- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 24px;
  background: var(--white); border-bottom: 1px solid var(--gray-200);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
}
/* Compensa el espacio que deja el topbar fijo, solo en páginas que lo usan
   (login/index.php no tiene .topbar, así que no se ve afectado). */
body:has(.topbar) { padding-top: 54px; }
.topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--navy); letter-spacing: .3px; }
.topbar-brand .brand-icon { width: 34px; height: 34px; display: grid; place-items: center; }
.topbar-brand .brand-icon img { width: 100%; height: 100%; object-fit: contain; }
.topbar-spacer { flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }

/* -- BOTONES -- */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; border: none; transition: background .15s, transform .1s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--navy-dark); }
.btn-secondary { background: var(--white); color: var(--gray-700); border: 1px solid var(--gray-200); }
.btn-secondary:hover { background: var(--gray-50); }
.btn-danger { background: #FEE2E2; color: #B91C1C; }
.btn-danger:hover { background: #FECACA; }
.btn-green { background: var(--green); color: var(--white); }
.btn-green:hover { background: #14472B; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 6px; border: 1px solid var(--gray-200); background: var(--white); color: var(--gray-500); }
.btn-icon:hover { background: var(--gray-50); color: var(--gray-700); }

/* -- BADGE PILOTO -- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500; }
.badge-active  { background: #D1FAE5; color: #065F46; }
.badge-revision{ background: #FEF3C7; color: #92400E; }
.badge-obsolete{ background: #F3F4F6; color: #6B7280; }
.badge-admin   { background: #DBEAFE; color: #1E40AF; }
.badge-coord   { background: #EDE9FE; color: #6D28D9; }
.badge-oper    { background: #F3F4F6; color: #374151; }
.badge-invitado { background: #FEF3C7; color: #92400E; }
.badge-uactive { background: #D1FAE5; color: #065F46; }
.badge-uinactive{ background: #F3F4F6; color: #6B7280; }
.badge-suspended{ background: #FEE2E2; color: #B91C1C; }
.badge-restricted { background: #FEF3C7; color: #78350F; gap:4px; }
.badge-controlled { background: #DBEAFE; color: #1E40AF; gap:4px; }

/* -- AVATAR -- */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--white); flex-shrink: 0; }

/* -- CARD -- */
.card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--gray-200); padding: 20px; }

/* -- STAT CARDS (resumen) -- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 16px 20px; display: flex; align-items: center; gap: 14px; }
.stat-card .stat-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; }
.stat-card .stat-num { font-size: 26px; font-weight: 700; line-height: 1; color: var(--gray-900); }
.stat-card .stat-label { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.stat-card .stat-sub { font-size: 11px; color: var(--gray-500); }

/* -- DOC CATEGORY CARDS -- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.cat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .15s, transform .15s; cursor: pointer; }
.cat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.cat-card .cat-top { height: 5px; }
.cat-card .cat-body { padding: 18px 18px 14px; }
.cat-card .cat-icon-wrap { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; margin-bottom: 12px; }
.cat-card .cat-name { font-weight: 600; font-size: 14px; color: var(--gray-900); margin-bottom: 4px; }
.cat-card .cat-footer { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; border-top: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-500); }
.cat-card .cat-footer .cat-link { color: var(--navy); font-weight: 500; display: flex; align-items: center; gap: 4px; }

/* -- DOCUMENT LIST -- */
.doc-list { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.doc-list table { width: 100%; border-collapse: collapse; }
.doc-list th { background: var(--gray-50); padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600; color: var(--gray-500); letter-spacing: .5px; text-transform: uppercase; border-bottom: 1px solid var(--gray-200); }
.doc-list td { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); font-size: 13px; color: var(--gray-700); vertical-align: middle; }
.doc-list tr:last-child td { border-bottom: none; }
.doc-list tr:hover td { background: var(--gray-50); }
.doc-name { font-weight: 500; color: var(--gray-900); display: flex; align-items: center; gap: 8px; }

/* -- NAV TABS (admin) -- */
.admin-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--gray-200); margin-bottom: 24px; }
.admin-tab { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: 13px; font-weight: 500; color: var(--gray-500); border-bottom: 2px solid transparent; cursor: pointer; transition: color .15s, border-color .15s; }
.admin-tab:hover { color: var(--navy); }
.admin-tab.active { color: var(--navy); border-bottom-color: var(--navy); }

/* -- HEADER DE SECCIÓN (portal) -- */
.section-header { background: var(--navy); color: var(--white); padding: 20px 32px 22px; margin-bottom: 28px; display: flex; align-items: center; gap: 16px; }
.section-header .sh-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.15); display: grid; place-items: center; font-size: 22px; }
.section-header h1 { font-size: 22px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.section-header p { font-size: 13px; opacity: .75; margin-top: 2px; }

/* -- BREADCRUMB -- */
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-500); margin-bottom: 4px; }
.breadcrumb a:hover { color: var(--navy); }
.breadcrumb .sep { opacity: .5; }

/* -- SEARCH INPUT -- */
.search-wrap { position: relative; }
.search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--gray-500); }
.search-input { padding: 8px 12px 8px 34px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; color: var(--gray-700); background: var(--white); width: 240px; }
.search-input:focus { outline: none; border-color: var(--navy); }

/* -- FORMULARIO MODAL -- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; place-items: center; z-index: 500; }
.modal-overlay.open { display: grid; }
.modal { background: var(--white); border-radius: var(--radius-lg); padding: 28px; width: 480px; max-width: 95vw; box-shadow: 0 20px 50px rgba(0,0,0,.2); }
.modal h2 { font-size: 18px; font-weight: 600; margin-bottom: 20px; color: var(--gray-900); }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--gray-500); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.form-control { width: 100%; padding: 9px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; color: var(--gray-700); }
.form-control:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,46,107,.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* -- ALERT -- */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 16px; }
.alert-error { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
.alert-success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }

/* -- VISOR SEGURO -- */
#secure-viewer { display: none; position: fixed; inset: 0; background: #1a1a2e; z-index: 600; }
#secure-viewer .viewer-top { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #12122a; border-bottom: 1px solid rgba(255,255,255,.1); }
#secure-viewer .viewer-top h3 { color: #fff; font-size: 14px; flex: 1; }
#secure-viewer .viewer-close { background: rgba(255,255,255,.1); border: none; color: #fff; padding: 6px 14px; border-radius: 6px; font-size: 13px; cursor: pointer; }
#secure-viewer iframe { width: 100%; height: calc(100vh - 52px); border: none; }

/* -- TOPBAR BOX ADMIN -- */
.admin-badge { background: var(--navy); color: var(--white); padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* -- BACK BUTTON -- */
.btn-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-size: 13px; color: var(--gray-600); background: var(--white); }
.btn-back:hover { background: var(--gray-50); }

/* -- MISC -- */
.page-wrap { width: 100%; box-sizing: border-box; margin: 0; padding: 28px 40px; }
.page-title { font-size: 22px; font-weight: 700; color: var(--gray-900); text-transform: uppercase; letter-spacing: .4px; }
.page-subtitle { font-size: 13px; color: var(--gray-500); margin-top: 3px; }
.flex { display: flex; } .flex-1 { flex: 1; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .justify-between { justify-content: space-between; }
.mt-4 { margin-top: 16px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-muted { color: var(--gray-500); }
.text-sm { font-size: 12px; }

/* Ocultar scrollbars en visor */
#secure-viewer iframe::-webkit-scrollbar { display: none; }

/* Protección visual anti-captura (visual hint, no es técnicamente bloqueante en todos los OS) */
.no-print { }
@media print { body { display: none !important; } }

/* ============================================================
   RESPONSIVE / VISTA MÓVIL
   ============================================================
   El resto del CSS de este archivo está pensado para escritorio.
   Estas reglas se activan solo por debajo de cierto ancho de
   pantalla y ajustan lo mismo (mismas clases), no crean un
   diseño paralelo — así cualquier cambio futuro a una clase de
   arriba se sigue reflejando también en móvil automáticamente.
*/
@media (max-width: 768px) {
  .page-wrap { padding: 16px; }

  /* El topbar es position:fixed (ver regla más arriba en este mismo
     archivo) — en escritorio mide 54px fijos y el body compensa con
     padding-top:54px. En móvil dejamos que pase a 2 líneas si no cabe
     todo, y le damos al body más espacio arriba para que el contenido
     no quede tapado debajo. */
  .topbar { height: auto; min-height: 54px; flex-wrap: wrap; padding: 8px 16px; row-gap: 8px; }
  body:has(.topbar) { padding-top: 104px; }
  .topbar-brand { font-size: 13px; }
  .topbar-actions { flex-wrap: wrap; gap: 6px; row-gap: 8px; }
  .topbar-actions .btn { padding: 6px 10px; font-size: 12px; }
  .user-name-text { display: none; } /* el avatar con iniciales ya identifica a quién pertenece la sesión */

  /* Pestañas del panel admin: scroll horizontal en vez de encimarse o desbordar la página */
  .admin-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .admin-tab { flex-shrink: 0; padding: 10px 14px; font-size: 12px; white-space: nowrap; }

  /* Formularios: una sola columna en vez de dos */
  .form-row { grid-template-columns: 1fr; }
  .modal { padding: 20px; }

  /* Tablas de documentos/correspondencia/auditoría: el scroll queda
     contenido en la tabla, no en toda la página */
  .doc-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .doc-list table { min-width: 640px; }

  /* Tarjetas de categorías y estadísticas: una o dos por fila en vez
     de intentar acomodar varias muy angostas */
  .cat-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-card .stat-num { font-size: 21px; }

  /* Encabezado de sección (category.php, libramiento.php, correspondencia.php) */
  .section-header { padding: 16px 20px 18px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-header h1 { font-size: 17px; }

  /* Buscador: ancho completo en vez de un ancho fijo pensado para escritorio */
  .search-wrap { width: 100%; }
  .search-input { width: 100%; box-sizing: border-box; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: 17px; }
  .cat-card .cat-body { padding: 14px 14px 10px; }
}