<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 7pt;
        color: #000;
        padding: 10px 20px;
    }

    /* ── Encabezado ── */
    .header-wrap {
        width: 100%;
        position: relative;
        min-height: 55px;
        margin-bottom: 4px;
    }
    .header-logo {
        position: absolute;
        top: 0;
        right: 0;
    }
    .header-logo img {
        width: 60px;
    }
    .header-title {
        text-align: center;
        padding-top: 6px;
    }
    .header-title h1 {
        font-size: 13pt;
        font-weight: bold;
        letter-spacing: 0.5px;
    }
    .header-meta {
        font-size: 7pt;
        margin-top: 10px;
    }

    hr {
        border: none;
        border-top: 1px solid #333;
        margin: 6px 0 8px;
    }

    /* ── Tabla centrada con ancho fijo ──
       Anchos originales: [20,20,30,30,25,25,25] = 175mm
       Reducidos a:       [15,25,25,25,20,20,20] = 150mm → deja ~30mm de aire
    */
    .tabla-wrap {
        width: 100%;
        text-align: center;
    }
    table.datos {
        display: inline-table;
        width: 88%;          /* ~150mm sobre ~170mm de área útil */
        border-collapse: collapse;
        font-size: 7pt;
    }
    table.datos thead tr {
        background-color: #cccccc;   /* SetFillColor(204,204,204) */
        font-weight: bold;
    }
    table.datos th {
        border: 0.6px solid #555;
        padding: 3px 2px;
        text-align: center;
    }
    table.datos td {
        border-left:   0.6px solid #888;
        border-right:  0.6px solid #888;
        border-top:    none;
        border-bottom: none;
        padding: 2px 3px;
        text-align: center;
        vertical-align: middle;
    }
    /* Línea de cierre inferior (imita Cell(array_sum($w),0,'','T')) */
    table.datos tfoot td {
        border-top:    1px solid #333;
        border-left:   none;
        border-right:  none;
        border-bottom: none;
        padding: 0;
    }

    /* ── Pie de página (DomPDF) ── */
    .footer {
        position: fixed;
        bottom: -10px;
        left: 0; right: 0;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 8pt;
        font-style: italic;
        color: #000;
    }
    .footer .pagenum:before { content: counter(page); }
    @page {
    size: A4 portrait;   /* fuerza vertical desde el HTML */
    margin: 15mm 15mm 15mm 15mm;
}
</style>
</head>
<body>

{{-- Pie de página fijo --}}
<div class="footer">
    Pagina <span class="pagenum"></span>
</div>

{{-- ── Encabezado ── --}}
<div class="header-wrap">
    <div class="header-logo">
        <img src="{{ public_path('assets/media/img/logo.jpg') }}">
    </div>
    <div class="header-title">
        <h1>SEGUIMIENTO DE USUARIOS</h1>
    </div>
    <div class="header-meta">
        Fecha: {{ now('America/La_Paz')->format('d/m/Y') }}&nbsp;&nbsp;Hrs: {{ now('America/La_Paz')->format('H:i:s') }}
    </div>
</div>

<hr>

{{-- ── Tabla ── --}}
<div class="tabla-wrap">
    <table class="datos">
        <thead>
            <tr>
                <th style="width:9%">Id</th>
                <th style="width:15%">Tipo Movimiento</th>
                <th style="width:15%">Tipo</th>
                <th style="width:15%">Ubicación</th>
                <th style="width:12%">Usuario</th>
                <th style="width:12%">Fecha</th>
                <th style="width:10%">Hora</th>
            </tr>
        </thead>
        <tbody>
            @forelse($registros as $r)
            <tr>
                <td>{{ $r->id }}</td>
                <td>{{ $r->tipomov_texto }}</td>
                <td>{{ $r->tipoid_texto }}</td>
                <td>{{ $r->ubicacion_texto }}</td>
                <td>{{ $r->nom_usuario }}</td>
                <td>{{ $r->fecha_local }}</td>
                <td>{{ $r->hora }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="7" style="text-align:center; padding:8px; color:#666; font-style:italic; border: 0.6px solid #888;">
                    No hay registros de seguimiento en el período seleccionado.
                </td>
            </tr>
            @endforelse
        </tbody>
        <tfoot>
            <tr><td colspan="7"></td></tr>
        </tfoot>
    </table>
</div>

</body>
</html>