.ppto-head { align-items: flex-end; }
.ppto-head h1 { margin-bottom: 2px; }
.ppto-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.ppto-actions form { display: flex; gap: 8px; align-items: flex-end; }
.ppto-actions label { margin: 0; }
.ppto-actions input[type="number"] { width: 88px; }
.ppto-toggle { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0 12px; }
.ppto-grid th.fest { background: #fee2e2; color: #991b1b; }
.ppto-grid th.fest small { display: block; font-weight: 600; max-width: 72px; white-space: normal; }
.ppto-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ppto-inline input[type="text"], .ppto-inline input:not([type="hidden"]):not([type="checkbox"]) { min-width: 160px; }

.ppto-job { margin-bottom: 12px; }
.ppto-job-track { height: 8px; background: #e2e8f0; border-radius: 99px; margin-top: 8px; overflow: hidden; }
.ppto-job-bar { height: 8px; width: 0; background: #1e3a8a; border-radius: 99px; }

.ppto-nav {
  display: flex;
  gap: 0;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.ppto-nav a {
  display: block;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 14px;
  min-height: 0;
  white-space: nowrap;
  box-shadow: none;
}
.ppto-nav a strong { font-size: 13px; font-weight: 600; color: #64748b; }
.ppto-nav a span { display: none; }
.ppto-nav a:hover { background: transparent; border-color: transparent; }
.ppto-nav a:hover strong { color: #0f172a; }
.ppto-nav a.on { border-color: transparent; border-bottom-color: #1e3a8a; background: transparent; box-shadow: none; }
.ppto-nav a.on strong { color: #1e3a8a; }

.ppto-sec { margin: 0 0 10px; }
.ppto-sec h2 { margin: 0 0 4px; font-size: 16px; }
.ppto-sec p { margin: 0; }

.ppto-alert {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  color: #334155;
  font-size: 13px;
}
.ppto-alert.warn { background: #fffbeb; border-color: #fcd34d; }

.ppto-scroll { overflow: auto; max-width: 100%; max-height: 70vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.ppto-scroll.abierto { max-height: none; }
.ppto-grid { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.ppto-accion { min-width: 260px; max-width: 420px; white-space: normal; }
.ppto-grid th, .ppto-grid td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: middle; }
.ppto-grid thead th { background: #f8fafc; font-size: 11px; font-weight: 700; color: #475569; white-space: nowrap; letter-spacing: .04em; text-transform: uppercase; }
.ppto-grid .ppto-groups th {
  background: #e2e8f0;
  color: #334155;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid #cbd5e1;
}
.ppto-grid tfoot td { font-weight: 700; background: #f8fafc; border-top: 1px solid #cbd5e1; }
.ppto-grid input[type="number"], .ppto-grid input[type="text"], .ppto-grid select { width: 100%; min-width: 64px; }
.ppto-grid input[type="checkbox"] { width: auto; }
.ppto-grid .num, .ppto-grid td.num input { text-align: right; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
.ppto-grid td.bad, .ppto-grid td.pos { color: #991b1b; background: #fff1f2; font-weight: 600; }
.ppto-grid td.ok, .ppto-grid td.neg { color: #166534; background: #f0fdf4; font-weight: 600; }
.ppto-grid tr.ocioso td { color: #64748b; }
.ppto-grid tr.vacio td, .ppto-grid td.vacio { color: #94a3b8; font-weight: 500; }
.ppto-grid th.sticky, .ppto-grid td.sticky {
  position: sticky; left: 0; z-index: 1; background: #fff;
  box-shadow: 1px 0 0 var(--line);
}
.ppto-grid thead th.sticky { z-index: 2; background: #f8fafc; }
.ppto-grid tr.ocioso td.sticky { background: #fff; }
.ppto-act { text-align: center; width: 52px; }
.ppto-nuevo td { background: #f8fafc; }

.ppto-form { display: grid; gap: 12px; }
.ppto-block { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ppto-block h3 { margin: 0 0 4px; font-size: 15px; }
.ppto-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; margin-top: 10px; }
.ppto-fields label, .ppto-block > label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #475569; margin: 0; }
.ppto-fields input, .ppto-fields select, .ppto-block > label select { font: inherit; font-weight: 500; color: #0f172a; }
.ppto-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ppto-switch {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  background: #fff; margin: 0; cursor: pointer;
}
.ppto-switch strong { display: block; font-size: 13px; color: #0f172a; }
.ppto-switch small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.ppto-switch input { margin-top: 2px; }

.ppto-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ppto-kpis .kpi-box { min-width: 120px; }
.ppto-chart { height: 280px; }
.ppto-bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  height: 160px;
  margin: 8px 0 12px;
  align-items: end;
}
.ppto-bar { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.ppto-bar span {
  flex: 1; width: 100%; display: flex; align-items: flex-end;
  background: #f1f5f9; border-radius: 6px; overflow: hidden;
}
.ppto-bar i { display: block; width: 100%; background: #1e3a8a; border-radius: 6px 6px 0 0; min-height: 4px; }
.ppto-bar b { font-size: 11px; margin-top: 4px; }
.ppto-bar small { font-size: 10px; color: #475569; text-align: center; line-height: 1.2; }
.ppto-tipos { display: grid; gap: 10px; }
.ppto-tipo { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #fff; }
.ppto-tipo.nuevo { background: #f8fafc; }
.ppto-tipo h3 { margin: 0 0 8px; font-size: 14px; }
.ppto-tipo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.ppto-tipo-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #475569; margin: 0; }
.ppto-tipo-grid input, .ppto-tipo-grid select { font: inherit; font-weight: 500; color: #0f172a; }
.ppto-check { flex-direction: row !important; align-items: center; margin-top: 18px !important; }
.ppto-tipo details { margin-top: 8px; }
.ppto-tipo summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #1e3a8a; }
.ppto-mes-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ppto-mes-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: #475569; margin: 0; }
.ppto-mes-grid input { font: inherit; font-weight: 500; color: #0f172a; }
.ppto-ejemplo {
  background: #f8fafc; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; overflow: auto; white-space: pre;
}
textarea[name="csv"] { width: 100%; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; }
.ppto-note { background: #fffbeb; border-left: 4px solid #d97706; padding: 10px 12px; border-radius: 0 8px 8px 0; margin-top: 12px; }
.ppto-note strong { display: block; margin-bottom: 4px; }
.ppto-note p { margin: 0; }

.ppto-meses { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.ppto-meses a {
  text-decoration: none; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 600; color: #334155;
}
.ppto-meses a.on { background: #1e3a8a; color: #fff; border-color: #1e3a8a; }

.ppto-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ppto-mes { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; }
.ppto-mes.on { border-color: #1e3a8a; box-shadow: inset 0 0 0 1px #1e3a8a; }
.ppto-mes h3 { margin: 0 0 6px; font-size: 13px; }
.ppto-mes h3 a { text-decoration: none; color: #1e3a8a; }
.ppto-mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: 10px; text-align: center; }
.ppto-mini > span { color: #94a3b8; font-weight: 600; }
.ppto-chip { display: block; border-radius: 3px; padding: 1px 0; color: #334155; background: #f1f5f9; }
.ppto-chip.vacio { background: transparent; }
.ppto-chip.t-LABORAL { background: #e0e7ff; color: #1e3a8a; }
.ppto-chip.t-SABADO { background: #ffedd5; color: #9a3412; }
.ppto-chip.t-DOMINGO { background: #fce7f3; color: #9d174d; }
.ppto-chip.t-FESTIVO, .ppto-chip.fest { background: #fee2e2; color: #991b1b; }
.ppto-chip.t-ESPECIAL { background: #ede9fe; color: #5b21b6; }
.ppto-chip.marca-fest, .ppto-dia.marca-fest { box-shadow: inset 0 0 0 2px #991b1b; }
.ppto-dia.t-LABORAL { background: #e0e7ff; }
.ppto-dia.t-SABADO { background: #ffedd5; }
.ppto-dia.t-DOMINGO { background: #fce7f3; }
.ppto-dia.t-FESTIVO { background: #fee2e2; }
.ppto-dia.t-ESPECIAL { background: #ede9fe; }
.ppto-chip.t-ESTIVAL { background: #ccfbf1; color: #115e59; }

.ppto-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; font-size: 11px; color: #475569; }
.ppto-legend i { display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 4px; font-style: normal; font-weight: 700; text-align: center; }

.ppto-alma { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ppto-alma > strong { font-size: 11px; color: #64748b; text-align: center; }
.ppto-dia { border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; min-height: 78px; }
.ppto-dia.finde { background: #f8fafc; }
.ppto-dia.fest { background: #fef2f2; border-color: #fecaca; }
.ppto-dia strong { display: block; font-size: 13px; }
.ppto-dia select, .ppto-dia input[type="text"] { width: 100%; font-size: 11px; }
.ppto-dia label { display: flex; gap: 4px; align-items: center; font-size: 11px; margin: 3px 0 0; font-weight: 500; color: #475569; }
.ppto-dia-extra { display: none; margin-top: 4px; }
.ppto-dia-extra.on { display: block; }

.celda-trabaja { background: #dbeafe; color: #1e3a8a; font-weight: 700; text-align: center; }
.celda-libre { color: #64748b; font-weight: 700; text-align: center; }
.celda-na { color: #cbd5e1; text-align: center; }
.celda-sind { background: #e2e8f0; color: #475569; font-weight: 700; text-align: center; }
.celda-finde { box-shadow: inset 0 -2px 0 #fecdd3; }
.ppto-grid th.finde { background: #fff1f2; }

@media (max-width: 1100px) {
  .ppto-nav { grid-template-columns: 1fr 1fr; }
  .ppto-fields, .ppto-switches, .ppto-year, .ppto-tipo-grid, .ppto-mes-grid { grid-template-columns: 1fr 1fr; }
  .ppto-bars { grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; }
  .ppto-bar { height: 120px; }
}
@media (max-width: 720px) {
  .ppto-nav, .ppto-fields, .ppto-switches, .ppto-year, .ppto-tipo-grid, .ppto-bars { grid-template-columns: 1fr; }
  .ppto-alma { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}