/* Tipografía IBM Plex servida localmente (misma que BK-Tareas; sin depender de internet) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

/* Tokens visuales (mismos de BK-Tareas) */
:root {
  /* Identidad del módulo Administrativo (D19, «Claro 4»): la barra superior es el navy de BuildKontrol y el acento su
     azul de marca; el lateral es arena claro (shell.css). --accent = botones, enlaces y chips activos; --accent-ink = hover */
  --navy: #1e3a5f; --navy-deep: #152b47; --accent: #1e6fd9; --accent-ink: #174a91; --accent-soft: #e2ecfc;
  --ground: #ffffff;   /* página blanca (elección del dueño): el lateral arena se lee aparte; las tarjetas se separan por su borde */ --surface: #ffffff; --line: #e7e9ed; --line-control: #8b95a5; --track: #e2e5ed;
  --ink: #0b1220; --ink-2: #4b5563; --ink-3: #6b7280; --on-navy-2: #c4d2e0;
  --rojo: #b91c1c; --rojo-bg: #fee2e2; --ambar: #b45309; --ambar-bg: #fef3c7; --verde: #15803d; --verde-bg: #dcfce7;
  /* Un solo código de color por estado en todas las pantallas (gris · azul · naranja · verde) */
  --e-pend: #6B7280; --e-curso: #2563EB; --e-bloq: #C2410C; --e-comp: #15803D;
  --t-pend: #E6E8EB; --t-curso: #E0E7F5; --t-bloq: #FDE9DA; --t-comp: #DCF2E3;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 14px; }
body { margin: 0; font-family: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; background: var(--ground); color: var(--ink); line-height: 1.45; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 13px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-weight: 500; font-variant-numeric: tabular-nums; }
.nota { color: var(--ink-3); font-size: 12px; }
.rojo { color: var(--rojo) !important; }
.centro { text-align: center; }

/* La barra superior y el lateral viven en shell.css (cáscara del módulo, D19) */
.aviso-global { background: var(--ambar-bg); color: var(--ambar); padding: 8px 20px; text-align: center; position: relative; z-index: 60; }
body.con-cascara .aviso-global { margin: var(--top) 0 calc(-1 * var(--top)) var(--lado); }
.pie { padding: 20px; text-align: center; color: var(--ink-3); font-size: 12px; }

/* Contenido */
.contenido { max-width: 960px; margin: 0 auto; padding: 20px 16px 40px; }
.contenido.ancho { max-width: 1400px; }
.contenido.centrado { display: flex; justify-content: center; align-items: flex-start; min-height: calc(100vh - 160px); padding-top: 8vh; }
.titulo-pagina { font-size: 20px; margin: 0; font-weight: 600; }
.sub { color: var(--ink-2); margin: 4px 0 0; }
.migas { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.encabezado { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.fila-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fila { display: flex; gap: 8px; align-items: center; }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* Tarjetas */
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta h2 { font-size: 15px; margin: 0 0 10px; font-weight: 600; }
.tarjeta h3 { font-size: 13px; margin: 16px 0 6px; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.cab-tarjeta { padding: 12px 16px; border-bottom: 1px solid var(--line); margin: 0 !important; }
.proyecto-card { display: block; color: inherit; }
.proyecto-card:hover { text-decoration: none; border-color: var(--accent); }
.proyecto-card h2 { margin: 0; }
.kpis { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.kpis div { display: flex; flex-direction: column; }
.kpis b { font-size: 17px; }
.kpis span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.kpis-grandes { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { margin: 0; padding: 12px 14px; }
.kpi b { font-size: 22px; display: block; }
.kpi span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.kpi-rojo b { color: var(--rojo); }
.barra-avance { height: 8px; background: var(--track); border-radius: 4px; margin-top: 10px; overflow: hidden; }
.barra-avance div { height: 100%; background: var(--accent); border-radius: 4px; }
.barra-avance.chica { margin: 0; width: 110px; }
.vacio { text-align: center; padding: 36px 20px; color: var(--ink-2); }
.vacio h1 { font-size: 40px; margin: 0; color: var(--navy); }
.vacio h2 { font-size: 16px; }
.chip { display: inline-block; font-size: 11px; background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 10px; font-weight: 600; }
.apagada td, .apagada td a, .apagada { color: var(--ink-3); }
.apagada .titulo-celda a { text-decoration: line-through; }
.apagada .estado, .apagada .prio { opacity: .75; }
.plegable { margin-top: 12px; }
.plegable summary { cursor: pointer; color: var(--ink-2); margin-bottom: 8px; }
.ok { background: var(--verde-bg); color: var(--verde); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.ok.alerta { background: var(--ambar-bg); color: var(--ambar); }
.error { background: var(--rojo-bg); color: var(--rojo); padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.scroll-x { overflow-x: auto; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; }
.tabla-tareas tbody tr.fila-tarea:nth-child(even) td { background: #fafbfe; }
.tabla th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 10px 10px; border-bottom: 1px solid var(--line); background: #fafbfe; white-space: nowrap; }
.tabla td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla-tareas td { font-size: 13px; }
.tabla-tareas .titulo-celda { min-width: 240px; }
.tabla-tareas .obs { color: var(--ink-2); min-width: 220px; max-width: 360px; }
.tabla-tareas .obs-txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tabla-tareas .obs[data-editable] { cursor: text; }
.obs-edit { width: 100%; min-width: 260px; font-size: 13px; }
.mas-obs { border: 0; background: none; padding: 2px 0; margin-top: 2px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; opacity: 0; transition: opacity .15s; }
tr.fila-tarea:hover .mas-obs, tr.fila-tarea:focus-within .mas-obs, .mas-obs:focus-visible { opacity: 1; }
@media (hover: none) { .mas-obs { opacity: 1; min-height: 36px; padding: 0 2px; font-size: 13.5px; } }
.tabla-tareas .titulo-celda, .lista-bitacora li, .panel-cab h2 { overflow-wrap: anywhere; }
.n-notas { white-space: nowrap; }
.fila-fase td { background: var(--navy); color: #fff; font-weight: 600; padding: 7px 10px; font-size: 13px; }
.fila-vencida td:first-child { box-shadow: inset 4px 0 0 var(--rojo); }
.fila-tarea a.abrir { color: var(--ink); font-weight: 500; }
.fila-tarea a.abrir:hover { color: var(--accent); }
.tabla-permisos select { min-width: 90px; }
/* Administración: equipo y externos */
#acceso-equipo, #externos, #aviso { scroll-margin-top: calc(var(--top, 0px) + 12px); }
.resumen-personas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.resumen-personas a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 220px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-decoration: none; }
.resumen-personas a:hover, .resumen-personas a:focus-visible { border-color: var(--accent); }
.resumen-personas b { font-size: 22px; font-weight: 700; }
.resumen-personas span { display: flex; flex-direction: column; font-weight: 600; }
.resumen-personas .nota { font-weight: 400; }
.scroll-x { position: relative; }
.tabla-externos td { vertical-align: middle; }
.tabla-externos .nombre-ext { overflow-wrap: anywhere; max-width: 280px; }
.tabla-externos input.inline { min-width: 220px; }
.tareas-ext span:not(.nota) { display: inline-block; background: var(--accent-soft); color: var(--accent-ink); border-radius: 8px; padding: 1px 8px; margin: 1px 4px 1px 0; font-size: 12.5px; white-space: nowrap; }
.nuevo-externo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--bk-surface-2, #f9fafc); }
.nuevo-externo label { margin: 0; font-size: 12.5px; }
.nuevo-externo input { width: 240px; max-width: none; }
.vacio-ext { padding: 12px 16px; margin: 0; }
@media (max-width: 640px) {
  .resumen-personas a { flex: 1 1 0; min-width: 0; }
  .nuevo-externo label { width: 100%; }
  .nuevo-externo input { width: 100%; }
  /* cada externo como tarjeta: nombre, organización, tareas y acciones a lo ancho */
  .tabla-externos thead { display: none; }
  .tabla-externos, .tabla-externos tbody, .tabla-externos tr, .tabla-externos td { display: block; width: 100%; }
  .tabla-externos tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .tabla-externos td { border: 0; padding: 3px 0; max-width: none; }
  .tabla-externos input.inline { min-width: 0; width: 100%; }
  .tabla-externos .acciones-celda { display: flex; gap: 8px; padding-top: 6px; }
}

/* Estados y prioridades (siempre con texto) */
.estado, .prio { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.estado-pendiente { background: var(--t-pend); color: #374151; }
.estado-en-curso { background: var(--t-curso); color: #1E40AF; }
.estado-bloqueado { background: var(--t-bloq); color: #9A3412; }
.estado-completado { background: var(--t-comp); color: #166534; }
.estado-cancelada { background: #f3f4f6; color: var(--ink-3); text-decoration: line-through; }
.prio-alta { color: var(--rojo); } .prio-media { color: var(--ambar); } .prio-baja { color: var(--ink-3); }
select.estado-sel { font-weight: 600; border-radius: 10px; }
select.estado-sel.estado-pendiente { background: var(--t-pend); color: #374151; }
select.estado-sel.estado-en-curso { background: var(--t-curso); color: #1E40AF; }
select.estado-sel.estado-bloqueado { background: var(--t-bloq); color: #9A3412; }
select.estado-sel.estado-completado { background: var(--t-comp); color: #166534; }
select.estado-sel.estado-cancelada { background: #f3f4f6; color: var(--ink-3); }

/* Formularios */
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); margin-bottom: 10px; }
label.fila { flex-direction: row; align-items: center; }
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]), select, textarea { border: 1px solid var(--line-control); border-radius: 8px; padding: 7px 10px; background: #fff; color: var(--ink); width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { background: #f3f4f6; color: var(--ink-2); }
.inline { padding: 3px 6px; font-size: 13px; width: auto; min-width: 0; }
.inline.corto { width: 96px; }
input[type=date].inline { width: 135px; }
button { cursor: pointer; }
.primario { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-weight: 600; }
.primario:hover { background: var(--accent-ink); }
.boton { background: #fff; color: var(--navy); border: 1px solid var(--line-control); border-radius: 8px; padding: 8px 14px; font-weight: 500; display: inline-block; }
.boton:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.boton.chico { padding: 4px 10px; font-size: 12px; }
.peligro { background: #fff; color: var(--rojo); border: 1px solid var(--rojo); border-radius: 8px; padding: 6px 12px; }
.cerrar { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--ink-3); padding: 4px 8px; }
.login { width: 360px; max-width: 100%; }
.login h1 { font-size: 22px; margin: 0; color: var(--navy); }
.login .sub { margin-bottom: 16px; }
.login .primario { width: 100%; margin-top: 6px; }
.login select.campo { width: 100%; }
.login .sin-clave { margin: 12px 0 0; text-align: center; }
.columna-tarjetas { display: grid; gap: 16px; align-content: start; }
.columna-tarjetas > .tarjeta { margin: 0; }
.form-tarea { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-tarea .ancho-total { grid-column: 1 / -1; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 10px; margin: 0 0 10px; }
legend { font-size: 12px; color: var(--ink-3); padding: 0 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow: auto; }
.chip-check { flex-direction: row; align-items: center; gap: 6px; margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 12px; color: var(--ink); cursor: pointer; }
.chip-check:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.chip-check input { width: auto; }
.filtros { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 12px 16px; }
.filtros label { margin: 0; }
.filtros .crece { flex: 1; min-width: 200px; }
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: 5px 0; border-bottom: 1px solid var(--line); }
.lista-bitacora { list-style: none; padding: 0; margin: 0; }
.lista-bitacora li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lista-bitacora li div { white-space: pre-wrap; }
.acciones-celda { white-space: nowrap; }

/* Panel lateral */
.velo { position: fixed; inset: 0; background: rgba(11,18,32,.45); z-index: 30; }
.panel { position: fixed; top: 0; right: 0; height: 100vh; width: 560px; max-width: 100vw; background: var(--surface); z-index: 31; box-shadow: -8px 0 30px rgba(0,0,0,.18); display: flex; flex-direction: column; }
.panel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--ground); }
.panel-cab h2 { margin: 2px 0 0; font-size: 16px; }
.panel-cuerpo { padding: 16px 20px; overflow: auto; }
.panel section { margin-top: 18px; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy-deep); color: #fff; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: .2s; z-index: 150; pointer-events: none; }
#toast.mostrar { opacity: 1; transform: translateX(-50%); }
#toast.error { background: var(--rojo); }
#toast.alerta { background: var(--ambar); }
#toast.con-accion { display: flex; align-items: center; justify-content: space-between; gap: 14px; pointer-events: auto; max-width: calc(100vw - 32px); }
#toast.con-accion button { flex: none; border: 0; background: none; color: #93c5fd; font: inherit; font-weight: 700; min-height: 40px; padding: 0 6px; cursor: pointer; }
@media (max-width: 720px) { #toast.con-accion { width: calc(100vw - 32px); } }

.tabla-fases td:first-child { white-space: nowrap; }

/* Clave temporal en Administración */
.clave-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.clave-grande { font-size: 18px; background: #fff; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--line); user-select: all; }
.ok-inline { color: var(--verde); }
.acciones-celda .boton { margin-right: 6px; }

/* Impresión: solo la lista de tareas, apaisada */
@media print {
  .aviso-global, .acciones, .filtros, .pie, .velo, .panel, #toast, .migas { display: none !important; }
  body { background: #fff; }
  .contenido { max-width: none; padding: 0; }
  .tarjeta { border: 0; box-shadow: none; }
  .tabla-tareas td, .tabla-tareas th { font-size: 10px; padding: 4px 6px; }
  .fila-fase td { color: #000 !important; background: #e5e7eb !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  select.inline, input.inline { border: 0; background: none; appearance: none; -webkit-appearance: none; padding: 0; font-size: 10px; color: #000; }
  .tabla-tareas .obs { max-width: none; }
  .tabla-tareas .obs-txt { -webkit-line-clamp: unset; display: block; }
  .n-notas { display: none; }
  .scroll-x { overflow: visible; }
  @page { size: A4 landscape; margin: 12mm; }
}
@media (max-width: 800px) {
  .form-tarea { grid-template-columns: 1fr; }
  .panel { width: 100vw; }
}
@media print {
  input[type=date][value=""] { visibility: hidden; }
  thead .nota { display: none; }
}

/* ===== Vista tablero (kanban) ===== */
.k-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.k-espacio { flex: 1; }
.proy-tabs, .vistas { display: flex; gap: 4px; background: #E9ECF1; border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.proy-tabs a, .vistas a { height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #5B6672; white-space: nowrap; display: inline-flex; align-items: center; }
.proy-tabs a:hover, .vistas a:hover { background: #F1F3F6; text-decoration: none; color: var(--ink); }
.proy-tabs a.on, .vistas a.on { background: #fff; color: var(--navy); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
/* Cabecera común de la pantalla de proyecto (misma barra en Tablero, Por fase, Lista y Calendario) */
.cab-proy { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.cab-proy .cab-der { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
@media (max-width: 1100px) { .cab-proy .cab-der { flex-basis: 100%; } }
@media (max-width: 720px) { .cab-proy .cab-der { flex-wrap: wrap; } }
.cab-proy .enlace { height: 34px; padding: 0 10px; display: inline-flex; align-items: center; font: inherit; font-size: 13px; font-weight: 500; color: #5B6672; border-radius: 8px; background: transparent; border: 0; cursor: pointer; text-decoration: none; }
.cab-proy .enlace:hover { color: var(--ink); background: #F1F3F6; text-decoration: none; }
@media (max-width: 720px) { .cab-proy .enlace { display: none; } }   /* en el celular: Indicadores/Exportar/Imprimir no ocupan una fila */
.cab-proy .nota-cab { font-size: 12px; color: #9A3412; font-weight: 600; }
.cab-proy .nota-cab:empty { display: none; }
.cab-proy .primario { height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 600; }
.cab-proy + .sub { margin: -4px 0 12px; }
.vis-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.kpi-k { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 100px; color: inherit; }
.kpi-k b { font-size: 21px; font-weight: 500; }
.kpi-k span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.kpi-k.ancha { min-width: 180px; }
.kpi-k.ancha .barra-avance { margin-top: 6px; }
.kpi-k.kpi-rojo b { color: var(--rojo); }
.kpi-k.critica { flex: 1; min-width: 260px; background: #fff7ed; border-color: #fdba74; }
.kpi-k.critica span { color: #9a3412; }
.kpi-k.critica b { font-size: 14px; font-weight: 500; }
.kpi-k.critica:hover { text-decoration: none; border-color: #f97316; }
.k-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.k-filtros label { margin: 0; }
.k-filtros .crece { flex: 1; min-width: 200px; }
.k-filtros .boton.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.k-segmentos { display: none; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 4px; margin-bottom: 10px; }
.k-segmentos .seg { flex: 1; padding: 9px 4px; border: 0; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.k-segmentos .seg.on { background: var(--navy); color: #fff; }
.k-tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.k-tablero.k-fases { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.k-tablero.k-fases .k-col { flex: 0 0 300px; }
.k-col { background: #e4e8f1; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: box-shadow .15s, background .15s; }
.k-col.col-bloqueado { background: #e9eaee; }
.k-col.col-completado { background: #e3f3e8; }
.k-col.destino { box-shadow: 0 0 0 3px var(--accent); background: var(--accent-soft); }
.k-col.destino-no { opacity: .55; }
.k-col-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.k-col-nombre { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.punto-pendiente { background: var(--e-pend); } .punto-en-curso { background: var(--e-curso); } .punto-bloqueado { background: var(--e-bloq); } .punto-completado { background: var(--e-comp); }
.punto-fase { background: var(--accent); }
.k-lista { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.k-vacio { font-size: 12px; color: var(--ink-3); text-align: center; padding: 16px 8px; border: 1px dashed #c9cfd9; border-radius: 10px; }
.k-agregar { border: 1px dashed #c9cfd9; background: transparent; color: var(--ink-2); border-radius: 10px; padding: 9px; text-align: left; font-size: 13px; }
.k-agregar:hover { border-color: var(--accent); color: var(--accent); }
.k-pie-col { padding: 6px 6px 2px; line-height: 1.5; }
.tarjeta-k { background: #fff; border-radius: 12px; padding: 11px 13px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 1px 2px rgba(11,18,32,.08); border: 1px solid var(--line); cursor: pointer; }
.tarjeta-k:hover, .tarjeta-k:focus-visible { border-color: var(--accent); outline: none; box-shadow: 0 2px 8px rgba(13,116,145,.18); }
.tarjeta-k.k-vencida { border-left: 4px solid var(--rojo); }
.tarjeta-k.k-cerrada { opacity: .8; }
.tarjeta-k.k-cerrada .k-titulo { text-decoration: line-through; color: var(--ink-2); }
.tarjeta-k.arrastrando { opacity: .4; }
.k-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.k-num { margin-left: auto; color: var(--ink-3); font-size: 11px; }
.k-titulo { font-size: 14px; font-weight: 500; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.k-dep { font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.k-dep b { color: var(--ink-2); font-weight: 600; }
.k-nota { font-size: 12px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.k-extra { display: flex; align-items: center; gap: 8px; }
.k-fecha { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; padding: 3px 8px; border-radius: 7px; background: #f3f4f6; color: var(--ink-3); }
.k-fecha.f-vencida { background: var(--rojo-bg); color: var(--rojo); }
.k-fecha.f-pronto { background: var(--ambar-bg); color: var(--ambar); }
.k-fecha.f-ok { background: var(--verde-bg); color: var(--verde); }
.k-fecha.f-hecha { background: var(--verde-bg); color: var(--verde); }
.avs { display: flex; margin-left: 6px; }
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--iniciales-bg, #e4eafc); color: var(--navy); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -6px; }
@media (max-width: 1100px) { .k-tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .k-segmentos { display: flex; }
  .k-tablero { display: flex; flex-direction: column; }
  .k-tablero .k-col { display: none; }
  .k-tablero .k-col.visible { display: flex; }
  .k-tablero.k-fases { overflow-x: visible; }
  .k-tablero.k-fases .k-col { flex: 1 1 auto; }
  .proy-tabs { overflow-x: auto; max-width: 100%; }
  .vistas { overflow-x: auto; max-width: 100%; }
  .kpi-k { min-width: 0; flex: 1; padding: 8px 10px; }
  .kpi-k b { font-size: 18px; }
  .kpi-k.ancha { min-width: 100%; }
}

/* ===== Calendario ===== */
.cal-nav { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cal-nav h2 { margin: 0; font-size: 17px; text-transform: capitalize; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-dia-nombre { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: 4px 6px; }
.cal-dia { background: #fff; border: 1px solid var(--line); border-radius: 10px; min-height: 96px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal-dia.otro-mes { background: transparent; border-style: dashed; opacity: .6; }
.cal-dia.hoy { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-num { font-size: 12px; color: var(--ink-3); }
.cal-dia.hoy .cal-num { color: var(--accent); font-weight: 600; }
.cal-tarea { font-size: 12px; padding: 3px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--navy); line-height: 1.3; cursor: pointer; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cal-tarea.vencida { background: var(--rojo-bg); color: var(--rojo); }
.cal-tarea.hecha { background: var(--verde-bg); color: var(--verde); text-decoration: line-through; }
.cal-sin-fecha { margin-top: 14px; }
@media (max-width: 800px) { .cal { grid-template-columns: 1fr; } .cal-dia-nombre { display: none; } .cal-dia.otro-mes { display: none; } .cal-dia { min-height: 0; } .cal-dia:not(:has(.cal-tarea, .cal-rec)) { display: none; } }
@media (max-width: 800px) {
  .k-cabecera { gap: 8px; }
  .k-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .kpi-k { padding: 6px 8px; min-width: 0; }
  .kpi-k b { font-size: 16px; }
  .kpi-k span { font-size: 10px; letter-spacing: .03em; }
  .kpi-k.ancha { grid-column: span 3; min-width: 0; flex-direction: row; align-items: center; gap: 10px; }
  .kpi-k.ancha .barra-avance { flex: 1; margin: 0; }
  .kpi-k.critica { grid-column: span 3; min-width: 0; }
  .kpi-k.critica b { font-size: 13px; }
  .k-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .k-filtros label { font-size: 12px; }
  .k-filtros .crece { grid-column: span 2; }
  .k-filtros #f-mias { align-self: end; justify-self: start; }
  .k-filtros #f-conteo { display: none; }
}
.solo-movil { display: none; }
@media (max-width: 800px) {
  .solo-movil { display: inline-block; }
  .k-filtros { display: none; }
  .k-filtros.abierto { display: grid; }
  .k-cabecera .boton.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
}

/* ===== Filtros por encabezado (Mis tareas) ===== */
.fila-grupo td { background: var(--navy); color: #fff; font-weight: 600; padding: 7px 10px; font-size: 13px; }
.fila-grupo td a { color: #fff; }
.fila-grupo .n-grupo { color: var(--on-navy-2); font-weight: 400; font-size: 12px; margin-left: 6px; }
th.th-filtrable { cursor: pointer; position: relative; user-select: none; }
th.th-filtrable > span { margin-right: 4px; }
th.th-filtrable svg { vertical-align: middle; color: var(--ink-3); }
th.th-filtrable:hover { color: var(--accent); }
th.th-filtrable.filtrado > span::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 5px; vertical-align: middle; }
th.th-filtrable.ordenado svg { color: var(--accent); }
th.th-filtrable.ordenado[data-dir="desc"] svg { transform: rotate(180deg); }
.th-pop { position: absolute; top: 100%; z-index: 40; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(11,18,32,.16); min-width: 230px; max-width: 320px; padding: 8px 10px 10px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); font-size: 13px; cursor: default; }
.th-pop-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.th-pop-cab b { font-size: 13px; }
.th-pop-x { font-size: 20px; padding: 0 4px; }
.th-pop-orden { display: flex; gap: 6px; margin-bottom: 6px; }
.th-pop-orden button { flex: 1; background: var(--ground); border: 1px solid var(--line); border-radius: 7px; padding: 5px; font-size: 12px; }
.th-pop-orden button:hover { border-color: var(--accent); color: var(--accent); }
.th-pop-todos { border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 4px; }
.th-pop label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 4px 2px; font-size: 13px; color: var(--ink); white-space: nowrap; }
.th-pop label input { width: 15px; height: 15px; }
.th-pop-lista { max-height: 240px; overflow: auto; }
@media (max-width: 800px) { .th-pop { position: fixed; left: 12px !important; right: 12px !important; top: auto; bottom: 12px; max-width: none; } }
.tabla-filtrable.sin-col-proyecto th:first-child, .tabla-filtrable.sin-col-proyecto td[data-col="proyecto"] { display: none; }
.obs-meta { display: block; font-size: 11px; margin-top: 2px; }
.k-nota-meta { font-size: 11px; margin-top: -4px; }
.plegable-obs summary { cursor: pointer; }
.plegable-obs[open] summary { margin-bottom: 4px; }
.plegable-obs .lista-bitacora { max-height: 220px; overflow: auto; }

/* ===== Actividad del equipo ===== */
.tabla-actividad td, .tabla-actividad th { white-space: nowrap; }
.fila-atencion td:first-child { box-shadow: inset 4px 0 0 var(--ambar); }
.barras-dia { display: flex; align-items: flex-end; gap: 4px; height: 170px; padding-top: 8px; }
.barra-dia { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; height: 100%; }
.barra-dia-col { width: 100%; max-width: 28px; height: 100px; display: flex; align-items: flex-end; background: var(--track); border-radius: 4px; }
.barra-dia-rel { width: 100%; background: var(--accent); border-radius: 4px; min-height: 0; }
.barra-dia-n { font-size: 10px; color: var(--ink-2); height: 14px; }
.barra-dia-p { font-size: 11px; color: var(--ink-3); height: 16px; }
.barra-dia-f { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.k-estancada { font-size: 11px; color: var(--ambar); display: flex; align-items: center; gap: 4px; }
.semaforo { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.semaforo-verde { background: #16a34a; } .semaforo-ambar { background: #f59e0b; } .semaforo-rojo { background: #dc2626; }
.puntaje { display: inline-block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.p-bien { background: var(--verde-bg); color: var(--verde); } .p-medio { background: var(--ambar-bg); color: var(--ambar); } .p-mal { background: var(--rojo-bg); color: var(--rojo); }
.fila-total td { font-weight: 600; background: #fafbfe; }
.tabla-actividad td, .tabla-actividad th { padding-left: 8px; padding-right: 8px; }
.chip-externo { border-style: dashed; }

/* Celular: al final para que gane a las reglas generales de controles (misma especificidad) */
@media (max-width: 800px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .migas a, .aviso-global a { padding: 8px 4px; display: inline-block; }
  .panel { width: 100vw; }
  .form-tarea { grid-template-columns: 1fr; }
  .inline { padding: 8px 10px; font-size: 16px; }
  input:not([type=checkbox]), select, textarea { font-size: 16px; }
  .chip-check { padding: 8px 10px; }
  .chip-check input { width: 18px; height: 18px; }
  .encabezado { align-items: flex-start; }
  body.con-cascara .aviso-global { margin-left: 0; }
}

/* ===== Teléfono: cada fila de tareas es una tarjeta (Mis tareas, Lista y «Abiertas sin fecha» del Calendario).
   Arriba el número y la fase, luego el título a lo ancho, los responsables, estado y fecha, y al final el último avance. ===== */
@media (max-width: 720px) {
  .scroll-x:has(> .tabla-tareas) { overflow: visible; }
  .tabla-tareas, .tabla-tareas tbody { display: block; width: auto; min-width: 0; }
  .tabla-tareas thead { display: none; }
  /* Mis tareas: los encabezados que filtran u ordenan quedan como botones sobre las tarjetas */
  .tabla-filtrable thead { display: block; border-bottom: 1px solid var(--line); }
  .tabla-filtrable thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
  .tabla-filtrable thead th { display: none; }
  .tabla-filtrable thead th.th-filtrable { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-control); border-radius: 999px; background: #fff; position: static; }
  .tabla-filtrable.sin-col-proyecto thead th:first-child { display: none; }
  .tabla-tareas tr.fila-grupo, .tabla-tareas tr.fila-fase { display: block; }
  .tabla-tareas tr.fila-grupo > td, .tabla-tareas tr.fila-fase > td { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .tabla-tareas tr.fila-tarea { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
  .tabla-tareas tr.fila-tarea.fila-vencida { box-shadow: inset 4px 0 0 var(--rojo); }
  .tabla-tareas tr.fila-tarea > td { order: 5; display: block; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
  .tabla-tareas tr.fila-tarea > td:empty { display: none; }
  .tabla-tareas tr.fila-tarea > td.num { order: 0; font-size: 13px; color: var(--ink-3); }
  .tabla-tareas tr.fila-tarea > td.num::before { content: "#"; }
  .tabla-tareas tr.fila-tarea > td.col-fase, .tabla-tareas tr.fila-tarea > td[data-col="proyecto"] { order: 1; flex: 1; font-size: 13px; color: var(--ink-3); }
  .tabla-tareas tr.fila-tarea > td.titulo-celda { order: 2; flex: 1 1 100%; font-weight: 600; font-size: 15.5px; line-height: 1.35; }
  .tabla-tareas tr.fila-tarea > td.titulo-celda a { color: var(--ink); }
  .tabla-tareas tr.fila-tarea > td.col-resp, .tabla-tareas tr.fila-tarea > td[data-campo="resp"] { order: 3; flex: 1 1 100%; font-size: 13px; color: var(--ink-2); }
  .tabla-tareas tr.fila-tarea > td.col-estado, .tabla-tareas tr.fila-tarea > td.col-fecha, .tabla-tareas tr.fila-tarea > td.col-rec { order: 4; }
  .tabla-tareas tr.fila-tarea > td.col-prio, .tabla-tareas tr.fila-tarea > td.col-dias { order: 6; font-size: 13px; font-family: inherit; }
  .tabla-tareas tr.fila-tarea > td.col-dias::after { content: " d"; }
  .tabla-tareas tr.fila-tarea > td.obs, .tabla-tareas tr.fila-tarea > td.col-av { order: 9; flex: 1 1 100%; font-size: 13.5px; color: var(--ink-2); }
  .tabla-tareas tr.fila-tarea > td.obs:not([data-editable]):has(.obs-txt:empty) { display: none; }
  .tabla-tareas tr.fila-tarea select.inline, .tabla-tareas tr.fila-tarea input.inline { height: 38px; font-size: 16px; padding: 0 10px; border: 1px solid var(--line-control); border-radius: 999px; background-color: #fff; width: auto; max-width: 170px; }
  .tabla-tareas tr.fila-tarea select.estado-sel { max-width: 136px; }
  .tabla-tareas tr.fila-tarea input[type=date].inline { max-width: 156px; }
  .tabla-tareas tr.fila-tarea select.prio-sel { max-width: 100px; }
}
/* Calendario: en el teléfono es una lista de días, así que cada día lleva su nombre («Vie 6 nov») */
.cal-dn, .cal-mes { display: none; }
.cal-mes.siempre { display: inline; }
@media (max-width: 800px) {
  .cal-dn, .cal-mes { display: inline; }
  .cal-dia { padding: 10px 10px 8px; }
  .cal-num { font-size: 13px; font-weight: 600; color: var(--ink-2); }
}