:root{ --card:#ffffff; --txt:#0b1320; --muted:#667085; --line:#e6e8ec; --btn:#0b5cff; }
*{ box-sizing:border-box; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
body{ margin:0; color:var(--txt); }
.bg{ background:linear-gradient(135deg,#f4f7ff 0%,#f7f7fb 50%,#ffffff 100%); min-height:100vh; }

/* Card general (para dashboard y módulos) */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}



/* Textos */
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }

label{ display:block; margin-top:12px; font-weight:600; }
input{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  margin-top:6px;
  outline:none;
}
button{
  width:100%;
  margin-top:16px;
  padding:10px 12px;
  border:0;
  border-radius:10px;
  background:var(--btn);
  color:white;
  font-weight:700;
  cursor:pointer;
}
.alert{
  margin:12px 0;
  padding:10px 12px;
  border:1px solid #ffd2d2;
  background:#fff3f3;
  border-radius:10px;
}

/* Topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.link{ text-decoration:none; color:var(--btn); font-weight:700; }

/* Layout dashboard */
.wrap{
  width:100vw;          /* ocupa todo el ancho de la ventana */
  max-width:100vw;
  margin:20px 0;        /* sin centrado */
  padding:0 14px;       /* pequeño aire lateral */
}
.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px){ .grid{ grid-template-columns:1fr; } }
/* =========================
   Ajuste tablas responsivas
   (Mi Turno / Schedule)
========================= */
.tableWrap{
  display:block;              /* permite centrar */
  width:fit-content;          /* se ajusta al contenido */
  max-width:100%;
  margin:12px auto;           /* centra horizontalmente */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
}

/* Tablas compactas */
.tableWrap table{
  width:auto;                 /* no forzar 100% */
  border-collapse:collapse;
}

.tableWrap th,
.tableWrap td{
  padding:8px 10px;
  font-size:.85rem;           /* letra más pequeña */
  white-space:nowrap;         /* evita saltos feos */
  border-bottom:1px solid var(--line);
}

.tableWrap th{
  font-size:.8rem;
  color:var(--muted);
  font-weight:700;
}
/* Estado turnos */
.trabaja-row{
  background: rgba(34,197,94,.12);
  border-left: 6px solid rgba(34,197,94,.8);
}
.descansa-row{
  background: rgba(100,116,139,.10);
  border-left: 6px solid rgba(100,116,139,.55);
}
.turno-hoy{
  outline: 2px dashed rgba(11,92,255,.55);
  outline-offset: -2px;
}
/* =========================
   Matriz Consolidada (Admin)
   Full width + Sticky header/col
========================= */

.matrixWrap{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 10px 30px rgba(0,0,0,.04);

  width:100%;
  max-width:100%;
}

/* tabla matriz */
table.matrix{
  border-collapse:separate;
  border-spacing:0;
  width:max-content;    /* permite scroll horizontal */
  min-width:100%;       /* ocupa el ancho visible */
  white-space:nowrap;
  table-layout:fixed;   /* ayuda a llenar pantalla */
}

.matrix th, .matrix td{
  border-bottom:1px solid #eef0f3;
  padding:8px 10px;
  font-size:.85rem;
  text-align:center;
  vertical-align:middle;
}

.matrix th{
  background:#f9fafb;
  font-weight:900;
  color:#475467;
}

/* Sticky header */
.matrix thead th{
  position:sticky;
  top:0;
  z-index:3;
}

/* Primera columna sticky (Empleado) */
.matrix .colEmp{
  position:sticky;
  left:0;
  z-index:4;
  text-align:left;
  min-width:280px;
  background:#fff;
  border-right:1px solid #eef0f3;
}

/* header de la primera columna también sticky y encima */
.matrix thead .colEmp{
  background:#f9fafb;
  z-index:6;
}

/* Texto empleado */
.empName{ font-weight:900; }
.empMeta{ color:var(--muted); font-size:.78rem; font-weight:800; margin-top:2px; }

/* Celdas estado (T/D) */
.cellA{ background: rgba(34,197,94,.10); }     /* Trabaja */
.cellP{ background: rgba(245,158,11,.12); }    /* Descansa */
.cellX{ background: rgba(148,163,184,.10); color:var(--muted); }

/* Resaltar columna de hoy */
.todayCol{
  outline:2px dashed rgba(11,92,255,.45);
  outline-offset:-2px;
}

/* Sombra visual para la columna sticky cuando haces scroll */
.matrixWrap{ position:relative; }
.matrix .colEmp{
  box-shadow: 8px 0 10px rgba(0,0,0,.04);
}

/* Print */
@media print{
  .matrixWrap{ overflow:visible !important; box-shadow:none !important; }
  table.matrix{ width:100% !important; }
}
/* ✅ FORZAR TARJETA (CARD) A TODO EL ANCHO */
.cardWide{
  width:100%;
  max-width:100%;
}

/* ✅ Por si algún estilo global te limita el layout */
.wrap{
  width:100vw !important;
  max-width:100vw !important;
  margin:20px 0 !important;
  padding:0 10px !important; /* reduce márgenes laterales */
}