/*
 * Pantallas de Asistencia (Hoy, Registro de jornada, Retardos).
 *
 * CSS plano y con prefijo `asis-`, igual que tablas.css: el VPS no corre el
 * build de Tailwind, así que las clases que no vienen ya compiladas en
 * Filament no existen. Los colores salen de las variables de Filament
 * (--gray-*, --primary-*, --success-*...), así respetan la paleta del panel y
 * el modo oscuro (`.dark` en el <html>).
 *
 * Ojo: Filament sirve una COPIA de este archivo. Después de tocarlo,
 * `php8.3 artisan filament:assets`.
 */

.asis { display: flex; flex-direction: column; gap: 1rem; }

/* ---- Barra de arriba: días y estado del reloj ---------------------------- */

.asis-barra { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.asis-dias { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }

.asis-btn,
.asis-campo {
    height: 2.25rem; border-radius: .5rem; border: 1px solid var(--gray-200);
    background: #fff; color: var(--gray-700); font: inherit; font-size: .875rem;
}
.asis-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
    min-width: 2.25rem; padding: 0 .75rem; font-weight: 500; cursor: pointer;
}
.asis-btn:hover { background: var(--gray-50); }
.asis-btn[disabled] { opacity: .4; cursor: default; }
.asis-campo { padding: 0 .65rem; color: var(--gray-800); }
.asis-campo:focus, .asis-btn:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.dark .asis-btn, .dark .asis-campo { background: var(--gray-900); border-color: rgb(255 255 255 / .12); color: var(--gray-200); color-scheme: dark; }
.dark .asis-btn:hover { background: var(--gray-800); }

.asis-reloj {
    display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .8rem;
    border-radius: 999px; font-size: .8125rem; background: var(--gray-100); color: var(--gray-700);
}
.asis-reloj::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--gray-400); flex: none; }
.asis-reloj--ok::before { background: var(--success-500); box-shadow: 0 0 0 3px rgb(50 132 69 / .18); }
.asis-reloj--mal::before { background: var(--danger-500); }
.dark .asis-reloj { background: rgb(255 255 255 / .06); color: var(--gray-300); }

/* ---- Tarjetas de conteo -------------------------------------------------- */

.asis-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; }

.asis-tarjeta,
.asis-panel {
    background: #fff; border-radius: .75rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / .05); outline: 1px solid rgb(3 7 18 / .06);
}
.dark .asis-tarjeta, .dark .asis-panel { background: var(--gray-900); outline-color: rgb(255 255 255 / .1); }

.asis-tarjeta { padding: 1rem 1.25rem; }
.asis-tarjeta__etiqueta { font-size: .8125rem; font-weight: 500; color: var(--gray-500); }
.asis-tarjeta__valor { margin-top: .25rem; font-size: 1.875rem; font-weight: 600; line-height: 1.15; color: var(--gray-950); font-variant-numeric: tabular-nums; }
.asis-tarjeta__valor small { font-size: 1rem; font-weight: 500; color: var(--gray-400); }
.asis-tarjeta__nota { margin-top: .25rem; font-size: .75rem; color: var(--gray-500); }
.dark .asis-tarjeta__valor { color: #fff; }
.asis-tarjeta--bien .asis-tarjeta__valor { color: var(--success-600); }
.asis-tarjeta--aviso .asis-tarjeta__valor { color: var(--warning-600); }
.asis-tarjeta--alerta .asis-tarjeta__valor { color: var(--danger-600); }
.dark .asis-tarjeta--bien .asis-tarjeta__valor { color: var(--success-400); }
.dark .asis-tarjeta--aviso .asis-tarjeta__valor { color: var(--warning-400); }
.dark .asis-tarjeta--alerta .asis-tarjeta__valor { color: var(--danger-400); }

/* ---- Paneles con tabla --------------------------------------------------- */

.asis-panel { overflow: hidden; }
.asis-panel__cabeza {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
    padding: .75rem 1rem; border-bottom: 1px solid var(--gray-200);
}
.dark .asis-panel__cabeza { border-color: rgb(255 255 255 / .08); }

.asis-panel__titulo { margin: 0; font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.dark .asis-panel__titulo { color: #fff; }

.asis-link { margin-left: .5rem; padding: 0; border: 0; background: none; font: inherit; font-size: .8125rem; color: var(--gray-500); text-decoration: underline; cursor: pointer; }
.asis-link:hover { color: var(--danger-600); }

.asis-empleado { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: baseline; }
.asis-empleado h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--gray-950); }
.dark .asis-empleado h3 { color: #fff; }

.asis-chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.asis-chip {
    border-radius: 999px; padding: .3rem .8rem; font: inherit; font-size: .8125rem; font-weight: 500;
    border: 1px solid var(--gray-200); background: transparent; color: var(--gray-600); cursor: pointer;
}
.asis-chip:hover { background: var(--gray-50); }
.asis-chip span { margin-left: .3rem; opacity: .65; font-variant-numeric: tabular-nums; }
.asis-chip--activo, .asis-chip--activo:hover { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.dark .asis-chip { border-color: rgb(255 255 255 / .12); color: var(--gray-300); }
.dark .asis-chip:hover { background: rgb(255 255 255 / .05); }
.dark .asis-chip--activo { background: var(--primary-500); border-color: var(--primary-500); color: #fff; }

.asis-busca { min-width: 14rem; }

.asis-tabla-ctn { overflow-x: auto; }
.asis-tabla { width: 100%; border-collapse: collapse; }
/* Encabezados grandes y en negritas, renglones compactos y poco espacio
   entre columnas: lo mismo que pidió el dueño para todas las tablas
   (tablas.css). */
.asis-tabla { font-size: .9rem; }
.asis-tabla th {
    padding: .5rem .5rem; text-align: left; white-space: nowrap; background: var(--gray-50);
    font-size: .9375rem; font-weight: 700; color: var(--gray-950);
}
.asis-tabla td { padding: .375rem .5rem; border-top: 1px solid var(--gray-100); vertical-align: middle; color: var(--gray-700); }
.asis-tabla th:first-child, .asis-tabla td:first-child { padding-left: 1rem; }
.asis-tabla th:last-child, .asis-tabla td:last-child { padding-right: 1rem; }
.asis-tabla tbody tr:hover td { background: var(--gray-50); }
.dark .asis-tabla th { background: rgb(255 255 255 / .03); color: #fff; }
.dark .asis-tabla td { border-color: rgb(255 255 255 / .06); color: var(--gray-300); }
.dark .asis-tabla tbody tr:hover td { background: rgb(255 255 255 / .03); }

.asis-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.asis-tabla .centro { text-align: center; }
.asis-tabla th.ordena { cursor: pointer; user-select: none; }
.asis-tabla th.ordena:hover { color: var(--primary-600); }

.asis-tabla tr.asis-fila-descanso td { color: var(--gray-400); }
.asis-tabla tr.asis-semana td { background: var(--gray-50); font-weight: 600; color: var(--gray-700); border-top: 1px solid var(--gray-200); }
.dark .asis-tabla tr.asis-semana td { background: rgb(255 255 255 / .04); color: var(--gray-200); border-color: rgb(255 255 255 / .08); }

.asis-nombre { font-weight: 500; color: var(--gray-950); }
.dark .asis-nombre { color: #fff; }
.asis-sub { font-size: .75rem; color: var(--gray-500); }
.asis-hora { font-weight: 500; font-variant-numeric: tabular-nums; }
.asis-tarde, .asis-aviso { font-size: .75rem; font-weight: 500; color: var(--warning-600); }
.asis-mal { color: var(--danger-600); font-weight: 600; }
.dark .asis-tarde, .dark .asis-aviso { color: var(--warning-400); }
.dark .asis-mal { color: var(--danger-400); }
.asis-tenue { color: var(--gray-400); }

.asis-marcas { display: flex; flex-wrap: wrap; gap: .25rem; }
.asis-marca {
    display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .4rem; border-radius: .375rem;
    font-size: .75rem; font-variant-numeric: tabular-nums; background: var(--gray-100); color: var(--gray-700);
    border: 1px solid transparent;
}
.asis-marca--manual { background: transparent; border: 1px dashed var(--info-500); color: var(--info-700); cursor: pointer; }
.asis-marca--manual:hover { background: rgb(0 105 92 / .07); }
.dark .asis-marca { background: rgb(255 255 255 / .07); color: var(--gray-300); }
.dark .asis-marca--manual { background: transparent; color: var(--info-300); border-color: var(--info-400); }

.asis-vacio { padding: 3rem 1rem; text-align: center; color: var(--gray-500); font-size: .875rem; }
.asis-vacio strong { display: block; margin-bottom: .25rem; font-size: 1rem; color: var(--gray-700); }
.dark .asis-vacio strong { color: var(--gray-200); }

.asis-pie { font-size: .75rem; line-height: 1.55; color: var(--gray-500); }

.asis-detalle td { background: var(--gray-50); }
.dark .asis-detalle td { background: rgb(255 255 255 / .02); }
.asis-detalle ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .375rem; }

@media (max-width: 640px) {
    .asis-busca { min-width: 0; width: 100%; }
    .asis-tabla th, .asis-tabla td { padding: .5rem .65rem; }
}