/* style.css — v2.2 (Segoe UI + dark + checkboxes en grid) */
:root {
  --bg:#0b0f14; --bg-2:#0e141c; --card:#121821; --line:#1e2733;
  --text:#e6eef7; --muted:#9fb0c3; --accent:#4a90e2; --accent-2:#1f6fd6;
  --radius:14px; --shadow:0 12px 36px #0004;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Layout */
.header{padding:24px 0 8px}
.header-wrap{width:70%;margin:0 auto;padding:0 16px}
.title{margin:0 0 4px}
.subtitle{margin:0;color:var(--muted);font-size:13px}
.container{width:70%;margin:0 auto;padding:8px 16px 32px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:16px 0;box-shadow:var(--shadow)}
h2{margin:0 0 12px;font-size:20px;font-weight:600}

.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

.field{display:flex;flex-direction:column;gap:6px}
.field > span{color:var(--muted);font-size:13px}

input,textarea,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);outline:none;font-size:15px}
textare
input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(74,144,226,0.25)}

/* Chips (checkboxes) — GRID */
.chips{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr)); /* 5 columnas desktop */
  gap:12px;
}
@media (max-width:1200px){ .chips{grid-template-columns:repeat(4,1fr);} }
@media (max-width:900px) { .chips{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px) { .chips{grid-template-columns:repeat(2,1fr);} }
@media (max-width:480px) { .chips{grid-template-columns:1fr;} }

.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg-2);
  font-size:14px;
  width:100%;
}
.chip input{width:auto;height:auto;margin:0;}

/* Tags input */
.tags-input{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line);background:var(--bg-2);padding:8px 10px;border-radius:12px}
.tags-input input{border:none;background:transparent;padding:6px 4px;min-width:180px}
.tag{display:inline-flex;align-items:center;gap:6px;background:#1a2430;border:1px solid var(--line);padding:4px 8px;border-radius:999px}
.tag .tag-x{background:none;border:none;color:#fff;opacity:.7;cursor:pointer}

/* Action buttons */
.actions{display:flex;justify-content:flex-end;margin:20px 0}
.btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;border:none;border-radius:12px;padding:10px 16px;font-weight:600;cursor:pointer}
.btn-primary:hover{filter:brightness(1.05)}
.btn{background:#1b2940;color:#d6e6ff;border:1px solid #2a3a56;border-radius:12px;padding:8px 12px;cursor:pointer}
.btn-secondary{background:#151f2e}

/* Botón agregar (link-add) oscuro */
.link-add{
  margin-top:10px;
  background:var(--bg-2);
  border:1px solid var(--line);
  padding:8px 14px;
  color:#cfe1ff;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
  display:inline-block;
  transition:background .2s, filter .2s;
}
.link-add:hover{
  filter:brightness(1.08);
  background:#1a2431;
}

/* DnD rows */
.btn-handle{border:none;background:#203048;color:#cde0ff;border-radius:8px;padding:6px 8px;cursor:grab}
.btn-del{border:none;background:#e74c3c;color:#fff;border-radius:8px;padding:6px 9px;cursor:pointer}
.row-drag-over{outline:2px dashed var(--accent);outline-offset:2px}
.row-dragging{opacity:.6}

/* Referencias */
.refs-header{display:grid;grid-template-columns:36px 1fr 1.2fr 180px 36px;gap:10px;color:var(--muted);font-size:14px;margin:6px 0}
.refs-list{display:flex;flex-direction:column;gap:8px}
.ref-row{display:grid;grid-template-columns:36px 1fr 1.2fr 180px 36px;gap:10px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:6px 8px}

/* Equipo */
.team-header{display:grid;grid-template-columns:36px 1.2fr 1fr 1.2fr 36px;gap:10px;color:var(--muted);font-size:14px;margin:6px 0}
.team-list{display:flex;flex-direction:column;gap:8px}
.team-row{display:grid;grid-template-columns:36px 1.2fr 1fr 1.2fr 36px;gap:10px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:6px 8px}

/* Riesgos */
.risk-header{display:grid;grid-template-columns:36px 1.6fr 1fr 1fr 1.4fr 1.4fr 36px;gap:10px;color:var(--muted);font-size:14px;margin:6px 0}
.risk-list{display:flex;flex-direction:column;gap:8px}
.risk-row{display:grid;grid-template-columns:36px 1.6fr 1fr 1fr 1.4fr 1.4fr 36px;gap:10px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:6px 8px}

/* Cases */
.case-header{display:grid;grid-template-columns: 36px 180px 1fr 180px 180px 36px;gap:10px;color:var(--muted);font-size:14px;margin:6px 0}
.case-list{display:flex;flex-direction:column;gap:8px}
.case-row{display:grid;grid-template-columns: 36px 180px 1fr 180px 180px 36px;gap:10px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:6px 8px}
/* Doc view */
body.doc{background:#0a0e13}
.doc-header{width:70%;margin:20px auto 8px;padding:0 16px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.section{width:70%;margin:0 auto 16px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#0f141c}
.kpi-list{display:flex;flex-wrap:wrap;gap:14px}
.badge{background:#1c2a3d;border:1px solid #2b3b54;border-radius:999px;padding:3px 8px;font-size:12px}
.refs-output{display:flex;flex-direction:column;gap:6px}

/* Charts (50% height viewport) */
.charts-50{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chart-card{background:#0f141c;border:1px solid var(--line);border-radius:12px;padding:8px}
.chart-title{margin:0 0 6px;color:var(--muted)}
.chart-box{position:relative;height:50vh;min-height:260px}
.chart-canvas{width:100%;height:100%}

/* Gantt simple */
.gantt{display:flex;flex-direction:column;gap:6px}
.gantt-bar{background:#193458;border:1px solid #274a78;border-radius:8px;padding:6px 10px;color:#aaccff}
.footer{width:70%;margin:12px auto 24px;padding:0 16px;color:var(--muted)}
.muted{color:var(--muted)}

/* KPI textual list */
.kpi-text{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.kpi-text li{background:#111a24;padding:6px 10px;border-radius:8px;border:1px solid var(--line)}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.grid-4{grid-template-columns:1fr}}

h1,h2,h3{font-weight:600;letter-spacing:-0.3px}

/* Pretty tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.tbl thead th{background:#121a26;color:var(--muted);font-weight:600}
.tbl tbody tr:hover{background:#0f1722}

.badge.prio-alt
.badge.prio-medi
.badge.prio-baj

/* QARMY v4.1: espacio entre botones en el formulario */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .btn, .actions button, .actions label { margin-right: 12px; }
.actions .btn:last-child, .actions button:last-child, .actions label:last-child { margin-right: 0; }

/* === Unified label/badge styles for Prioridad, Probabilidad e Impacto (v6.7) === */
.badge, .prio-badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  line-height:1.6;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(148,163,184,0.15);
  color:#e5e7eb;
}

/* Color variants (dark-friendly) */
.prio-alta, .risk-alto   { background:rgba(239, 68, 68, 0.15);  border-color:rgba(239,68,68,0.35);  color: #f87171; }
.prio-medio, .risk-medio { background:rgba(245, 158, 11, 0.15); border-color:rgba(245,158,11,0.35); color: #facc15; }
.prio-baja, .risk-bajo   { background:rgba(250, 204, 21, 0.15); border-color:rgba(250,204,21,0.35); color: #a3e635; }

/* === v7.0 Badges: unified, accessible, pretty === */
.badge, .prio-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:9999px;
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(148,163,184,.14);
  color:#e8eefc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.15);
}
.badge::before, .prio-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:9999px;
  background:currentColor;
  opacity:.9;
  box-shadow:0 0 0 2px rgba(255,255,255,.08);
}

/* Prioridad colors (Alta=rojo, Media=amarillo, Baja=verde) */
.prio-alt
.prio-medio{ background:rgba(250,204,21,.14); border-color:rgba(250,204,21,.35); color:#fde68a; }
.prio-baj

/* Riesgo colors (alto=rojo, medio=naranja, bajo=amarillo) */
.risk-alto{ background:rgba(239,68,68,.15); border-color:rgba(239,68,68,.35); color:#ff6b6b; }
.risk-medio{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); color:#fbbf24; }
.risk-bajo{ background:rgba(250,204,21,.14); border-color:rgba(250,204,21,.35); color:#fde68a; }

/* === v7.1 Badge contrast improvements (accessible) === */
.badge, .prio-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:9999px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(15,23,42,.6);
  color:#eaeff7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.2);
  text-transform:capitalize;
}
.badge::before, .prio-badge::before{
  content:"";
  width:8px; height:8px;
  border-radius:9999px;
  background:currentColor;
  opacity:.95;
  box-shadow:0 0 0 2px rgba(255,255,255,.16);
}

/* Prioridad (Alta=rojo, Media=amarillo, Baja=verde) */
.prio-alt
.prio-medio{ background:#f59e0b; color:#111827; border-color:#fbbf24; }
.prio-baj

/* Riesgo (alto=rojo, medio=naranja, bajo=amarillo) */
.risk-alto{ background:#ef4444; color:#ffffff; border-color:#f87171; }
.risk-medio{ background:#f59e0b; color:#111827; border-color:#fbbf24; }
.risk-bajo{ background:#facc15; color:#111827; border-color:#fde047; }

/* === v7.3 Badge polish: remove vertical line, consistent dot === */
.badge, .prio-badge{
  position: relative;
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  padding-left: 28px; /* reserve space for the dot */
  border-radius:9999px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1220; /* solid to avoid banding */
  color:#eaf2ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.25);
  text-transform:capitalize;
}

.badge::before, .prio-badge::before{
  content:"";
  position:absolute;
  left:10px; top:50%;
  width:10px; height:10px;
  transform:translateY(-50%);
  border-radius:9999px;
  background:currentColor;
  box-shadow:0 0 0 2px rgba(255,255,255,.18);
}

/* Colors keep strong contrast */
.prio-alta, .risk-alto{ background:#ef4444; color:#ffffff; border-color:#f87171; }
.prio-medio{ background:#f59e0b; color:#111827; border-color:#fbbf24; }
.prio-baj
.risk-medio{ background:#f59e0b; color:#111827; border-color:#fbbf24; }
.risk-bajo{ background:#facc15; color:#111827; border-color:#fde047; }

/* === v7.4: remove dot inside pills to prevent text overlap === */
.badge::before, .prio-badge::before{ display:none !important; }
.badge, .prio-badge{ padding-left: 12px !important; } /* reclaim space */

/* === v7.5: Risk pills match Priority pills (strong override) === */
.badge{ 
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:9999px;
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
  border:1px solid rgba(255,255,255,.08);
  background:#0b1220;
  color:#eaf2ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.25);
  text-transform:capitalize;
}

/* Colors */
.risk-alto{ background:#ef4444 !important; color:#ffffff !important; border-color:#f87171 !important; }
.risk-medio{ background:#f59e0b !important; color:#111827 !important; border-color:#fbbf24 !important; }
.risk-bajo{ background:#facc15 !important; color:#111827 !important; border-color:#fde047 !important; }

/* === v7.7 unify risk pills with case priority design === */
.risk-alto{
  background:rgba(239,68,68,.15) !important;
  border:1px solid rgba(239,68,68,.35) !important;
  color:#ff6b6b !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.15) !important;
}
.risk-medio{
  background:rgba(245,158,11,.15) !important;
  border:1px solid rgba(245,158,11,.35) !important;
  color:#fbbf24 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.15) !important;
}
.risk-bajo{
  background:rgba(16,185,129,.15) !important;
  border:1px solid rgba(16,185,129,.35) !important;
  color:#34d399 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.15) !important;
}

/* Control de cambios */
.chg-header{display:grid;grid-template-columns:36px 120px 190px 4fr 1.2fr 36px;gap:10px;color:var(--muted);font-size:14px;margin:6px 0}
.chg-list{display:flex;flex-direction:column;gap:8px}
.chg-row{display:grid;grid-template-columns:36px 120px 190px 4fr 1.2fr 36px;gap:10px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.drag-handle{cursor:grab;user-select:none;font-size:18px;line-height:1;opacity:.8}
.dragging{opacity:.6}
.chg-row input[type="text"], .chg-row input[type="date"]{width:100%}

.chg-row .chg-date{min-width:160px}

.chg-row .chg-desc{min-width:280px}

/* Ensure author reaches the delete button */

.chg-row .chg-desc{width:100%}
.chg-row .chg-date{min-width:190px}

/* Ensure 'Realizado por' stretches to the delete button */
.chg-row .chg-author{width:100%; max-width:none; flex:1 1 auto; box-sizing:border-box}

.chg-row .chg-desc{width:100%; flex:2 1 auto}

/* ==== Environments (cards) ==== */
.env-list { display: grid; gap: 12px; }
.env-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
}
.env-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.env-title { font-weight:600; opacity:.9; }
.env-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.field-full { grid-column:1/-1; }

/* ==== Tags (shared) ==== */
.tags { display:flex; flex-direction:column; gap:8px; }
.tags-input { display:flex; align-items:center; min-height:38px; border:1px dashed var(--line); border-radius:10px; padding:6px 8px; }
.tag-input { background:transparent; border:none; outline:none; width:100%; color:var(--text); }
.tags-list, #toolsWrap { display:flex; flex-wrap:wrap; gap:6px; }
.tag { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px;
  background:#0e2230; border:1px solid #1f3342; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tag .tag-x { background:transparent; border:none; cursor:pointer; font-size:12px; line-height:1; padding:2px; opacity:.8; }
.tag .tag-x:hover { opacity:1; }

@media (max-width:760px){ .env-grid{ grid-template-columns:1fr; } }

/* Drag & Drop handles and rows */
.drag-handle { cursor: grab; }
.dragging { opacity: 0.85; }
.list.dnd-list .chg-row,
.list.dnd-list .ref-row,
.list.dnd-list .team-row,
.list.dnd-list .risk-row,
.list.dnd-list .case-row {
  user-select: none;
}

/* === KPI subtitle === */
.kpi-sub{
  margin-top:4px;
  font-size:12px;
  color: var(--muted);
}

/* === Semáforo deploy badges === */
.badge.sem-n
.badge.sem-muy-mal
.badge.sem-mal
.badge.sem-regular{
  background:rgba(234,179,8,.15);
  border:1px solid rgba(234,179,8,.35);
  color: #9ca3af;
}
.badge.sem-buen
.badge.sem-excelente{
  background:rgba(22,163,74,.15);
  border:1px solid rgba(22,163,74,.35);
  color: #4ade80;
}

/* === QARMY UX pass: KPI grid & cards === */
.kpi-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1200px){
  .kpi-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .kpi-cards{ grid-template-columns: 1fr; }
}

.kpi-card{
  background:#0f141c;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  display:grid;
  grid-template-rows:auto 1fr auto; /* title / value / sub */
  min-height: 120px; /* equal height look */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.25);
}

.kpi-title{
  margin:0 0 6px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing:.2px;
}

.kpi-value{
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing:.3px;
}

.kpi-sub{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
}

/* Tighten existing old KPI list spacing if present */
.kpi-list{ gap: 10px; }

/* === Chart layout polish === */
.charts-50{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  .charts-50{ grid-template-columns: 1fr; }
}
.chart-card{
  background:#0f141c;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
}
.chart-card .chart-title{
  margin:0 0 8px;
  color:var(--muted);
}
.chart-card canvas{
  display:block;
  width:100% !important;
  height:280px !important;
}

/* === Semáforo badges already present; just add slight size tweak === */
.badge{ font-size: 12px; padding:6px 10px; }

/* === QARMY layout: 12 KPI cards in 3x4 grid === */
.kpi-cards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1279px){
  .kpi-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px){
  .kpi-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px){
  .kpi-cards{ grid-template-columns: 1fr; }
}

.kpi-card{
  background:#0f141c;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 16px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height: 120px; /* equal height */
}

/* Chart row: 3 charts side by side */
.charts-33{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1279px){
  .charts-33{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799px){
  .charts-33{ grid-template-columns: 1fr; }
}
.chart-card canvas{
  width:100% !important;
  height:280px !important;
}

/* === QARMY compact KPI cards (override) === */
.kpi-cards{ gap: 14px; } /* slight breathing room */
.kpi-card{
  padding:10px 12px !important;
  min-height:108px !important;
}
.kpi-title{
  font-size:12px !important;
  margin-bottom:4px !important;
}
.kpi-value{
  font-size:26px !important;
  line-height:1.05 !important;
}
.kpi-sub{
  font-size:11px !important;
  margin-top:4px !important;
}

/* Extra breathing space between KPI cards and charts */
.charts-33{
  margin-top:18px !important;
  gap:14px !important;
}

/* Plan de Ejecución */
.exec-header{display:grid;grid-template-columns:36px 1.2fr 1.6fr 120px 140px 1.2fr 1.6fr 36px;gap:10px;color:var(--muted);font-size:14px;margin:6px 0}
.exec-list{display:flex;flex-direction:column;gap:8px}
.exec-row{display:grid;grid-template-columns:36px 1.2fr 1.6fr 120px 140px 1.2fr 1.6fr 36px;gap:10px;align-items:center;background:#0f1621;border:1px solid var(--line);border-radius:12px;padding:6px 8px}
.exec-row input[type="text"], .exec-row input[type="number"], .exec-row select{width:100%}
.exec-row .tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border:1px dashed var(--line);border-radius:10px;padding:6px}
.exec-row .tags-list{display:flex;flex-wrap:wrap;gap:6px}
.exec-row .tag{display:inline-flex;align-items:center;gap:6px;background:#1d2a3a;border:1px solid #2b3b52;color:#d6e6ff;padding:4px 8px;border-radius:9999px}
.exec-row .tag .tag-x{border:none;background:transparent;color:#9fb0c3;cursor:pointer}

/* Dark mode link color adjustment */
a, a:visited {
  color: #4da3ff; /* softer blue for dark mode */
}
a:hover, a:focus {
  color: #82c7ff;
}