:root{
  --bg:#ffffff;
  --fg:#1f1f1f;
  --muted:#6e6e78;
  --border:#ececf1;
  --primary:#6b4cd6; /* morado */
  --primary-2:#8e73ff;
  --danger:#e05252;
  --card:#ffffff;
  --surface:#f6f5fb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg); background:var(--surface);
}
.container{max-width:1100px;margin:24px auto;padding:0 16px}

.app-header,.app-footer{
  background:var(--bg); border-bottom:1px solid var(--border);
  padding:12px 16px; display:flex; align-items:center; gap:16px;
}
.app-footer{border-top:1px solid var(--border);border-bottom:none;margin-top:32px;justify-content:center;color:var(--muted)}
.logo{font-weight:800; color:var(--primary); display:flex; align-items:center; gap:8px}
.logo .dot{width:10px;height:10px;background:var(--primary);border-radius:50%}
.nav a{color:var(--fg); text-decoration:none; margin-right:12px; padding:6px 10px; border-radius:8px}
.nav a:hover{background:#f1efff}
.spacer{flex:1}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; margin-bottom:16px; box-shadow:0 10px 30px rgba(60,0,120,0.06);
}
.card-header{display:flex; align-items:center; justify-content:space-between}
.muted{color:var(--muted);}

h1,h2,h3{margin:8px 0 14px}
p{color:var(--muted)}

.form-grid{display:grid; gap:12px; grid-template-columns:1fr 1fr}
.form-grid label{display:flex; flex-direction:column; gap:6px; font-size:14px}
.form-grid input,.form-grid select{
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; outline:none; background:#fff;
}
.form-grid .inline{display:flex; align-items:center; gap:8px}
.form-grid button,.btn{grid-column:1/-1}

.btn{
  background:var(--primary); color:#fff; border:none; padding:10px 16px;
  border-radius:12px; cursor:pointer; font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 14px rgba(107,76,214,.25);
}
.btn:hover{background:var(--primary-2)}
.btn-outline{
  background:#fff; color:var(--primary); border:1px solid var(--primary);
  box-shadow:none;
}
.btn-danger{background:var(--danger); box-shadow:none}

.alert{
  background:#fff3f4; color:#a12d2d; padding:10px 12px; border:1px solid #ffd6da; border-radius:12px; margin-bottom:10px;
}

.tbl{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden}
.tbl th,.tbl td{padding:12px 10px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
.tbl thead th{background:#faf8ff; color:#5a4fb0}
.tbl tbody tr:hover{background:#faf8ff}

.actions{display:flex; gap:10px}
.filters{display:flex; gap:8px; margin:8px 0 12px}
.chip{padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); text-decoration:none}
.chip-active{border-color:var(--primary); color:var(--primary)}

.row-actions form{display:inline-block; margin-right:6px}

.auth-card{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center;
  background:linear-gradient(135deg,#f6f5fb 0%, #ffffff 60%);
  padding:16px; border-radius:16px; border:1px solid var(--border);
}
.auth-side{padding:24px}
.auth-hero{position:relative; height:360px; background:radial-gradient(closest-corner at 60% 40%, #eee7ff, #ffffff); border-radius:16px}
.hero-circle{position:absolute; width:180px; height:180px; border-radius:50%; background:#e9e2ff; top:40px; left:40px; filter:blur(2px)}
.hero-circle.c2{width:120px;height:120px; top:160px; left:220px; background:#e1d8ff}
.hero-circle.c3{width:220px;height:220px; top:100px; left:380px; background:#efe9ff}

@media (max-width: 900px){
  .auth-card{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}

/* --- HERO con logo --- */
.hero-circle{ display:none !important; }          /* oculta los círculos si quedara alguno */
.auth-hero{
  display:flex;                                   /* centra el contenido */
  align-items:center;
  justify-content:center;
  min-height: 260px;                              /* puedes subir a 320–360 si quieres */
}
.auth-hero-logo{
  width: 220px;                                   /* ajusta a gusto, p.ej. 160–260px */
  max-width: 70%;
  height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.15));
}

/* ====== MOBILE TWEAKS (<=640px) ====== */
@media (max-width: 640px){
  .container{ padding: 0 10px; }

  /* Header y menú */
  .app-header{ flex-wrap: wrap; gap: 8px; }
  .logo{ font-size: 18px; }
  .nav{ width:100%; order:3; display:flex; gap:8px; flex-wrap:wrap; }
  .nav a{ flex:1 1 auto; text-align:center; padding:8px 10px; margin:0; }

  /* Titulares y tarjetas */
  h1{ font-size: clamp(20px, 5vw, 28px); }
  .card{ padding:14px; }
  .card-header{ flex-direction: column; align-items:flex-start; gap:10px; }

  /* Botones de acciones (Entrada / Salida) */
  .actions{ flex-wrap: wrap; width:100%; gap:10px; }
  .actions .btn{ flex:1 1 100%; }   /* apílalos a ancho completo */
  /* Si prefieres dos por fila, usa: flex:1 1 calc(50% - 10px); */

  /* Filtros, formularios */
  .filters{ flex-wrap: wrap; }
  .form-grid{ grid-template-columns:1fr; }

  /* Hero de login (por si lo usas en otras vistas) */
  .auth-card{ grid-template-columns:1fr; }
  .auth-hero{ height:180px; }
}

/* Tablas desplazables en móvil sin romper desktop */
.table-scroll{ width:100%; overflow-x:auto; }
.table-scroll .tbl{ min-width: 650px; } /* fuerza scroll horizontal cuando haga falta */


/* Ocultar columnas “IP / Origen / Nota” en móviles */
@media (max-width: 640px){
  .tbl th.hide-sm,
  .tbl td.hide-sm{ display:none; }

  /* Ajustes de tabla en móvil */
  .tbl th, .tbl td{ padding:10px 8px; font-size:13px; }

  /* Si usaste min-width en la tabla para el scroll, permite que en móvil se reduzca */
  .table-scroll .tbl{ min-width:0; }
}

/* --- Mobile tweaks para "Marcaciones de hoy" --- */
@media (max-width: 640px){
  /* El header pasa a columna y centrado */
  .card .card-header{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;               /* separación entre título y botón */
    margin-bottom: 10px;    /* aire antes de la tabla */
  }
  .card .card-header h2{ margin: 0; }

  /* Asegura que el botón no se estire raro */
  .card .card-header a.btn{ width: auto; }

  /* Un pelín más de espacio entre header y tabla */
  .card .card-header + .table-scroll{
    margin-top: 8px;
  }
}

/* ===== Usuarios: buscador + resultado ===== */
.user-search { margin-bottom: 8px; }
.user-search-input {
  display: flex; gap: 8px; align-items: center;
}
.user-search-input input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.user-search-hint { margin-top: 6px; }

.user-result { margin-top: 10px; }

.user-choices { display: grid; gap: 8px; }
.user-pill-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.user-pill {
  border: 1px solid var(--border);
  background: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.user-pill:hover { border-color: var(--primary); color: var(--primary); }

.users-table { margin-top: 8px; }


/* === Usuarios (tabla responsiva + acciones) === */
.tbl-users td:last-child{ text-align: right; }                 /* desktop */
.tbl-users .row-actions{
  display:flex;
  justify-content:flex-end;                                    /* desktop */
  gap:10px;
  flex-wrap:wrap;
}
.tbl-users .row-actions form{ margin:0; }

/* Mobile */
@media (max-width: 640px){
  /* tabla apilada usando data-label */
  .tbl.tbl-users thead{ display:none; }
  .tbl.tbl-users,
  .tbl.tbl-users tbody,
  .tbl.tbl-users tr,
  .tbl.tbl-users td{ display:block; width:100%; }

  .tbl.tbl-users tr{
    margin-bottom:10px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
  }
  .tbl.tbl-users td{
    border:none;
    border-bottom:1px solid var(--border);
    padding:10px 8px 10px 120px; /* espacio para la etiqueta */
    position:relative;
  }
  .tbl.tbl-users td:last-child{
    border-bottom:none;
    padding-left:8px;               /* acciones sin etiqueta a la izquierda */
    text-align:center;               /* centra acciones */
  }
  .tbl.tbl-users td::before{
    content:attr(data-label);
    position:absolute; left:10px; top:10px;
    width:100px; color:var(--muted); font-weight:600; font-size:12px;
  }

  /* Acciones centradas en mobile */
  .tbl-users .row-actions{ justify-content:center; }
  .tbl-users .row-actions .btn,
  .tbl-users .row-actions button{ min-width:140px; }
}

/* Muy estrecho: apilar botones */
@media (max-width: 420px){
  .tbl-users .row-actions{
    flex-direction:column;
    align-items:center;
  }
  .tbl-users .row-actions .btn,
  .tbl-users .row-actions button{
    width:100%;
    max-width:260px;
  }
}


/* ======= Lugares ======= */
.tbl-locs .row-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;   /* desktop */
  flex-wrap:wrap;
}
.tbl-locs .row-actions form{ margin:0; } /* sin margen extra */
.tbl-locs td:last-child{ text-align:right; }

/* Móvil */
@media (max-width: 640px){
  /* Oculta columnas no esenciales */
  .tbl-locs .hide-sm{ display:none !important; }

  /* Tabla -> tarjetas apiladas */
  .tbl.tbl-locs thead{ display:none; }
  .tbl.tbl-locs, .tbl.tbl-locs tbody, .tbl.tbl-locs tr, .tbl.tbl-locs td{
    display:block; width:100%;
  }
  .tbl.tbl-locs tr{
    margin:10px 0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
  }
  .tbl.tbl-locs td{
    border:none;
    border-bottom:1px solid var(--border);
    padding:10px 8px 10px 120px; /* espacio para etiqueta por defecto */
    position:relative;
  }

  /* Etiqueta por defecto (izquierda) */
  .tbl.tbl-locs td[data-label]::before{
    content:attr(data-label);
    position:absolute; left:10px; top:10px;
    width:100px; color:var(--muted);
    font-weight:600; font-size:12px;
  }

  /* Celda de ACCIONES: rótulo centrado arriba y sin padding izquierdo */
  .tbl.tbl-locs td:last-child{
    border-bottom:none;
    padding-left:8px;
    text-align:center;
  }
  .tbl.tbl-locs td:last-child::before{
    content:attr(data-label);
    position:static;          /* quita absoluto */
    display:block;
    width:auto;
    text-align:center;
    font-weight:700;          /* negrita */
    color:var(--fg);
    font-size:13px;
    margin:2px 0 8px;         /* pequeño margen entre título y botones */
  }

  /* Botones centrados y con buen ancho */
  .tbl-locs .row-actions{ justify-content:center; gap:10px; }
  .tbl-locs .row-actions .btn{ min-width:140px; }
}

/* Rectificar tabla: mobile-friendly como el resto */
@media (max-width:640px){
  .tbl-rectify thead{ display:none; }
  .tbl-rectify, .tbl-rectify tbody, .tbl-rectify tr, .tbl-rectify td{
    display:block; width:100%;
  }
  .tbl-rectify tr{
    margin:10px 0; background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:8px;
  }
  .tbl-rectify td{
    border:none; border-bottom:1px solid var(--border);
    padding:10px 8px 10px 120px; /* espacio para etiqueta a la izquierda */
    position:relative;
  }
  .tbl-rectify td:last-child{
    border-bottom:none;
    padding:12px 8px;          /* sin padding-left grande en Acciones */
    text-align:center;
  }

  /* Etiqueta por defecto (lado izq.) */
  .tbl-rectify td[data-label]::before{
    content:attr(data-label);
    position:absolute; left:10px; top:10px;
    width:100px; color:var(--muted);
    font-weight:600; font-size:12px;
  }

  /* Etiqueta para la celda de Acciones: centrada como título */
  .tbl-rectify td:last-child[data-label]::before{
    position:static;       /* saca posicionamiento absoluto */
    display:block;
    width:100%;
    text-align:center;
    font-weight:700;       /* negrita */
    color:var(--fg);
    margin:0 0 6px 0;      /* pequeño espacio sobre los botones */
  }

  .tbl-rectify .row-actions{
    display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
  }
  .tbl-rectify .row-actions .btn{ min-width:140px; }
}

/* === Busy overlay con logo animado === */
.busy-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center;
}

.busy-box{
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:14px 18px;
  box-shadow:0 12px 34px rgba(0,0,0,.14);
}

.busy-brand{
  position:relative; width:56px; height:56px;
  display:grid; place-items:center;
}

.busy-logo{
  width:44px; height:auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
  animation: busy-breathe 2s ease-in-out infinite;
}

.busy-ring{
  position:absolute; inset:0; border-radius:999px;
  border:3px solid transparent;
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  animation: busy-spin 1s linear infinite;
}

.busy-copy{ display:flex; flex-direction:column; gap:2px; }
.busy-text{ font-weight:700; }
.busy-sub{ color:var(--muted); }

@keyframes busy-spin { to { transform: rotate(360deg); } }
@keyframes busy-breathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}

/* Responsive del popup */
@media (max-width:640px){
  .busy-box{ flex-direction:column; text-align:center; gap:10px; }
}