/* ══════════════════════════════════════════════════════════════════ */
/* ORBITCYB — INFRASTRUCTURE MODULE CSS                              */
/* Usa variables del sistema — no altera estilos globales            */
/* ══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────────────── */
.infra-view { padding: 24px; min-height: 100%; }
@media (max-width: 768px) { .infra-view { padding: 14px 12px; } }

/* ── Page header ──────────────────────────────────────────────────── */
.iv-ph { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.iv-ph-left h2 { font-size:20px; font-weight:700; color:var(--txt); margin:0; }
.iv-ph-left p  { font-size:12px; color:var(--txtM); margin:3px 0 0; }
.iv-ph-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ── KPIs ─────────────────────────────────────────────────────────── */
.iv-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:18px; }
.iv-kpi  { background:var(--panel); border:1px solid var(--border); border-top:3px solid var(--border); border-radius:var(--rL); padding:14px 16px; }
.iv-kpi-val { font-size:26px; font-weight:800; color:var(--txt); font-family:var(--fm); line-height:1; }
.iv-kpi-lbl { font-size:10px; color:var(--txtM); text-transform:uppercase; letter-spacing:.6px; margin-top:5px; }
.iv-kpi-ico { font-size:11px; color:var(--txtM); margin-bottom:6px; }
.iv-kpi.k-green  { border-top-color:#22c55e; } .iv-kpi.k-green  .iv-kpi-val { color:#22c55e; }
.iv-kpi.k-red    { border-top-color:#ef4444; } .iv-kpi.k-red    .iv-kpi-val { color:#ef4444; }
.iv-kpi.k-yellow { border-top-color:#f59e0b; } .iv-kpi.k-yellow .iv-kpi-val { color:#f59e0b; }
.iv-kpi.k-blue   { border-top-color:#0ea5e9; } .iv-kpi.k-blue   .iv-kpi-val { color:#0ea5e9; }
.iv-kpi.k-purple { border-top-color:#818cf8; } .iv-kpi.k-purple .iv-kpi-val { color:#818cf8; }

/* ── Toolbar ──────────────────────────────────────────────────────── */
.iv-toolbar { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; align-items:center; }
.iv-search  { flex:1; min-width:180px; background:var(--slate); border:1px solid var(--border); color:var(--txt); padding:8px 12px; border-radius:var(--r); font-size:13px; font-family:var(--fs); }
.iv-search::placeholder { color:var(--txtD); }
.iv-select  { background:var(--slate); border:1px solid var(--border); color:var(--txt); padding:8px 10px; border-radius:var(--r); font-size:13px; font-family:var(--fs); }

/* ── Buttons ──────────────────────────────────────────────────────── */
.iv-btn { border:none; padding:8px 14px; border-radius:var(--r); cursor:pointer; font-size:13px; font-weight:600; font-family:var(--fs); display:inline-flex; align-items:center; gap:6px; transition:opacity .15s; white-space:nowrap; }
.iv-btn:hover { opacity:.82; }
.iv-btn-primary { background:var(--orbit); color:#000; }
.iv-btn-danger  { background:var(--nova);  color:#fff; }
.iv-btn-check   { background:#f59e0b;       color:#000; }
.iv-btn-ghost   { background:var(--slate); color:var(--txtM); border:1px solid var(--border); }
.iv-btn-intune  { background:#0078d4;       color:#fff; }
.iv-btn-sm { padding:5px 9px; font-size:11px; }

/* ── Badges ───────────────────────────────────────────────────────── */
.iv-badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.iv-badge-UP        { background:rgba(34,197,94,.15);  color:#22c55e; }
.iv-badge-WARNING   { background:rgba(245,158,11,.15); color:#f59e0b; }
.iv-badge-DOWN      { background:rgba(239,68,68,.15);  color:#ef4444; }
.iv-badge-UNKNOWN   { background:rgba(115,115,115,.15);color:#737373; }
.iv-badge-critica   { background:rgba(239,68,68,.15);  color:#ef4444; }
.iv-badge-alta      { background:rgba(245,158,11,.15); color:#f59e0b; }
.iv-badge-media     { background:rgba(99,102,241,.15); color:#818cf8; }
.iv-badge-baja      { background:rgba(34,197,94,.15);  color:#22c55e; }
.iv-badge-activo    { background:rgba(34,197,94,.15);  color:#22c55e; }
.iv-badge-inactivo  { background:rgba(115,115,115,.15);color:#737373; }
.iv-badge-revision  { background:rgba(245,158,11,.15); color:#f59e0b; }
.iv-badge-baja-e    { background:rgba(239,68,68,.1);   color:#ef4444; }
.iv-badge-pendiente   { background:rgba(115,115,115,.15);color:#a3a3a3; }
.iv-badge-en_progreso { background:rgba(245,158,11,.15); color:#f59e0b; }
.iv-badge-completado  { background:rgba(34,197,94,.15);  color:#22c55e; }
.iv-badge-cancelado   { background:rgba(239,68,68,.15);  color:#ef4444; }
.iv-badge-manual      { background:rgba(99,102,241,.15); color:#818cf8; }
.iv-badge-intune      { background:rgba(0,120,212,.15);  color:#0078d4; }
.iv-badge-importacion { background:rgba(34,197,94,.1);   color:#22c55e; }
.iv-badge-produccion  { background:rgba(34,197,94,.1);   color:#22c55e; }
.iv-badge-staging     { background:rgba(245,158,11,.1);  color:#f59e0b; }
.iv-badge-desarrollo  { background:rgba(99,102,241,.1);  color:#818cf8; }
.iv-badge-qa          { background:rgba(14,165,233,.1);  color:#0ea5e9; }

/* ── Empty state ──────────────────────────────────────────────────── */
.iv-empty { text-align:center; padding:50px 20px; color:var(--txtD); }
.iv-empty i { font-size:36px; display:block; margin-bottom:10px; }
.iv-empty p { font-size:13px; }

/* ═══════════════════════════════════════════════════════════════════ */
/* SERVERS — Card grid                                                  */
/* ═══════════════════════════════════════════════════════════════════ */
.svr-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px; }

.svr-card { background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--border); border-radius:var(--rL); padding:16px; display:flex; flex-direction:column; gap:10px; transition:box-shadow .2s; }
.svr-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.45); }
.svr-card.st-UP      { border-left-color:#22c55e; }
.svr-card.st-WARNING { border-left-color:#f59e0b; }
.svr-card.st-DOWN    { border-left-color:#ef4444; }
.svr-card.st-UNKNOWN { border-left-color:#404040; }

.svr-card-head   { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.svr-card-name   { font-size:15px; font-weight:700; color:var(--txt); word-break:break-word; line-height:1.3; }
.svr-card-ip     { font-family:var(--fm); font-size:12px; color:var(--txtM); margin-top:3px; }
.svr-card-host   { font-family:var(--fm); font-size:10px; color:var(--txtD); }
.svr-card-tags   { display:flex; flex-wrap:wrap; gap:5px; }
.svr-card-desc   { font-size:12px; color:var(--txtM); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.svr-card-foot   { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:10px; margin-top:auto; }
.svr-card-ts     { font-size:10px; color:var(--txtD); }
.svr-card-acts   { display:flex; gap:5px; }

.svr-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.svr-dot.UP      { background:#22c55e; box-shadow:0 0 5px #22c55e80; }
.svr-dot.WARNING { background:#f59e0b; }
.svr-dot.DOWN    { background:#ef4444; box-shadow:0 0 5px #ef444480; }
.svr-dot.UNKNOWN { background:#525252; }

/* ═══════════════════════════════════════════════════════════════════ */
/* INVENTORY — Table responsive                                         */
/* ═══════════════════════════════════════════════════════════════════ */
.iv-table-wrap { background:var(--panel); border:1px solid var(--border); border-radius:var(--rL); overflow:hidden; overflow-x:auto; }
.iv-table { width:100%; border-collapse:collapse; min-width:680px; }
.iv-table th { background:var(--slate); color:var(--txtM); font-size:10px; text-transform:uppercase; letter-spacing:.5px; padding:10px 14px; text-align:left; white-space:nowrap; }
.iv-table td { padding:10px 14px; border-top:1px solid var(--border); font-size:13px; color:var(--txt); vertical-align:middle; }
.iv-table tr:hover td { background:var(--hover); }
.iv-table-actions { display:flex; gap:5px; }

.iv-intune-banner { background:rgba(0,120,212,.07); border:1px solid rgba(0,120,212,.25); border-radius:var(--r); padding:10px 14px; font-size:12px; color:#5ba3d9; margin-bottom:14px; display:flex; align-items:center; gap:8px; }

@media (max-width:700px) {
  .iv-table-wrap { overflow:visible; background:transparent; border:none; border-radius:0; }
  .iv-table      { min-width:unset; }
  .iv-table thead { display:none; }
  .iv-table tbody tr { display:block; background:var(--panel); border:1px solid var(--border); border-radius:var(--rL); margin-bottom:10px; padding:12px 14px; }
  .iv-table td { display:flex; justify-content:space-between; align-items:center; border:none; padding:5px 0; font-size:12px; }
  .iv-table td[data-label]::before { content:attr(data-label); font-size:9px; text-transform:uppercase; color:var(--txtM); letter-spacing:.4px; flex-shrink:0; margin-right:8px; font-weight:600; }
  .iv-table-actions { justify-content:flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════ */
/* MAINTENANCE — Cards                                                  */
/* ═══════════════════════════════════════════════════════════════════ */
.mnt-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px; }

.mnt-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--rL); padding:18px; display:flex; flex-direction:column; gap:11px; transition:box-shadow .2s; }
.mnt-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.4); }
.mnt-card.vencido { border-color:rgba(239,68,68,.4); }

.mnt-card-head   { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.mnt-card-tipo   { font-size:14px; font-weight:700; color:var(--txt); line-height:1.3; word-break:break-word; }
.mnt-card-resp   { font-size:12px; color:var(--txtM); display:flex; align-items:center; gap:5px; }
.mnt-card-dates  { font-size:11px; color:var(--txtD); display:flex; flex-wrap:wrap; gap:10px; }
.mnt-card-dates span { display:flex; align-items:center; gap:4px; }
.mnt-card-desc   { font-size:12px; color:var(--txtM); line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.mnt-prog-head   { display:flex; justify-content:space-between; font-size:11px; color:var(--txtM); margin-bottom:5px; }
.mnt-prog-bar    { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.mnt-prog-fill   { height:100%; background:var(--orbit); border-radius:3px; transition:width .4s; }

.mnt-card-foot   { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--border); padding-top:11px; margin-top:auto; }
.mnt-card-tc     { font-size:11px; color:var(--txtM); display:flex; align-items:center; gap:5px; }
.mnt-card-acts   { display:flex; gap:5px; }

/* ── Task panel ───────────────────────────────────────────────────── */
.iv-task-panel      { background:var(--panel); border:1px solid var(--border); border-radius:var(--rL); padding:20px; margin-top:20px; }
.iv-task-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.iv-task-panel-head h3 { font-size:14px; color:var(--txt); display:flex; align-items:center; gap:8px; }
.iv-tasks-list  { display:flex; flex-direction:column; gap:7px; }
.iv-task-item   { display:flex; align-items:center; gap:10px; background:var(--slate); border:1px solid var(--border); border-radius:var(--r); padding:9px 12px; }
.iv-task-item input[type=checkbox] { accent-color:var(--orbit); cursor:pointer; width:15px; height:15px; flex-shrink:0; }
.iv-task-name   { flex:1; font-size:13px; color:var(--txt); }
.iv-task-name.done { text-decoration:line-through; color:var(--txtD); }
.iv-task-peso   { font-size:10px; color:var(--txtM); background:var(--storm); padding:2px 6px; border-radius:3px; }
.iv-task-add    { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.iv-task-add input { background:var(--slate); border:1px solid var(--border); color:var(--txt); padding:7px 10px; border-radius:var(--r); font-size:13px; font-family:var(--fs); }
.iv-task-add input:first-child { flex:1; min-width:160px; }
.iv-task-add input[type=number] { width:70px; }

/* ── Modal ────────────────────────────────────────────────────────── */
.iv-modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,.78); z-index:1500; align-items:center; justify-content:center; padding:16px; }
.iv-modal-bg.open { display:flex; }
.iv-modal  { background:var(--panel); border:1px solid var(--border); border-radius:var(--rL); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; padding:24px; }
.iv-modal h2 { font-size:16px; font-weight:700; color:var(--txt); margin-bottom:18px; }
.iv-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.iv-fg      { display:flex; flex-direction:column; gap:5px; }
.iv-fg.full { grid-column:1/-1; }
.iv-fg label { font-size:10px; color:var(--txtM); text-transform:uppercase; letter-spacing:.5px; }
.iv-fg input, .iv-fg select, .iv-fg textarea { background:var(--slate); border:1px solid var(--border); color:var(--txt); padding:8px 10px; border-radius:var(--r); font-size:13px; font-family:var(--fs); width:100%; }
.iv-fg textarea { resize:vertical; min-height:65px; }
.iv-modal-acts { display:flex; gap:10px; margin-top:20px; justify-content:flex-end; }

/* ── Pagination ───────────────────────────────────────────────────── */
.iv-pag { display:flex; gap:8px; align-items:center; margin-top:14px; justify-content:flex-end; font-size:12px; color:var(--txtM); }
.iv-pag button { background:var(--slate); border:1px solid var(--border); color:var(--txtM); padding:5px 10px; border-radius:var(--r); cursor:pointer; font-size:12px; }
.iv-pag button:disabled { opacity:.4; cursor:default; }

/* ── Responsive breakpoints ───────────────────────────────────────── */
@media (max-width:600px) {
  .svr-grid  { grid-template-columns:1fr; }
  .mnt-grid  { grid-template-columns:1fr; }
  .iv-kpis   { grid-template-columns:repeat(2,1fr); }
  .iv-form-grid { grid-template-columns:1fr; }
  .iv-fg.full   { grid-column:1; }
  .iv-ph        { flex-direction:column; gap:10px; }
}