<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {% if title %}
    <title>{{ title }}</title>
    {% endif %}
    <style>
      @page {
        size: Letter;
        margin: 0.44in 0.44in 0.44in 0.44in;

        @bottom-center {
          content: counter(page);
        }
      }

      @page :first {
        counter-reset: page 0;
        @bottom-center {
          content: "";
        }
      }

      @font-face {
        font-family: Roboto;
        src: url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
      }

      * {
        box-sizing: border-box;
        border-collapse: collapse;
      }

      body {
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: Roboto;
      }

      .container {
        display: flex;
        flex-direction: column;
        height: 9.2in;
        width: 100%;
        border: 1px solid black;
        margin: 10px 0;
      }

      .title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding: 4px 0;
        border: 1px solid black;
        border-bottom: 0;
        border-top: 0;
      }

      .mx-auto {
        margin-left: auto;
        margin-right: auto;
      }

      .mt-1 {
        margin-top: 10px;
      }

      .mt-2 {
        margin-top: 20px;
      }

      .my-1 {
        margin-top: 10px;
        margin-bottom: 10px;
      }

      .pl-1 {
        padding-left: 10px;
      }

      .pl-2 {
        padding-left: 20px;
      }

      .pr-1 {
        padding-right: 10px;
      }

      .pr-2 {
        padding-right: 20px;
      }

      table {
        border-collapse: collapse;
        width: 100%;
        border: 1px solid black;
      }

      th,
      td {
        border: 1px solid black;
        padding: 4px 8px;
        border-collapse: collapse;
        font-size: 12px;
      }

      .flex {
        display: flex;
      }

      .row {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        vertical-align: middle;
      }

      .column {
        display: flex;
        flex-direction: column;
      }

      .box {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 4px 8px;
      }

      .flex .box {
        flex: 1;
      }

      .flex-1 {
        flex: 1;
      }

      .flex-2 {
        flex: 2;
      }

      .font-semibold {
        font-weight: 600;
      }

      .font-small {
        font-size: 9px;
      }

      .font-extra-small {
        font-size: 8px;
      }

      .h-full {
        height: 100%;
      }

      .h-1 {
        height: 18px;
      }

      .h-2 {
        height: 30px;
      }

      .h-3 {
        height: 66px;
      }

      .h-50 {
        height: 50%;
      }

      .h-45 {
        height: 45%;
      }

      .w-full {
        width: 100%;
      }

      .w-33 {
        width: 33.33%;
      }

      .w-25 {
        width: 25%;
      }

      .w-50 {
        width: 50%;
      }

      .px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      .m-0 {
        margin: 0;
      }

      .mx-0 {
        margin-left: 0;
        margin-right: 0;
      }

      .my-0 {
        margin-top: 0;
        margin-bottom: 0;
      }

      .text-left {
        text-align: left;
      }

      .text-center {
        text-align: center;
      }

      .text-right {
        text-align: right;
      }

      .border-0 {
        border: 0 !important;
      }

      .border-bottom-0 {
        border-bottom: 0 !important;
      }

      .border-top-0 {
        border-top: 0 !important;
      }

      .border-left-0 {
        border-left: 0 !important;
      }

      .border-right-0 {
        border-right: 0 !important;
      }

      .border-bottom-1 {
        border-bottom: 1px solid black !important;
      }

      .border-top-1 {
        border-top: 1px solid black !important;
      }

      .border-left-1 {
        border-left: 1px solid black !important;
      }

      .border-right-1 {
        border-right: 1px solid black !important;
      }

      /* Header styles */
      .page-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: white;
        padding: 0 10px;
        border: 1px solid #000;
        font-size: 14px;
        z-index: 1000;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .header-logo {
        height: 50px;
        margin-right: 20px;
      }

      .header-logo.dual-logo {
        margin-left: 10px;
      }

      .header-center {
        flex: 1;
        text-align: center;
      }

      .header-right {
        text-align: right;
        font-size: 10px;
      }

      /* Footer styles */
      .page-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: white;
        padding: 5px;
        border: 1px solid #000;
        font-size: 10px;
        text-align: center;
        z-index: 1000;
      }

      /* Add margins to main content to prevent header/footer overlap */
      .wrapper {
        margin-top: 70px;
        margin-bottom: 20px;
      }

      .direction_img {
        max-width: 20px;
        height: auto;
        position: absolute;
        top: 4px;
        left: 0;
      }

      .pipe_diagram {
        max-width: 120px;
        height: auto;
        position: absolute;
        top: 4px;
        left: 20px;
      }

      .bottom-20 {
        bottom: 25px !important;
      }

    </style>
  </head>
  <body>
    <!-- Global header that appears on every page -->
    {% include "nassco/pacp/es/header.html" %}
    <main>
      <!-- Page 1 (Header + Table of Contents) -->
      <div class="wrapper">{% include "nassco/pacp/es/table_of_contents.html" %}</div>
      <!-- Page 2 (Profile Report) -->
      <div class="wrapper">{% include "nassco/pacp/es/main_sections.html" %}</div>
      <!-- Page 3 (Inspection Report) -->
      <div class="wrapper">{% include "nassco/pacp/es/inspection_report.html" %}</div>
      <!-- Page 4 (Pipe Diagram Pages) -->
      <div class="wrapper">{% include "nassco/pacp/es/pipe_diagram_pages.html" %}</div>
      <!-- Page 5 (Pictures) -->
      <div class="wrapper">{% include "nassco/pacp/es/inspection_pictures.html" %}</div>
    </main>

    <!-- Global footer that appears on every page -->
    {% include "nassco/pacp/es/footer.html" %}
  </body>
</html>
