/* Planificación de proyectos (2026-10-24). Solo tokens de app.css (:root), como el calendario de vacaciones.
   Más grande y claro (Carlos, 2026-10-24): ocupa el ancho y el alto disponibles, barras de dos líneas. */
#automation-planning{--ap-cal-h:max(380px,calc(100dvh - var(--ap-top,460px) - 56px));min-width:0;max-width:100%;font-variant-numeric:tabular-nums}
/* Solo con Planificación abierta: la vista usa todo el ancho de la pantalla (las demás siguen a 1500 px). */
#view-automatizacion:has(#automation-planning:not([hidden])){max-width:none;padding-inline:clamp(16px,2.5vw,40px);padding-bottom:24px}
#automation-planning .aw-heading{margin-bottom:14px}
#automation-planning .aw-heading .aw-eyebrow{display:none}
#automation-planning .aw-heading h3{font-size:20px;margin:0 0 4px}
#automation-planning .aw-heading p{font-size:14px}
.ap-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ap-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.ap-tools .button{min-height:44px}
.ap-tools [data-plan-step]{font-size:22px;width:44px;padding:0}
.ap-range{margin:0 0 0 10px;font-size:18px;font-weight:750;color:var(--text)}
.ap-toolbar .segmented>button{min-height:44px;font-size:14px;padding:0 16px}
.ap-selecting{scroll-margin-top:90px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border:1px solid var(--info);border-left:4px solid var(--info);border-radius:8px;background:var(--info-soft);color:var(--text);font-size:14px;font-weight:650}
.ap-selecting>div{display:flex;gap:8px;flex-wrap:wrap}
.ap-selecting .button{min-height:44px}
.ap-layout{display:grid;grid-template-columns:minmax(260px,300px) minmax(0,1fr);gap:16px;align-items:start;min-width:0}
.ap-calendar{min-width:0}
.ap-unscheduled{min-width:0;max-height:calc(var(--ap-cal-h) + 34px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:8px;background:var(--surface);padding:14px}
.ap-unscheduled h4{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:16px}
.ap-unscheduled h4 span{min-width:24px;padding:1px 8px;border-radius:999px;background:var(--line-inner);font-size:13px;text-align:center}
.ap-unscheduled>p{margin:0 0 12px;font-size:13px;line-height:1.4;color:var(--muted)}
.ap-unscheduled ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ap-item{display:grid;gap:3px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--line-control);border-left:4px solid var(--info);border-radius:6px;background:var(--surface);color:var(--text);font:inherit;text-align:left;cursor:grab;user-select:none;touch-action:manipulation}
.ap-item.ap-in_progress{border-left-color:var(--green)}
.ap-item[data-open-automation]{cursor:pointer}
.ap-item strong{font-size:14px}
.ap-item span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;font-weight:650;line-height:1.3;overflow:hidden}
.ap-item small{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-item .ap-item-commit{color:var(--text)}
.ap-item:hover{background:var(--row-hover)}
.ap-item[aria-pressed=true]{background:var(--info-soft);box-shadow:inset 0 0 0 2px var(--info)}
.ap-item:focus-visible,.ap-bar:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.ap-empty{font-size:13px;color:var(--muted);margin:0}
.ap-scroll{max-width:100%;overflow-x:auto;overflow-y:hidden;display:flex;flex-direction:column;min-height:var(--ap-cal-h);border:1px solid var(--line);border-radius:8px;background:var(--surface);overscroll-behavior-x:contain}
.ap-scroll:focus-visible{outline:3px solid var(--text);outline-offset:2px}
.ap-grid{--ap-col:28px;display:flex;flex-direction:column;flex:1 0 auto;min-width:calc(var(--ap-days) * var(--ap-col));user-select:none}
.ap-grid.ap-month-view{--ap-col:34px}
.ap-row{display:grid;grid-template-columns:repeat(var(--ap-days),minmax(0,1fr));position:relative;min-height:44px;overflow:clip;overflow-clip-margin:6px}
.ap-row>*{grid-row:1}
.ap-row.ap-project{min-height:64px}
.ap-months{min-height:28px;background:var(--thead)}
.ap-month{position:sticky;left:0;justify-self:start;align-self:end;min-width:min(200px,100%);padding:6px 16px 0 8px;background:var(--thead);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text);white-space:nowrap;overflow:visible;z-index:1}
.ap-heads{min-height:50px;border-bottom:1px solid var(--line-control);background:var(--thead)}
.ap-head{display:grid;place-items:center;align-content:center;gap:2px;padding:4px 0;font-size:12px;color:var(--muted);border-left:1px solid var(--line-inner)}
.ap-head b{font-size:15px;line-height:1.2;color:var(--text)}
.ap-head small{font-size:12px;font-weight:650;text-transform:uppercase}
.ap-day{border-left:1px solid var(--line-inner);border-bottom:1px solid var(--line-inner)}
.ap-weekend,.ap-day.ap-weekend{background:color-mix(in srgb,var(--line-inner) 55%,var(--surface))}
.ap-head.ap-weekend b,.ap-head.ap-weekend small{color:var(--muted)}
/* Semanas y meses separados con una raya más marcada. */
.ap-week-start{border-left:2px solid var(--line-control)}
.ap-month-start{border-left:2px solid var(--muted)}
.ap-today,.ap-day.ap-today{background:var(--soft)}
.ap-day.ap-today{box-shadow:inset 3px 0 0 var(--green)}
.ap-head.ap-today{box-shadow:inset 0 -3px 0 var(--green)}
.ap-head.ap-today small{color:var(--green)}
.ap-head.ap-today b{min-width:28px;padding:1px 6px;border-radius:999px;background:var(--green);color:var(--surface);text-align:center}
.ap-drop-target{background:var(--info-soft)!important;box-shadow:inset 0 0 0 2px var(--info)!important}
.ap-choosing .ap-row:not(.ap-months){cursor:pointer}
.ap-choosing .ap-day:hover{background:var(--info-soft)}
/* Barra de dos líneas: número y cliente arriba; trabajo y fechas debajo. */
.ap-bar{container-type:inline-size;position:relative;z-index:2;align-self:center;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:center;column-gap:8px;row-gap:2px;min-width:0;height:52px;margin:0 2px;padding:0 14px 0 10px;border:1px solid transparent;border-radius:6px;font:inherit;font-size:14px;line-height:1.25;text-align:left;white-space:nowrap;overflow:hidden;cursor:pointer;touch-action:manipulation}
.ap-bar[data-plan-bar]{cursor:grab}
.ap-dragging .ap-bar[data-plan-bar],.ap-dragging .ap-item{cursor:grabbing}
.ap-bar strong{font-size:14px;font-weight:800}
.ap-bar>span:not(.ap-handle){min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.ap-bar>small,.ap-outside>small{grid-column:1 / -1;display:flex;gap:10px;min-width:0;font-size:14px;font-weight:500}
.ap-bar-desc,.ap-bar-away,.ap-bar-dates{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Si falta sitio, se encoge antes el trabajo, después el compromiso y lo último las fechas. */
.ap-bar-desc{flex:0 100000 auto;min-width:6ch}
.ap-bar-away{flex:0 1000 auto;font-weight:700}
.ap-bar-away::before{content:'· '}
.ap-bar-dates{flex:0 1 auto;font-weight:700}
@container (max-width:240px){.ap-bar-desc{display:none}}
@container (max-width:360px){.ap-bar-away{display:none}}
.ap-planned{background:var(--info);border-color:var(--info);color:var(--surface)}
.ap-in_progress{background:var(--green);border-color:var(--green);color:var(--surface)}
.ap-pending_validation{background:var(--amber-soft);border-color:var(--amber);color:var(--amber)}
.ap-validated{background:var(--line-inner);border-color:var(--line-control);color:var(--text)}
.ap-item.ap-planned,.ap-item.ap-in_progress{background:var(--surface);color:var(--text);border-color:var(--line-control)}
.ap-item.ap-planned{border-left-color:var(--info)}
.ap-item.ap-in_progress{border-left-color:var(--green)}
.ap-bar.ap-cut-start{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:0}
.ap-bar.ap-cut-end{border-top-right-radius:0;border-bottom-right-radius:0;margin-right:0}
/* Termina después de la fecha comprometida: tope rojo al final, se ve sobre cualquier color. */
.ap-bar.ap-late{box-shadow:inset -5px 0 0 var(--red);padding-right:20px}
/* Hueco para la flecha roja del compromiso fuera del periodo. */
.ap-bar.ap-room-end{padding-right:24px}
.ap-bar.ap-room-start{padding-left:20px}
#automation-planning .ap-bar.ap-narrow{display:flex;padding:0;justify-content:center}
.ap-bar[data-preview]::after{content:attr(data-preview);position:absolute;inset:0;display:grid;place-items:center;background:inherit;font-size:14px;font-weight:800}
.ap-handle{position:absolute;top:0;right:0;bottom:0;width:12px;cursor:ew-resize;background:linear-gradient(90deg,transparent 0 4px,currentColor 4px 5px,transparent 5px 7px,currentColor 7px 8px,transparent 8px);opacity:.75}
.ap-outside{align-self:center;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;row-gap:2px;min-width:0;padding:0 8px;font-size:14px;line-height:1.25;color:var(--text);white-space:nowrap;overflow:hidden;pointer-events:none}
.ap-outside>span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700}
/* Fecha comprometida: raya roja de arriba abajo en la fila, por encima de la barra. */
.ap-commit{position:relative;z-index:3;justify-self:end;width:3px;margin-right:-1px;background:var(--red);box-shadow:0 0 0 1px var(--surface);pointer-events:none}
.ap-commit::before{content:'';position:absolute;top:0;right:-6px;border:7px solid transparent;border-top-color:var(--red)}
/* Fuera del periodo que se ve: una flecha roja en el borde de la fila. */
.ap-commit-edge{position:relative;z-index:3;align-self:center;width:0;height:0;border:8px solid transparent;pointer-events:none}
.ap-commit-after{justify-self:end;border-right:0;border-left:9px solid var(--red)}
.ap-commit-before{justify-self:start;border-left:0;border-right:9px solid var(--red)}
/* La última fila rellena el alto con las columnas de días; recibe lo que se suelta. */
.ap-drop{flex:1 0 64px}
.ap-drop-text{align-self:start;justify-self:start;position:sticky;left:0;z-index:1;margin:14px 0 0 8px;padding:6px 10px;border-radius:6px;background:var(--surface);font-size:14px;color:var(--muted);pointer-events:none}
.ap-drop-text:empty{display:none}
.ap-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.ap-legend span{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:var(--muted)}
.ap-legend span::before{content:'';width:18px;height:12px;border-radius:3px;border:1px solid var(--line-control)}
.ap-legend .ap-planned::before{background:var(--info);border-color:var(--info)}
.ap-legend .ap-in_progress::before{background:var(--green);border-color:var(--green)}
.ap-legend .ap-pending_validation::before{background:var(--amber-soft);border-color:var(--amber)}
.ap-legend .ap-validated::before{background:var(--line-inner)}
.ap-legend .ap-legend-commit::before{width:3px;border:0;border-radius:0;background:var(--red)}
.ap-legend .ap-legend-today::before{background:var(--green);border-color:var(--green);border-radius:999px}
.ap-ghost{position:fixed;top:0;left:0;z-index:1000;padding:8px 12px;border-radius:6px;background:var(--navy);color:var(--surface);font-size:14px;font-weight:700;box-shadow:var(--shadow);pointer-events:none;white-space:nowrap}
.ap-dialog .aw-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ap-dialog footer{align-items:end;flex-wrap:wrap}
.ap-dialog-secondary{display:flex;gap:8px;flex-wrap:wrap;flex:1 1 100%}
.ap-dialog-secondary:empty{display:none}
.ap-dialog footer [data-ap-close].button{margin-left:auto}
.ap-dialog footer [type=submit]{white-space:nowrap}
/* Plazo y horas previstas en la ficha del proyecto (2026-10-24). */
.automation-workspace-plan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:8px 0 0;font-size:12px;color:var(--muted)}
.automation-workspace-plan b{color:var(--text)}
.automation-workspace-plan .overdue{color:var(--red);font-weight:700}
.automation-workspace-plan .small-action{min-height:36px}
.automation-workspace-head-action{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:10px 0 0;font-size:12px;color:var(--muted)}
.automation-task-plan{color:var(--muted);font-size:12px}
.automation-task-meta:has(.automation-task-plan,[data-automation-task-plan]){justify-content:flex-start;align-items:center;flex-wrap:wrap}
.ap-dialog .aw-warning{color:var(--amber);font-weight:700}
.ap-dialog [data-ap-error]{color:var(--red);font-weight:700}
@media (max-width:1100px){
  .ap-layout{grid-template-columns:minmax(0,1fr)}
  .ap-unscheduled{max-height:none;overflow-y:visible}
  .ap-unscheduled ul{display:flex;overflow-x:auto;gap:8px;padding-bottom:4px;overscroll-behavior-x:contain}
  .ap-unscheduled li{flex:0 0 min(240px,72vw)}
}
@media (max-width:600px){
  #automation-planning{--ap-cal-h:360px}
  .ap-toolbar{align-items:stretch}
  .ap-range{flex-basis:100%;margin:4px 0 0}
  .ap-toolbar .segmented{width:100%}
  .ap-toolbar .segmented>button{flex:1}
  /* En el móvil la entradilla ya dice cómo planificar. */
  .ap-unscheduled>p{display:none}
  .ap-unscheduled li{flex-basis:min(200px,64vw)}
  /* Cada día mide lo que un dedo (44 px): el calendario se desplaza dentro de su caja. */
  .ap-grid,.ap-grid.ap-month-view{--ap-col:var(--ui-touch-target,44px)}
  .ap-dialog .aw-fields{grid-template-columns:minmax(0,1fr)}
  .ap-dialog footer{flex-direction:column;align-items:stretch}
  .ap-dialog footer .button{width:100%}
}
/* En escritorio caben las 6 semanas o el mes sin desplazar (prueba a 1440 px). */
@media (min-width:1101px){
  .ap-grid{--ap-col:18px}
  .ap-grid.ap-month-view{--ap-col:24px}
  .ap-grid:not(.ap-month-view) .ap-head b{font-size:12px;letter-spacing:-.04em}
  .ap-grid:not(.ap-month-view) .ap-head.ap-today b{min-width:0;padding:1px 2px}
  .ap-grid:not(.ap-month-view) .ap-head small{font-size:11px}
}
/* Entre 1101 y 1599 px «Sin fecha» cede algo de ancho para que los 42 días no se peguen. */
@media (min-width:1101px) and (max-width:1599px){
  .ap-layout{grid-template-columns:minmax(240px,260px) minmax(0,1fr)}
}
@media (min-width:1600px){
  .ap-grid:not(.ap-month-view) .ap-head b{font-size:14px;letter-spacing:0}
  .ap-grid:not(.ap-month-view) .ap-head small{font-size:12px}
}
@media (min-width:1800px){
  .ap-layout{grid-template-columns:minmax(280px,320px) minmax(0,1fr)}
}