/* ============================================================
   CONTROL.CSS — Tablero de control (control.html)
   Usa las variables de main.css y las piezas de dashboard.css.
   ============================================================ */

:root {
  --ctl-hecho: var(--green);
  --ctl-curso: var(--yellow);
  --ctl-pend: #2a3552;
  --ctl-na: #475569;
  --ctl-deriv: #8b5cf6;
}

/* Filtros y leyenda */
.ctl-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.ctl-filtros select, .ctl-filtros input {
  background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 12.5px; outline: none;
}
.ctl-filtros select:focus, .ctl-filtros input:focus { border-color: var(--accent); }
.ctl-filtros input[type=search] { min-width: 200px; }
.ctl-leyenda { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
  font-size: 11.5px; color: var(--text-secondary); }
.ctl-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.ctl-dot.hecho { background: var(--ctl-hecho); }
.ctl-dot.en_curso { background: var(--ctl-curso); }
.ctl-dot.pendiente { background: var(--ctl-pend); border: 1px solid #3b4a6b; }
.ctl-dot.no_aplica { background: repeating-linear-gradient(45deg, var(--ctl-na) 0 2px, transparent 2px 4px); border: 1px solid var(--ctl-na); }
.ctl-dot.derivado { background: var(--ctl-hecho); box-shadow: inset 0 0 0 2px var(--ctl-deriv); }

/* Barras por hito */
.ctl-bar-fila { display: grid; grid-template-columns: 230px 1fr 150px; gap: 12px; align-items: center; margin: 6px 0; }
.ctl-bar-nombre { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--ctl-pend); }
.ctl-bar-seg { height: 100%; }
.ctl-bar-seg.hecho { background: var(--ctl-hecho); }
.ctl-bar-seg.en_curso { background: var(--ctl-curso); }
.ctl-bar-seg.no_aplica { background: var(--ctl-na); }
.ctl-bar-seg.pendiente { background: transparent; }
.ctl-bar-num { font-size: 11.5px; color: var(--text-muted); text-align: right; }
.ctl-bar-num b { color: var(--text-primary); }

/* Matriz */
.ctl-tabla-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
.ctl-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.ctl-tabla thead th { position: sticky; top: 0; background: var(--bg-panel); color: var(--text-secondary);
  font-weight: 600; font-size: 11px; padding: 8px 4px; border-bottom: 1px solid var(--border); z-index: 1; }
.ctl-tabla td { border-bottom: 1px solid rgba(42,53,82,.6); padding: 6px 4px; }
.ctl-tabla tbody tr:hover td { background: var(--bg-card-hover); }
.ctl-col-predio { text-align: left; min-width: 230px; padding-left: 12px !important; cursor: pointer;
  position: sticky; left: 0; background: var(--bg-card); z-index: 1; }
.ctl-tabla thead .ctl-col-predio { z-index: 2; background: var(--bg-panel); }
.ctl-col-predio b { font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.ctl-nombre { color: var(--text-secondary); font-size: 11.5px; }
.ctl-col-hito { width: 58px; text-align: center; }
.ctl-col-hito span { display: inline-block; max-width: 58px; line-height: 1.15; }
.ctl-col-etapa { min-width: 170px; padding-right: 12px !important; color: var(--text-primary); }
.ctl-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ctl-atras { color: #fbbf24; }
.ctl-vacio { text-align: center; color: var(--text-muted); padding: 24px !important; }

.ctl-celda { text-align: center; cursor: pointer; position: relative; font-weight: 700; font-size: 13px;
  color: #0a0f1a; }
.ctl-celda::before { content: ''; position: absolute; inset: 4px 6px; border-radius: 6px; z-index: 0; }
.ctl-celda { z-index: 0; }
.ctl-celda > * { position: relative; }
.ctl-celda.hecho::before { background: var(--ctl-hecho); }
.ctl-celda.en_curso::before { background: var(--ctl-curso); }
.ctl-celda.pendiente::before { background: var(--ctl-pend); }
.ctl-celda.no_aplica::before { background: repeating-linear-gradient(45deg, var(--ctl-na) 0 3px, transparent 3px 6px); }
.ctl-celda.derivado::before { box-shadow: inset 0 0 0 2px var(--ctl-deriv); }
.ctl-celda { isolation: isolate; }
.ctl-celda:hover::before { filter: brightness(1.15); }
.ctl-celda.no_aplica { color: var(--text-muted); }
.ctl-obs { position: absolute; top: 5px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
  background: #f8fafc; box-shadow: 0 0 0 1px #0a0f1a; }
.ctl-celda { line-height: 26px; }
.ctl-celda::before { z-index: -1; }

/* Panel lateral */
.ctl-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none;
  transition: opacity .2s; z-index: 40; }
.ctl-overlay.abierto { opacity: 1; pointer-events: auto; }
.ctl-panel { position: fixed; top: 0; right: 0; height: 100%; width: min(460px, 100vw); background: var(--bg-panel);
  border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .22s ease;
  z-index: 41; overflow-y: auto; padding: 22px 22px 40px; }
.ctl-panel.abierto { transform: translateX(0); }
.ctl-panel-cerrar { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--text-secondary); font-size: 26px; cursor: pointer; line-height: 1; }
.ctl-panel-titulo { font-size: 18px; font-weight: 700; color: var(--text-primary); padding-right: 30px; }
.ctl-panel-sub { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; }
.ctl-panel-seccion { margin: 20px 0 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600; }
.ctl-ficha { margin-top: 14px; display: grid; gap: 8px; }
.ctl-ficha > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 12.5px; }
.ctl-ficha > div > span:first-child { color: var(--text-muted); }
.ctl-ficha b { color: var(--text-primary); text-align: right; }
.ctl-ficha select { background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; max-width: 260px; }
.ctl-chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ctl-chip.hecho { background: rgba(46,158,94,.18); color: #4ade80; }
.ctl-chip.en_curso { background: rgba(234,179,8,.18); color: #facc15; }
.ctl-chip.pendiente { background: rgba(100,116,139,.2); color: var(--text-secondary); }
.ctl-chip.no_aplica { background: rgba(71,85,105,.25); color: var(--text-muted); }
.ctl-pago { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.ctl-pago .ctl-sub { grid-column: 1 / -1; }
.ctl-pasos { list-style: none; margin: 0; padding: 0 0 0 16px; border-left: 2px solid var(--border); }
.ctl-paso { position: relative; padding: 8px 10px 10px 14px; margin-bottom: 4px; border-radius: 8px; cursor: pointer; }
.ctl-paso:hover { background: var(--bg-card); }
.ctl-paso::before { content: ''; position: absolute; left: -24px; top: 12px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ctl-pend); border: 2px solid var(--bg-panel); }
.ctl-paso.hecho::before { background: var(--ctl-hecho); }
.ctl-paso.en_curso::before { background: var(--ctl-curso); }
.ctl-paso.no_aplica::before { background: var(--ctl-na); }
.ctl-paso.derivado::before { box-shadow: 0 0 0 2px var(--ctl-deriv); }
.ctl-paso-cab { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-primary); }
.ctl-paso-obs { margin-top: 6px; font-size: 12px; color: var(--text-secondary); background: var(--bg-card);
  border-left: 3px solid var(--yellow); padding: 6px 9px; border-radius: 4px; }
.ctl-form { display: grid; gap: 10px; margin-top: 16px; }
.ctl-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-muted); }
.ctl-form select, .ctl-form input, .ctl-form textarea {
  background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font: inherit; font-size: 13px; outline: none; resize: vertical; }
.ctl-form select:focus, .ctl-form input:focus, .ctl-form textarea:focus { border-color: var(--accent); }
.ctl-volver { margin-top: 18px; display: inline-block; cursor: pointer; }

@media (max-width: 720px) {
  .ctl-bar-fila { grid-template-columns: 1fr; gap: 3px; }
  .ctl-bar-num { text-align: left; }
  .ctl-leyenda { margin-left: 0; }
  .ctl-col-predio { min-width: 170px; }
}

/* Expediente FA-1993 */
.ctl-exp-resumen { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ctl-exp-linea { color: var(--text-secondary); }
.ctl-exp-abrir { background: var(--accent); color: #fff; border: none; border-radius: 7px; padding: 6px 12px;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ctl-exp-cuenta { float: right; letter-spacing: 0; color: var(--text-secondary); }
.ctl-exp-fila { padding: 9px 10px; margin-bottom: 6px; border-radius: 8px; background: var(--bg-card);
  border-left: 3px solid var(--ctl-pend); display: grid; gap: 6px; }
.ctl-exp-fila.si { border-left-color: var(--ctl-hecho); }
.ctl-exp-fila.no { border-left-color: var(--ctl-curso); }
.ctl-exp-fila.na { border-left-color: var(--ctl-na); opacity: .75; }
.ctl-exp-cab { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-primary); }
.ctl-exp-ctrl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctl-exp-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.ctl-exp-seg button { background: var(--bg-dark); color: var(--text-secondary); border: none; padding: 5px 10px;
  font: inherit; font-size: 12px; cursor: pointer; }
.ctl-exp-seg button + button { border-left: 1px solid var(--border); }
.ctl-exp-seg button.activo.si { background: var(--ctl-hecho); color: #0a0f1a; font-weight: 700; }
.ctl-exp-seg button.activo.no { background: var(--ctl-curso); color: #0a0f1a; font-weight: 700; }
.ctl-exp-seg button.activo.na { background: var(--ctl-na); color: #fff; font-weight: 700; }
.ctl-exp-ctrl input[type=text], .ctl-exp-ctrl input[type=date], .ctl-exp-obs {
  background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 8px; font: inherit; font-size: 12px; outline: none; }
.ctl-exp-ctrl input[type=text] { width: 80px; }
.ctl-exp-obs { width: 100%; box-sizing: border-box; }
.ctl-exp-subir { position: relative; overflow: hidden; border: 1px dashed var(--border); border-radius: 7px;
  padding: 5px 10px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.ctl-exp-subir:hover { border-color: var(--accent); color: var(--text-primary); }
.ctl-exp-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ctl-exp-arch { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ctl-exp-arch a { color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 230px; }
.ctl-exp-x { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; margin-left: auto; }
.ctl-exp-x:hover { color: var(--red, #ef4444); }
.ctl-exp-na { margin: 4px 0 8px; font-style: italic; }
.ctl-mayor { color: #fbbf24 !important; }
.ctl-modalidad { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }
.ctl-modalidad input { width: 64px; background: var(--bg-dark); color: var(--text-primary); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 8px; font: inherit; font-size: 12px; }
.ctl-modalidad button { background: var(--accent); color: #fff; border: none; border-radius: 7px; padding: 5px 10px;
  font: inherit; font-size: 12px; cursor: pointer; }