/* V0.12 · Disponibilidad y Guardias: vista anual tipo Excel, todavía ficticia. */
.yearly-roster-page{display:grid;gap:13px;max-width:1500px}
.yearly-title-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px}
.yearly-title-row h1{font-size:26px;margin:4px 0 5px;color:#263648}
.yearly-title-row .subtext{max-width:680px}
.yearly-title-row .badge{white-space:nowrap}
.yearly-notice{font-size:11px;line-height:1.6;padding:10px 12px;border-radius:9px;background:#fffcf5;border:1px solid #efe5cb;color:#766d55}
.yearly-notice strong{color:#71562c}
.yearly-controls{padding:13px 15px;display:grid;gap:12px}
.yearly-year-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yearly-year-picker label{display:flex;align-items:center;gap:7px;color:#63748a;font-size:11px;font-weight:750}
.yearly-year-picker .input{max-width:92px;width:92px;font-size:13px;font-weight:800;text-align:center;min-height:35px}
.yearly-year-picker .btn{min-height:35px}
.yearly-filter-controls{display:flex;flex-wrap:wrap;align-items:end;gap:9px 12px}
.yearly-filter-controls label{flex:1 1 175px;min-width:126px;display:grid;gap:4px;font-size:10px;font-weight:750;color:#657589}
.yearly-filter-controls .select{width:100%;min-height:36px;font-size:11px}
.yearly-filter-controls>.btn{min-height:36px;flex:0 0 auto}
.yearly-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.yearly-kpis>div{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:#fff;border:1px solid #e0e6ee;border-radius:9px;min-width:0}
.yearly-kpis strong{font-size:23px;color:#23364e;line-height:1.1;font-variant-numeric:tabular-nums}
.yearly-kpis span{font-size:10px;color:#7b8a9c;font-weight:700}
.yearly-main-layout{display:grid;grid-template-columns:minmax(600px,1fr) minmax(310px,365px);gap:15px;align-items:start;min-width:0}
.yearly-calendar-pane{min-width:0;border:1px solid #e0e6ee;border-radius:10px;background:#fff;padding:15px}
.yearly-calendar-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:0 0 13px}
.yearly-calendar-head h2{font-size:14px;margin:0;color:#2d435c}
.yearly-calendar-head>span{display:flex;align-items:center;gap:7px;font-size:9px;color:#748399}
.yearly-key-today{display:inline-block;width:10px;height:10px;border-radius:2px;border:2px solid #133e91}
.yearly-key-pending{display:inline-block;width:10px;height:10px;border:1px solid #cbd5df;background:#fff}
.yearly-month-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px;align-items:start}
.yearly-month{min-width:0;overflow:hidden}
.yearly-month h3{background:#bdd9f0;color:#21517b;text-align:center;font-size:11px;font-weight:850;margin:0 0 2px;padding:4px 5px;text-transform:capitalize}
.yearly-month h3 small{font-size:10px;font-weight:700}
.yearly-week-row{display:grid;grid-template-columns:19px repeat(7,minmax(0,1fr));gap:1px;margin-bottom:1px;min-width:0}
.yearly-week-head{margin-bottom:3px}
.yearly-weekday{min-width:0;font-size:9px;font-weight:800;color:#2b6096;text-align:center;padding:2px 0}
.yearly-weekno{display:flex;align-items:center;justify-content:center;min-width:0;color:#93b1d0;font-size:8px;font-variant-numeric:tabular-nums}
.yearly-outside{display:block;min-height:22px}
.yearly-day{display:flex;align-items:center;justify-content:center;position:relative;min-width:0;width:100%;min-height:22px;height:22px;padding:0;border:1px solid #e8eef5;border-radius:1px;cursor:pointer;font-size:9px;line-height:1;font-weight:650;color:var(--roster-ink,#53647b);background:var(--roster-fill,#fff);font-variant-numeric:tabular-nums}
.yearly-day.is-assigned{font-weight:850;border-color:rgba(43,66,91,.08)}
.yearly-day.is-weekend:not(.is-assigned){background:#f1f3f6}
.yearly-day:hover{outline:2px solid #4d90c1;outline-offset:-1px;z-index:1}
.yearly-day:focus-visible{outline:3px solid #1a559c;outline-offset:-1px;z-index:3}
.yearly-day.is-today{outline:2px solid #174b97;outline-offset:-2px;z-index:2}
.yearly-day.is-picked{box-shadow:inset 0 0 0 2px #142b47,0 0 0 1px #fff;z-index:3}
.yearly-day small{position:absolute;right:0;bottom:0;font-size:7px;line-height:1;color:inherit}
.yearly-footnote{font-size:10px;color:#8895a4;line-height:1.55;margin:14px 0 1px}
.yearly-aside{display:grid;gap:12px;min-width:0}
.yearly-day-detail{padding:14px;background:#f5f9fd;border:1px solid #d6e3ef;border-radius:9px;display:grid;gap:8px;min-width:0}
.yearly-day-detail h3{font-size:13px;text-transform:capitalize;color:#304b69;margin:0}
.yearly-day-detail p{font-size:11px;color:#7c8b9d;margin:0;line-height:1.5}
.yearly-day-detail-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px;background:#fff;border:1px solid #e1e8ef;border-radius:7px}
.yearly-day-detail-line>span:nth-child(2){flex:1 1 100px;min-width:0}
.yearly-day-detail-line strong{display:block;font-size:11px;color:#3d4e61}
.yearly-day-detail-line small{display:block;font-size:9px;color:#8291a2;line-height:1.4;margin-top:2px}
.yearly-shift-status{font-size:9px;color:#8b620e;background:#fff4d5;border-radius:5px;padding:4px 5px}
.yearly-shift-status.done{color:#32764a;background:#e8f6ed}
.yearly-summary{padding:15px;min-width:0}
.yearly-section-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;align-items:center}
.yearly-section-head h2{font-size:14px;color:#31455d;margin:0}
.yearly-section-head small{font-size:10px;color:#8391a1}
.yearly-summary-hint{font-size:10px;line-height:1.55;color:#8c98a7;margin:9px 0 12px}
.yearly-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 8px;margin:12px 0 14px}
.yearly-legend-person{display:flex;align-items:center;gap:5px;font-size:10px;min-width:0;border:1px solid #edf0f4;padding:5px 6px;border-radius:5px}
.yearly-legend-person>span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#4a5f76;font-weight:700}
.yearly-legend-person small{font-size:9px;color:#8997a6;white-space:nowrap}
.yearly-swatch{display:inline-block;width:13px;height:13px;min-width:13px;border-radius:2px;outline:1px solid rgba(0,0,0,.12)}
.yearly-summary-table-wrap{overflow-x:auto;max-width:100%;scrollbar-width:thin}
.yearly-summary-table{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:10px;min-width:440px;width:100%}
.yearly-summary-table th,.yearly-summary-table td{padding:6px 5px;border:1px solid #e4e9ef;text-align:center;white-space:nowrap}
.yearly-summary-table thead th{background:#e6eff8;color:#567088;font-size:9px}
.yearly-summary-table tbody th{font-weight:650;text-align:left;color:#46576b}
.yearly-summary-table tbody th .yearly-swatch{width:10px;height:10px;min-width:10px;margin-right:6px;vertical-align:-1px}
.yearly-summary-table tbody tr:nth-child(2n){background:#f9fafc}
.yearly-summary-table tfoot{background:#f0f5fa;color:#304d6b;font-weight:850}
.yearly-empty{font-size:11px;color:#8896a6;grid-column:1/-1}
@media(max-width:1290px){
 .yearly-main-layout{grid-template-columns:1fr}
 .yearly-aside{grid-template-columns:minmax(230px,.75fr) minmax(400px,1.25fr)}
}
@media(max-width:900px){
 .yearly-aside{grid-template-columns:1fr}
 .yearly-month-grid{gap:18px 13px}
}
@media(max-width:660px){
 .yearly-title-row h1{font-size:23px}
 .yearly-main-layout{display:block}
 .yearly-calendar-pane{padding:10px}
 .yearly-aside{margin-top:11px}
 .yearly-month-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 9px}
 .yearly-day{height:20px;min-height:20px;font-size:9px}
 .yearly-outside{min-height:20px}
 .yearly-week-row{grid-template-columns:17px repeat(7,minmax(0,1fr))}
 .yearly-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .yearly-kpis>div{padding:9px}
 .yearly-kpis strong{font-size:19px}
 .yearly-controls{padding:11px;gap:11px}
 .yearly-filter-controls label{flex-basis:calc(50% - 8px);min-width:0}
 .yearly-filter-controls>.btn{width:100%}
}
@media(max-width:370px){
 .yearly-month-grid{grid-template-columns:1fr;gap:11px}
 .yearly-month{max-width:305px;width:100%;margin:0 auto}
 .yearly-day{height:27px;font-size:10px}
 .yearly-outside{min-height:27px}
 .yearly-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* V0.13 · Public consultation: annual calendar and color/name legend only. */
.yearly-public .yearly-public-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(195px,235px);
  align-items:start;
  gap:14px;
  min-width:0;
}
.yearly-public-calendar-heading {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.yearly-public-calendar-heading h2 {
  margin:0;
  font-size:14px;
  color:#314c65;
}
.yearly-public-calendar-heading .yearly-year-picker { gap:5px; }
.yearly-public-year {
  min-width:45px;
  font-size:14px;
  color:#2b4260;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.yearly-public .yearly-day {
  cursor:default;
}
.yearly-public .yearly-day:hover {
  outline:none;
}
.yearly-public .yearly-day.is-today:hover {
  outline:2px solid #174b97;
}
.yearly-public-legend { padding:15px; min-width:0; }
.yearly-public-legend h2 { margin:0 0 13px; font-size:14px; color:#31445a; }
.yearly-public-legend-grid { display:grid; grid-template-columns:1fr; gap:7px; }
.yearly-public-legend-person {
  display:flex;
  align-items:center;
  min-width:0;
  gap:9px;
  padding:7px 8px;
  border:1px solid #e9edf3;
  background:#fbfcfe;
  border-radius:6px;
  color:#4b5c71;
  font-size:11px;
  font-weight:700;
}
.yearly-public-legend-person>span:last-child {
  min-width:0;
  overflow-wrap:anywhere;
}
.yearly-public .yearly-footnote { margin:2px 0 0; }
@media(max-width:1150px) {
  .yearly-public .yearly-public-layout { grid-template-columns:1fr; }
  .yearly-public-legend-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:660px) {
  .yearly-public .yearly-public-layout { display:grid; grid-template-columns:1fr; gap:10px; }
  .yearly-public-legend { padding:12px; }
  .yearly-public-legend-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .yearly-public .yearly-public-calendar-heading h2 { font-size:12px; }
  .yearly-public .yearly-public-year { font-size:12px; min-width:38px; }
}
@media(max-width:370px) {
  .yearly-public-legend-grid { grid-template-columns:1fr; }
}

/* V0.14: assigned Saturdays and Sundays keep exactly their technician's color. */
.yearly-day.is-weekend.is-assigned { background:var(--roster-fill,#fff); color:var(--roster-ink,#53647b); }

/* V0.15: sandbox simulation affects only the management preview. */
.yearly-simulation { display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 15px; }
.yearly-simulation>div:first-child { flex:1 1 230px; }
.yearly-simulation strong { font-size:13px;color:#32455c; }
.yearly-simulation p,.yearly-simulation-editor p { font-size:11px;color:#77889b;margin:5px 0;line-height:1.5; }
.yearly-simulation-notice { background:#fff3d8;border:1px solid #eab95a;color:#785208;padding:10px 12px;border-radius:7px;font-size:11px;font-weight:800; }
.yearly-simulation-editor { padding:13px 15px;display:grid;gap:9px; }
.yearly-simulation-editor strong { font-size:13px; }
.yearly-simulation-editor label { display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12px;font-weight:700;color:#526378; }
.yearly-simulation-editor .select { width:min(340px,100%); }
@media(max-width:620px){.yearly-simulation{padding:11px}.yearly-simulation-editor{padding:11px}.yearly-simulation-editor label{display:grid;gap:6px}}

/* Simulation mode is visually distinct without affecting public annual calendars. */
.yearly-roster-page.yearly-simulating .yearly-calendar-pane {
  background:#faf6ff;
  border:2px solid #b69bce;
  border-radius:12px;
  padding:12px;
}
.yearly-roster-page.yearly-simulating .yearly-month {
  box-shadow:0 0 0 1px rgba(151,111,184,.18);
}
.yearly-roster-page.yearly-simulating .yearly-simulation-editor,
.yearly-roster-page.yearly-simulating .yearly-simulation {
  background:#f4edfc;
  border-color:#ceb5e1;
}
.yearly-saved-scenarios { margin-bottom:12px; }
.yearly-saved-scenarios label { display:block; font-weight:700; }
.yearly-saved-scenarios .select { margin-top:6px; }
.yearly-saved-scenarios small { display:block; margin-top:6px; color:#725b86; }