/* ===============================
   RESET GLOBAL
================================ */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Segoe UI", Tahoma, sans-serif;
}
html, body{ height:100%; }
body{
  background:#f1f5f9;
  color:#0f172a;
}

/* Links por defecto (NO tocar botones) */
a{ color:inherit; }

/* ===============================
   LOGIN WOW
================================ */
body.login{
  background:#0f172a;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-wrapper{
  display:flex;
  width:920px;
  max-width:100%;
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.login-brand{
  width:45%;
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;
  padding:60px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-brand h1{
  font-size:34px;
  margin-bottom:18px;
  font-weight:700;
}

.login-brand p{
  font-size:15px;
  line-height:1.6;
  opacity:.92;
}

.login-box{
  width:55%;
  padding:60px 50px;
  background:#fff;
}

.login-box h2{
  font-size:22px;
  margin-bottom:26px;
  font-weight:700;
}

.login-box input{
  width:100%;
  padding:15px;
  margin-bottom:16px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:15px;
  background:#fff;
}

.login-box input:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.login-box button{
  width:100%;
  padding:15px;
  border-radius:10px;
  border:none;
  background:#2563eb;
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}

.login-box button:hover{ background:#1e40af; }
.login-box button:active{ transform:scale(.99); }

.login-error{
  background:#fee2e2;
  color:#991b1b;
  padding:12px;
  border-radius:10px;
  margin-bottom:16px;
  font-size:14px;
}

/* Responsive login */
@media (max-width:860px){
  .login-wrapper{ flex-direction:column; }
  .login-brand{ width:100%; padding:36px 28px; }
  .login-box{ width:100%; padding:36px 28px; }
}

/* ===============================
   DASHBOARD LAYOUT (BLINDADO)
================================ */
body.dashboard{
  margin:0;
  padding:0;
  background:#f1f5f9;
}

.layout{
  display:flex;
  min-height:100vh;
  width:100%;
}

/* ===============================
   SIDEBAR
================================ */
.sidebar{
  width:260px;
  min-width:260px;
  background:linear-gradient(180deg,#020617,#020617);
  color:#ffffff;
  display:flex;
  flex-direction:column;
  border-right:1px solid #0b1220;
}

.sidebar-brand{
  padding:26px 18px;
  text-align:center;
  border-bottom:1px solid #1e293b;
}

.sidebar-brand img{
  max-width:160px;
  max-height:64px;
  object-fit:contain;
  display:inline-block;
}

.sidebar-brand h2{
  font-size:20px;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
}

.sidebar nav{
  flex:1;
  padding:18px;
}

.sidebar nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  margin-bottom:10px;
  color:#cbd5e1;
  text-decoration:none;
  border-radius:12px;
  font-size:15px;
  transition:all .16s ease;
}
 .nav-label{ display:inline-flex; align-items:center; gap:8px; }
 .nav-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-weight:900;
  font-size:11px;
  line-height:1;
  box-shadow:0 3px 8px rgba(239,68,68,.35);
 }

.sidebar nav a:hover{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
}

.sidebar nav a.active{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#ffffff;
  font-weight:800;
}

.sidebar-footer{
  padding:18px;
  border-top:1px solid #1e293b;
}

.sidebar-footer a{
  display:block;
  text-align:center;
  padding:12px;
  background:#dc2626;
  color:#ffffff;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  transition:background .16s ease;
}
.sidebar-footer a:hover{ background:#b91c1c; }

/* ===============================
   CONTENT
================================ */
.content{
  flex:1;
  padding:38px;
  background:#f4f7fb;
}

@media (max-width:900px){
  .content{ padding:20px; }
}

/* ===============================
   PAGE HEADER
================================ */
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  gap:14px;
  flex-wrap:wrap;
}

.page-header h1{
  font-size:26px;
  margin-bottom:6px;
  font-weight:900;
}

.page-header p{ color:#475569; }

/* ===============================
   CARDS
================================ */
.card{
  background:#ffffff;
  padding:24px;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  border:1px solid #e2e8f0;
}

/* ===============================
   STATS (Dashboard)
================================ */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-bottom:22px;
}

.card.stat{ text-align:center; }

.card.stat h3{
  font-size:14px;
  color:#475569;
  margin-bottom:10px;
  font-weight:700;
}

/* Tarjetas KPI como links, SIN azul */
.stat-link{
  text-decoration:none !important;
  color:#0f172a !important;
  display:block;
  transition:transform .15s ease;
}
.stat-link:hover{ transform:translateY(-2px); }

.stat-number{
  font-size:40px;
  font-weight:900;
  display:block;
  margin-top:8px;
  color:#0f172a !important;
}

.stat-meta{
  margin-top:6px;
  color:#64748b;
  font-size:13px;
}

/* KPIs inline */
.kpi-row{ display:flex; gap:14px; flex-wrap:wrap; }
.kpi{
  display:flex;
  align-items:center;
  gap:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  padding:12px 14px;
  border-radius:14px;
}
.kpi-label{ color:#475569; font-size:14px; font-weight:700; }

/* ===============================
   BUTTONS
================================ */
.btn-primary{
  display:inline-block;
  padding:12px 18px;
  background:#2563eb;
  color:#ffffff !important;
  border-radius:12px;
  text-decoration:none !important;
  font-size:14px;
  font-weight:800;
  transition:background .15s ease, transform .05s ease;
  border:none;
  cursor:pointer;
}
.btn-primary:hover{ background:#1e40af; }
.btn-primary:active{ transform:scale(.99); }

.btn-secondary{
  display:inline-block;
  padding:12px 18px;
  background:#e2e8f0;
  color:#0f172a !important;
  border-radius:12px;
  text-decoration:none !important;
  font-size:14px;
  font-weight:800;
  transition:background .15s ease, transform .05s ease;
  border:none;
  cursor:pointer;
}
.btn-secondary:hover{ background:#cbd5e1; }
.btn-secondary:active{ transform:scale(.99); }

/* Botones pequeños (filtros/paginación) */
.btn-sm{
  padding:10px 14px !important;
  font-size:13px !important;
  border-radius:10px !important;
}

/* Botón mini “Ver” */
.btn-mini{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  background:#2563eb;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:900;
  font-size:13px;
  transition:background .15s ease;
}
.btn-mini:hover{ background:#1e40af; }

/* Volver */
.back-wrapper{ margin-bottom:18px; }

/* ===============================
   TABLES
================================ */
table{
  width:100%;
  border-collapse:collapse;
}

table th{
  background:#f8fafc;
  text-align:left;
  padding:14px;
  font-size:13px;
  color:#475569;
  font-weight:900;
  border-bottom:1px solid #e2e8f0;
}

table td{
  padding:14px;
  border-bottom:1px solid #e2e8f0;
  font-size:14px;
}

table tr:hover{ background:#f8fafc; }

small{ color:#64748b; }

/* En tablas, links normales en negro (NO botones) */
table a:not(.btn-mini):not(.btn-primary):not(.btn-secondary){
  color:#0f172a !important;
  text-decoration:underline;
  font-weight:800;
}

/* ===============================
   FORMS
================================ */
form label{
  font-size:14px;
  margin-bottom:6px;
  display:block;
  font-weight:800;
  color:#0f172a;
}

form input,
form textarea,
form select{
  width:100%;
  padding:12px;
  margin-bottom:16px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:14px;
  background:#fff;
}

/* Evitar que checkboxes/radios hereden estilos de inputs de texto */
form input[type="checkbox"],
form input[type="radio"]{
  width:auto;
  padding:0;
  margin:0 8px 0 0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

form input:focus,
form textarea:focus,
form select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

form textarea{ resize:vertical; }

form button{
  padding:12px 18px;
  background:#2563eb;
  border:none;
  border-radius:12px;
  color:#fff;
  cursor:pointer;
  font-weight:900;
}
form button:hover{ background:#1e40af; }

/* ===============================
   BADGES / ESTADOS
================================ */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  text-transform:capitalize;
}

/* Para incidencias por enum estado */
.badge-abierta{ background:#fef3c7; color:#92400e; }
.badge-proceso{ background:#dbeafe; color:#1e40af; }
.badge-cerrada{ background:#dcfce7; color:#166534; }

/* Para KPIs del dashboard */
.badge-red{ background:#fee2e2; color:#991b1b; }
.badge-amber{ background:#ffedd5; color:#9a3412; }
.badge-green{ background:#dcfce7; color:#166534; }

/* ===============================
   SIDEBAR ACTIONS (BOTONES PRO)
================================ */
.sidebar-actions{
  padding: 0 18px 18px;
  display: grid;
  gap: 10px;
}

/* Botón base */
.sidebar .sidebar-actions a.sidebar-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}

/* Primario */
.sidebar .sidebar-actions a.sidebar-btn.primary{
  background: #2563eb;
  color: #ffffff !important;
}
.sidebar .sidebar-actions a.sidebar-btn.primary:hover{ background: #1e40af; }
.sidebar .sidebar-actions a.sidebar-btn.primary:active{ transform: scale(.99); }

/* Secundario (gris pro) */
.sidebar .sidebar-actions a.sidebar-btn.secondary{
  background: rgba(255,255,255,0.08);
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.10);
}
.sidebar .sidebar-actions a.sidebar-btn.secondary:hover{ background: rgba(255,255,255,0.12); }
.sidebar .sidebar-actions a.sidebar-btn.secondary:active{ transform: scale(.99); }

/* FIX final: asegurar que el botón "Nueva Incidencia" sea AZUL */
.sidebar .sidebar-actions a.sidebar-btn.secondary{
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.sidebar .sidebar-actions a.sidebar-btn.secondary:hover{
  background: #1e40af !important;
}
/* ===============================
   RESET GLOBAL
================================ */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:"Segoe UI", Tahoma, sans-serif;
}
html, body{
  height:100%;
}
body{
  background:#f1f5f9;
  color:#0f172a;
}

/* Links por defecto (NO tocar botones) */
a{
  color:inherit;
}

/* ===============================
   LOGIN WOW
================================ */
body.login{
  background:#0f172a;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-wrapper{
  display:flex;
  width:920px;
  max-width:100%;
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}

.login-brand{
  width:45%;
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;
  padding:60px 50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.login-brand h1{
  font-size:34px;
  margin-bottom:18px;
  font-weight:700;
}

.login-brand p{
  font-size:15px;
  line-height:1.6;
  opacity:.92;
}

.login-box{
  width:55%;
  padding:60px 50px;
  background:#fff;
}

.login-box h2{
  font-size:22px;
  margin-bottom:26px;
  font-weight:700;
}

.login-box input{
  width:100%;
  padding:15px;
  margin-bottom:16px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:15px;
  background:#fff;
}

.login-box input:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.login-box button{
  width:100%;
  padding:15px;
  border-radius:10px;
  border:none;
  background:#2563eb;
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease, transform .05s ease;
}

.login-box button:hover{ background:#1e40af; }
.login-box button:active{ transform:scale(.99); }

.login-error{
  background:#fee2e2;
  color:#991b1b;
  padding:12px;
  border-radius:10px;
  margin-bottom:16px;
  font-size:14px;
}

/* Responsive login */
@media (max-width:860px){
  .login-wrapper{ flex-direction:column; }
  .login-brand{ width:100%; padding:36px 28px; }
  .login-box{ width:100%; padding:36px 28px; }
}

/* ===============================
   DASHBOARD LAYOUT (BLINDADO)
================================ */
body.dashboard{
  margin:0;
  padding:0;
  background:#f1f5f9;
}

.layout{
  display:flex;
  min-height:100vh;
  width:100%;
}

/* ===============================
   SIDEBAR
================================ */
.sidebar{
  width:260px;
  min-width:260px;
  background:linear-gradient(180deg,#020617,#020617);
  color:#ffffff;
  display:flex;
  flex-direction:column;
  border-right:1px solid #0b1220;
}

.sidebar-brand{
  padding:26px 18px;
  text-align:center;
  border-bottom:1px solid #1e293b;
}

.sidebar-brand img{
  max-width:160px;
  max-height:64px;
  object-fit:contain;
  display:inline-block;
}

.sidebar-brand h2{
  font-size:20px;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
}

.sidebar nav{
  flex:1;
  padding:18px;
}

.sidebar nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  margin-bottom:10px;
  color:#cbd5e1;
  text-decoration:none;
  border-radius:12px;
  font-size:15px;
  transition:all .16s ease;
}

.sidebar nav a:hover{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
}

.sidebar nav a.active{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#ffffff;
  font-weight:800;
}

.sidebar-footer{
  padding:18px;
  border-top:1px solid #1e293b;
}

.sidebar-footer a{
  display:block;
  text-align:center;
  padding:12px;
  background:#dc2626;
  color:#ffffff;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  transition:background .16s ease;
}
.sidebar-footer a:hover{ background:#b91c1c; }

/* ===============================
   CONTENT
================================ */
.content{
  flex:1;
  padding:38px;
  background:#f4f7fb;
}

@media (max-width:900px){
  .content{ padding:20px; }
}

/* ===============================
   PAGE HEADER
================================ */
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
  gap:14px;
  flex-wrap:wrap;
}

.page-header h1{
  font-size:26px;
  margin-bottom:6px;
  font-weight:900;
}

.page-header p{
  color:#475569;
}

/* ===============================
   CARDS
================================ */
.card{
  background:#ffffff;
  padding:24px;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  border:1px solid #e2e8f0;
}

/* ===============================
   STATS (Dashboard)
================================ */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin-bottom:22px;
}

.card.stat{
  text-align:center;
}

.card.stat h3{
  font-size:14px;
  color:#475569;
  margin-bottom:10px;
  font-weight:700;
}

/* Tarjetas KPI como links, SIN azul */
.stat-link{
  text-decoration:none !important;
  color:#0f172a !important;
  display:block;
  transition:transform .15s ease;
}
.stat-link:hover{ transform:translateY(-2px); }

.stat-number{
  font-size:40px;
  font-weight:900;
  display:block;
  margin-top:8px;
  color:#0f172a !important;
}

.stat-meta{
  margin-top:6px;
  color:#64748b;
  font-size:13px;
}

/* KPIs inline */
.kpi-row{ display:flex; gap:14px; flex-wrap:wrap; }
.kpi{
  display:flex;
  align-items:center;
  gap:10px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  padding:12px 14px;
  border-radius:14px;
}
.kpi-label{ color:#475569; font-size:14px; font-weight:700; }

/* ===============================
   BUTTONS
================================ */
.btn-primary{
  display:inline-block;
  padding:12px 18px;
  background:#2563eb;
  color:#ffffff !important;
  border-radius:12px;
  text-decoration:none !important;
  font-size:14px;
  font-weight:800;
  transition:background .15s ease, transform .05s ease;
  border:none;
  cursor:pointer;
}
.btn-primary:hover{ background:#1e40af; }
.btn-primary:active{ transform:scale(.99); }

.btn-secondary{
  display:inline-block;
  padding:12px 18px;
  background:#e2e8f0;
  color:#0f172a !important;
  border-radius:12px;
  text-decoration:none !important;
  font-size:14px;
  font-weight:800;
  transition:background .15s ease, transform .05s ease;
  border:none;
  cursor:pointer;
}
.btn-secondary:hover{ background:#cbd5e1; }
.btn-secondary:active{ transform:scale(.99); }

/* Botones peque���os (filtros/paginaci���n) */
.btn-sm{
  padding:10px 14px !important;
  font-size:13px !important;
  border-radius:10px !important;
}

/* Bot���n mini ��Ver�� */
.btn-mini{
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  background:#2563eb;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:900;
  font-size:13px;
  transition:background .15s ease;
}
.btn-mini:hover{ background:#1e40af; }

/* Volver */
.back-wrapper{ margin-bottom:18px; }

/* ===============================
   TABLES
================================ */
table{
  width:100%;
  border-collapse:collapse;
}

table th{
  background:#f8fafc;
  text-align:left;
  padding:14px;
  font-size:13px;
  color:#475569;
  font-weight:900;
  border-bottom:1px solid #e2e8f0;
}

table td{
  padding:14px;
  border-bottom:1px solid #e2e8f0;
  font-size:14px;
}

table tr:hover{ background:#f8fafc; }

small{ color:#64748b; }

/* En tablas, links normales en negro (NO botones) */
table a:not(.btn-mini):not(.btn-primary):not(.btn-secondary){
  color:#0f172a !important;
  text-decoration:underline;
  font-weight:800;
}

/* ===============================
   FORMS
================================ */
form label{
  font-size:14px;
  margin-bottom:6px;
  display:block;
  font-weight:800;
  color:#0f172a;
}

form input,
form textarea,
form select{
  width:100%;
  padding:12px;
  margin-bottom:16px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:14px;
  background:#fff;
}

form input:focus,
form textarea:focus,
form select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

form textarea{ resize:vertical; }

form button{
  padding:12px 18px;
  background:#2563eb;
  border:none;
  border-radius:12px;
  color:#fff;
  cursor:pointer;
  font-weight:900;
}
form button:hover{ background:#1e40af; }

/* ===============================
   BADGES / ESTADOS
================================ */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  text-transform:capitalize;
}

/* Para incidencias por enum estado */
.badge-abierta{
  background:#fef3c7;
  color:#92400e;
}
.badge-proceso{
  background:#dbeafe;
  color:#1e40af;
}
.badge-cerrada{
  background:#dcfce7;
  color:#166534;
}

/* Para KPIs del dashboard */
.badge-red{ background:#fee2e2; color:#991b1b; }
.badge-amber{ background:#ffedd5; color:#9a3412; }
.badge-green{ background:#dcfce7; color:#166534; }

/* ===============================
   EQUIPOS EN TARJETAS (COMPACTO + EXPAND)
================================ */
.equip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:8px;
  align-items:start;
}

.equip-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
  border:1px solid #e2e8f0;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.equip-top{
  width:100%;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:12px 12px 8px;
  text-align:left;
}

.equip-title h3{
  font-size:14px;
  margin-bottom:4px;
  color:#0f172a;
  font-weight:900;
}

.equip-sub{
  display:flex;
  gap:10px;
  align-items:center;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  background:#dbeafe;
  color:#1e40af;
}

.muted{ color:#64748b; }

.equip-kpis{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.equip-kpis .k{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:8px 10px;
  flex:1;
  min-width:120px;
}

.equip-kpis .k small{
  color:#64748b;
  display:block;
  margin-bottom:4px;
  font-size:12px;
  font-weight:800;
}

.equip-kpis .k strong{
  color:#0f172a;
  font-weight:900;
  font-size:13px;
}

/* Detalle animado */
.equip-details{
  display:block;
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 12px;
  transition:max-height .25s ease, opacity .20s ease, padding .20s ease;
}

.equip-card.open{
  transform:translateY(-2px);
  border-color:#c7d2fe;
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  z-index:3;
  position:relative;
}

.equip-card.open .equip-details{
  max-height:900px;
  opacity:1;
  padding:0 12px 12px;
}

.equip-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

@media (max-width:520px){
  .equip-row{ grid-template-columns:1fr; }
}

.equip-details .box{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px;
}

.equip-details .box small{
  display:block;
  color:#64748b;
  margin-bottom:6px;
  font-weight:800;
}

.equip-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
/* ===============================
   SIDEBAR ACTIONS (BOTONES PRO)
================================ */
.sidebar-actions{
  padding: 0 18px 18px;
  display: grid;
  gap: 10px;
}

/* Bot���n base */
.sidebar .sidebar-actions a.sidebar-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none !important;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  border: 1px solid transparent;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
}

/* Primario */
.sidebar .sidebar-actions a.sidebar-btn.primary{
  background: #2563eb;
  color: #ffffff !important;
}
.sidebar .sidebar-actions a.sidebar-btn.primary:hover{
  background: #1e40af;
}
.sidebar .sidebar-actions a.sidebar-btn.primary:active{
  transform: scale(.99);
}

/* Secundario (gris pro) */
.sidebar .sidebar-actions a.sidebar-btn.secondary{
  background: rgba(255,255,255,0.08);
  color: #e2e8f0 !important;
  border-color: rgba(255,255,255,0.10);
}
.sidebar .sidebar-actions a.sidebar-btn.secondary:hover{
  background: rgba(255,255,255,0.12);
}
.sidebar .sidebar-actions a.sidebar-btn.secondary:active{
  transform: scale(.99);
}
/* FIX: asegurar que Nueva Incidencia sea AZUL (override final) */
.sidebar .sidebar-actions a.sidebar-btn.secondary{
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.sidebar .sidebar-actions a.sidebar-btn.secondary:hover{
  background: #1e40af !important;
}
/* FIX: evitar "congelado" al hacer click con links dentro de tarjetas */
.equip-top{
  cursor: pointer;
  user-select: none;
}

.equip-top:focus{
  outline: none;
}

/* Asegura que dentro del detalle puedas clicar todo */
.equip-details{
  pointer-events: auto;
}

/* Los links/botones dentro de la tarjeta siempre clickeables */
.equip-card a, .equip-card button{
  pointer-events: auto;
}
/* Fix: header clickeable de tarjetas */
.equip-top{ cursor:pointer; user-select:none; }
.equip-top:focus{ outline:none; }

/* ===============================
   FIX TARJETAS EQUIPOS (OPEN/CLOSE)
   (independiente de si equip-top es DIV o BUTTON)
================================ */
.equip-details{
  display: none !important;
}

.equip-card.open .equip-details{
  display: block !important;
}

/* Header clickeable */
.equip-top{
  cursor: pointer;
  user-select: none;
}

/* Evita que algo "tape" el header */
.equip-card{
  position: relative;
}
/* =========================================
   EQUIPOS: TARJETAS DESPLEGABLES (PRO)
   (blindado contra CSS viejo)
========================================= */
.equip-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}

.equip-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  overflow:hidden;
}

.equip-top{
  padding:16px 16px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  user-select:none;
  align-items:flex-start;
}

.equip-title h3{
  margin:0;
  font-size:16px;
  color:#0f172a;
}

.equip-sub{
  margin-top:6px;
  display:flex;
  gap:10px;
  align-items:center;
}

.pill{
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  padding:4px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  color:#0f172a;
}

.muted{ color:#64748b; font-size:12px; }

.equip-kpis{
  display:flex;
  gap:14px;
  align-items:flex-start;
  text-align:right;
}
.equip-kpis .k small{
  display:block;
  color:#64748b;
  font-size:12px;
}
.equip-kpis .k strong{
  display:block;
  font-size:13px;
  color:#0f172a;
}

/* Detalle: animaci���n suave, controlado por JS */
.equip-details{
  display:none;
  background:#f8fafc;
  border-top:1px solid #e2e8f0;
  overflow:hidden;
  max-height:0;
  transition:max-height .22s ease;
}

.equip-details-inner{
  padding:16px;
}

.equip-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-bottom:12px;
}
@media (max-width: 720px){
  .equip-row{ grid-template-columns: 1fr; }
}

.box{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px;
}
.box small{
  display:block;
  color:#64748b;
  margin-bottom:6px;
}

.equip-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

/* Incidencias mini */
.inc-list{ display:grid; gap:8px; margin-top:8px; }
.inc-item{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}
.inc-item .txt{ flex:1; }
.inc-item .txt strong{ display:block; font-weight:900; color:#0f172a; }
.inc-item .txt small{ display:block; margin-top:4px; color:#64748b; }
/* Logo arriba del título en login */
.login-brand {
  text-align: center;
}

.login-brand .brand-logo {
  display: block;
  margin: 0 auto 14px auto;     /* centrado + espacio abajo */
  width: min(240px, 72%);       /* tamaño ideal (no gigante, no chico) */
  height: auto;
  object-fit: contain;
}

/* Opcional: en pantallas grandes un poco más grande */
@media (min-width: 1024px) {
  .login-brand .brand-logo {
    width: 260px;
  }
}
.sidebar-brand .sidebar-logo{
  display: block;
  margin: 0 auto 10px auto; /* 👈 espacio abajo (entre logo y nombre) */
  max-width: 120px;         /* opcional: control tamaño */
  height: auto;
  object-fit: contain;
}

/* ===== Filtros / barras superiores consistentes (todas las páginas) =====
   Nota: usamos form.filters (no .filters) para no afectar contenedores
   que puedan tener class="filters" (por ejemplo, secciones en Reportería).
*/
form.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
}
form.filters > div{ min-width:180px; }
form.filters label{
  display:block;
  font-size:12px;
  color:#64748b;
  font-weight:800;
  margin-bottom:0;
  height:18px;
  line-height:18px;
}

/* Para alinear botoneras con campos que sí tienen label */
form.filters label.ghost{ visibility:hidden; }
form.filters input[type="text"],
form.filters input[type="search"],
form.filters input[type="email"],
form.filters select{
  width:100%;
  margin-bottom:0 !important;
}
@media (max-width: 720px){
  form.filters > div{ min-width:100%; }
}

form.filters > div:not(.filter-actions):not(.f-actions):not(.row-actions):not(.filter-meta){
  display:flex;
  flex-direction:column;
  gap:6px;
  justify-content:flex-end;
}

/* Botoneras dentro de filtros: alineadas y armoniosas */
form.filters .filter-actions,
form.filters .f-actions,
form.filters .row-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-end;
  align-self:flex-end;
}

form.filters .filter-meta{
  margin-left:auto;
  align-self:flex-end;
}

/* Botones en filtros: mismo alto y centrados (links y buttons) */
form.filters .btn-primary,
form.filters .btn-secondary,
form.filters button.btn-primary,
form.filters button.btn-secondary,
form.filters a.btn-primary,
form.filters a.btn-secondary{
  height:40px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}


/* --- Unified filter action buttons (align like super_usuarios) --- */
form.filters .filter-actions{
  min-width:220px;
}
form.filters .filter-actions label.ghost{
  display:block;
  height:18px; /* matches label height */
}

form.filters .filter-actions a,
form.filters .filter-actions button{
  height:40px;
  line-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:10px;
  text-decoration:none;
  white-space:nowrap;
  vertical-align:middle;
}

/* consistent spacing when buttons are direct children */
form.filters .filter-actions > a,
form.filters .filter-actions > button{
  margin-right:10px;
}
form.filters .filter-actions > a:last-child,
form.filters .filter-actions > button:last-child{
  margin-right:0;
}

/* ===============================
   FIX: SIDEBAR FIJO (solo scrollea el contenido)
   - Mantiene el sidebar inmóvil
   - El scroll ocurre dentro de .content
   - En móvil vuelve a layout normal
================================ */
body.dashboard{
  overflow:hidden;
}

.layout{
  height:100vh;
}

.sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  height:100vh;
  overflow-y:auto;
  z-index:1000;
}

.content{
  height:100vh;
  overflow-y:auto;
  margin-left:260px;
}

@media (max-width:900px){
  body.dashboard{ overflow:auto; }
  .layout{ height:auto; display:block; }
  .sidebar{ position:relative; height:auto; width:100%; min-width:100%; }
  .content{ height:auto; overflow:visible; margin-left:0; }
}


/* V2 PAGE WRAP */
.page-wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
}
@media (max-width:900px){
  .page-wrap{ max-width:100%; }
}

/* V2 CLICKABLE CARDS */
[data-open-window], [data-open-window-btn]{ cursor:pointer; }

/* ===============================
   V2.1 BOTONES UNIFICADOS
   - Base gris + texto negro
   - Primario (foco) azul
================================ */
:root{
  --btn-neutral-bg:#e2e8f0;
  --btn-neutral-bg-hover:#cbd5e1;
  --btn-neutral-text:#0f172a;
  --btn-neutral-border:#cbd5e1;
  --btn-primary-bg:#2563eb;
  --btn-primary-bg-hover:#1e40af;
  --btn-primary-text:#ffffff;
}

a.btn,
button.btn,
.btn-secondary,
.btn-mini,
form button{
  background:var(--btn-neutral-bg) !important;
  color:var(--btn-neutral-text) !important;
  border:1px solid var(--btn-neutral-border) !important;
}

a.btn:hover,
button.btn:hover,
.btn-secondary:hover,
.btn-mini:hover,
form button:hover{
  background:var(--btn-neutral-bg-hover) !important;
  color:var(--btn-neutral-text) !important;
}

.btn-primary,
a.btn-primary,
button.btn-primary,
form button.btn-primary{
  background:var(--btn-primary-bg) !important;
  color:var(--btn-primary-text) !important;
  border-color:var(--btn-primary-bg) !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
form button.btn-primary:hover{
  background:var(--btn-primary-bg-hover) !important;
  color:var(--btn-primary-text) !important;
  border-color:var(--btn-primary-bg-hover) !important;
}