<!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: 10pt;
    color: #111;
    padding: 10mm 12mm;
}

/* ── Cabecera ────────────────────────────────────────────── */
.cab-wrap {
    width: 100%;
    border-bottom: 2pt solid #333;
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.cab-wrap table { width: 100%; }
.cab-empresa  { font-size: 8pt; font-weight: bold; line-height: 1.4; }
.cab-titulo   { font-size: 15pt; font-weight: bold; text-align: center; letter-spacing: 0.5px; }
.cab-fecha    { font-size: 8pt; text-align: right; color: #444; }

/* ── Número y fecha de la autorización ──────────────────── */
.nro-fecha {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}
.nro-fecha td {
    border: 1pt solid #555;
    padding: 5px 8px;
    font-size: 11pt;
    font-weight: bold;
}

/* ── Cuerpo de datos ─────────────────────────────────────── */
.datos { width: 100%; margin-bottom: 14px; }
.datos tr td { padding: 4px 2px; font-size: 10pt; vertical-align: top; }
.datos tr td.etiq {
    width: 22%;
    font-weight: normal;
    color: #333;
    padding-right: 6px;
}
.datos tr td.val { font-weight: bold; }

/* ── Observaciones ───────────────────────────────────────── */
.obs-box {
    border: 0.5pt solid #aaa;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 9.5pt;
    min-height: 50px;
    margin-bottom: 16px;
    background: #fafafa;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.obs-titulo {
    font-size: 9pt;
    font-weight: bold;
    color: #444;
    margin-bottom: 4px;
}

/* ── Firmas ──────────────────────────────────────────────── */
.firmas {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}
.firmas td {
    border: 1pt solid #555;
    text-align: center;
    padding: 0;
    width: 33.33%;
}
.firma-titulo {
    background-color: #e0e0e0;
    font-weight: bold;
    font-size: 9pt;
    padding: 5px 4px;
    border-bottom: 1pt solid #555;
}
.firma-espacio {
    height: 40px;
    border-bottom: 1pt solid #555;
}
.firma-nombre {
    font-size: 8pt;
    padding: 4px;
    min-height: 18px;
}

/* ── Pie ─────────────────────────────────────────────────── */
.pie {
    position: fixed;
    bottom: 0;
    left: 12mm;
    right: 12mm;
    border-top: 0.5pt solid #ccc;
    font-size: 7pt;
    color: #888;
    padding-top: 3px;
}
.pie table { width: 100%; }
</style>
</head>
<body>

{{-- ── Cabecera ──────────────────────────────────────────── --}}
<div class="cab-wrap">
  <table>
    <tr>
      <td width="25%" valign="top">
        <div class="cab-empresa">
          EMPRESA COMERCIAL "COSMOS"<br>
          La Paz - Bolivia<br>
          {{ $cab['nombre_sistema'] }}
        </div>
      </td>
      <td width="50%" valign="middle">
        <div class="cab-titulo">AUTORIZACIÓN DE TRÁMITE</div>
      </td>
      <td width="25%" valign="top">
        <div class="cab-fecha">
          Fecha: {{ \App\Helpers\FechaHelper::bdToLocal($cab['fecha_sistema']) }}<br>
          Hora: {{ now('America/La_Paz')->format('H:i:s') }}
        </div>
      </td>
    </tr>
  </table>
</div>

{{-- ── Nro y fecha de la autorización ───────────────────── --}}
<table class="nro-fecha">
  <tr>
    <td width="50%">Nro:&nbsp;&nbsp;&nbsp;{{ $auto->id }}</td>
    <td width="50%" style="text-align:right">Fecha:&nbsp;&nbsp;&nbsp;{{ $fecha_auto }}</td>
  </tr>
</table>

{{-- ── Datos del trámite ──────────────────────────────────── --}}
<table class="datos">
  <tr>
    <td class="etiq">Contrato:</td>
    <td class="val">
      {{ $contrato->id ?? '—' }}
      @if($fecha_cont)
        &nbsp;&nbsp;—&nbsp;&nbsp; {{ $fecha_cont }}
      @endif
    </td>
  </tr>
  <tr>
    <td class="etiq">Urbanización:</td>
    <td class="val">{{ $nom_urb }}</td>
  </tr>
  <tr>
    <td class="etiq">Distrito:</td>
    <td class="val">{{ $nom_dist }}</td>
  </tr>
  <tr>
    <td class="etiq">Manzano:</td>
    <td class="val">{{ $auto->manzano }}</td>
  </tr>
  <tr>
    <td class="etiq">Lote:</td>
    <td class="val">{{ $auto->lote }}</td>
  </tr>
  <tr>
    <td class="etiq">Superficie:</td>
    <td class="val">{{ $superficie }} m²</td>
  </tr>
  <tr>
    <td class="etiq">Adjudicatario:</td>
    <td class="val">
      {{ $auto->idcliente }} — {{ Str::title(Str::lower($nom_cliente)) }}
    </td>
  </tr>
</table>

{{-- ── Observaciones ──────────────────────────────────────── --}}
<div class="obs-titulo">Observaciones:</div>
<div class="obs-box">{{ $auto->observaciones ?: '—' }}</div>

{{-- ── Firmas ──────────────────────────────────────────────── --}}
<table class="firmas">
  <tr>
    <td>
      <div class="firma-titulo">GERENTE</div>
      <div class="firma-espacio"></div>
      <div class="firma-nombre">MARUJA TOLA Vda. DE GOMEZ</div>
    </td>
    <td>
      <div class="firma-titulo">ENTREGADO POR</div>
      <div class="firma-espacio"></div>
      <div class="firma-nombre">{{ $nom_usuario }}</div>
    </td>
    <td>
      <div class="firma-titulo">RECIBIDO POR</div>
      <div class="firma-espacio"></div>
      <div class="firma-nombre">{{ Str::title(Str::lower($nom_cliente)) }}</div>
    </td>
  </tr>
</table>

{{-- ── Pie de página ──────────────────────────────────────── --}}
<div class="pie">
  <table>
    <tr>
      <td>Sistema Cosmos — {{ $cab['nombre_sistema'] }}</td>
      <td style="text-align:center">Autorización Nro. {{ $auto->id }}</td>
      <td style="text-align:right">Pág. <span class="pagenum"></span></td>
    </tr>
  </table>
</div>

</body>
</html>