/* =====================================================
   Sistema de Carnetización Municipal Inteligente
   Hoja de estilos principal
   ===================================================== */

:root {
  --cm-primary:  #0d3b66;
  --cm-accent:   #f95738;
  --cm-soft:     #f4f7fb;
  --cm-success:  #198754;
  --cm-warning:  #ffc107;
  --cm-danger:   #dc3545;
}

body.cm-body { background: var(--cm-soft); }
.cm-navbar    { background: linear-gradient(90deg, var(--cm-primary), #1b5e9d); position: sticky; top:0; z-index: 1030; }
.cm-navbar .navbar-brand img { height: 30px !important; width: 30px !important; }
.cm-footer { background: #fff; }

/* =============================================
   Sidebar v2 — animación tipo sigaf
   ============================================= */
:root {
  --cm-sb-w: 230px;
  --cm-sb-navh: 56px;
  --cm-primary-soft: #eaf2ff;
}
.cm-sidebar-v2 {
  position: fixed; top: var(--cm-sb-navh); left: 0; bottom: 0;
  width: var(--cm-sb-w);
  background: #fff;
  border-right: 1px solid #e6eaf0;
  display: flex; flex-direction: column;
  z-index: 900;
  overflow-y: auto; overflow-x: hidden;
  transition: width .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
.cm-sidebar-menu { flex: 1; padding: .75rem 0; }

.cm-sidebar-v2 .menu-group-label {
  padding: 1rem 1.25rem .4rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: #8896a8;
  white-space: nowrap; overflow: hidden;
}

.cm-sidebar-v2 .menu-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  color: #34495e; font-size: .9rem;
  text-decoration: none;
  border-left: 3px solid transparent;
  position: relative;
  white-space: nowrap; overflow: hidden;
  transition: color .2s ease, padding-left .25s ease;
  z-index: 0;
}
.cm-sidebar-v2 .menu-item::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 0;
  background: var(--cm-primary-soft);
  transition: width .28s ease;
  z-index: -1;
}
.cm-sidebar-v2 .menu-item:hover::before { width: 100%; }
.cm-sidebar-v2 .menu-item:hover {
  color: var(--cm-primary);
  padding-left: 1.45rem;
}
.cm-sidebar-v2 .menu-item.active {
  background: var(--cm-primary-soft);
  color: var(--cm-primary);
  border-left-color: var(--cm-primary);
  font-weight: 600;
  animation: cm-active-grow .3s ease;
}
.cm-sidebar-v2 .menu-item i { font-size: 1.05rem; flex-shrink: 0; transition: transform .25s ease; }
.cm-sidebar-v2 .menu-item:hover i { transform: scale(1.15); }
.cm-sidebar-v2 .menu-label { transition: opacity .2s ease; }

/* Tooltip cuando está colapsado */
.cm-sidebar-v2 .menu-tooltip {
  display: none;
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  background: #2d3a4b; color: #fff;
  padding: .35rem .75rem; border-radius: 4px;
  font-size: .78rem; white-space: nowrap; pointer-events: none;
  z-index: 1001; margin-left: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.cm-sidebar-v2 .menu-tooltip::before {
  content: ""; position: absolute; right: 100%; top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: #2d3a4b;
}

.cm-sidebar-v2.collapsed { width: 60px; }
.cm-sidebar-v2.collapsed .menu-group-label { opacity: 0; height: 0; padding: 0; }
.cm-sidebar-v2.collapsed .menu-item { justify-content: center; padding: .7rem 0; gap: 0; border-left-color: transparent; }
.cm-sidebar-v2.collapsed .menu-item .menu-label { opacity: 0; width: 0; }
.cm-sidebar-v2.collapsed .menu-item:hover .menu-tooltip { display: block; }

.cm-sidebar-footer {
  padding: .65rem 1.25rem;
  border-top: 1px solid #eef1f5;
  color: #8896a8; font-size: .72rem; text-align: center;
  white-space: nowrap; overflow: hidden;
}

/* Layout del contenido junto al sidebar fijo */
.cm-main-wrapper { margin-left: var(--cm-sb-w); transition: margin-left .3s cubic-bezier(.4,0,.2,1); }
body.sidebar-collapsed .cm-main-wrapper { margin-left: 60px; }
body.sidebar-collapsed .cm-sidebar-v2 { width: 60px; }
body.sidebar-collapsed .cm-sidebar-v2 .menu-group-label { opacity: 0; height: 0; padding: 0; }
body.sidebar-collapsed .cm-sidebar-v2 .menu-item { justify-content: center; padding: .7rem 0; gap: 0; border-left-color: transparent; }
body.sidebar-collapsed .cm-sidebar-v2 .menu-item .menu-label { opacity: 0; width: 0; }
body.sidebar-collapsed .cm-sidebar-v2 .menu-item:hover .menu-tooltip { display: block; }
body.sidebar-collapsed .cm-sidebar-footer { display:none; }

.cm-main { min-height: calc(100vh - var(--cm-sb-navh) - 60px); }

@media (max-width: 991px) {
  .cm-sidebar-v2 { transform: translateX(-100%); }
  .cm-sidebar-v2.show { transform: translateX(0); }
  .cm-main-wrapper { margin-left: 0; }
}

/* Botón hamburguesa para colapsar */
.cm-sidebar-toggle {
  background: transparent; border: 0; color: #fff;
  padding: .35rem .55rem; cursor: pointer; font-size: 1.15rem;
}
.cm-sidebar-toggle:hover { background: rgba(255,255,255,.15); border-radius: 6px; }

@keyframes cm-active-grow {
  from { border-left-width: 0; padding-left: calc(1.25rem - 3px); }
  to   { border-left-width: 3px; padding-left: 1.25rem; }
}

/* KPI cards del dashboard */
.cm-kpi { border-left:5px solid; border-radius:.5rem; }
.cm-kpi-icon {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}

/* Login */
.cm-login { background: linear-gradient(135deg, #0d3b66 0%, #1b5e9d 100%); min-height:100vh; }
.cm-login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1rem; }
.cm-login-card { background:#fff; border-radius:14px; padding:2rem; width:100%; max-width:420px; }
.cm-login-icon  { font-size:3rem; color:var(--cm-primary); }

/* Carnet imprimible */
.cm-carnet-wrap { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.cm-carnet {
  width:340px; height:540px; border-radius:14px; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  background:#fff; position:relative;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  display:flex; flex-direction:column;
}
.cm-carnet-header {
  background: var(--cm-primary); color:#fff; padding:.75rem .9rem; text-align:center;
}
.cm-carnet-header h6 { margin:0; font-size:.85rem; letter-spacing:.5px; }
.cm-carnet-header .nombre-ayto { font-weight:700; font-size:.95rem; }
.cm-carnet-body { padding:1rem; text-align:center; flex-grow:1; }
.cm-carnet-foto {
  width:120px; height:140px; object-fit:cover; border-radius:8px;
  border:3px solid var(--cm-primary); margin-bottom:.5rem;
}
.cm-carnet-nombre { font-weight:700; font-size:1rem; line-height:1.1; margin-top:.4rem; }
.cm-carnet-cargo { color:#555; font-size:.85rem; margin-bottom:.5rem; }
.cm-carnet-info { font-size:.78rem; text-align:left; margin:0 .5rem; }
.cm-carnet-info div { display:flex; justify-content:space-between; padding:2px 0; border-bottom:1px dotted #ccc; }
.cm-carnet-info b { color: var(--cm-primary); }
.cm-carnet-qr { margin: .5rem auto; width:90px; }
.cm-carnet-footer {
  background:#f1f3f9; padding:.4rem .6rem; font-size:.7rem;
  display:flex; justify-content:space-between;
}
.cm-carnet-reverso { background:#f7f9fc; }
.cm-carnet-reverso .lineas { text-align:left; padding:1rem; font-size:.8rem; }
.cm-carnet-reverso .lineas h6 { color: var(--cm-primary); }

/* Validación pública */
.cm-validacion-body { background: linear-gradient(135deg,#0d3b66 0%, #1b5e9d 100%); min-height:100vh; }
.cm-validacion-card { border-radius:12px; }
.cm-foto-placeholder {
  width:120px; height:140px; border-radius:8px; background:#eee;
  display:flex; align-items:center; justify-content:center;
  font-size:5rem; color:#999; margin:0 auto;
}
.cm-foto-empleado { max-height: 240px; object-fit: cover; }
.cm-foto-card     { border-radius: 10px; }

/* Tablas compactas */
.table thead th { background: var(--cm-soft); }

/* Vista de impresión */
@media print {
  .no-print { display:none !important; }
  body { background:#fff !important; }
  .cm-carnet { box-shadow:none; border:1px solid #ccc; }
}