/* =========================================================
   CONTROL DE ASISTENCIA
   SISTEMA EMPRESARIAL — DARK UI
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family:
    "Segoe UI",
    Inter,
    Arial,
    sans-serif;

  background:
    radial-gradient(
      circle at 15% 10%,
      #18212d 0,
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 90%,
      #111827 0,
      transparent 30%
    ),
    #070a0f;

  color: #e5e7eb;
}

/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --bg: #070a0f;
  --panel: #0d131c;
  --panel2: #111923;
  --panel3: #151e2a;

  --border: #263241;

  --text: #f8fafc;
  --muted: #8b98a8;

  --accent: #34d399;
  --accent-dark: #059669;

  --danger: #f87171;

  --shadow:
    0 20px 50px rgba(0,0,0,.35);
}

/* =========================================================
   APP
   ========================================================= */

.app {
  width: 100%;
  min-height: 100vh;
}

/* =========================================================
   HEADER
   ========================================================= */

.topHeader {
  height: 88px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 32px;

  background:
    rgba(8,12,18,.92);

  border-bottom:
    1px solid var(--border);

  position: sticky;
  top: 0;

  z-index: 100;

  backdrop-filter: blur(14px);
}

/* =========================================================
   BRAND
   ========================================================= */

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brandIcon {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #34d399,
      #059669
    );

  color: #02130c;

  font-size: 23px;

  box-shadow:
    0 8px 25px #34d39920;
}

.brandTitle {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
}

.brandSubtitle {
  margin-top: 3px;

  font-size: 12px;

  color: var(--muted);
}

/* =========================================================
   CLOCK
   ========================================================= */

.clockBox {
  text-align: right;
}

#clock {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 2px;

  color: var(--text);
}

.systemStatus {
  margin-top: 3px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1px;

  color: var(--accent);
}

/* =========================================================
   LOGIN
   ========================================================= */

.loginScreen {
  min-height:
    calc(100vh - 88px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px 20px;
}

.loginCard {
  width: min(440px, 100%);

  padding: 42px;

  background:
    linear-gradient(
      145deg,
      #111923,
      #0b1017
    );

  border:
    1px solid var(--border);

  border-radius: 24px;

  box-shadow:
    0 30px 80px rgba(0,0,0,.55);

  text-align: center;
}

.loginIcon {
  width: 70px;
  height: 70px;

  margin: 0 auto 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 20px;

  background: #10271f;

  border:
    1px solid #1f6f53;

  font-size: 30px;

  box-shadow:
    0 10px 30px #34d39915;
}

.loginCard h1 {
  margin: 0;

  color: var(--text);

  font-size: 27px;
}

.loginDescription {
  margin:
    10px 0 30px;

  color: var(--muted);

  font-size: 14px;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

.loginCard label {
  display: block;

  text-align: left;

  margin:
    16px 0 7px;

  color: #cbd5e1;

  font-size: 13px;

  font-weight: 700;
}

.inputGroup {
  display: flex;
  align-items: center;

  background: #080d14;

  border:
    1px solid #2a3645;

  border-radius: 12px;

  overflow: hidden;

  transition: .2s;
}

.inputGroup:focus-within {
  border-color:
    var(--accent);

  box-shadow:
    0 0 0 3px #34d39915;
}

.inputGroup span {
  width: 48px;

  text-align: center;

  color: #64748b;
}

.inputGroup input {
  flex: 1;

  width: auto;

  margin: 0;

  padding: 15px 12px;

  border: 0;

  outline: 0;

  background: transparent;

  color: var(--text);

  font-size: 17px;
}

.inputGroup input::placeholder {
  color: #475569;
}

/* =========================================================
   BOTONES
   ========================================================= */

button {
  border: 0;

  border-radius: 11px;

  padding: 14px 18px;

  font-family: inherit;

  font-size: 14px;

  font-weight: 800;

  cursor: pointer;

  transition:
    transform .15s,
    box-shadow .15s,
    background .15s;

  color: white;
}

button:hover {
  transform:
    translateY(-1px);
}

button:active {
  transform:
    scale(.98);
}

/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.primaryButton {
  width: 100%;

  margin-top: 22px;

  background:
    linear-gradient(
      135deg,
      #34d399,
      #059669
    );

  color: #03130c;

  box-shadow:
    0 10px 30px #34d39920;
}

.primaryButton:hover {
  box-shadow:
    0 14px 35px #34d39935;
}

/* =========================================================
   ADMIN ACCESS
   ========================================================= */

.adminAccess {
  width: 100%;

  margin-top: 10px;

  background: transparent;

  color: #94a3b8;

  border:
    1px solid #263241;
}

.adminAccess:hover {
  background: #151e2a;

  color: white;
}

/* =========================================================
   MENSAJES
   ========================================================= */

.msg {
  min-height: 22px;

  margin-top: 15px;

  color: var(--danger);

  font-size: 13px;

  font-weight: 700;
}

/* =========================================================
   TRABAJADOR
   ========================================================= */

.workerScreen {
  width:
    min(950px, 94%);

  margin: 40px auto;
}

.workerWelcome {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 20px;

  margin-bottom: 25px;
}

.smallLabel {
  display: block;

  color:
    var(--accent);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1.5px;
}

.workerWelcome h2 {
  margin:
    5px 0;

  font-size: 30px;

  color: var(--text);
}

.workerCode {
  color: var(--muted);

  font-size: 13px;
}

.logoutButton {
  background:
    #121923;

  border:
    1px solid #293646;

  color: #cbd5e1;
}

/* =========================================================
   STATUS
   ========================================================= */

.status {
  padding: 18px;

  background:
    #0d1714;

  border:
    1px solid #1f4939;

  border-radius: 14px;

  color:
    var(--accent);

  text-align: center;

  font-weight: 800;
}

/* =========================================================
   TÍTULOS DE SECCIÓN
   ========================================================= */

.sectionTitle {
  display: flex;

  align-items: center;

  gap: 15px;

  margin:
    30px 0 15px;

  color: #94a3b8;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1.5px;
}

.sectionTitle::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    var(--border);
}

/* =========================================================
   BOTONES MARCACIÓN
   ========================================================= */

.buttons {
  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 14px;
}

.buttons button {
  min-height: 88px;

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 18px;

  background:
    #101722;

  border:
    1px solid #283546;

  text-align: left;
}

.buttons button:hover {
  background:
    #151f2b;

  border-color:
    var(--accent);

  box-shadow:
    0 10px 30px #00000040;
}

.actionIcon {
  width: 46px;
  height: 46px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 13px;

  background:
    #182330;

  color:
    var(--accent);

  font-size: 21px;
}

.buttons strong {
  display: block;

  font-size: 14px;

  color: white;
}

.buttons small {
  display: block;

  margin-top: 5px;

  color: var(--muted);

  font-size: 11px;
}

/* =========================================================
   TIMELINE
   ========================================================= */

.attendanceTimeline {
  background:
    #0d131c;

  border:
    1px solid var(--border);

  border-radius: 16px;

  padding: 18px;
}

/* =========================================================
   ADMIN LAYOUT
   ========================================================= */

.adminLayout {
  display:
    flex;

  min-height:
    calc(100vh - 88px);
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  width: 240px;

  flex-shrink: 0;

  background:
    #090e15;

  border-right:
    1px solid var(--border);

  display:
    flex;

  flex-direction:
    column;

  padding: 24px 15px;
}

.sidebarBrand {
  display:
    flex;

  align-items:
    center;

  gap: 12px;

  padding:
    0 10px 25px;

  border-bottom:
    1px solid var(--border);

  margin-bottom:
    20px;
}

.sidebarLogo {
  width: 40px;
  height: 40px;

  display:
    flex;

  align-items: center;
  justify-content: center;

  border-radius: 11px;

  background:
    #10271f;

  color:
    var(--accent);
}

.sidebarBrand strong {
  display: block;

  color: white;

  font-size: 13px;

  letter-spacing: 1px;
}

.sidebarBrand small {
  color:
    var(--muted);

  font-size: 9px;

  letter-spacing: 1px;
}

/* =========================================================
   NAV
   ========================================================= */

.adminNav {
  display:
    flex;

  flex-direction:
    column;

  gap: 5px;
}

.navItem {
  width: 100%;

  display:
    flex;

  align-items:
    center;

  gap: 12px;

  padding:
    12px 13px;

  background:
    transparent;

  border:
    1px solid transparent;

  color:
    #8d99a9;

  text-align:
    left;

  font-size:
    13px;
}

.navItem span {
  width: 25px;

  color:
    #64748b;

  font-size: 17px;

  text-align:
    center;
}

.navItem:hover {
  background:
    #111923;

  color:
    white;
}

.navItem.active {
  background:
    #10271f;

  border-color:
    #1e4939;

  color:
    var(--accent);
}

.navItem.active span {
  color:
    var(--accent);
}

/* =========================================================
   SIDEBAR BOTTOM
   ========================================================= */

.sidebarBottom {
  margin-top:
    auto;

  padding-top:
    20px;

  border-top:
    1px solid var(--border);
}

.logoutAdmin {
  width: 100%;

  background:
    #111923;

  color:
    #94a3b8;
}

/* =========================================================
   ADMIN CONTENT
   ========================================================= */

.adminContent {
  flex: 1;

  min-width: 0;

  padding:
    32px;

  background:
    #070b11;
}

.adminTopbar {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    35px;
}

.adminTopbar h1 {
  margin:
    5px 0 0;

  font-size:
    30px;

  color:
    white;
}

.adminDate {
  padding:
    10px 15px;

  border:
    1px solid #263241;

  border-radius:
    10px;

  color:
    var(--accent);

  font-size:
    11px;

  font-weight:
    800;
}

/* =========================================================
   SECCIONES ADMIN
   ========================================================= */

.adminSection {
  animation:
    fadeIn .25s ease;
}

@keyframes fadeIn {

  from {
    opacity: 0;
    transform:
      translateY(5px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }

}

/* =========================================================
   ENCABEZADOS
   ========================================================= */

.sectionHeading {
  margin-bottom:
    20px;
}

.sectionHeading h2 {
  margin:
    5px 0 0;

  color:
    white;

  font-size:
    23px;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.summary {
  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    15px;

  margin-bottom:
    22px;
}

.summary div {
  padding:
    20px;

  border:
    1px solid var(--border);

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      #111923,
      #0c121a
    );

  text-align:
    center;

  color:
    #cbd5e1;
}

/* =========================================================
   DASHBOARD CARD
   ========================================================= */

.dashboardCard {
  background:
    #0d131c;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  padding:
    20px;

  margin-bottom:
    20px;
}

.dashboardCardHeader {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-bottom:
    10px;

  color:
    #cbd5e1;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    1px;
}

.liveDot {
  color:
    var(--accent);
}

/* =========================================================
   CONTROLES
   ========================================================= */

.monthlyControls {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    end;

  gap:
    12px;

  padding:
    20px;

  background:
    #0d131c;

  border:
    1px solid var(--border);

  border-radius:
    16px;

  margin-bottom:
    20px;
}

.monthlyControls label {
  flex:
    1;

  min-width:
    150px;

  color:
    #94a3b8;

  font-size:
    12px;

  font-weight:
    800;
}

.monthlyControls input,
.monthlyControls select {
  display:
    block;

  width:
    100%;

  margin-top:
    7px;

  padding:
    12px;

  background:
    #080d14;

  color:
    white;

  border:
    1px solid #2a3645;

  border-radius:
    10px;

  outline:
    none;
}

.monthlyControls input:focus,
.monthlyControls select:focus {
  border-color:
    var(--accent);
}

.monthlyControls button {
  width:
    auto;

  min-width:
    150px;
}

/* =========================================================
   TABLAS
   ========================================================= */

.tableWrap {
  width:
    100%;

  overflow-x:
    auto;

  border:
    1px solid var(--border);

  border-radius:
    14px;

  background:
    #0b1118;
}

table {
  width:
    100%;

  border-collapse:
    collapse;

  min-width:
    720px;
}

th {
  padding:
    14px;

  background:
    #111923;

  color:
    #94a3b8;

  font-size:
    10px;

  text-transform:
    uppercase;

  letter-spacing:
    .7px;

  white-space:
    nowrap;

  border-bottom:
    1px solid var(--border);
}

td {
  padding:
    13px;

  color:
    #dbe3ed;

  font-size:
    13px;

  text-align:
    center;

  border-bottom:
    1px solid #1a2431;

  white-space:
    nowrap;
}

tbody tr:hover {
  background:
    #111923;
}

/* =========================================================
   BOTONES ADMIN
   ========================================================= */

.exportButton {
  background:
    #151e2a;

  border:
    1px solid #2b3949;

  color:
    #cbd5e1;

  margin:
    20px 0 8px;

  width:
    auto;
}

.exportButton:hover {
  border-color:
    var(--accent);

  color:
    var(--accent);
}

.danger {
  background:
    #201416;

  border:
    1px solid #4b2428;

  color:
    #fca5a5;

  width:
    auto;
}

.danger:hover {
  background:
    #32191d;
}

/* =========================================================
   SECONDARY
   ========================================================= */

.secondary {
  background:
    #151e2a;

  border:
    1px solid #2a3645;

  color:
    #cbd5e1;
}

/* =========================================================
   HIDDEN
   ========================================================= */

.hidden {
  display:
    none !important;
}

/* =========================================================
   HR
   ========================================================= */

hr {
  border:
    0;

  border-top:
    1px solid var(--border);

  margin:
    30px 0;
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {

  body {
    background:
      white;

    color:
      black;
  }

  .topHeader,
  .sidebar,
  .adminTopbar,
  button {
    display:
      none !important;
  }

  .adminContent {
    padding:
      0;

    background:
      white;
  }

  .adminSection {
    display:
      block !important;
  }

  .tableWrap,
  table {
    background:
      white;

    border-color:
      #ccc;
  }

  th {
    background:
      #eee;

    color:
      black;
  }

  td {
    color:
      black;

    border-color:
      #ddd;
  }

}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

  .sidebar {
    width:
      200px;
  }

  .adminContent {
    padding:
      25px;
  }

}

/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 650px) {

  .topHeader {
    height:
      auto;

    min-height:
      75px;

    padding:
      14px 16px;
  }

  .brandSubtitle {
    display:
      none;
  }

  .brandTitle {
    font-size:
      12px;
  }

  .brandIcon {
    width:
      38px;

    height:
      38px;
  }

  #clock {
    font-size:
      20px;
  }

  .systemStatus {
    font-size:
      8px;
  }

  .loginScreen {
    min-height:
      calc(100vh - 75px);

    padding:
      25px 15px;
  }

  .loginCard {
    padding:
      30px 22px;
  }

  .workerScreen {
    width:
      94%;

    margin:
      25px auto;
  }

  .workerWelcome {
    flex-direction:
      column;

    align-items:
      flex-start;
  }

  .workerWelcome h2 {
    font-size:
      25px;
  }

  .buttons {
    grid-template-columns:
      1fr;
  }

  .buttons button {
    min-height:
      72px;
  }

  /* ADMIN */

  .adminLayout {
    flex-direction:
      column;
  }

  .sidebar {
    width:
      100%;

    padding:
      10px;

    border-right:
      0;

    border-bottom:
      1px solid var(--border);
  }

  .sidebarBrand {
    display:
      none;
  }

  .adminNav {
    display:
      grid;

    grid-template-columns:
      repeat(3,1fr);

    gap:
      5px;
  }

  .navItem {
    justify-content:
      center;

    flex-direction:
      column;

    gap:
      4px;

    padding:
      9px 4px;

    font-size:
      9px;

    text-align:
      center;
  }

  .navItem span {
    font-size:
      16px;
  }

  .sidebarBottom {
    display:
      none;
  }

  .adminContent {
    padding:
      20px 14px;
  }

  .adminTopbar {
    margin-bottom:
      25px;
  }

  .adminTopbar h1 {
    font-size:
      24px;
  }

  .adminDate {
    display:
      none;
  }

  .summary {
    grid-template-columns:
      1fr 1fr;
  }

  .monthlyControls {
    display:
      block;
  }

  .monthlyControls label {
    display:
      block;

    margin-bottom:
      14px;
  }

  .monthlyControls button {
    width:
      100%;

    margin-top:
      5px;
  }

  .exportButton,
  .danger {
    width:
      100%;
  }

}

/* =========================================================
   TELÉFONOS MUY PEQUEÑOS
   ========================================================= */

@media (max-width: 400px) {

  .brandTitle {
    font-size:
      10px;
  }

  #clock {
    font-size:
      18px;
  }

  .summary {
    grid-template-columns:
      1fr;
  }

  .loginCard h1 {
    font-size:
      23px;
  }

}
/* SELECTORES EN TEMA OSCURO */

select {
  color: #ffffff !important;
  background-color: #0b1220 !important;
  border: 1px solid #15b89a !important;
}

select option {
  color: #ffffff !important;
  background-color: #0b1220 !important;
}

select:focus {
  color: #ffffff !important;
  background-color: #0b1220 !important;
}

/* Selector de sucursal del trabajador */
#workerSucursal,
#workerSucursal:focus,
#workerSucursal:invalid {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background-color: #0b1220 !important;
}

#workerSucursal option {
  color: #ffffff !important;
  background-color: #0b1220 !important;
}
#sucursalesSection button:not(.primaryButton) {
  background-color: #0f766e !important;
  color: #ffffff !important;
  border: none !important;
}

#sucursalesSection button:not(.primaryButton):hover {
  background-color: #115e59 !important;
}
/* Botones de acciones en Gestión de Personal */
#personalSection td button {
  color: #ffffff !important;
  background-color: #0f766e !important;
  border: 1px solid #115e59 !important;
  padding: 7px 12px !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  margin-right: 6px !important;
}

#personalSection td button:hover {
  background-color: #115e59 !important;
}
#personalSection td button:first-child {
  background-color: #0f766e !important;
}

#personalSection td button:last-child {
  background-color: #334155 !important;
}
.loginLogo {
  display: block;
  width: 260px;
  max-width: 85%;
  height: auto;
  margin: 0 auto 8px auto;
  object-fit: contain;
  filter: drop-shadow(
    0 4px 12px rgba(212, 175, 55, 0.18)
  );
}
/* Logo dentro del panel administrador */
.adminLogoBox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 8px 20px;
  margin-bottom: 10px;
}

.adminLogo {
  width: 170px;
  max-width: 90%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(
    0 4px 12px rgba(212, 175, 55, 0.22)
  );
}
#centralSection div[style*="background:#f8fafc"] {
  background: linear-gradient(
    135deg,
    #111827,
    #1f2937
  ) !important;

  color: #f9fafb !important;
  border-left: 4px solid #d4af37 !important;
  border-radius: 10px !important;
  padding: 16px !important;
}

#centralSection div[style*="background:#f8fafc"] b {
  color: #d4af37 !important;
}
.tabletSucursalBox {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  margin: 14px 0 18px;

  background: #111827;
  border: 1px solid #d4af37;
  border-radius: 10px;
}

.tabletSucursalBox span {
  font-size: 22px;
}

.tabletSucursalBox small {
  display: block;
  color: #9ca3af;
  font-size: 10px;
}

.tabletSucursalBox strong {
  display: block;
  color: #d4af37;
  font-size: 15px;
  margin-top: 2px;
}


.tabletConfigCard {
  padding: 18px;
  margin: 16px 0 22px;

  background: #111827;
  border: 1px solid #374151;
  border-left: 4px solid #d4af37;
  border-radius: 10px;
}

.tabletConfigCard p {
  color: #d1d5db;
  margin: 6px 0 14px;
}

.tabletConfigCard select {
  min-width: 220px;
  margin-right: 10px;
  padding: 10px;
}

#tabletSucursalEstado {
  margin-top: 12px;
  color: #d4af37;
  font-weight: 600;
}

/* =========================================================
   MODULO OFFLINE / CONECTIVIDAD
   ========================================================= */

#offlineIndicator {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99999;

  width: 17px;
  height: 17px;
  min-width: 17px;
  padding: 0;

  border: 2px solid rgba(255,255,255,.72);
  border-radius: 50%;

  box-shadow:
    0 0 0 3px rgba(0,0,0,.18),
    0 4px 14px rgba(0,0,0,.32);

  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

#offlineIndicator:hover {
  transform: scale(1.12);
}

#offlineIndicator.online-ok {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.16), 0 0 13px rgba(34,197,94,.55);
}

#offlineIndicator.online-pending {
  background: #eab308;
  box-shadow: 0 0 0 3px rgba(234,179,8,.16), 0 0 13px rgba(234,179,8,.52);
}

#offlineIndicator.offline-mode {
  background: #f97316;
  box-shadow: 0 0 0 3px rgba(249,115,22,.16), 0 0 13px rgba(249,115,22,.52);
}

#offlineIndicator.offline-review {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.16), 0 0 13px rgba(239,68,68,.52);
}

/* =========================================================
   ESTADO DEL PERÍODO - ROL DE PAGOS
   ========================================================= */

#rolEstadoPeriodo {
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  background: #111827 !important;
  color: #e5e7eb !important;
  border: 1px solid #374151 !important;
  border-left: 4px solid #34d399 !important;
  border-radius: 10px !important;
}

#rolEstadoPeriodo b {
  color: #34d399 !important;
  font-size: 14px !important;
}

#rolEstadoPeriodo span {
  color: #d1d5db !important;
}

/* Estado cerrado */
#rolEstadoPeriodo.rol-cerrado {
  border-left-color: #d4af37 !important;
}

#rolEstadoPeriodo.rol-cerrado b {
  color: #d4af37 !important;
}

/* =========================================================
   CORRECCIÓN MANUAL DE ASISTENCIA + AUDITORÍA
   ========================================================= */
.attendanceEditButton{padding:8px 12px!important;background:#334155!important;color:#f8fafc!important;border:1px solid #475569!important;border-radius:8px!important;white-space:nowrap}
.attendanceEditButton:hover{background:#475569!important;border-color:#34d399!important}
.attendanceAuditCard{margin-top:24px;padding:20px;background:#0d131c;border:1px solid var(--border);border-radius:16px}
.attendanceAuditHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}
.attendanceAuditHeader h3{margin:5px 0 4px;color:#f8fafc;font-size:19px}
.attendanceAuditHeader p{margin:0;color:#94a3b8;font-size:12px;line-height:1.5}
.auditRefreshButton{width:auto!important;min-width:110px;padding:9px 12px;background:#111923;color:#cbd5e1;border:1px solid #334155}
.auditTable{min-width:980px}.auditChangesCell{min-width:260px;text-align:left!important;white-space:normal!important}.auditChangeLine{margin:3px 0;line-height:1.35}.auditReasonCell{min-width:190px;max-width:280px;text-align:left!important;white-space:normal!important;line-height:1.4}
.attendanceEditDialog{width:min(94vw,860px);max-height:92vh;padding:0;border:1px solid #334155;border-radius:16px;background:#0b1118;color:#f8fafc;box-shadow:0 30px 90px rgba(0,0,0,.65)}
.attendanceEditDialog::backdrop{background:rgba(2,6,12,.78);backdrop-filter:blur(3px)}
.attendanceEditForm{padding:24px}.attendanceEditHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:1px solid #263241}.attendanceEditHeader h2{margin:5px 0;color:#f8fafc}.attendanceEditHeader p{margin:0;color:#94a3b8;font-size:13px}
.attendanceDialogClose{width:40px;height:40px;padding:0;display:grid;place-items:center;background:#111923;color:#cbd5e1;border:1px solid #334155;font-size:25px;line-height:1}
.attendanceEditMeta{margin:16px 0}.attendanceEditMeta label,.attendanceEditMarkRow label,.attendanceEditReason label{display:flex;flex-direction:column;gap:6px;color:#cbd5e1;font-size:12px;font-weight:700}
.attendanceEditMeta input,.attendanceEditMarkRow input,.attendanceEditMarkRow select,.attendanceEditReason textarea{width:100%;padding:10px 11px;background:#080d14;color:#f8fafc;border:1px solid #2a3645;border-radius:9px;outline:none;font:inherit}
.attendanceEditMeta input{max-width:220px}.attendanceEditMeta input:focus,.attendanceEditMarkRow input:focus,.attendanceEditMarkRow select:focus,.attendanceEditReason textarea:focus{border-color:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.10)}
.attendanceEditMarks{display:grid;gap:9px}.attendanceEditMarkRow{display:grid;grid-template-columns:minmax(180px,1.25fr) 150px minmax(190px,1fr);align-items:end;gap:12px;padding:13px;background:#0d131c;border:1px solid #263241;border-radius:11px}.attendanceEditMarkName strong{display:block;color:#f8fafc;font-size:13px}.attendanceEditMarkName small{display:block;margin-top:4px;color:#64748b;font-size:11px}
.attendanceEditReason{margin-top:16px}.attendanceEditReason textarea{resize:vertical;min-height:76px}.attendanceEditReason>small{display:block;margin-top:6px;color:#64748b;font-size:11px}.attendanceEditMsg{min-height:20px;margin-top:10px;color:#f87171;font-size:12px;font-weight:700}
.attendanceEditActions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid #263241}.attendanceCancelButton,.attendanceSaveButton{width:auto!important;min-width:150px;margin-top:0!important}
@media(max-width:760px){.attendanceEditDialog{width:96vw}.attendanceEditForm{padding:16px}.attendanceEditMarkRow{grid-template-columns:1fr;align-items:stretch}.attendanceEditActions{flex-direction:column-reverse}.attendanceCancelButton,.attendanceSaveButton{width:100%!important}}

/* =========================================================
   NOVEDADES LABORALES
   ========================================================= */
.noveltyNotice {
  margin: 0 0 18px;
  padding: 13px 15px;
  background: #111827;
  color: #d1d5db;
  border: 1px solid #374151;
  border-left: 4px solid #d4af37;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.55;
}
.noveltyNotice b { color:#d4af37; }
.noveltyNotice strong { color:#f8fafc; }
.noveltyFormCard {
  margin-bottom: 20px;
  padding: 20px;
  background: #0d131c;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.noveltyFormTitle { color:#f8fafc;font-size:16px;font-weight:800;margin-bottom:15px; }
.noveltyFormGrid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px; }
.noveltyFormGrid label { display:flex;flex-direction:column;gap:6px;color:#cbd5e1;font-size:11px;font-weight:800; }
.noveltyFormGrid input,.noveltyFormGrid select,.noveltyFormGrid textarea {
  width:100%;padding:10px 11px;background:#080d14;color:#f8fafc;border:1px solid #2a3645;border-radius:9px;outline:none;font:inherit;
}
.noveltyFormGrid input:focus,.noveltyFormGrid select:focus,.noveltyFormGrid textarea:focus { border-color:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.10); }
.noveltyFormGrid textarea { resize:vertical;min-height:72px; }
.noveltyFullField { grid-column:1/-1; }
.noveltyFormActions { display:flex;justify-content:flex-end;gap:10px;margin-top:14px; }
.noveltyFormActions .primaryButton,.noveltyFormActions .secondary { width:auto!important;min-width:150px;margin-top:0!important; }
.noveltyFormMsg { min-height:18px;margin-top:9px;color:#f87171;font-size:12px;font-weight:700; }
.noveltyBadge { display:inline-block;padding:4px 7px;border-radius:999px;font-size:9.5px;font-weight:800;line-height:1.2;white-space:normal; }
.novelty-permiso { background:#172554;color:#bfdbfe;border:1px solid #1d4ed8; }
.novelty-falta_justificada { background:#052e2b;color:#a7f3d0;border:1px solid #0f766e; }
.novelty-falta_injustificada { background:#3f1218;color:#fecaca;border:1px solid #b91c1c; }
.novelty-vacaciones { background:#3b2607;color:#fde68a;border:1px solid #b45309; }
.novelty-certificado_medico { background:#2e1065;color:#ddd6fe;border:1px solid #7c3aed; }
.novelty-dia_libre { background:#1e293b;color:#cbd5e1;border:1px solid #475569; }
.novelty-otro { background:#27272a;color:#e4e4e7;border:1px solid #52525b; }
.noveltyAttendanceCell { min-width:150px;white-space:normal!important; }
.noveltyNone { color:#64748b; }
.noveltyTable { min-width:1120px; }
.noveltyNoteCell { max-width:280px;white-space:normal!important;text-align:left!important;line-height:1.4; }
.noveltyDeleteButton { padding:7px 10px!important; }
#noveltySummary { grid-template-columns:repeat(5,1fr); }
@media (max-width:1050px) { .noveltyFormGrid{grid-template-columns:repeat(2,minmax(0,1fr));} #noveltySummary{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px) { .noveltyFormGrid{grid-template-columns:1fr;} .noveltyFullField{grid-column:auto;} .noveltyFormActions{flex-direction:column-reverse;} .noveltyFormActions .primaryButton,.noveltyFormActions .secondary{width:100%!important;} #noveltySummary{grid-template-columns:1fr;} }


/* =========================================================
   HORARIOS POR TRABAJADOR
   ========================================================= */

.scheduleHeading p {
  margin: 7px 0 0;
  color: #94a3b8;
  line-height: 1.55;
}

.scheduleNotice {
  margin-bottom: 18px;
  padding: 14px 16px;
  background: #111827;
  color: #dbe3ed;
  border: 1px solid #374151;
  border-left: 4px solid #d4af37;
  border-radius: 10px;
  line-height: 1.55;
  font-size: 13px;
}

.scheduleNotice b {
  color: #d4af37;
}

.scheduleTopCard {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(180px,.8fr) auto;
  gap: 14px;
  align-items: end;
  padding: 18px;
  margin-bottom: 16px;
  background: #0d131c;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.scheduleTopCard label {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

.scheduleTopCard select,
.scheduleTopCard input {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 11px 12px;
  background: #080d14;
  color: white;
  border: 1px solid #2a3645;
  border-radius: 9px;
}

.scheduleQuickActions {
  display: flex;
  gap: 8px;
}

.scheduleQuickActions button {
  width: auto;
  white-space: nowrap;
  padding: 11px 13px;
}

.scheduleCurrentSummary {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #244f42;
  background: #0d1714;
  border-radius: 11px;
  color: #dbe3ed;
  line-height: 1.5;
}

.scheduleCurrentSummary strong,
.scheduleCurrentSummary b {
  color: #34d399;
}

.scheduleCurrentSummary span {
  color: #94a3b8;
  font-size: 12px;
}

.scheduleTable {
  min-width: 760px;
}

.scheduleTable td {
  padding: 10px 12px;
}

.scheduleTable input[type="time"],
.scheduleTable input[type="number"] {
  width: 120px;
  padding: 9px 10px;
  background: #080d14;
  color: #f8fafc;
  border: 1px solid #2a3645;
  border-radius: 8px;
  outline: none;
}

.scheduleTable input:focus {
  border-color: #34d399;
}

.scheduleDayOff {
  opacity: .58;
  background: #0b0f15;
}

.scheduleWorkSwitch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cbd5e1;
  cursor: pointer;
}

.scheduleWorkSwitch input {
  width: 17px;
  height: 17px;
  accent-color: #34d399;
}

.scheduleLunchInput {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #94a3b8;
}

.scheduleMsg {
  min-height: 23px;
  margin-top: 10px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
}

.scheduleSaveBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  padding: 16px;
  background: #0d131c;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.scheduleSaveBar b {
  display: block;
  color: #f8fafc;
  font-size: 13px;
}

.scheduleSaveBar small {
  display: block;
  margin-top: 5px;
  max-width: 620px;
  color: #64748b;
  line-height: 1.45;
}

.scheduleSaveButton {
  width: auto !important;
  min-width: 190px;
  margin-top: 0 !important;
}

.scheduleHistoryCard {
  margin-top: 24px;
  padding: 18px;
  background: #0d131c;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.scheduleHistoryHeader h3 {
  margin: 5px 0 3px;
  color: #f8fafc;
}

.scheduleHistoryHeader p {
  margin: 0 0 14px;
  color: #94a3b8;
  font-size: 12px;
}

.scheduleHistoryTable {
  min-width: 850px;
}

.scheduleHistorySummary {
  min-width: 360px;
  max-width: 560px;
  white-space: normal !important;
  text-align: left !important;
  line-height: 1.4;
}

.scheduleAttendanceCell {
  min-width: 150px;
  color: #cbd5e1;
  font-size: 11px;
  white-space: normal !important;
}

@media (max-width: 900px) {
  .scheduleTopCard {
    grid-template-columns: 1fr;
  }

  .scheduleQuickActions {
    flex-wrap: wrap;
  }

  .scheduleSaveBar {
    flex-direction: column;
    align-items: stretch;
  }

  .scheduleSaveButton {
    width: 100% !important;
  }
}


/* =========================================================
   CALENDARIO LABORAL / COMPENSATORIOS
   ========================================================= */
.calendarRuleNotice{padding:14px 16px;margin-bottom:18px;border:1px solid #6e5315;border-left:4px solid #d4af37;border-radius:10px;background:#17130b;color:#dbe3ed;line-height:1.5}.calendarRuleNotice strong,.calendarRuleNotice b{color:#e3bd55}.calendarGrid{display:grid;grid-template-columns:1.35fr .65fr;gap:16px;margin-bottom:20px}.calendarCard,.calendarCompCard{padding:19px;background:#0d131c;border:1px solid var(--border);border-radius:16px}.calendarCard h3,.calendarCompCard h3{margin:0 0 14px;color:#f8fafc}.calendarFormGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.calendarFormGrid label{display:flex;flex-direction:column;gap:6px;color:#cbd5e1;font-size:12px;font-weight:700}.calendarFormGrid input,.calendarFormGrid select{padding:11px;background:#080d14;color:#fff;border:1px solid #2a3645;border-radius:9px}.calendarFull{grid-column:1/-1}.calendarFormMsg{min-height:20px;margin-top:8px;color:#34d399;font-size:12px;font-weight:700}.calendarMiniSummary{padding:13px;margin:10px 0;background:#080d14;border:1px solid #263241;border-radius:10px;color:#cbd5e1}.calendarTable{min-width:1000px}.calendarTreatments{min-width:340px;text-align:left!important;white-space:normal!important}.calendarTreatmentRow{display:grid;grid-template-columns:1fr 175px;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid #1a2431}.calendarTreatmentRow:last-child{border-bottom:0}.calendarTreatmentRow select{padding:7px;background:#080d14;color:#fff;border:1px solid #334155;border-radius:7px}.calendarBadge{display:inline-block;margin:2px 5px 2px 0;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.3px}.calendarBadge.holiday{background:#3a2710;color:#f3c862;border:1px solid #73511e}.calendarBadge.special{background:#10271f;color:#5ee1ad;border:1px solid #1f6f53}.calendarCompCard{margin-top:22px}.calendarCompHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px}.calendarCompHeader p{margin:4px 0 0;color:#94a3b8;font-size:12px}.calendarCompTable{min-width:780px}.compStatus{display:inline-block;padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900}.compStatus.pending{background:#342b12;color:#f3c862}.compStatus.used{background:#10271f;color:#5ee1ad}.compactButton{width:auto!important;min-width:0!important;margin:0!important;padding:8px 11px!important}.calendarCompTable input[type=date]{padding:8px;background:#080d14;color:#fff;border:1px solid #334155;border-radius:7px}@media(max-width:800px){.calendarGrid{grid-template-columns:1fr}.calendarFormGrid{grid-template-columns:1fr}.calendarFull{grid-column:auto}.calendarTreatmentRow{grid-template-columns:1fr}.calendarCompHeader{flex-direction:column}}



/* =========================================================
   CALENDARIO - DISEÑO ORDENADO EN TARJETAS
   ========================================================= */

.calendarEventsList {
  display: grid;
  gap: 18px;
  margin-top: 4px;
}

.calendarEventCard {
  overflow: hidden;
  background: #0d131c;
  border: 1px solid #263241;
  border-radius: 16px;
  box-shadow: 0 14px 35px rgba(0,0,0,.14);
}

.calendarEventHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 19px;
  background: #111923;
  border-bottom: 1px solid #263241;
}

.calendarEventIdentity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 15px;
}

.calendarEventDate {
  min-width: 112px;
  padding: 10px 11px;
  text-align: center;
  background: #080d14;
  border: 1px solid #334155;
  border-radius: 10px;
}

.calendarEventDate span {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
}

.calendarEventBadges {
  margin-bottom: 5px;
}

.calendarEventName {
  margin: 0 !important;
  color: #f8fafc;
  font-size: 17px !important;
}

.calendarSpecialInfo {
  margin-top: 5px;
  color: #94a3b8;
  font-size: 11px;
}

.calendarDeleteButton {
  flex-shrink: 0;
}

.calendarWorkersSection {
  padding: 17px 19px 19px;
}

.calendarWorkersTitle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.calendarWorkersTitle strong {
  display: block;
  color: #f8fafc;
  font-size: 13px;
}

.calendarWorkersTitle small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 10px;
}

.calendarTreatmentSummary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.calendarSummaryChip {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

.calendarSummaryChip.pending {
  background: #1f2937;
  color: #cbd5e1;
}

.calendarSummaryChip.off {
  background: #17202b;
  color: #94a3b8;
}

.calendarSummaryChip.paid {
  background: #10271f;
  color: #5ee1ad;
  border: 1px solid #1f6f53;
}

.calendarSummaryChip.comp {
  background: #342b12;
  color: #f3c862;
  border: 1px solid #66551e;
}

.calendarWorkersGrid {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.calendarWorkerItem {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr);
  gap: 7px;
  padding: 10px;
  background: #080d14;
  border: 1px solid #202c3a;
  border-radius: 10px;
}

.calendarWorkerInfo {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.calendarWorkerCode {
  flex-shrink: 0;
  padding: 3px 5px;
  color: #34d399;
  background: #10271f;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 900;
}

.calendarWorkerName {
  overflow: hidden;
  color: #e5e7eb;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.calendarWorkerSelect {
  width: 100%;
  min-width: 0;
  padding: 8px 9px !important;
  background: #0f1722 !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
  border-radius: 8px !important;
  outline: none;
  font-size: 10px;
}

.calendarWorkerSelect:focus {
  border-color: #34d399 !important;
}

.calendarSpecialMessage {
  margin: 15px 19px 18px;
  padding: 12px 14px;
  color: #cbd5e1;
  background: #10271f;
  border: 1px solid #1f6f53;
  border-radius: 10px;
  font-size: 12px;
}

.calendarEmptyState {
  padding: 28px;
  text-align: center;
  color: #94a3b8;
  background: #0d131c;
  border: 1px dashed #334155;
  border-radius: 14px;
}

@media (max-width: 1180px) {
  .calendarWorkersGrid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .calendarEventHeader,
  .calendarWorkersTitle {
    flex-direction: column;
    align-items: stretch;
  }

  .calendarEventIdentity {
    align-items: flex-start;
  }

  .calendarEventDate {
    min-width: 104px;
  }

  .calendarTreatmentSummary {
    justify-content: flex-start;
  }

  .calendarWorkersGrid {
    grid-template-columns: 1fr;
  }

  .calendarDeleteButton {
    width: 100% !important;
  }
}

/* =========================================================
   REPORTE MENSUAL PROFESIONAL DE ASISTENCIA
   ========================================================= */

.monthlyReportHeading p {
  margin: 7px 0 0;
  color: #94a3b8;
  font-size: 12px;
}

.monthlyReportControls {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.monthlyReportActions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin: -8px 0 16px;
}

.monthlyReportActions button {
  width: auto;
  min-width: 145px;
}

.monthlyReportPrintHeader {
  display: none;
}

.monthlyReportSummary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.monthlyReportSummary > div {
  min-width: 0;
  padding: 14px 12px;
  background: linear-gradient(145deg, #111923, #0c121a);
  border: 1px solid #263241;
  border-radius: 12px;
  text-align: center;
}

.monthlyReportSummary small {
  display: block;
  color: #64748b;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .7px;
}

.monthlyReportSummary strong {
  display: block;
  margin-top: 6px;
  color: #f8fafc;
  font-size: 17px;
}

.monthlyReportBlock {
  margin-top: 18px;
  padding: 18px;
  background: #0d131c;
  border: 1px solid #263241;
  border-radius: 16px;
}

.monthlyReportBlockTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}

.monthlyReportBlockTitle h3 {
  margin: 4px 0 0;
  color: #f8fafc;
  font-size: 18px;
}

.monthlyReportTable {
  min-width: 1250px;
}

.monthlyDetailTable {
  min-width: 1450px;
}

.monthlyDetailTable td:nth-child(2) {
  text-align: left;
  white-space: normal;
  min-width: 170px;
}

.monthlyDetailTable td:nth-child(2) small {
  color: #94a3b8;
}

.monthlyReportFootnote {
  margin-top: 12px;
  color: #64748b;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .monthlyReportSummary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .monthlyReportSummary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .monthlyReportActions {
    flex-direction: column;
  }
  .monthlyReportActions button {
    width: 100%;
  }
}

@media print {
  @page {
    size: A4 landscape;
    margin: 9mm;
  }

  body.printingMonthlyReport {
    background: #fff !important;
    color: #111827 !important;
  }

  body.printingMonthlyReport .topHeader,
  body.printingMonthlyReport .sidebar,
  body.printingMonthlyReport .adminTopbar,
  body.printingMonthlyReport .noPrintMonthly,
  body.printingMonthlyReport .monthlyReportControls,
  body.printingMonthlyReport #offlineIndicator {
    display: none !important;
  }

  body.printingMonthlyReport #adminPanel {
    display: block !important;
  }

  body.printingMonthlyReport .adminContent {
    padding: 0 !important;
    background: #fff !important;
  }

  body.printingMonthlyReport .adminSection {
    display: none !important;
  }

  body.printingMonthlyReport #historySection {
    display: block !important;
    color: #111827 !important;
  }

  body.printingMonthlyReport .monthlyReportHeading {
    display: none !important;
  }

  body.printingMonthlyReport .monthlyReportPrintHeader {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid #9a7421;
  }

  body.printingMonthlyReport .monthlyReportPrintHeader img {
    width: 42mm;
    max-height: 18mm;
    object-fit: contain;
  }

  body.printingMonthlyReport .monthlyReportPrintHeader strong,
  body.printingMonthlyReport .monthlyReportPrintHeader span,
  body.printingMonthlyReport .monthlyReportPrintHeader small {
    display: block;
    color: #111827 !important;
  }

  body.printingMonthlyReport .monthlyReportPrintHeader strong {
    font-size: 16px;
  }

  body.printingMonthlyReport .monthlyReportPrintHeader span {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
  }

  body.printingMonthlyReport .monthlyReportPrintHeader small {
    margin-top: 3px;
    font-size: 9px;
  }

  body.printingMonthlyReport .monthlyReportSummary {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  body.printingMonthlyReport .monthlyReportSummary > div {
    padding: 6px 4px !important;
    background: #f3f4f6 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
  }

  body.printingMonthlyReport .monthlyReportSummary small,
  body.printingMonthlyReport .monthlyReportSummary strong {
    color: #111827 !important;
  }

  body.printingMonthlyReport .monthlyReportSummary strong {
    margin-top: 2px;
    font-size: 11px;
  }

  body.printingMonthlyReport .monthlyReportBlock {
    padding: 0 !important;
    margin: 8px 0 0 !important;
    background: #fff !important;
    border: 0 !important;
    break-inside: auto;
  }

  body.printingMonthlyReport .monthlyReportBlockTitle {
    margin-bottom: 5px;
  }

  body.printingMonthlyReport .monthlyReportBlockTitle h3 {
    color: #111827 !important;
    font-size: 11px;
  }

  body.printingMonthlyReport .monthlyReportBlockTitle .smallLabel {
    display: none !important;
  }

  body.printingMonthlyReport .tableWrap {
    overflow: visible !important;
    border: 0 !important;
  }

  body.printingMonthlyReport table {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 6.5px !important;
    color: #111827 !important;
  }

  body.printingMonthlyReport th,
  body.printingMonthlyReport td {
    padding: 3px 3px !important;
    color: #111827 !important;
    background: #fff !important;
    border: 1px solid #aeb6c0 !important;
    white-space: normal !important;
  }

  body.printingMonthlyReport th {
    background: #e5e7eb !important;
    font-size: 5.8px !important;
  }

  body.printingMonthlyReport tr {
    break-inside: avoid;
  }

  body.printingMonthlyReport .monthlyReportFootnote {
    color: #4b5563 !important;
    font-size: 6.5px;
  }
}


/* =========================================================
   AUDITORÍA GENERAL
   ========================================================= */
.auditGeneralHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.auditGeneralRefresh{width:auto!important;min-width:135px;margin-top:0!important}.auditGeneralSummary{grid-template-columns:repeat(4,minmax(0,1fr))}.auditGeneralSummary div{display:flex;flex-direction:column;gap:5px}.auditGeneralSummary strong{color:#f8fafc;font-size:24px}.auditGeneralSummary span{color:#94a3b8;font-size:10px;text-transform:uppercase;letter-spacing:.6px}.auditGeneralFilters{align-items:end}.auditSearchLabel{min-width:220px!important}.auditGeneralNotice{margin-bottom:15px;padding:12px 14px;color:#cbd5e1;background:#101722;border:1px solid #334155;border-left:4px solid #d4af37;border-radius:10px;font-size:12px}.auditGeneralNotice strong{color:#d4af37}.auditGeneralTable{min-width:1240px}.auditGeneralTable td{vertical-align:top}.auditGeneralTable td small{display:block;margin-top:4px;color:#64748b;font-size:9px}.auditGeneralDateCell{min-width:150px;text-align:left!important}.auditGeneralActionCell{min-width:185px;text-align:left!important;white-space:normal!important}.auditGeneralActionCell b{display:block;margin-top:5px;color:#f8fafc;line-height:1.35}.auditGeneralDetailCell{min-width:320px;max-width:440px;text-align:left!important;white-space:normal!important}.auditGeneralChange{margin:3px 0;color:#dbe3ed;line-height:1.35}.auditGeneralChange b{color:#94a3b8}.auditGeneralProtected{margin-top:5px;color:#d4af37;font-size:10px;font-weight:700}.auditModuleBadge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;color:#cbd5e1;background:#111923;border:1px solid #334155;border-radius:999px;font-size:10px;font-weight:800;white-space:nowrap}.auditSensitiveBadge{display:inline-flex;padding:3px 6px;color:#fecaca;background:#3b1116;border:1px solid #7f1d1d;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.6px}.auditGeneralSensitiveRow{background:rgba(127,29,29,.06)}.auditGeneralSensitiveRow:hover{background:rgba(127,29,29,.12)!important}.auditGeneralDetails{margin-top:8px;padding-top:6px;border-top:1px dashed #334155}.auditGeneralDetails summary{color:#34d399;font-size:9px;font-weight:800;cursor:pointer}.auditGeneralDetails pre{max-width:410px;max-height:280px;overflow:auto;margin:8px 0 0;padding:10px;color:#cbd5e1;background:#070b11;border:1px solid #263241;border-radius:8px;font-size:9px;line-height:1.4;white-space:pre-wrap;word-break:break-word}@media(max-width:900px){.auditGeneralSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.auditGeneralHeading{flex-direction:column}.auditGeneralRefresh{width:100%!important}}



/* =========================================================
   DASHBOARD EJECUTIVO
   ========================================================= */

.dashboardExecutiveSection {
  --dashGreen: #34d399;
  --dashRed: #fb7185;
  --dashYellow: #fbbf24;
  --dashBlue: #60a5fa;
  --dashPurple: #a78bfa;
  --dashCyan: #22d3ee;
}

.dashboardExecutiveTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 18px;
}

.dashboardExecutiveTop h2 {
  margin: 5px 0 3px;
  color: #f8fafc;
  font-size: 25px;
}

.dashboardExecutiveTop p {
  margin: 0;
  color: #64748b;
  font-size: 12px;
}

.dashboardTopActions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboardUpdated {
  color: #64748b;
  font-size: 10px;
}

.dashboardRefreshButton {
  width: auto !important;
  padding: 9px 13px;
  background: #111923;
  color: #cbd5e1;
  border: 1px solid #334155;
}

.dashboardKpiGrid {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.dashboardKpiCard {
  min-width: 0;
  min-height: 106px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  background:
    linear-gradient(
      145deg,
      #111923,
      #0d141d
    );
  border: 1px solid #263241;
  border-radius: 13px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14);
}

.dashboardKpiIcon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  background: #17202b;
}

.dashboardKpiContent {
  min-width: 0;
}

.dashboardKpiContent > span {
  display: block;
  overflow: hidden;
  color: #b8c4d2;
  font-size: 8.8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .45px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboardKpiContent strong {
  display: block;
  margin: 3px 0 2px;
  color: #f8fafc;
  font-size: 25px;
  line-height: 1;
}

.dashboardKpiContent small {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 8.7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kpiPresent .dashboardKpiIcon {
  color: #86efac;
  background: #173d2a;
}

.kpiPresent small {
  color: #4ade80;
}

.kpiAbsent .dashboardKpiIcon {
  color: #fda4af;
  background: #48202a;
}

.kpiAbsent small {
  color: #fb7185;
}

.kpiLate .dashboardKpiIcon {
  color: #fcd34d;
  background: #44310e;
}

.kpiLate small {
  color: #fbbf24;
}

.kpiNovelty .dashboardKpiIcon {
  color: #93c5fd;
  background: #15365f;
}

.kpiNovelty small {
  color: #60a5fa;
}

.kpiHoliday .dashboardKpiIcon {
  color: #c4b5fd;
  background: #34245d;
}

.kpiHoliday small {
  color: #a78bfa;
}

.kpiTotal .dashboardKpiIcon {
  color: #67e8f9;
  background: #164e55;
}

.kpiTotal small {
  color: #22d3ee;
}

.skeletonCard {
  position: relative;
  overflow: hidden;
}

.skeletonCard::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.045),
      transparent
    );
  animation:
    dashboardSkeleton 1.2s infinite;
}

@keyframes dashboardSkeleton {
  to {
    transform:
      translateX(100%);
  }
}

.dashboardExecutiveGrid {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboardExecutiveGridTop {
  grid-template-columns:
    1.02fr 1.1fr 1.08fr;
}

.dashboardExecutiveGridBottom {
  grid-template-columns:
    1.2fr 1fr 1fr;
}

.dashboardExecutiveCard {
  min-width: 0;
  padding: 17px;
  background:
    linear-gradient(
      145deg,
      #0e151f,
      #0b1118
    );
  border: 1px solid #263241;
  border-radius: 14px;
  box-shadow:
    0 16px 36px rgba(0,0,0,.13);
}

.dashboardExecutiveCardHeader {
  min-height: 38px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboardCardEyebrow {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .8px;
}

.dashboardExecutiveCardHeader h3 {
  margin: 0;
  color: #e5edf7;
  font-size: 13px;
  letter-spacing: .15px;
}

.dashboardMonthBadge,
.dashboardRankingHint {
  color: #64748b;
  font-size: 8.5px;
  white-space: nowrap;
}

.dashboardMonthBadge {
  padding: 5px 8px;
  background: #111923;
  border: 1px solid #263241;
  border-radius: 7px;
}

.dashboardMonthlyStats {
  display: grid;
}

.dashboardMonthlyRow {
  min-height: 31px;
  display: grid;
  grid-template-columns:
    23px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  border-bottom:
    1px solid #1a2532;
  color: #b8c4d2;
  font-size: 9.5px;
}

.dashboardMonthlyRow:last-child {
  border-bottom: 0;
}

.dashboardMonthlyRow b {
  color: #dbe6f3;
  font-size: 9.5px;
}

.dashboardMonthlyRow b.green {
  color: #4ade80;
}

.dashboardMonthlyRow b.blue {
  color: #60a5fa;
}

.dashboardMonthlyRow b.yellow {
  color: #fbbf24;
}

.dashboardMonthlyRow b.red {
  color: #fb7185;
}

.dashboardMonthlyRow b.purple {
  color: #c084fc;
}

.dashboardMonthlyIcon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 9px;
}

.dashboardMonthlyIcon.green {
  color: #4ade80;
  background: #153426;
}

.dashboardMonthlyIcon.blue {
  color: #60a5fa;
  background: #15345a;
}

.dashboardMonthlyIcon.yellow {
  color: #fbbf24;
  background: #3c2d0c;
}

.dashboardMonthlyIcon.red {
  color: #fb7185;
  background: #3b1821;
}

.dashboardMonthlyIcon.purple {
  color: #c084fc;
  background: #352047;
}

.dashboardPayrollEstimate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 11px;
  background:
    linear-gradient(
      90deg,
      #111923,
      #13251c
    );
  border: 1px solid #263241;
  border-radius: 9px;
}

.dashboardPayrollEstimate span {
  color: #cbd5e1;
  font-size: 9.5px;
}

.dashboardPayrollEstimate strong {
  color: #4ade80;
  font-size: 19px;
}

.dashboardBranchLayout {
  min-height: 210px;
  display: grid;
  grid-template-columns:
    155px minmax(0,1fr);
  align-items: center;
  gap: 14px;
}

.dashboardDonutWrap {
  display: grid;
  place-items: center;
}

.dashboardDonut {
  width: 142px;
  height: 142px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(
      #1e293b 0 100%
    );
}

.dashboardDonut::after {
  content: "";
  position: absolute;
  width: 93px;
  height: 93px;
  border-radius: 50%;
  background: #0d141d;
  box-shadow:
    inset 0 0 0 1px #263241;
}

.dashboardDonutCenter {
  position: relative;
  z-index: 2;
  text-align: center;
}

.dashboardDonutCenter strong {
  display: block;
  color: #f8fafc;
  font-size: 27px;
  line-height: 1;
}

.dashboardDonutCenter span {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-size: 8.5px;
}

.dashboardBranchLegend {
  display: grid;
  gap: 9px;
}

.dashboardBranchLegendRow {
  display: grid;
  grid-template-columns:
    9px minmax(0,1fr) auto 42px;
  align-items: center;
  gap: 6px;
  color: #cbd5e1;
  font-size: 9px;
}

.dashboardBranchDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dashboardBranchName {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboardBranchLegendRow b {
  color: #f8fafc;
}

.dashboardBranchLegendRow small {
  color: #64748b;
  text-align: right;
}

.dashboardBranchFooter {
  display: grid;
  grid-template-columns:
    repeat(3,1fr);
  margin: 8px -17px -17px;
  border-top: 1px solid #263241;
}

.dashboardBranchFooter div {
  padding: 10px;
  text-align: center;
  border-right:
    1px solid #263241;
}

.dashboardBranchFooter div:last-child {
  border-right: 0;
}

.dashboardBranchFooter b {
  display: block;
  color: #f8fafc;
  font-size: 14px;
}

.dashboardBranchFooter span {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 7.5px;
}

.dashboardStatusBars {
  display: grid;
  gap: 15px;
  padding-top: 3px;
}

.dashboardStatusLabel {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  color: #cbd5e1;
  font-size: 9.5px;
}

.dashboardStatusLabel b {
  color: #f8fafc;
  font-size: 9px;
}

.dashboardStatusLabel small {
  color: #64748b;
  font-size: 8px;
}

.dashboardStatusTrack {
  height: 6px;
  overflow: hidden;
  background: #172231;
  border-radius: 999px;
}

.dashboardStatusTrack span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  transition: width .35s ease;
}

.dashboardStatusRow.present
.dashboardStatusTrack span {
  background: #34d399;
}

.dashboardStatusRow.absent
.dashboardStatusTrack span {
  background: #fb7185;
}

.dashboardStatusRow.late
.dashboardStatusTrack span {
  background: #f59e0b;
}

.dashboardStatusRow.novelty
.dashboardStatusTrack span {
  background: #60a5fa;
}

.dashboardStatusRow.lunch
.dashboardStatusTrack span {
  background: #a78bfa;
}

.dashboardTrendLegend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  color: #94a3b8;
  font-size: 8px;
}

.dashboardTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dashboardTrendLegend i {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
}

.trendPresent {
  background: #34d399;
}

.trendAbsent {
  background: #fb7185;
}

.trendLate {
  background: #f59e0b;
}

.dashboardTrendChart {
  width: 100%;
  min-height: 238px;
}

.dashboardTrendSvg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 260px;
}

.dashboardChartGrid {
  stroke: #243040;
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.dashboardChartAxis {
  fill: #64748b;
  font-size: 9px;
}

.dashboardChartDay {
  text-transform: capitalize;
}

.dashboardLine {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboardLinePresent {
  stroke: #34d399;
}

.dashboardLineAbsent {
  stroke: #fb7185;
}

.dashboardLineLate {
  stroke: #f59e0b;
}

.dashboardPoint {
  stroke-width: 2;
  stroke: #0d141d;
}

.dashboardPointPresent {
  fill: #34d399;
}

.dashboardPointAbsent {
  fill: #fb7185;
}

.dashboardPointLate {
  fill: #f59e0b;
}

.dashboardRanking {
  display: grid;
}

.dashboardRankingRow {
  min-height: 42px;
  display: grid;
  grid-template-columns:
    30px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom:
    1px solid #1a2532;
}

.dashboardRankingPosition {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #dbe6f3;
  background: #172231;
  border: 1px solid #334155;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.dashboardRankingPerson {
  min-width: 0;
}

.dashboardRankingPerson b {
  display: block;
  overflow: hidden;
  color: #dbe6f3;
  font-size: 9.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboardRankingPerson small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 8px;
}

.dashboardRankingRow > strong {
  color: #4ade80;
  font-size: 10px;
}

.dashboardCardLink {
  width: auto !important;
  display: block;
  margin: 12px auto 0;
  padding: 7px 11px;
  color: #cbd5e1;
  background: #111923;
  border: 1px solid #334155;
  font-size: 8.5px;
}

.dashboardUpcoming {
  display: grid;
}

.dashboardEventRow {
  min-height: 54px;
  display: grid;
  grid-template-columns:
    45px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border-bottom:
    1px solid #1a2532;
}

.dashboardEventDate {
  width: 42px;
  padding: 5px 3px;
  color: #dbe6f3;
  background: #14202c;
  border: 1px solid #263747;
  border-radius: 7px;
  text-align: center;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboardEventInfo {
  min-width: 0;
}

.dashboardEventInfo b {
  display: block;
  overflow: hidden;
  color: #dbe6f3;
  font-size: 9.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboardEventInfo small {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 7.5px;
}

.dashboardEventTag {
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 6.8px;
  font-weight: 900;
  white-space: nowrap;
}

.dashboardEventTag.feriado {
  color: #fcd34d;
  background: #3c2d0c;
}

.dashboardEventTag.jornada_especial {
  color: #93c5fd;
  background: #15345a;
}

.dashboardEventTag.compensatorio {
  color: #fbbf24;
  background: #3c2d0c;
}

.dashboardEventTag.cierre_rol {
  color: #c4b5fd;
  background: #34245d;
}

.dashboardQuickCard {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 15px;
  background: #0d141d;
  border: 1px solid #263241;
  border-radius: 13px;
}

.dashboardQuickCard > div:first-child {
  flex: 0 0 auto;
}

.dashboardQuickGrid {
  flex: 1;
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0,1fr));
  gap: 8px;
}

.dashboardQuickGrid button {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 9px 11px;
  color: #cbd5e1;
  background: #111923;
  border: 1px solid #263241;
  font-size: 8.5px;
}

.dashboardQuickGrid button:hover {
  border-color: #34d399;
  background: #14221d;
}

.dashboardQuickGrid button span {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #172231;
  font-size: 12px;
}

.dashboardQuickGrid button b {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboardEmptySmall {
  padding: 20px 10px;
  color: #64748b;
  text-align: center;
  font-size: 9px;
}

.dashboardLoadError {
  grid-column: 1 / -1;
  padding: 18px;
  color: #fecaca;
  background: #35171d;
  border: 1px solid #7f1d1d;
  border-radius: 12px;
  text-align: center;
  font-size: 11px;
}

.dashboardLoadError button {
  width: auto;
  margin-left: 10px;
  padding: 7px 10px;
  background: #7f1d1d;
}

@media (max-width: 1420px) {

  .dashboardKpiGrid {
    grid-template-columns:
      repeat(3, minmax(0,1fr));
  }

  .dashboardExecutiveGridTop {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .dashboardStatusCard {
    grid-column: 1 / -1;
  }

  .dashboardStatusBars {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
    column-gap: 24px;
  }

  .dashboardExecutiveGridBottom {
    grid-template-columns:
      1.25fr 1fr;
  }

  .dashboardEventsCard {
    grid-column: 1 / -1;
  }

  .dashboardUpcoming {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
    column-gap: 18px;
  }

  .dashboardQuickGrid {
    grid-template-columns:
      repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 940px) {

  .dashboardExecutiveTop {
    flex-direction: column;
  }

  .dashboardTopActions {
    width: 100%;
    justify-content: space-between;
  }

  .dashboardKpiGrid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .dashboardExecutiveGridTop,
  .dashboardExecutiveGridBottom {
    grid-template-columns: 1fr;
  }

  .dashboardStatusCard,
  .dashboardEventsCard {
    grid-column: auto;
  }

  .dashboardBranchLayout {
    grid-template-columns: 1fr;
  }

  .dashboardStatusBars {
    grid-template-columns: 1fr;
  }

  .dashboardUpcoming {
    grid-template-columns: 1fr;
  }

  .dashboardQuickCard {
    flex-direction: column;
    align-items: stretch;
  }

  .dashboardQuickGrid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 560px) {

  .dashboardKpiGrid {
    grid-template-columns: 1fr;
  }

  .dashboardKpiCard {
    min-height: 88px;
  }

  .dashboardQuickGrid {
    grid-template-columns: 1fr;
  }

  .dashboardBranchFooter {
    grid-template-columns: 1fr;
  }

  .dashboardBranchFooter div {
    border-right: 0;
    border-bottom:
      1px solid #263241;
  }

  .dashboardBranchFooter div:last-child {
    border-bottom: 0;
  }

  .dashboardTrendLegend {
    justify-content: flex-start;
  }
}



/* =========================================================
   TABLET FIJA POR SUCURSAL - BLOQUEO DE SERVIDOR
   ========================================================= */

.tabletConfigHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.tabletConfigHeader > div {
  min-width: 0;
}

.tabletLockBadge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .6px;
}

.tabletLockBadge.locked {
  color: #86efac;
  background: #153426;
  border: 1px solid #1f6f53;
}

.tabletLockBadge.pending {
  color: #fde68a;
  background: #3c2d0c;
  border: 1px solid #66551e;
}

.tabletDeviceMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 9px 11px;
  background: #080d14;
  border: 1px solid #263241;
  border-radius: 9px;
}

.tabletDeviceMeta span {
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.tabletDeviceMeta code {
  color: #cbd5e1;
  font-family: Consolas, monospace;
  font-size: 10px;
}

.tabletConfigControls {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.tabletConfigControls select {
  flex: 1;
  min-width: 0 !important;
  margin-right: 0 !important;
  background: #080d14;
  color: #f8fafc;
  border: 1px solid #334155;
  border-radius: 9px;
}

.tabletConfigControls select:disabled {
  opacity: .75;
  cursor: not-allowed;
}

#guardarTabletSucursalBtn {
  width: auto !important;
  min-width: 175px;
  margin-top: 0 !important;
}

.tabletSucursalEstado {
  margin-top: 12px;
  padding: 9px 11px;
  color: #d4af37;
  background: #0d141d;
  border: 1px solid #263241;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.45;
}

.tabletSucursalEstado b {
  color: #f8fafc;
}

.tabletSucursalHelp {
  margin-top: 8px;
  color: #64748b;
  font-size: 9.5px;
  line-height: 1.45;
}

@media (max-width: 720px) {

  .tabletConfigHeader {
    flex-direction: column;
  }

  .tabletConfigControls {
    flex-direction: column;
  }

  #guardarTabletSucursalBtn {
    width: 100% !important;
  }
}


/* =========================================================
   CENTRO DE ALERTAS E INCIDENCIAS
   ========================================================= */
.alertsNavItem{position:relative}.alertsNavBadge{width:auto!important;min-width:20px;height:20px;margin-left:auto;padding:0 5px;display:inline-flex!important;align-items:center;justify-content:center;color:#fff!important;background:#d97706;border-radius:999px;font-size:8px!important;font-weight:900;line-height:1}.alertsNavBadge.urgent{background:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.13)}.alertsNavBadge.hidden{display:none!important}
.alertsHeading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.alertsHeading p{max-width:720px;margin:6px 0 0;color:#64748b;font-size:12px;line-height:1.5}.alertsHeadingActions{display:flex;align-items:center;gap:10px}.alertsUpdated{color:#64748b;font-size:9px;white-space:nowrap}.alertsRefreshButton{width:auto!important;min-width:120px;margin-top:0!important}
.alertsSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.alertsSummaryCard{min-height:108px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:15px 17px;text-align:left;background:#0d141d;border:1px solid #263241;border-radius:13px;box-shadow:0 12px 28px rgba(0,0,0,.12)}.alertsSummaryCard:hover{transform:translateY(-2px)}.alertsSummaryCard>span{font-size:10px;font-weight:900;letter-spacing:.3px}.alertsSummaryCard strong{display:block;margin:6px 0 3px;color:#f8fafc;font-size:28px;line-height:1}.alertsSummaryCard small{color:#64748b;font-size:8.5px}.alertsSummaryCard.urgent{border-left:4px solid #ef4444}.alertsSummaryCard.urgent>span{color:#f87171}.alertsSummaryCard.attention{border-left:4px solid #f59e0b}.alertsSummaryCard.attention>span{color:#fbbf24}.alertsSummaryCard.info{border-left:4px solid #3b82f6}.alertsSummaryCard.info>span{color:#60a5fa}.alertsSummaryCard.total{border-left:4px solid #34d399}.alertsSummaryCard.total>span{color:#34d399}
.alertsFilters{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin-bottom:12px;padding:14px;background:#0d131c;border:1px solid #263241;border-radius:12px}.alertsFilters label{min-width:150px;flex:1;color:#94a3b8;font-size:10px;font-weight:800}.alertsSearchLabel{min-width:240px!important;flex:2!important}.alertsFilters select,.alertsFilters input{display:block;width:100%;margin-top:6px;padding:10px 11px;color:#f8fafc;background:#080d14;border:1px solid #2a3645;border-radius:9px;outline:none}.alertsFilters select:focus,.alertsFilters input:focus{border-color:#34d399}.alertsFilters button{width:auto!important;min-width:95px}
.alertsLegend{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:13px;color:#94a3b8;font-size:9px}.alertsLegend>span{display:inline-flex;align-items:center;gap:5px}.alertsLegend i{width:7px;height:7px;display:inline-block;border-radius:50%}.alertsLegend i.urgent{background:#ef4444}.alertsLegend i.attention{background:#f59e0b}.alertsLegend i.info{background:#3b82f6}.alertsLegend small{margin-left:auto;color:#64748b}
.alertsList{display:grid;gap:9px}.alertItem{min-height:112px;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:13px;padding:13px 14px;background:linear-gradient(145deg,#0e151f,#0b1118);border:1px solid #263241;border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.10)}.alertItem.urgente{border-left:4px solid #ef4444}.alertItem.atencion{border-left:4px solid #f59e0b}.alertItem.info{border-left:4px solid #3b82f6}.alertItemIndicator{width:40px;height:40px;display:grid;place-items:center;background:#111923;border:1px solid #263241;border-radius:50%;font-size:17px}.alertItemBody{min-width:0}.alertItemTop{display:flex;align-items:center;justify-content:space-between;gap:10px}.alertItemTop>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.alertItemTop>small{overflow:hidden;color:#64748b;font-size:8px;white-space:nowrap;text-overflow:ellipsis}.alertLevelLabel,.alertModuleLabel{display:inline-flex;padding:3px 6px;border-radius:999px;font-size:7px;font-weight:900;letter-spacing:.45px}.alertItem.urgente .alertLevelLabel{color:#fecaca;background:#41171c;border:1px solid #7f1d1d}.alertItem.atencion .alertLevelLabel{color:#fde68a;background:#3b2c0c;border:1px solid #6b4d10}.alertItem.info .alertLevelLabel{color:#bfdbfe;background:#142f52;border:1px solid #1d4f86}.alertModuleLabel{color:#cbd5e1;background:#172231;border:1px solid #334155}.alertItem h3{margin:6px 0 4px;color:#f8fafc;font-size:13px}.alertItem p{margin:0;color:#94a3b8;font-size:10px;line-height:1.5}.alertItemAction{display:flex;justify-content:flex-end}.alertItemAction button{width:auto!important;min-width:125px;display:inline-flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;color:#dbe6f3;background:#111923;border:1px solid #334155;font-size:8.5px}.alertItemAction button:hover{border-color:#34d399;background:#13251d}
.alertsLoading,.alertsEmptyState,.alertsLoadError{padding:34px 20px;text-align:center;background:#0d141d;border:1px solid #263241;border-radius:13px}.alertsLoading{color:#94a3b8;font-size:11px}.alertsEmptyIcon{font-size:32px}.alertsEmptyState h3{margin:8px 0 4px;color:#f8fafc}.alertsEmptyState p{margin:0;color:#64748b;font-size:10px}.alertsLoadError{color:#fecaca;border-color:#7f1d1d;background:#30161b}.alertsLoadError b,.alertsLoadError span{display:block}.alertsLoadError span{margin-top:5px;color:#fca5a5;font-size:9px}.alertsLoadError button{width:auto!important;margin-top:12px;background:#7f1d1d}
@media(max-width:1050px){.alertsSummary{grid-template-columns:repeat(2,minmax(0,1fr))}.alertItem{grid-template-columns:44px minmax(0,1fr)}.alertItemAction{grid-column:2;justify-content:flex-start}}
@media(max-width:650px){.alertsHeading{flex-direction:column}.alertsHeadingActions{width:100%;justify-content:space-between}.alertsSummary{grid-template-columns:1fr}.alertItem{grid-template-columns:1fr}.alertItemIndicator{width:34px;height:34px}.alertItemAction{grid-column:auto}.alertItemAction button{width:100%!important}.alertItemTop{align-items:flex-start;flex-direction:column}.alertsLegend small{width:100%;margin-left:0}}



/* =========================================================
   LOGIN FINAL ARTESANÍAS EMILY
   NEGRO + DORADO · COMPACTO · SIN SCROLL
   ========================================================= */

:root {
  --emily-black: #050505;
  --emily-black-2: #090909;
  --emily-panel: #0d0d0d;
  --emily-panel-2: #121212;
  --emily-gold: #c9a43f;
  --emily-gold-soft: #e0c26b;
  --emily-gold-faint: rgba(201,164,63,.23);
  --emily-line: rgba(201,164,63,.34);
  --emily-white: #f5f2e9;
  --emily-muted: #aaa498;
  --emily-green: #22c55e;
}


/* Solo afecta cuando está visible uno de los dos accesos */
body:has(#login:not(.hidden)),
body:has(#adminLogin:not(.hidden)) {
  overflow: hidden !important;
  background: var(--emily-black) !important;
}


/* CABECERA COMPACTA */

body:has(#login:not(.hidden)) .topHeader,
body:has(#adminLogin:not(.hidden)) .topHeader {
  height: clamp(58px, 8.5dvh, 72px) !important;
  min-height: 58px !important;
  max-height: 72px !important;

  padding:
    0
    clamp(12px, 3vw, 22px) !important;

  background:
    linear-gradient(
      180deg,
      #0b0b0b,
      #070707
    ) !important;

  border-bottom:
    1px solid
    var(--emily-line) !important;

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.24) !important;
}

body:has(#login:not(.hidden)) .brandIcon,
body:has(#adminLogin:not(.hidden)) .brandIcon {
  width:
    clamp(38px, 5.5dvh, 46px) !important;

  height:
    clamp(38px, 5.5dvh, 46px) !important;

  background:
    #111 !important;

  color:
    var(--emily-gold-soft) !important;

  border:
    1px solid
    var(--emily-line) !important;

  border-radius:
    12px !important;

  box-shadow:
    none !important;
}

body:has(#login:not(.hidden)) .brandTitle,
body:has(#adminLogin:not(.hidden)) .brandTitle {
  color:
    var(--emily-white) !important;

  font-size:
    clamp(10px, 1.45dvh, 14px) !important;

  letter-spacing:
    1.35px !important;
}

body:has(#login:not(.hidden)) .brandSubtitle,
body:has(#adminLogin:not(.hidden)) .brandSubtitle {
  color:
    #777268 !important;

  font-size:
    clamp(7px, 1.1dvh, 10px) !important;
}

body:has(#login:not(.hidden)) #clock,
body:has(#adminLogin:not(.hidden)) #clock {
  color:
    var(--emily-white) !important;

  font-size:
    clamp(18px, 2.8dvh, 25px) !important;
}

body:has(#login:not(.hidden)) .systemStatus,
body:has(#adminLogin:not(.hidden)) .systemStatus {
  color:
    var(--emily-gold-soft) !important;

  font-size:
    clamp(6px, 1dvh, 9px) !important;

  letter-spacing:
    .8px !important;
}


/* CONTENEDOR: SIEMPRE DENTRO DEL VIEWPORT */

#login.loginScreen,
#adminLogin.loginScreen {
  height:
    calc(
      100dvh -
      clamp(58px, 8.5dvh, 72px)
    ) !important;

  min-height: 0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  padding:
    clamp(5px, 1.15dvh, 12px)
    clamp(10px, 2vw, 18px) !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(201,164,63,.075),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      #070707,
      #030303
    ) !important;
}


/* TARJETA GENERAL */

#login .loginCard,
#adminLogin .loginCard {
  width:
    min(
      100%,
      440px
    ) !important;

  max-height:
    100% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  padding:
    clamp(10px, 1.65dvh, 18px)
    clamp(14px, 3vw, 22px) !important;

  background:
    linear-gradient(
      180deg,
      #0d0d0d,
      #080808
    ) !important;

  border:
    1px solid
    var(--emily-line) !important;

  border-radius:
    clamp(14px, 2.2dvh, 20px) !important;

  box-shadow:
    0 18px 44px
    rgba(0,0,0,.42) !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/* LOGOS */

#login .loginLogo,
#adminLogin .adminLoginLogo {
  display:
    block !important;

  width:
    auto !important;

  height:
    clamp(72px, 15dvh, 132px) !important;

  max-width:
    78% !important;

  object-fit:
    contain !important;

  margin:
    0 auto
    clamp(2px, .7dvh, 6px) !important;

  filter:
    drop-shadow(
      0 3px 7px
      rgba(201,164,63,.14)
    ) !important;
}


/* IDENTIFICADOR DEL MODO */

#login .loginModeBadge,
#adminLogin .loginModeBadge {
  align-self:
    center !important;

  margin:
    0 0
    clamp(2px, .65dvh, 6px) !important;

  padding:
    4px 8px !important;

  color:
    var(--emily-gold-soft) !important;

  background:
    rgba(201,164,63,.07) !important;

  border:
    1px solid
    rgba(201,164,63,.20) !important;

  border-radius:
    999px !important;

  font-size:
    clamp(6px, .95dvh, 8px) !important;

  font-weight:
    900 !important;

  letter-spacing:
    1px !important;
}


/* TÍTULOS */

#login .loginCard h1,
#adminLogin .loginCard h1 {
  margin:
    clamp(1px, .25dvh, 3px)
    0
    clamp(2px, .45dvh, 5px) !important;

  color:
    var(--emily-white) !important;

  text-align:
    center !important;

  font-size:
    clamp(22px, 4.1dvh, 34px) !important;

  line-height:
    1.02 !important;

  letter-spacing:
    -.35px !important;
}

#login .loginDescription,
#adminLogin .loginDescription {
  margin:
    0 0
    clamp(4px, .85dvh, 9px) !important;

  color:
    var(--emily-muted) !important;

  text-align:
    center !important;

  font-size:
    clamp(9px, 1.65dvh, 13px) !important;

  line-height:
    1.25 !important;
}


/* LABELS */

#login .loginCard label,
#adminLogin .loginCard label {
  margin:
    clamp(4px, .8dvh, 8px)
    0
    clamp(3px, .45dvh, 5px) !important;

  color:
    #ddd8cd !important;

  font-size:
    clamp(8px, 1.45dvh, 12px) !important;

  font-weight:
    800 !important;
}


/* CAMPOS */

#login .inputGroup,
#adminLogin .inputGroup {
  min-height:
    0 !important;

  height:
    clamp(43px, 6.4dvh, 54px) !important;

  display:
    flex !important;

  align-items:
    center !important;

  overflow:
    hidden !important;

  background:
    #101010 !important;

  border:
    1px solid
    rgba(201,164,63,.26) !important;

  border-radius:
    clamp(10px, 1.8dvh, 14px) !important;

  box-shadow:
    none !important;
}

#login .inputGroup:focus-within,
#adminLogin .inputGroup:focus-within {
  border-color:
    var(--emily-gold) !important;

  box-shadow:
    0 0 0 3px
    rgba(201,164,63,.075) !important;
}

#login .inputGroup > span,
#adminLogin .inputGroup > span {
  flex:
    0 0
    clamp(42px, 6dvh, 50px) !important;

  width:
    clamp(42px, 6dvh, 50px) !important;

  height:
    100% !important;

  display:
    grid !important;

  place-items:
    center !important;

  color:
    var(--emily-gold-soft) !important;

  font-size:
    clamp(15px, 2.5dvh, 19px) !important;

  background:
    rgba(201,164,63,.035) !important;
}

#login .inputGroup input,
#adminLogin .inputGroup input {
  min-width:
    0 !important;

  height:
    100% !important;

  flex:
    1 !important;

  padding:
    0
    12px
    0
    4px !important;

  border:
    0 !important;

  outline:
    0 !important;

  background:
    transparent !important;

  color:
    var(--emily-white) !important;

  -webkit-text-fill-color:
    var(--emily-white) !important;

  font-size:
    clamp(14px, 2.3dvh, 18px) !important;

  box-shadow:
    none !important;
}

#login .inputGroup input::placeholder,
#adminLogin .inputGroup input::placeholder {
  color:
    #69655d !important;

  -webkit-text-fill-color:
    #69655d !important;
}


/* SUCURSAL */

#login .tabletSucursalBox {
  min-height:
    0 !important;

  height:
    clamp(52px, 7.7dvh, 64px) !important;

  margin:
    clamp(6px, 1.15dvh, 11px)
    0
    0 !important;

  padding:
    7px
    clamp(10px, 2.2vw, 14px) !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    10px !important;

  background:
    #101010 !important;

  border:
    1px solid
    var(--emily-gold) !important;

  border-radius:
    clamp(10px, 1.8dvh, 14px) !important;

  box-shadow:
    inset 0 0 22px
    rgba(201,164,63,.025) !important;
}

#login .tabletSucursalBox > span {
  font-size:
    clamp(17px, 2.6dvh, 22px) !important;
}

#login .tabletSucursalBox small {
  color:
    #89847a !important;

  font-size:
    clamp(6px, 1.05dvh, 9px) !important;

  letter-spacing:
    .55px !important;
}

#login .tabletSucursalBox strong {
  margin-top:
    1px !important;

  color:
    var(--emily-gold-soft) !important;

  font-size:
    clamp(13px, 2.05dvh, 16px) !important;
}


/* BOTÓN PRINCIPAL */

#login .primaryButton,
#adminLogin .primaryButton {
  width:
    100% !important;

  height:
    clamp(43px, 6.5dvh, 54px) !important;

  min-height:
    0 !important;

  margin-top:
    clamp(7px, 1.25dvh, 12px) !important;

  padding:
    0 14px !important;

  background:
    linear-gradient(
      180deg,
      #18150d,
      #0f0d09
    ) !important;

  color:
    var(--emily-gold-soft) !important;

  border:
    1px solid
    var(--emily-gold) !important;

  border-radius:
    clamp(10px, 1.8dvh, 14px) !important;

  box-shadow:
    0 5px 18px
    rgba(0,0,0,.28) !important;

  font-size:
    clamp(13px, 2.1dvh, 17px) !important;

  font-weight:
    900 !important;

  letter-spacing:
    .7px !important;
}

#login .primaryButton:hover,
#adminLogin .primaryButton:hover {
  background:
    linear-gradient(
      180deg,
      #211b0d,
      #141006
    ) !important;

  color:
    #f0d983 !important;
}


/* FILA SECUNDARIA */

#login .loginBottomRow,
#adminLogin .loginBottomRow {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(112px, .85fr) !important;

  gap:
    clamp(6px, 1.2vw, 10px) !important;

  margin-top:
    clamp(6px, 1.05dvh, 10px) !important;
}

#login .loginSecondaryButton,
#adminLogin .loginSecondaryButton,
#login .loginConnectionMirror,
#adminLogin .loginConnectionMirror {
  min-height:
    0 !important;

  height:
    clamp(39px, 5.8dvh, 48px) !important;

  margin:
    0 !important;

  padding:
    0
    clamp(8px, 2vw, 12px) !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    7px !important;

  color:
    #d8d4ca !important;

  background:
    #101010 !important;

  border:
    1px solid
    rgba(201,164,63,.24) !important;

  border-radius:
    clamp(10px, 1.7dvh, 13px) !important;

  box-shadow:
    none !important;

  font-size:
    clamp(9px, 1.55dvh, 13px) !important;

  font-weight:
    800 !important;

  white-space:
    nowrap !important;
}

#login .loginSecondaryButton:hover,
#adminLogin .loginSecondaryButton:hover {
  color:
    var(--emily-gold-soft) !important;

  border-color:
    var(--emily-gold) !important;
}

#login .loginConnectionMirror,
#adminLogin .loginConnectionMirror {
  cursor:
    pointer !important;
}

#login .loginConnectionDot,
#adminLogin .loginConnectionDot {
  flex:
    0 0 auto !important;

  width:
    clamp(8px, 1.45dvh, 12px) !important;

  height:
    clamp(8px, 1.45dvh, 12px) !important;

  border-radius:
    50% !important;

  background:
    var(--emily-green) !important;

  box-shadow:
    0 0 8px
    rgba(34,197,94,.45) !important;
}

#login .loginConnectionMirror.online-pending
.loginConnectionDot,
#adminLogin .loginConnectionMirror.online-pending
.loginConnectionDot {
  background:
    #eab308 !important;

  box-shadow:
    0 0 8px
    rgba(234,179,8,.42) !important;
}

#login .loginConnectionMirror.offline-mode
.loginConnectionDot,
#adminLogin .loginConnectionMirror.offline-mode
.loginConnectionDot {
  background:
    #f97316 !important;

  box-shadow:
    0 0 8px
    rgba(249,115,22,.40) !important;
}

#login .loginConnectionMirror.offline-review
.loginConnectionDot,
#adminLogin .loginConnectionMirror.offline-review
.loginConnectionDot {
  background:
    #ef4444 !important;

  box-shadow:
    0 0 8px
    rgba(239,68,68,.42) !important;
}


/* MENSAJES */

#login .msg,
#adminLogin .msg {
  min-height:
    clamp(10px, 1.5dvh, 15px) !important;

  margin:
    clamp(2px, .45dvh, 5px)
    0
    0 !important;

  color:
    #ff8585 !important;

  text-align:
    center !important;

  font-size:
    clamp(7px, 1.15dvh, 10px) !important;

  line-height:
    1.15 !important;
}


/* En los accesos el indicador flotante original se oculta.
   Dentro del panel sigue apareciendo exactamente como antes. */

body:has(#login:not(.hidden))
#offlineIndicator,
body:has(#adminLogin:not(.hidden))
#offlineIndicator {
  display:
    none !important;
}


/* =========================================================
   PANTALLAS BAJAS: 667px / 720px
   ========================================================= */

@media (max-height: 720px) {

  #login .loginLogo,
  #adminLogin .adminLoginLogo {
    height:
      clamp(62px, 13dvh, 88px) !important;
  }

  #login .loginModeBadge,
  #adminLogin .loginModeBadge {
    padding:
      2px 7px !important;
  }

  #login .loginCard h1,
  #adminLogin .loginCard h1 {
    font-size:
      clamp(20px, 3.7dvh, 27px) !important;
  }

  #login .loginDescription,
  #adminLogin .loginDescription {
    font-size:
      clamp(8px, 1.4dvh, 11px) !important;
  }

  #login .inputGroup,
  #adminLogin .inputGroup {
    height:
      clamp(40px, 6dvh, 45px) !important;
  }

  #login .tabletSucursalBox {
    height:
      clamp(48px, 7dvh, 54px) !important;
  }

  #login .primaryButton,
  #adminLogin .primaryButton {
    height:
      clamp(40px, 6dvh, 46px) !important;
  }

  #login .loginSecondaryButton,
  #adminLogin .loginSecondaryButton,
  #login .loginConnectionMirror,
  #adminLogin .loginConnectionMirror {
    height:
      clamp(36px, 5.3dvh, 41px) !important;
  }
}


/* =========================================================
   PC: MISMO CONCEPTO, TARJETA CENTRADA Y COMPACTA
   ========================================================= */

@media (min-width: 900px) {

  body:has(#login:not(.hidden)) .topHeader,
  body:has(#adminLogin:not(.hidden)) .topHeader {
    width:
      min(
        920px,
        calc(100% - 32px)
      ) !important;

    margin:
      8px auto 0 !important;

    border:
      1px solid
      var(--emily-line) !important;

    border-radius:
      14px !important;
  }

  #login.loginScreen,
  #adminLogin.loginScreen {
    height:
      calc(
        100dvh -
        clamp(66px, 9.5dvh, 80px)
      ) !important;
  }

  #login .loginCard,
  #adminLogin .loginCard {
    width:
      min(
        410px,
        calc(100vw - 40px)
      ) !important;
  }

  #login .loginLogo,
  #adminLogin .adminLoginLogo {
    height:
      clamp(68px, 14dvh, 118px) !important;
  }
}


/* =========================================================
   TELÉFONOS MUY ESTRECHOS
   ========================================================= */

@media (max-width: 390px) {

  body:has(#login:not(.hidden)) .brandSubtitle,
  body:has(#adminLogin:not(.hidden)) .brandSubtitle {
    display:
      none !important;
  }

  body:has(#login:not(.hidden)) .brandTitle,
  body:has(#adminLogin:not(.hidden)) .brandTitle {
    font-size:
      10px !important;

    letter-spacing:
      .75px !important;
  }

  #login .loginBottomRow,
  #adminLogin .loginBottomRow {
    grid-template-columns:
      minmax(0,1fr)
      minmax(102px,.72fr) !important;
  }

  #login .loginConnectionText,
  #adminLogin .loginConnectionText {
    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;
  }
}



/* =========================================================
   CORRECCIÓN FINAL DE NAVEGACIÓN LOGIN / PANELES
   ========================================================= */

/*
   El diseño negro/dorado anterior usaba display:flex !important
   en #login y #adminLogin. Eso podía ganar sobre .hidden.
   Esta regla está al FINAL y garantiza que una pantalla oculta
   realmente desaparezca.
*/
#login.hidden,
#adminLogin.hidden,
#workerPanel.hidden,
#adminPanel.hidden {
  display: none !important;
}


/* Solo las pantallas de acceso visibles usan flex centrado. */
#login.loginScreen:not(.hidden),
#adminLogin.loginScreen:not(.hidden) {
  display: flex !important;
}


/*
   El encabezado general pertenece únicamente a los accesos.
   Cuando un trabajador o administrador ya entró, desaparece.
*/
body:has(#workerPanel:not(.hidden)) .topHeader,
body:has(#adminPanel:not(.hidden)) .topHeader {
  display: none !important;
}


/* Recuperamos toda la altura al entrar al panel del administrador. */
#adminPanel:not(.hidden) {
  min-height: 100dvh !important;
}


/* El trabajador aprovecha la altura liberada por el encabezado. */
#workerPanel:not(.hidden) {
  margin-top: clamp(18px, 3dvh, 34px);
  margin-bottom: clamp(18px, 3dvh, 34px);
}


/* Seguridad extra: los botones inferiores siempre son clicables. */
#login .loginBottomRow,
#adminLogin .loginBottomRow,
#login .loginSecondaryButton,
#adminLogin .loginSecondaryButton,
#login .loginConnectionMirror,
#adminLogin .loginConnectionMirror {
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}


/* Cuando está abierta una pantalla de acceso no permitimos scroll general. */
body:has(#login:not(.hidden)),
body:has(#adminLogin:not(.hidden)) {
  overflow: hidden !important;
}


/* En los paneles vuelve a permitirse el scroll normal donde corresponda. */
body:has(#workerPanel:not(.hidden)),
body:has(#adminPanel:not(.hidden)) {
  overflow: auto !important;
}


/* El panel administrativo ocupa la pantalla desde arriba, sin el header global. */
body:has(#adminPanel:not(.hidden)) .adminLayout {
  min-height: 100dvh !important;
}


/* En PC el panel administrador no deja un hueco superior. */
@media (min-width: 900px) {
  body:has(#adminPanel:not(.hidden)) .adminLayout {
    min-height: 100dvh !important;
  }
}



/* =========================================================
   AJUSTE FINAL LOGO + SUCURSAL
   ========================================================= */

/* El bloque completo queda visualmente centrado. */
#login .tabletSucursalBox {
  justify-content: center !important;
  text-align: center !important;
}

/* Icono + texto forman un grupo centrado. */
#login .tabletSucursalBox > span {
  flex: 0 0 auto !important;
}

#login .tabletSucursalBox > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* El nombre de la sucursal queda perfectamente centrado. */
#login #tabletSucursalNombreLogin {
  width: 100% !important;
  text-align: center !important;
}

/* Los logos transparentes no reciben fondo adicional. */
#login .loginLogo,
#adminLogin .adminLoginLogo,
#adminPanel .adminLogo {
  background: transparent !important;
}


/* =========================================================
   DÍAS LIBRES TRABAJADOS
   ========================================================= */

.dayOffWorkedCard{
  border-left:4px solid #c9a43f;
}

.dayOffWorkedTable .dayOffWorkedSelect{
  min-width:190px;
  padding:8px 10px;
  background:#0b0b0b;
  color:#f5f2e9;
  border:1px solid rgba(201,164,63,.45);
  border-radius:8px;
}

.dayOffWorkedTable small{
  color:#8f897e;
}

@media (max-width:720px){
  .dayOffWorkedTable .dayOffWorkedSelect{
    min-width:155px;
    font-size:11px;
  }
}


/* =========================================================
   CONFIGURACIÓN DEL SISTEMA
   ========================================================= */

.configHeading{
  align-items:flex-start;
  gap:18px;
}

.configIntro{
  margin:6px 0 0;
  max-width:760px;
  color:var(--muted,#7b8490);
  line-height:1.45;
}

.configStatus{
  margin:0 0 16px;
  padding:11px 14px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:10px;
  background:rgba(15,23,42,.04);
  font-size:13px;
}

.configStatus.ok{
  border-color:rgba(34,197,94,.35);
  background:rgba(34,197,94,.08);
}

.configStatus.error{
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
}

.configStatus.warning{
  border-color:rgba(201,164,63,.45);
  background:rgba(201,164,63,.08);
}

.configGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.configCard{
  border:1px solid rgba(148,163,184,.28);
  border-radius:14px;
  background:var(--card,#fff);
  padding:18px;
  box-shadow:0 5px 18px rgba(15,23,42,.05);
}

.configCardTitle{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:16px;
}

.configCardTitle>span{
  font-size:23px;
  line-height:1;
}

.configCardTitle h3{
  margin:0;
  font-size:16px;
}

.configCardTitle p{
  margin:4px 0 0;
  color:var(--muted,#7b8490);
  font-size:12px;
  line-height:1.4;
}

.configFields{
  display:grid;
  gap:12px;
}

.configFields.twoCols{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.configFields.threeCols{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.configFields label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:700;
}

.configFields label.full{
  grid-column:1/-1;
}

.configFields input{
  width:100%;
  min-height:40px;
  border:1px solid rgba(148,163,184,.5);
  border-radius:9px;
  padding:8px 10px;
  background:var(--input-bg,#fff);
  color:inherit;
  font:inherit;
}

.configFields small{
  color:var(--muted,#7b8490);
  font-weight:400;
  line-height:1.3;
}

.configDays{
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid rgba(148,163,184,.22);
}

.configDaysLabel{
  display:block;
  margin-bottom:9px;
  font-size:12px;
  font-weight:800;
}

.configDayChecks{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.configDayChecks label{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:58px;
  padding:7px 9px;
  border:1px solid rgba(148,163,184,.35);
  border-radius:9px;
  font-size:12px;
  cursor:pointer;
}

.configDayChecks input{
  width:auto;
  margin:0;
}

.configInfo,
.configWarning{
  margin-top:14px;
  padding:10px 12px;
  border-radius:9px;
  font-size:11.5px;
  line-height:1.45;
}

.configInfo{
  background:rgba(59,130,246,.07);
  border:1px solid rgba(59,130,246,.2);
}

.configWarning{
  background:rgba(201,164,63,.08);
  border:1px solid rgba(201,164,63,.3);
}

.configActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

@media(max-width:1050px){
  .configGrid{
    grid-template-columns:1fr;
  }
}

@media(max-width:700px){
  .configHeading{
    flex-direction:column;
  }

  .configFields.twoCols,
  .configFields.threeCols{
    grid-template-columns:1fr;
  }

  .configFields label.full{
    grid-column:auto;
  }

  .configActions{
    align-items:stretch;
    flex-direction:column;
  }

  .configActions button{
    width:100%;
  }
}


/* =========================================================
   V3.1 — CONTRASTE CONFIGURACIÓN + EMPLEADOR LEGAL
   ========================================================= */
#configSection .configCard{
  background:#ffffff!important;
  color:#172033!important;
}
#configSection .configCardTitle h3,
#configSection .configFields label,
#configSection .configDaysLabel,
#configSection .configDayChecks label{
  color:#25324a!important;
}
#configSection .configCardTitle p,
#configSection .configFields small{
  color:#667085!important;
}
#configSection .configFields input{
  background:#ffffff!important;
  color:#111827!important;
  border-color:#b8c4d4!important;
  opacity:1!important;
}
#configSection .configFields input::placeholder{
  color:#98a2b3!important;
  opacity:1!important;
}
#configSection .configInfo{
  color:#344054!important;
  background:#eff6ff!important;
  border-color:#bfdbfe!important;
}
#configSection .configWarning{
  color:#6e5315!important;
  background:#fff8e7!important;
  border-color:#e5c567!important;
}
#configSection .configStatus{
  color:#d7dee9;
}
.legalEmployerHelp{
  display:block;
  margin-top:5px;
  color:#667085;
  font-size:11px;
  font-weight:400;
  line-height:1.35;
}
.payrollLegalNotice{
  margin:0 0 14px;
  padding:11px 14px;
  border:1px solid rgba(201,164,63,.45);
  border-radius:10px;
  background:rgba(201,164,63,.08);
  color:#dbe3ef;
  line-height:1.45;
  font-size:12px;
}
.payrollEmployer{
  display:inline-block;
  margin-top:4px;
  font-size:10px;
  line-height:1.25;
  color:#687386;
  max-width:230px;
}
.payrollEmployer.missing{
  color:#b42318;
  font-weight:700;
}
#sucursalDialog .personalDialogBox label,
#nuevoTrabajadorDialog .personalDialogBox label,
#editarTrabajadorDialog .personalDialogBox label{
  color:#2f3b4c;
}


/* =========================================================
   JORNALES / MODALIDAD DE PAGO
   ========================================================= */

.personalInlineCheck{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 10px;
  border:1px solid #d5dbe3;
  border-radius:9px;
  background:#f8fafc;
}

.personalInlineCheck input{
  width:18px;
  height:18px;
  margin:0;
}

.personalCheckLabel{
  align-content:start;
}

.journalPolicyNotice{
  margin:12px 0 16px;
  padding:12px 14px;
  border:1px solid rgba(201,164,63,.35);
  border-left:4px solid #c9a43f;
  border-radius:10px;
  background:rgba(201,164,63,.08);
  line-height:1.45;
}

.jornalesTable select,
.jornalesTable input{
  min-width:125px;
}

.jornalesTable input[type="text"]{
  min-width:160px;
}

.jornalStatus{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.jornalStatus.ok{
  background:#dcfce7;
  color:#166534;
}

.jornalStatus.pending{
  background:#fef3c7;
  color:#92400e;
}

.jornalStatus.neutral{
  background:#e5e7eb;
  color:#374151;
}

.trialBadge{
  display:inline-block;
  margin-top:3px;
  padding:2px 6px;
  border-radius:999px;
  background:#fff7d6;
  color:#8a6500;
  font-weight:800;
  letter-spacing:.4px;
}

@media(max-width:760px){
  .jornalesTable select,
  .jornalesTable input{
    min-width:110px;
  }
}


/* V3.3 - turnos con/sin almuerzo */
.scheduleLunchSwitch{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.scheduleLunchSwitch input{width:18px;height:18px}.scheduleDayOff .scheduleLunchSwitch{opacity:.55}

.monthlyLedgerFilter{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:14px 0;padding:12px 14px;
  border:1px solid rgba(201,164,63,.25);border-radius:12px;
  background:rgba(201,164,63,.06)
}
.monthlyLedgerFilter label{display:block;margin-bottom:6px;font-size:12px;font-weight:700}
.monthlyLedgerFilter input[type="month"]{min-width:180px}
.monthlyLedgerSummary{font-size:13px;opacity:.9;text-align:right}
@media(max-width:720px){
  .monthlyLedgerFilter{align-items:stretch}
  .monthlyLedgerFilter input[type="month"]{width:100%}
  .monthlyLedgerSummary{text-align:left}
}


/* =========================================================
   V3.6 - TABLAS ASISTENCIA / ROL MÁS CÓMODAS
   ========================================================= */

/* Scroll horizontal suave y barra siempre utilizable */
#attendanceSection .tableWrap,
#payrollSection .tableWrap{
  position:relative;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-gutter:stable;
}

/* Tablas compactas sin perder información */
#attendanceSection .tableWrap > table,
#payrollSection .tableWrap > table{
  width:max-content;
  min-width:100%;
  table-layout:auto;
}

#attendanceSection .tableWrap > table th,
#attendanceSection .tableWrap > table td{
  padding:10px 11px;
  font-size:12px;
}

#payrollSection .tableWrap > table th,
#payrollSection .tableWrap > table td{
  padding:10px 11px;
  font-size:12px;
}

/* Encabezados un poco más compactos */
#attendanceSection .tableWrap > table th,
#payrollSection .tableWrap > table th{
  font-size:9px;
  letter-spacing:.45px;
}

/* ---------------------------------------------------------
   PRIMERA COLUMNA FIJA: TRABAJADOR
   --------------------------------------------------------- */
#attendanceSection .tableWrap > table th:first-child,
#attendanceSection .tableWrap > table td:first-child,
#payrollSection .tableWrap > table th:first-child,
#payrollSection .tableWrap > table td:first-child{
  position:sticky;
  left:0;
  z-index:4;
  min-width:170px;
  max-width:210px;
  text-align:left;
  white-space:normal;
  box-shadow:8px 0 12px -12px rgba(0,0,0,.9);
}

/* Fondo sólido para que no se transparente al hacer scroll */
#attendanceSection .tableWrap > table th:first-child,
#payrollSection .tableWrap > table th:first-child{
  background:#111923;
  z-index:6;
}

#attendanceSection .tableWrap > table td:first-child,
#payrollSection .tableWrap > table td:first-child{
  background:#0b1118;
}

#attendanceSection .tableWrap > table tbody tr:hover td:first-child,
#payrollSection .tableWrap > table tbody tr:hover td:first-child{
  background:#111923;
}

/* ---------------------------------------------------------
   ÚLTIMA COLUMNA FIJA: ACCIONES / VER ROL
   --------------------------------------------------------- */
#attendanceSection .tableWrap > table th:last-child,
#attendanceSection .tableWrap > table td:last-child,
#payrollSection .tableWrap > table th:last-child,
#payrollSection .tableWrap > table td:last-child{
  position:sticky;
  right:0;
  z-index:4;
  min-width:100px;
  background:#0b1118;
  box-shadow:-8px 0 12px -12px rgba(0,0,0,.9);
}

#attendanceSection .tableWrap > table th:last-child,
#payrollSection .tableWrap > table th:last-child{
  background:#111923;
  z-index:6;
}

#attendanceSection .tableWrap > table tbody tr:hover td:last-child,
#payrollSection .tableWrap > table tbody tr:hover td:last-child{
  background:#111923;
}

/* Botones más pequeños */
#attendanceSection .tableWrap button,
#payrollSection .tableWrap button{
  padding:6px 9px!important;
  font-size:11px!important;
  min-width:auto!important;
}

/* Evitar columnas exageradamente anchas */
#attendanceSection .tableWrap th,
#attendanceSection .tableWrap td{
  max-width:155px;
}

#payrollSection .tableWrap th,
#payrollSection .tableWrap td{
  max-width:145px;
}

/* Trabajador conserva suficiente espacio */
#attendanceSection .tableWrap th:first-child,
#attendanceSection .tableWrap td:first-child,
#payrollSection .tableWrap th:first-child,
#payrollSection .tableWrap td:first-child{
  max-width:210px;
}

/* En pantallas pequeñas, trabajador sigue visible pero ocupa menos */
@media(max-width:900px){
  #attendanceSection .tableWrap > table th:first-child,
  #attendanceSection .tableWrap > table td:first-child,
  #payrollSection .tableWrap > table th:first-child,
  #payrollSection .tableWrap > table td:first-child{
    min-width:145px;
    max-width:165px;
    font-size:11px;
  }

  #attendanceSection .tableWrap > table th,
  #attendanceSection .tableWrap > table td,
  #payrollSection .tableWrap > table th,
  #payrollSection .tableWrap > table td{
    padding:8px 9px;
  }
}



/* =========================================================
   DESCANSOS V6.2.4 - TARJETAS MENSUALES
   ========================================================= */

#restSection .restSectionHeading p {
  margin: 8px 0 0;
  max-width: 760px;
  color: #94a3b8;
  line-height: 1.55;
}

#restSection .restMonthToolbar {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #0d131c;
}

#restSection .restMonthPickerLabel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 190px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}

#restSection .restMonthPickerLabel input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 1px solid #2a3645;
  border-radius: 10px;
  background: #080d14;
  color: #fff;
  font: inherit;
  color-scheme: dark;
  outline: none;
}

#restSection .restMonthPickerLabel input:focus {
  border-color: var(--accent);
}

#restSection .restMonthNavButton {
  width: 44px;
  min-width: 44px;
  height: 43px;
  padding: 0;
  border: 1px solid #2a3645;
  border-radius: 10px;
  background: #111a25;
  color: #f8fafc;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

#restSection .restMonthNavButton:hover {
  border-color: var(--accent);
}

#restSection .restCurrentMonthButton {
  min-height: 43px;
  width: auto;
}

#restSection .restMonthSummary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 43px;
  margin-left: auto;
  padding: 0 4px;
  color: #94a3b8;
  font-size: 12px;
  text-align: right;
}

#restSection .restMonthSummary strong {
  color: #f8fafc;
  font-size: 14px;
}

#restSection .restCardsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  align-items: stretch;
}

#restSection .restWorkerCard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  border: 1px solid #233042;
  border-radius: 16px;
  background: linear-gradient(180deg, #0e1620 0%, #0a1119 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}

#restSection .restWorkerCard.has-rest-days {
  border-color: rgba(245, 183, 55, .35);
}

#restSection .restWorkerCardHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1d2937;
}

#restSection .restWorkerCardHeader h3 {
  margin: 3px 0 0;
  color: #f8fafc;
  font-size: 16px;
  line-height: 1.3;
}

#restSection .restWorkerCode {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .6px;
}

#restSection .restCountBadge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #2b3a4d;
  border-radius: 999px;
  background: #111b27;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
}

#restSection .restWorkerMeta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 0;
}

#restSection .restWorkerMeta > div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #1e2b3a;
  border-radius: 11px;
  background: #0a1119;
}

#restSection .restWorkerMeta span {
  display: block;
  margin-bottom: 4px;
  color: #7f8da0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

#restSection .restWorkerMeta strong {
  display: block;
  overflow: hidden;
  color: #f1f5f9;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#restSection .restDatesBlock {
  flex: 1;
  min-height: 84px;
}

#restSection .restDatesTitle {
  margin-bottom: 9px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .45px;
}

#restSection .restDateChips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#restSection .restDateChip {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(245, 183, 55, .30);
  border-radius: 999px;
  background: rgba(245, 183, 55, .08);
  color: #f8e1a4;
  font-size: 12px;
  font-weight: 800;
}

#restSection .restDateChip > span {
  padding: 7px 4px 7px 10px;
}

#restSection .restDateRemove {
  width: 28px;
  min-width: 28px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fca5a5;
  font-size: 17px;
  cursor: pointer;
}

#restSection .restDateRemove:hover {
  background: rgba(239, 68, 68, .13);
  color: #fecaca;
}

#restSection .restNoDates {
  width: 100%;
  padding: 12px;
  border: 1px dashed #263445;
  border-radius: 10px;
  color: #738196;
  font-size: 12px;
}

#restSection .restWorkerActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid #1d2937;
}

#restSection .restWorkerActions button {
  width: auto;
  min-width: 0;
  padding: 9px 11px;
  font-size: 11px;
}

#restSection .restRemoveMonthButton:disabled {
  opacity: .35;
  cursor: not-allowed;
}

#restSection .restEmptyState {
  grid-column: 1 / -1;
  padding: 24px;
  border: 1px dashed #2a3645;
  border-radius: 14px;
  color: #94a3b8;
  text-align: center;
  background: #0b1118;
}

#restSection .restErrorState {
  color: #fca5a5;
}

#restSection .restDialog {
  width: min(92vw, 520px);
  max-height: 88dvh;
  padding: 0;
  border: 1px solid #293649;
  border-radius: 16px;
  background: #0b1118;
  color: #f8fafc;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}

#restSection .restDialog::backdrop {
  background: rgba(2, 6, 12, .72);
  backdrop-filter: blur(2px);
}

#restSection .restDialogBox {
  box-sizing: border-box;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 22px;
}

#restSection .restDialogHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

#restSection .restDialogHeader h3 {
  margin: 4px 0 5px;
  color: #fff;
  font-size: 20px;
}

#restSection .restDialogHeader p {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
}

#restSection .restDialog .dialogCloseButton {
  color: #cbd5e1;
}

#restSection .restDialogField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 800;
}

#restSection .restDialogField input,
#restSection .restDialogField select {
  box-sizing: border-box;
  width: 100%;
  padding: 12px;
  border: 1px solid #2a3645;
  border-radius: 10px;
  background: #080d14;
  color: #fff;
  color-scheme: dark;
  font: inherit;
}

#restSection .restDialogHint {
  margin: 12px 0 0;
  color: #7f8da0;
  font-size: 12px;
  line-height: 1.5;
}

#restSection .restDialogActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

#restSection .restDialogActions button {
  width: auto;
}

#restSection .restHistoryContent {
  display: grid;
  gap: 10px;
}

#restSection .restHistoryMonth {
  padding: 13px;
  border: 1px solid #223044;
  border-radius: 12px;
  background: #0a1119;
}

#restSection .restHistoryMonthHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

#restSection .restHistoryMonthHeader strong {
  color: #f8fafc;
  font-size: 13px;
}

#restSection .restHistoryMonthHeader span {
  color: #7f8da0;
  font-size: 11px;
}

#restSection .restHistoryDates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#restSection .restHistoryDates span {
  padding: 6px 8px;
  border-radius: 8px;
  background: #111b27;
  color: #cbd5e1;
  font-size: 11px;
}

@media (max-width: 720px) {
  #restSection .restCardsGrid {
    grid-template-columns: 1fr;
  }

  #restSection .restMonthToolbar {
    align-items: stretch;
  }

  #restSection .restMonthPickerLabel {
    flex: 1 1 calc(100% - 108px);
    min-width: 0;
  }

  #restSection .restCurrentMonthButton {
    flex: 1 1 100%;
  }

  #restSection .restMonthSummary {
    flex: 1 1 100%;
    margin-left: 0;
    padding-top: 6px;
    text-align: left;
  }

  #restSection .restWorkerMeta {
    grid-template-columns: 1fr;
  }

  #restSection .restWorkerActions button {
    flex: 1 1 calc(50% - 7px);
  }

  #restSection .restDialogActions {
    flex-direction: column-reverse;
  }

  #restSection .restDialogActions button {
    width: 100%;
  }
}

/* =========================================================
   DESCANSOS V6.2.6 - AJUSTE VISUAL PRODUCCION
   Solo presentación. No cambia lógica ni datos.
   ========================================================= */

/* Cabecera más compacta y alineada con el resto del panel */
#restSection .restSectionHeading p {
  max-width: 900px;
  color: var(--muted);
}

#restSection .restMonthToolbar {
  align-items: center;
  padding: 12px 14px;
  gap: 9px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px;
  box-shadow: none;
}

#restSection .restMonthNavButton {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  font-size: 20px;
}

#restSection .restMonthNavButton:hover {
  color: var(--accent);
  border-color: var(--accent-dark);
  background: #102019;
}

#restSection .restMonthPickerLabel {
  min-width: 210px;
  gap: 5px;
  color: var(--muted);
}

#restSection .restMonthPickerLabel input {
  height: 38px;
  padding: 7px 10px;
  border-color: var(--border);
  border-radius: 9px;
  background: var(--panel2);
  color: var(--text);
  color-scheme: dark;
}

#restSection .restCurrentMonthButton {
  width: auto !important;
  min-height: 38px;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--panel2) !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}

#restSection .restCurrentMonthButton:hover {
  border-color: var(--accent-dark) !important;
  color: var(--accent) !important;
  background: #102019 !important;
}

#restSection .restMonthSummary {
  min-height: 38px;
  padding: 4px 0 4px 14px;
  color: var(--muted);
}

#restSection .restMonthSummary strong {
  color: var(--text);
  font-size: 13px;
}

/* Dos tarjetas por fila en escritorio: cada una ocupa media zona útil */
#restSection .restCardsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

#restSection .restWorkerCard {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .16);
}

#restSection .restWorkerCard.has-rest-days {
  border-color: #245746;
  box-shadow: inset 3px 0 0 var(--accent-dark), 0 7px 20px rgba(0, 0, 0, .16);
}

#restSection .restWorkerCard.is-empty {
  opacity: .9;
}

#restSection .restWorkerCardHeader {
  gap: 10px;
  padding-bottom: 11px;
  border-bottom-color: var(--border);
}

#restSection .restWorkerCode {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .7px;
}

#restSection .restWorkerCardHeader h3 {
  margin-top: 4px;
  font-size: 15px;
  color: var(--text);
}

#restSection .restCountBadge {
  padding: 5px 8px;
  border: 1px solid #275442;
  background: #0e2019;
  color: #a7f3d0;
  font-size: 10px;
}

#restSection .restWorkerCard.is-empty .restCountBadge {
  border-color: var(--border);
  background: var(--panel2);
  color: var(--muted);
}

#restSection .restWorkerMeta {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  padding: 11px 0;
}

#restSection .restWorkerMeta > div {
  padding: 8px 9px;
  border-color: #202c39;
  border-radius: 9px;
  background: #0a1017;
}

#restSection .restWorkerMeta span {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 9px;
}

#restSection .restWorkerMeta strong {
  color: #e5e7eb;
  font-size: 12px;
}

#restSection .restDatesBlock {
  min-height: 70px;
}

#restSection .restDatesTitle {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
}

#restSection .restDateChips {
  gap: 6px;
}

/* Se elimina el dorado de la versión anterior y se usa el verde del sistema */
#restSection .restDateChip {
  border: 1px solid #245746;
  background: #0d2019;
  color: #bbf7d0;
  font-size: 11px;
}

#restSection .restDateChip > span {
  padding: 6px 3px 6px 9px;
}

#restSection .restDateRemove {
  width: 25px;
  min-width: 25px;
  height: 27px;
  color: #94a3b8;
  font-size: 15px;
}

#restSection .restDateRemove:hover {
  background: #35181d;
  color: #fecaca;
}

#restSection .restNoDates {
  padding: 10px;
  border-color: var(--border);
  color: #64748b;
  background: #0a1017;
}

/* Acciones compactas 2x2. Ningún botón ocupa toda la tarjeta. */
#restSection .restWorkerActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
  padding-top: 11px;
  border-top-color: var(--border);
}

#restSection .restWorkerActions button,
#restSection .restWorkerActions .primaryButton,
#restSection .restWorkerActions .adminAccess,
#restSection .restWorkerActions .danger {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px;
  margin: 0 !important;
  padding: 8px 9px !important;
  border-radius: 8px;
  box-shadow: none !important;
  font-size: 10px;
  line-height: 1.2;
}

#restSection .restWorkerActions .primaryButton {
  border: 1px solid #1d8c67;
  background: linear-gradient(135deg, #2cc995, #07966e);
  color: #03130c;
}

#restSection .restWorkerActions .primaryButton:hover {
  background: linear-gradient(135deg, #34d399, #0aa477);
}

#restSection .restWorkerActions .adminAccess {
  border: 1px solid var(--border);
  background: var(--panel2);
  color: #cbd5e1;
}

#restSection .restWorkerActions .adminAccess:hover {
  border-color: #2e6a56;
  background: #102019;
  color: #d1fae5;
}

#restSection .restWorkerActions .danger {
  border: 1px solid #5a2a30;
  background: #211316;
  color: #fca5a5;
}

#restSection .restWorkerActions .danger:hover {
  background: #32191d;
  border-color: #7f343d;
}

#restSection .restRemoveMonthButton:disabled {
  opacity: .35;
}

/* Historial y diálogos conservan la misma paleta del sistema */
#restSection .restDialog {
  border-color: var(--border);
  background: var(--panel);
}

#restSection .restHistoryMonth {
  border-color: var(--border);
  background: #0a1017;
}

#restSection .restHistoryDates span {
  background: var(--panel2);
  color: #cbd5e1;
}

/* Tablet: una columna cuando ya no hay ancho real para dos tarjetas. */
@media (max-width: 980px) {
  #restSection .restCardsGrid {
    grid-template-columns: 1fr;
  }

  #restSection .restWorkerCard {
    max-width: none;
  }
}

/* Móvil */
@media (max-width: 620px) {
  #restSection .restMonthToolbar {
    align-items: stretch;
  }

  #restSection .restMonthPickerLabel {
    flex: 1 1 calc(100% - 94px);
    min-width: 0;
  }

  #restSection .restCurrentMonthButton,
  #restSection .restMonthSummary {
    flex: 1 1 100%;
  }

  #restSection .restMonthSummary {
    margin-left: 0;
    padding: 5px 0 0;
    text-align: left;
  }

  #restSection .restWorkerMeta {
    grid-template-columns: 1fr;
  }

  #restSection .restWorkerActions {
    grid-template-columns: 1fr 1fr;
  }
}