/* FarmaTurnos | Matrices visuales de planificación — extensión del sistema existente */

/* Horarios: una única tabla comparativa, no tarjetas por empleado. */
.staff-month-panel .staff-month-people{display:none}
.sm-matrix{min-width:0;margin-top:14px}
.sm-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 10px}
.sm-matrix-head>div:first-child{display:grid;gap:3px}
.sm-matrix-head strong{font-size:15px;color:var(--ink)}
.sm-matrix-head small{font-size:12px;color:var(--ink-3)}
.sm-matrix-navigation{display:flex;align-items:center;gap:5px}
.sm-matrix-navigation select{max-width:225px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 10px;font-size:12px}
.sm-matrix-navigation button{min-height:34px;min-width:34px;justify-content:center;padding:5px 9px}
.sm-matrix-navigation button[disabled]{opacity:.35;cursor:not-allowed}
.sm-matrix-scroll{overflow:auto;max-width:100%;border:1px solid var(--line);border-radius:9px;scrollbar-width:thin}
.sm-matrix-table{border-collapse:separate;border-spacing:0;width:100%;min-width:955px;table-layout:fixed;background:var(--surface);color:var(--ink)}
.sm-matrix-table th,.sm-matrix-table td{padding:8px 5px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:12px}
.sm-matrix-table thead th{font-weight:730;background:var(--surface-inset);color:var(--ink-2);height:43px}
.sm-matrix-table thead th b{display:block;font-size:14px;font-variant-numeric:tabular-nums}
.sm-matrix-table thead th:first-child{min-width:125px;text-align:left;padding-left:11px}
.sm-matrix-table th:first-child{width:155px}
.sm-matrix-table th:nth-last-child(2){width:77px}
.sm-matrix-table th:last-child{width:73px}
.sm-matrix-table thead .out{opacity:.5}
.sm-matrix-table tr:last-child>th,.sm-matrix-table tr:last-child>td{border-bottom:0}
.sm-matrix-table tr>*:last-child{border-right:0}
.sm-matrix-table tbody tr:hover{background:color-mix(in srgb,var(--brand) 4%,var(--surface))}
.sm-matrix-table tbody th.sm-person{text-align:left;padding-left:10px}
.sm-person-inner{display:flex;gap:7px;align-items:center}
.sm-person-inner i{width:7px;height:27px;flex:none;border-radius:4px;background:var(--sm-person-color)}
.sm-person-inner span{display:grid;gap:3px;min-width:0}
.sm-person-inner b{font-size:12px;overflow-wrap:anywhere}
.sm-person-inner small{font-size:11px;font-weight:500;color:var(--ink-3);line-height:1.25}
.sm-day{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:3px;width:100%;min-height:41px;border:0;background:transparent;color:var(--ink);border-radius:6px;padding:4px;cursor:pointer}
.sm-day:hover,.sm-day:focus-visible{outline:2px solid var(--brand);outline-offset:1px;background:color-mix(in srgb,var(--brand) 6%,var(--surface))}
.sm-day[disabled]{cursor:default;pointer-events:none;opacity:.45}
.sm-shift{display:block;border-radius:5px;padding:4px 2px;font-size:11px;font-weight:710;font-variant-numeric:tabular-nums;white-space:nowrap;background:color-mix(in srgb,var(--brand) 15%,var(--surface));color:var(--ink)}
.sm-shift.afternoon{background:color-mix(in srgb,var(--amber) 17%,var(--surface))}
.sm-shift.night{background:color-mix(in srgb,var(--ink) 15%,var(--surface));color:var(--ink)}
.sm-off{color:var(--ink-3);font-size:11px}
.sm-matrix-table td.out{background:var(--surface-inset)}
.sm-summary b{display:block;font-variant-numeric:tabular-nums}
.sm-summary small{display:block;margin-top:3px;color:var(--ink-3);font-size:11px}
.sm-actions .button{font-size:11px;min-height:33px;padding:5px 7px}
.staff-month-panel .section-head{margin-bottom:11px}
.staff-month-panel .section-head p{color:var(--ink-3);max-width:740px}
.staff-month-toolbar{gap:10px;margin:10px 0 12px}
.staff-month-stats{border-left:1px solid var(--line)}
.staff-month-stats strong{color:var(--ink);font-size:17px}
.staff-month-stats span{color:var(--ink-3)}
.staff-month-actions{border-top:1px solid var(--line);margin-top:11px;padding-top:11px}
.staff-month-actions>span{color:var(--ink-3)}

/* Vacaciones: línea de tiempo anual centrada en ausencias reales. */
.entitlement-panel .vac-map{margin-top:13px}
.vac-map-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.vac-map-head h3{font-size:15px;margin:0;color:var(--ink)}
.vac-map-head p{color:var(--ink-3);font-size:12px;margin:4px 0 0}
.vac-map-legend{display:flex;gap:11px;align-items:center;flex-wrap:wrap;color:var(--ink-2);font-size:11px}
.vac-map-legend span{display:flex;align-items:center;gap:4px}
.vac-map-legend i{height:7px;width:13px;border-radius:3px}
.vac-map-legend .vacation,.vac-segment.vacation{background:var(--brand)}
.vac-map-legend .sick,.vac-segment.sick{background:var(--danger)}
.vac-map-legend .leave,.vac-segment.leave{background:var(--amber)}
.vac-map-scroll{border:1px solid var(--line);border-radius:9px;overflow:auto;scrollbar-width:thin}
.vac-map-table{width:100%;min-width:850px;border-spacing:0;border-collapse:separate;table-layout:fixed;background:var(--surface)}
.vac-map-table th,.vac-map-table td{padding:7px 3px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px}
.vac-map-table th:last-child,.vac-map-table td:last-child{border-right:0}
.vac-map-table tbody tr:last-child>*{border-bottom:0}
.vac-map-table thead th{background:var(--surface-inset);color:var(--ink-3);font-size:11px;font-weight:760}
.vac-map-table thead th:first-child{width:145px;text-align:left;padding-left:9px}
.vac-map-table thead th:last-child{width:80px}
.vac-map-table tbody th{text-align:left;padding-left:8px}
.vac-person{display:flex;align-items:center;gap:6px;text-align:left;color:var(--ink);font-weight:740}
.vac-person i{width:8px;height:18px;border-radius:5px;flex:none;background:var(--person-color)}
.vac-month{position:relative;display:block;width:100%;height:30px;min-width:0;padding:2px;border:0;border-radius:4px;background:color-mix(in srgb,var(--good) 6%,var(--surface));cursor:pointer;overflow:hidden}
.vac-month:hover,.vac-month:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.vac-segment{position:absolute;top:7px;height:16px;min-width:2px;display:block;border-radius:2px}
.vac-free{display:block;height:3px;width:30%;margin:10px auto;background:var(--line);border-radius:20px}
.vac-remaining{font-variant-numeric:tabular-nums;white-space:nowrap}
.vac-remaining b{display:block;color:var(--ink)}
.vac-remaining small{display:block;color:var(--ink-3);font-size:10px}
.vac-map-empty{font-size:12px;color:var(--ink-3);margin:10px 0 0}
.vac-balances-detail{margin-top:12px;border-top:1px solid var(--line)}
.vac-balances-detail summary{cursor:pointer;color:var(--ink-2);font-weight:700;font-size:12px;padding:10px 0}
.vac-balances-detail .entitlement-grid{margin:7px 0 0}
.vac-year-label{display:flex;align-items:center;gap:6px;white-space:nowrap;color:var(--ink-2);font-size:12px;font-weight:720}
.vac-year-label select{background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;color:var(--ink);padding:8px 10px;font-size:12px}

/* Mes: calor de problemas reales, nunca de un número inventado. */
.month-coverage-map{padding:9px 12px 11px;border-top:1px solid var(--line);background:var(--surface)}
.month-heat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px;flex-wrap:wrap}
.month-heat-head>span:first-child{display:flex;align-items:baseline;gap:8px}
.month-heat-head strong{font-size:12px;color:var(--ink)}
.month-heat-head small{font-size:11px;color:var(--ink-3)}
.month-heat-legend{display:flex;gap:7px;align-items:center;font-size:10px;color:var(--ink-3)}
.month-heat-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-left:5px}
.month-heat-legend i.clear{background:color-mix(in srgb,var(--good) 35%,var(--surface))}
.month-heat-legend i.warning{background:var(--amber)}
.month-heat-legend i.critical{background:var(--danger)}
.month-heat-scroll{max-width:100%;overflow:auto;scrollbar-width:thin}
.month-heat-days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(24px,1fr);gap:3px;min-width:745px}
.month-heat-day{display:grid;place-items:center;gap:2px;padding:5px 0 4px;border:0;background:var(--surface-inset);color:var(--ink-2);border-radius:4px;cursor:pointer;font-size:11px;font-weight:650;min-width:0}
.month-heat-day i{display:block;width:65%;height:5px;border-radius:3px;background:color-mix(in srgb,var(--good) 35%,var(--surface))}
.month-heat-day.warning i{background:var(--amber)}
.month-heat-day.critical i{background:var(--danger)}
.month-heat-day.warning{background:color-mix(in srgb,var(--amber) 13%,var(--surface))}
.month-heat-day.critical{background:color-mix(in srgb,var(--danger) 12%,var(--surface))}
.month-heat-day small{font-size:10px;color:var(--ink-3)}
.month-heat-day:hover,.month-heat-day:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Same contrast rules in dark theme; semantic color tokens are authoritative. */
@media(max-width:760px){
 .sm-matrix-head{align-items:flex-start}
 .sm-matrix-navigation{width:100%;justify-content:space-between}
 .sm-matrix-navigation label{flex:1}
 .sm-matrix-navigation select{max-width:none;width:100%}
 .staff-month-panel{padding:12px}
 .vac-map-scroll{margin:0 -4px}
 .month-heat-head>span:first-child{display:grid;gap:2px}
 .month-heat-legend{font-size:10px}
}


/* First usable full week is shown by default; hint scroll on narrow screens. */
.sm-matrix-mobile-hint{display:none}
@media(max-width:760px){
 .sm-matrix-mobile-hint{display:block;margin:7px 0 0;color:var(--ink-3);font-size:12px}
}
/* Vacaciones: existing two-column article layout must become a single flow on touch. */
@media(max-width:850px){
 #content .absence-layout.rights-layout{
   display:grid!important;
   grid-template-columns:minmax(0,1fr)!important;
   width:100%;
   gap:12px;
 }
 #content .absence-layout.rights-layout>.absence-list,
 #content .absence-layout.rights-layout>.absence-aside{
   min-width:0;width:100%;max-width:100%;
   grid-column:1/-1;
 }
 #content .absence-layout.rights-layout .absence-rows{min-width:0}
 #content .absence-layout.rights-layout .absence-row{min-width:0;overflow-wrap:anywhere}
}


/* Farmaturnos · visibilidad y navegación de incidencias, separados de cancelaciones. */
#content .ft-week-coverage{
  min-width:0; margin:12px 0 15px; padding:14px 17px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--surface); box-shadow:0 3px 12px rgba(0,0,0,.02);
}
#content .ft-week-coverage-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
#content .ft-week-coverage h2{font-size:19px;line-height:1.25;color:var(--ink);font-weight:850;letter-spacing:-.02em;margin:3px 0}
#content .ft-week-coverage-head p:last-child{font-size:11px;color:var(--ink-3);line-height:1.45}
#content .ft-coverage-total{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:7px;font-size:11px;font-weight:800}
#content .ft-coverage-total.has-high{color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--surface))}
#content .ft-coverage-total.is-clear{color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--surface))}
#content .ft-coverage-focus{display:flex;align-items:center;gap:9px;padding:9px 11px;margin:9px 0;border-radius:8px;border-left:3px solid var(--brand);
  background:color-mix(in srgb,var(--brand) 8%,var(--surface));color:var(--ink);font-size:12px}
#content .ft-coverage-focus strong{font-weight:850}
#content .ft-coverage-focus span{color:var(--ink-2)}
#content .ft-coverage-items{display:grid;gap:4px;max-height:470px;overflow:auto;scrollbar-width:thin;padding-right:4px;overscroll-behavior:contain}
#content .ft-coverage-item{display:grid;grid-template-columns:82px 81px minmax(0,1fr) minmax(80px,125px);
  gap:9px;align-items:center;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:var(--surface-inset);font-size:11px;min-width:0}
#content .ft-coverage-item.high{border-left:3px solid var(--danger)}
#content .ft-coverage-item.medium{border-left:3px solid var(--amber)}
#content .ft-coverage-badge{display:inline-block;color:var(--danger);font-weight:800;font-size:10px}
#content .ft-coverage-item.medium .ft-coverage-badge{color:var(--amber)}
#content .ft-coverage-date{display:block;appearance:none;padding:3px 4px;border:0;background:transparent;color:var(--brand);
  font-size:11px;font-weight:800;text-align:left;text-transform:capitalize;white-space:nowrap;cursor:pointer;border-radius:5px}
#content .ft-coverage-date:hover,#content .ft-coverage-date:focus-visible,#content .ft-coverage-date.is-selected{
  background:color-mix(in srgb,var(--brand) 12%,var(--surface));outline:1px solid var(--brand)}
#content .ft-coverage-content{min-width:0;display:grid;gap:3px}
#content .ft-coverage-content b{font-size:11px;color:var(--ink);font-weight:850;overflow-wrap:anywhere}
#content .ft-coverage-content span{font-size:11px;color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere}
#content .ft-coverage-time{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere;text-align:right}
#content .ft-coverage-empty{padding:15px;color:var(--ink-3);font-size:12px}
#content .ft-coverage-secondary{margin-top:8px;border-top:1px solid var(--line);padding-top:9px}
#content .ft-coverage-secondary summary{cursor:pointer;font-size:11px;color:var(--ink-2);font-weight:760;padding:5px 0}
#content .ft-coverage-secondary[open] .ft-coverage-items{margin-top:8px}
#content .ft-coverage-foot{font-size:10px;line-height:1.5;color:var(--ink-3);padding-top:9px;margin-top:10px;border-top:1px solid var(--line)}
#content .wbar-day.ft-selected-warning-day{box-shadow:inset 0 0 0 2px var(--brand);border-radius:10px}
#content .ft-cancelled-history{margin:11px 15px 15px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
#content .ft-cancelled-history>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;
   padding:12px 15px;background:var(--surface-inset);color:var(--ink);list-style:none}
#content .ft-cancelled-history>summary::-webkit-details-marker{display:none}
#content .ft-cancelled-history>summary:hover,#content .ft-cancelled-history>summary:focus-visible{
 background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
#content .ft-cancelled-history>summary span:first-child{display:grid;gap:3px}
#content .ft-cancelled-history>summary b{font-size:12px;font-weight:800}
#content .ft-cancelled-history>summary small{font-size:11px;color:var(--ink-3);font-weight:500}
#content .ft-cancelled-expand{font-size:11px;color:var(--brand);font-weight:780;white-space:nowrap}
#content .ft-cancelled-history[open] .ft-cancelled-expand{font-size:0}
#content .ft-cancelled-history[open] .ft-cancelled-expand:after{content:"Ocultar historial";font-size:11px}
#content .ft-cancelled-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:385px;overflow:auto;scrollbar-width:thin}
#content .ft-cancelled-grid .week-change{min-width:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
#content .ft-cancelled-grid .week-change b,#content .ft-cancelled-grid .week-change p{overflow-wrap:anywhere}
#content .ft-context-none{padding:14px 17px;color:var(--ink-3);font-size:12px}
/* Calendario mensual: contador que lleva a la lista de incidencias exactas. */
#content .ft-month-open-alerts,
#content .ft-month-footer-alerts{
 appearance:none;border:0;background:transparent;color:var(--amber);font:inherit;font-size:11px;font-weight:790;
 text-align:left;line-height:1.4;padding:3px 5px;border-radius:6px;cursor:pointer}
#content .ft-month-open-alerts:hover,#content .ft-month-footer-alerts:hover,
#content .ft-month-open-alerts:focus-visible,#content .ft-month-footer-alerts:focus-visible{
 outline:2px solid var(--brand);outline-offset:2px;background:color-mix(in srgb,var(--brand) 7%,var(--surface))}
#content .ft-month-open-alerts[aria-expanded="true"]{color:var(--brand)}
#content .ft-month-coverage-list{margin-top:12px;border-top:1px solid var(--line);padding:12px 0 4px;min-width:0}
#content .ft-month-coverage-list[hidden]{display:none!important}
#content .ft-month-list-head{display:flex;justify-content:space-between;align-items:start;flex-wrap:wrap;gap:10px;margin-bottom:8px}
#content .ft-month-list-head h3{font-size:14px;color:var(--ink);font-weight:840}
#content .ft-month-list-head p{font-size:11px;color:var(--ink-3);margin-top:3px}
#content .ft-month-list-head button{border:1px solid var(--line);border-radius:7px;padding:6px 10px;background:var(--surface-inset);color:var(--ink-2);cursor:pointer}
#content .ft-month-list-scroll{max-height:370px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
#content .ft-month-list-scroll .ft-coverage-items{max-height:none;overflow:visible}
#content .ft-month-metric-clickable{cursor:pointer;border-radius:6px}
#content .ft-month-metric-clickable:hover,#content .ft-month-metric-clickable:focus-visible{
 outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:950px){
 #content .ft-coverage-item{grid-template-columns:70px 73px minmax(0,1fr);gap:7px}
 #content .ft-coverage-time{grid-column:3;text-align:left}
}
@media(max-width:650px){
 #content .ft-week-coverage{padding:11px}
 #content .ft-week-coverage h2{font-size:17px}
 #content .ft-coverage-item{grid-template-columns:66px minmax(0,1fr);gap:5px;padding:8px}
 #content .ft-coverage-badge{grid-column:1;grid-row:1}
 #content .ft-coverage-date{grid-column:1;grid-row:2}
 #content .ft-coverage-content{grid-column:2;grid-row:1/span 2}
 #content .ft-coverage-time{grid-column:2;grid-row:3;text-align:left}
 #content .ft-cancelled-grid{grid-template-columns:1fr}
 #content .ft-cancelled-history{margin:10px}
 #content .ft-cancelled-history>summary{padding:10px}
 #content .ft-coverage-focus{flex-wrap:wrap}
}
@media(print){#content .ft-week-coverage .ft-coverage-items,#content .ft-month-list-scroll{max-height:none;overflow:visible}}



/* Cancelaciones históricas del mes: consulta opcional, separada de incidencias. */
#content .ft-month-cancelled-history{border-top:1px solid var(--line);margin-top:9px;padding:7px 10px 11px}
#content .ft-month-cancelled-history>summary{cursor:pointer;font-size:11px;font-weight:720;color:var(--ink-2);line-height:1.5;padding:6px;border-radius:6px}
#content .ft-month-cancelled-history>summary:hover,#content .ft-month-cancelled-history>summary:focus-visible{outline:1px solid var(--brand);color:var(--brand)}
#content .ft-month-cancelled-list{display:grid;gap:2px;max-height:340px;overflow-y:auto;scrollbar-width:thin;margin-top:5px}
#content .ft-month-cancelled-list button{appearance:none;border:0;border-bottom:1px solid var(--line);background:transparent;display:grid;grid-template-columns:58px 113px minmax(0,1fr);gap:8px;align-items:center;color:var(--ink-2);font-size:11px;text-align:left;padding:7px 5px;cursor:pointer}
#content .ft-month-cancelled-list button:hover,#content .ft-month-cancelled-list button:focus-visible{background:var(--surface-inset);outline:1px solid var(--brand)}
#content .ft-month-cancelled-list b{font-weight:760;color:var(--ink)}
#content .ft-month-cancelled-list span{overflow-wrap:anywhere}
#content .ft-month-open-alerts:disabled{color:var(--ink-3);opacity:.85;cursor:default}
#content .ft-month-open-alerts:disabled:hover{background:transparent;outline:0}
@media(max-width:650px){#content .ft-month-cancelled-list button{grid-template-columns:52px minmax(0,1fr)}#content .ft-month-cancelled-list span{grid-column:2}}