/* =========================
   Variables globales
   ========================= */
:root {
  --bg: #f6f7f9;
  --fg: #111;
  --muted: #6b7280;
  --brand: #0f62fe;
  --ok: #16a34a;
  --warn: #dc2626;
  --card: #ffffff;
  --border: #e5e7eb;
}

/* =========================
   Reset y base
   ========================= */
* { box-sizing: border-box }
body {
  margin: 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color: var(--fg);
  background: var(--bg);
}

/* =========================
   Encabezado
   ========================= */
header {
  padding: 16px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}
h1 { margin: 0; font-size: 20px; }

/* =========================
   Contenedor principal
   ========================= */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
}

/* =========================
   Navegación por pestañas
   ========================= */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--card);
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tab {
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  font-weight: 600;
}
.tab.active {
  background: var(--brand);
  color: #fff;
}

/* =========================
   Grillas y tarjetas
   ========================= */
.grid { display: grid; gap: 12px; }
.two { grid-template-columns: 1fr; }
@media (max-width: 720px) {
  .two { grid-template-columns: 1fr; }
}
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

/* =========================
   Tarjeta con alto automático
   ========================= */
.auto-height {
  height: auto !important;
  min-height: 0 !important;
}

/* =========================
   Formularios
   ========================= */
label { font-size: 14px; color: var(--muted); }
input {
  width: 90%;
  padding: 12px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}
select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
}

/* =========================
   Botones
   ========================= */
button {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
}
.primary { background: var(--brand); color: #fff; }
.ok { background: var(--ok); color: #fff; }
.btn-link { background: var(--brand); color: #fff; }
.danger { background: var(--warn); color: #fff; }
.ghost { background: #fff; border: 1px solid var(--border); }


#btnCalendar, #btnClients, #btnSessions {
  background-color: var(--primary, #2563eb);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
#btnCalendar:hover, #btnClients:hover, #btnSessions:hover {
  background-color: #1e40af; /* un azul más oscuro */
}


/* =========================
   Filas y estado
   ========================= */
.row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  align-items: center;
}
.stat { font-weight: 700; }
.muted { color: var(--muted); }

/* =========================
   Tablas
   ========================= */
.list {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.list th, .list td {
  border-bottom: 1px solid var(--border);
  padding: 10px 8px;
  text-align: left;
}

/* =========================
   Temporizador
   ========================= */
.timer {
  font-variant-numeric: tabular-nums;
  font-size: 28px;
  font-weight: 800;
}

/* =========================
   Espaciador
   ========================= */
.spacer { height: 8px; }

/* =========================
   Autenticación
   ========================= */
.auth {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
@media (max-width:720px){
  .auth { grid-template-columns: 1fr; align-items:stretch; }
  .auth button { width: 100%; }
}

/* =========================
   Utilidades
   ========================= */
.hidden { display: none; }
.hidden { display: none !important; }

/* =========================
   Botón de cerrar sesión
   ========================= */

#btnSignOut {
  padding: 2px 6px;    /* menos espacio interno */
  font-size: 12px;     /* letra más pequeña */
  border: none;
  border-radius: 4px;        /* encima de todo, pero sin tapar inputs */
}


.logo-container {
  display: flex;
  flex-direction: column; /* o row si lo quieres al lado del título */
  align-items: center; /* centra horizontalmente */
  text-align: center;
}

.logo {
  max-width: 100px; /* ajusta el tamaño */
  height: auto;
  margin-bottom: 8px; /* separación con el título */
}

.section {
  max-width: 100%;      /* no más ancho que la pantalla */
  box-sizing: border-box;
  padding: 1px;
  overflow-x: auto;     /* evita que se corte si hay tablas grandes */
}
/* Mismo ancho y centrado para ambas secciones */
#worker,
#admin,
#tabs-container {
  width: 100%;
  max-width: 640px;        /* ajusta si quieres más ancho */
  margin: 0 auto;
}

/* Evita que algo ensanche el viewport */
html, body { overflow-x: hidden; }

/* Tablas responsivas dentro de las cards */
.card { overflow-x: auto; }

.list {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;     /* columnas calculadas, evita crecer */
}

.list th,
.list td {
  white-space: normal;
  overflow-wrap: anywhere; /* quiebra textos largos */
}

/* Formularios y botones no deben superar el contenedor */
select, button, img, table { max-width: 100%; }

/* En móvil, una sola columna siempre */
@media (max-width: 640px){
  .two { grid-template-columns: 1fr; }
}

/* =========================
   Checkbox de filtrar clientes de hoy
   ========================= */

.filter-today {
  display: flex;
  align-items: center;
  justify-content: center;  /* centra horizontalmente */
  gap: 6px;
  margin: 12px auto;        /* margen arriba/abajo y centrado automático */
  font-size: 14px;
  color: #333;
  text-align: center;
}


.filter-today input[type="checkbox"] {
  width: 20px; /* Set the desired width */
  height: 20px; /* Set the desired height */
  /*transform: scale(1.2);*/
  accent-color: var(--primary, #007bff); /* usa el color principal si lo tienes */
}
.filter-block {
  align-items: center;
}