/* CertSys — componentes propios sobre el tema de SistemaRegistro (styles.css).
   Aquí solo va lo que el tema no trae; colores y tipografía salen del tema. */
:root {
  --primary: var(--bs-primary);
  --primary-light: var(--bs-primary-bg-subtle);
  --border: #ebf1f6;
  --shadow: rgba(145,158,171,.2) 0 0 2px 0, rgba(145,158,171,.12) 0 12px 24px -4px;
  --text-main: #2a3547;
  --text-muted: #5a6a85;
  --bg: #f6f9fc;
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--primary); color: #fff; padding: 10px 18px; border-radius: 0 0 7px 0; }
.skip-link:focus { left: 0; }

.card { margin-bottom: 24px; }

/* ── Encabezado de tarjeta con ícono ─── */
.card-header-custom { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.card-icon { width: 40px; height: 40px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--primary); flex-shrink: 0; }
.card-title-text { font-size: 18px; font-weight: 600; color: var(--text-main); margin: 0; line-height: 1.3; }
.card-sub-text { font-size: 13px; color: var(--text-muted); margin: 0; }

/* ── Indicadores del dashboard ─── */
.stat-card { background: #fff; border-radius: 7px; box-shadow: var(--shadow); padding: 24px 30px; display: flex; align-items: center; gap: 16px; }
.stat-icon { width: 50px; height: 50px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.stat-icon.blue  { background: var(--primary-light); color: var(--primary); }
.stat-icon.amber { background: #fef5e5; color: #ffae1f; }
.stat-icon.green { background: #e6fffa; color: #13deb9; }
.stat-value { font-size: 1.65rem; font-weight: 700; color: var(--text-main); line-height: 1; }
.stat-label { font-size: .8rem; color: var(--text-muted); margin-top: 4px; }

.serial-tag { font-family: monospace; font-size: .78rem; background: var(--primary-light); color: var(--primary); padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.form-hint { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }

/* ── Zona de carga de archivos ─── */
.upload-zone { border: 2px dashed #dfe5ef; border-radius: 7px; padding: 36px 20px; text-align: center; cursor: pointer; transition: all .2s; background: var(--bg); }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--primary); background: var(--primary-light); }
.upload-zone input[type="file"] { display: none; }

/* ── Paginación del historial ─── */
.pagination { margin-top: 18px; display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.page-btn { padding: 6px 12px; border-radius: 7px; border: 1px solid #dfe5ef; background: #fff; color: var(--text-muted); font-size: .8rem; cursor: pointer; text-decoration: none; display: inline-block; }
.page-btn:hover { background: var(--primary-light); color: var(--primary); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }

.empty-state { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.empty-state .icon { font-size: 2.2rem; margin-bottom: 10px; opacity: .35; }