/* ============================================================
   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); }

/* Etapas: cuántos predios van en cada una */
.ctl-etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.ctl-etapa { border-top: 3px solid var(--accent); }
.ctl-etapa.imposicion { border-top-color: #b91c1c; }
.ctl-etapa.liberado_imposicion { border-top-color: #0d9488; }
.ctl-etapa.no_aplica { border-top-color: var(--ctl-na); }
.ctl-etapa.completo { border-top-color: var(--green); }
.ctl-etapa { display: grid; gap: 3px; text-align: left; background: var(--bg-dark); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 11px; cursor: pointer; font: inherit; color: var(--text-primary); }
.ctl-etapa:hover { border-color: var(--accent); }
.ctl-etapa.activa { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--bg-card-hover); }
.ctl-etapa.vacia { opacity: .5; }
.ctl-etapa-num { font-size: 22px; font-weight: 700; font-family: 'JetBrains Mono', monospace; line-height: 1; }
.ctl-etapa-nombre { font-size: 11.5px; color: var(--text-secondary); line-height: 1.25; }
.ctl-etapa.imposicion .ctl-etapa-num { color: #f87171; }
.ctl-etapa.liberado_imposicion .ctl-etapa-num { color: #2dd4bf; }
.ctl-etapa.completo .ctl-etapa-num { color: #4ade80; }
.ctl-etapa-filtro { font-size: 12px; color: var(--text-secondary); margin: -4px 0 10px; }
.ctl-etapa-filtro:empty { display: none; }
.ctl-etapa-filtro a { color: var(--accent); }

/* 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; background: var(--bg-panel); color: var(--text-secondary);
  font-weight: 600; font-size: 11px; padding: 6px 6px; border-bottom: 1px solid var(--border); z-index: 1; text-align: center; vertical-align: bottom; }
.ctl-tabla thead tr.ctl-grupos th { top: 0; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 2px solid var(--border); padding: 8px 6px 4px; }
.ctl-tabla thead tr.ctl-grupos th.ctl-col-predio, .ctl-tabla thead tr.ctl-grupos th.ctl-col-etapa { border-bottom-color: transparent; }
.ctl-tabla thead tr:nth-child(2) th { top: 27px; }
.ctl-tabla thead tr.ctl-totales th { top: 58px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-primary); padding: 4px; }
.ctl-tabla thead tr.ctl-totales th.ctl-col-predio { font-family: inherit; font-weight: 500; color: var(--text-muted); }
.ctl-tabla td { border-bottom: 1px solid rgba(42,53,82,.6); padding: 8px 6px; vertical-align: middle; }
.ctl-tabla tbody tr:hover td { background: var(--bg-card-hover); }
.ctl-col-predio { text-align: left !important; min-width: 220px; 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 { display: block; color: var(--text-secondary); font-size: 11px; max-width: 250px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-col-hito { min-width: 128px; }
.ctl-col-hito span { display: inline-block; line-height: 1.15; }
.ctl-col-etapa { text-align: left !important; min-width: 200px; max-width: 260px; 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-quieto { color: #f87171; }
.ctl-obs-txt { color: var(--text-secondary); }
.ctl-vacio { text-align: center; color: var(--text-muted); padding: 24px !important; }
.ctl-fuera { text-align: center; color: var(--text-muted); font-size: 11px; font-style: italic; }

/* Celdas: píldora + línea pequeña + circulitos */
.ctl-celda { text-align: center; cursor: pointer; position: relative; }
.ctl-paso-cel { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; position: relative; min-width: 96px; }
.ctl-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; white-space: nowrap;
  background: var(--ctl-pend); color: var(--text-muted); position: relative; }
.ctl-celda.hecho .ctl-pill { background: var(--ctl-hecho); color: #06240f; }
.ctl-celda.en_curso .ctl-pill { background: var(--ctl-curso); color: #2b2000; }
.ctl-celda.no_aplica .ctl-pill { background: repeating-linear-gradient(45deg, var(--ctl-na) 0 3px, transparent 3px 6px); color: var(--text-muted); }
.ctl-celda.imposicion .ctl-pill { background: #b91c1c; color: #fff; }
.ctl-celda.liberado_imposicion .ctl-pill { background: #0d9488; color: #fff; }
.ctl-celda.mayor .ctl-pill { box-shadow: inset 0 0 0 2px #f59e0b; }
.ctl-celda.sinvalor .ctl-pill { background: #64748b; color: #fff; }
.ctl-celda:hover .ctl-pill { filter: brightness(1.12); }
.ctl-cel-sub { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
.ctl-dos { display: inline-block; font-style: normal; font-size: 9px; font-weight: 700; color: #fff; background: #0e7490;
  border-radius: 999px; padding: 0 5px; margin-left: 5px; vertical-align: 1px; }
.ctl-puntos { display: inline-flex; align-items: center; }
.ctl-puntos s { text-decoration: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ctl-pend); border: 1px solid #3b4a6b; }
.ctl-puntos s.hecho { background: var(--ctl-hecho); border-color: var(--ctl-hecho); }
.ctl-puntos s.en_curso { background: var(--ctl-curso); border-color: var(--ctl-curso); }
.ctl-puntos s.no_aplica { background: var(--ctl-na); border-color: var(--ctl-na); }
.ctl-puntos em { display: inline-block; width: 12px; height: 2px; background: #3b4a6b; }
.ctl-puntos em.hecho { background: var(--ctl-hecho); }
.ctl-obs { position: absolute; top: -3px; right: -6px; width: 7px; height: 7px; border-radius: 50%;
  background: #f8fafc; box-shadow: 0 0 0 1px #0a0f1a; }
/* Expediente: barra y vistos buenos */
.ctl-celda b { font-size: 11px; color: var(--text-primary); }
.ctl-celda.pendiente b { color: var(--text-muted); }
.ctl-barra { display: block; width: 92px; height: 6px; border-radius: 3px; background: var(--ctl-pend); overflow: hidden; }
.ctl-barra i { display: block; height: 100%; background: var(--ctl-curso); }
.ctl-barra i.hecho { background: var(--ctl-hecho); }
.ctl-vobos { display: inline-flex; gap: 4px; margin-top: 1px; }
.ctl-vobos span { min-width: 30px; padding: 0 5px; height: 17px; line-height: 17px; border-radius: 5px; font-size: 9px; font-weight: 700;
  background: var(--ctl-pend); color: var(--text-muted); border: 1px solid #3b4a6b; }
.ctl-vobos span.hecho { background: var(--ctl-hecho); color: #06240f; border-color: var(--ctl-hecho); }
.ctl-vobos span.en_curso { background: var(--ctl-curso); color: #2b2000; border-color: var(--ctl-curso); }
.ctl-ley-txt { display: inline-flex; align-items: center; gap: 4px; }
.ctl-ley-txt .ctl-dos { margin-left: 0; }
.ctl-dot.imposicion { background: #b91c1c; }

/* 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-chip.imposicion { background: rgba(185,28,28,.25); color: #fca5a5; }
.ctl-paso.imposicion::before { background: #b91c1c; }
.ctl-subpaso { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px;
  color: var(--text-secondary); padding: 6px 8px; margin-top: 5px; border-radius: 6px; background: var(--bg-card);
  border-left: 3px solid var(--ctl-pend); cursor: pointer; }
.ctl-subpaso:hover { color: var(--text-primary); }
.ctl-subpaso.hecho { border-left-color: var(--ctl-hecho); }
.ctl-subpaso.en_curso { border-left-color: var(--ctl-curso); }
.ctl-subpaso.no_aplica { border-left-color: var(--ctl-na); }
.ctl-vobo-fila { padding: 9px 10px; }
.ctl-vobo-fila small { display: block; color: var(--text-muted); font-size: 11px; margin-top: 3px; }
.ctl-subpaso > span:first-child b { color: var(--text-primary); font-weight: 600; }
.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-etapas { grid-template-columns: repeat(2, 1fr); }
  .ctl-leyenda { margin-left: 0; }
  .ctl-col-predio { min-width: 160px; }
  .ctl-nombre { max-width: 180px; }
}

/* 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; }
.ctl-folio { font-size: 11.5px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.ctl-folio:hover { text-decoration: underline; }