<style>
  table.ranking-gmb {
    border-collapse: separate;
  }
  
  table.ranking-gmb td {
    padding: 5px 5px;
  }
  
  table.ranking-gmb th {
    padding: 10px 5px;
    font-weight: normal;
    font-size: 12px;
  }
  
  .reputation-ranking td,
  .reputation-ranking th {
    padding: 3px;
    text-align: center;
    font-size: 10px;
  }
  
  .reputation-ranking td {
    font-size: 10px;
  }
  
  .reputation-ranking tr.red {
    background-color: #F5426E;
  }
  
  .reputation-ranking tr.redsemi {
    background-color: #FCDBE3;
  }
  
  .reputation-ranking tr.green {
    background-color: #49DBA2;
  }
  
  .reputation-ranking tr.greensemi {
    background-color: #D2F6E9;
  }
  
  .reputation-ranking tr.yellow {
    background-color: #F7C202;
  }
  
  .reputation-ranking tr.yellowsemi {
    background-color: #FFF7D8;
  }
  
  .reputation-reviews-number-green {
    padding: 2px 10px;
    border-radius: 10px;
    text-align: center;
    background-color: #D2F6E9;
    color: #49DBA2;
  }
  
  .reputation-reviews-number-yellow {
    padding: 2px 10px;
    border-radius: 10px;
    text-align: center;
    background-color: #FFF7D8;
    color: #F7C202;
  }
  
  .reputation-reviews-number-red {
    padding: 2px 10px;
    border-radius: 10px;
    text-align: center;
    background-color: #FCDBE3;
    color: #F5426E;
  }
  
  .reputation-reviews-title-wrapper {
    padding: 5px 0px;
    background-color: #EFEFEF;
  }
  
  .reputation-reviews-data-wrapper {
    padding-top: 5px;
    font-size: 14px;
  }
  
  .reputation-reviews-title {
    font-weight: bold;
    font-size: 14px;
  }
  
  .reputation-reviews-quantity {
    font-weight: bold;
    font-size: 35px;
  }
  
  .arrow-icon {
    width: 15px;
    height: 15px;
  }
  
  .arrow-big .arrow-icon {
    width: 30px;
    height: 30px;
  }
    /* Añadir esto para eliminar márgenes y rellenos en la tabla */
    table {
    margin: 0;
    padding: 0;
  }

  /* Ajustar el padding de las celdas */
  table.ranking-gmb td,
  table.ranking-gmb th {
    padding: 2px; /* Reduce el padding si es necesario */
  }

  /* Eliminar el height de las filas si no es necesario */
  tr {
    height: auto; /* O simplemente no establecer height */
  }
  </style>
  
  <page backimg="img/pdf/background.jpg">
  
    <table>
      <col style="width:1430">    
      <tr>
        <td style="height: 791px; color: #FFF; text-transform: uppercase; text-align: center;">
          <br />
          <br />
          <span style="font-size: 50px; font-weight: bold; text-transform: uppercase">{{'report'|trans}}</span>
          <br />
          <br />
          <span style="font-size: 45px;">{{data.date|localizeddate('none', 'none', actualLocale, null, 'MMMM yyyy')}}</span>
          <br />
          <br />
          <br />
          <span style="font-size: 45px;">{{data.title}}</span>
        </td>
      </tr>    
    </table>
  
  </page>
  
  {% for page in data.pagination %}
  
  <page>
  
    <table>
      <col style="width:1430">    
      <tr>
        <td style="height: 53px; background-color: #0d2634; color: #FFF; text-transform: uppercase; text-align: center; font-size: 30px; line-height: 53px; font-weight: bold;">{{data.title}}</td>
      </tr>
      <tr>
        <td style="height: 673px;">
          <table style="margin: auto;" cellspacing="0">
            <col style="width:220;">
            <col style="width:220;">
            <col style="width:220;">
            <col style="width:220;">
            <col style="width:220;">
            {# TITLES #}          
            <tr>
              <td></td>
              <td>
                <table style="margin: auto;">
                  <col style="width: 50">
                  <tr>
                    <td style="height:40; text-align: center;">
                      <img width=35 src="img/pdf/reputation.png">
                    </td>
                    <td style="height:40">
                      <span style="font-size: 12px; font-weight: lighter; text-transform: uppercase">{{'reputation'|trans}}</span>
                    </td>
                  </tr>
                </table>
              </td>
              <td >
                <table style="margin: auto;">
                  <col style="width: 50">
                  <tr>
                    <td style="height:40; text-align: center;">
                      <img width=35 src="img/pdf/reputation.png">
                    </td>
                    <td style="height:40">
                      <span style="font-size: 12px; font-weight: lighter; text-transform: uppercase">TIPOLOGÍA DE COMENTARIO</span>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
            {# SUBTITLES #}
            <tr>
              <td style="height: 20px"></td>
              <td style="height: 20px">
                <table style="margin: auto">
                  <col style="width: 90">
                  <col style="width: 90">
                  <tr>
                    <td style="text-align: center;"><span style="font-weight: bold;text-transform: uppercase;">{{'global'|trans}}</span></td>
                    <td style="text-align: center;"><span style="font-weight: bold;text-transform: uppercase;">{{'month'|trans}}</span></td>
                  </tr>
                </table>
              </td>
              <td style="height: 20px">
                <table style="margin: auto">
                  <col style="width: 90">
                  <col style="width: 90">
                  <tr>
                    {% for tipologia in data.pagination[0].groups[0].calculation['evolution-reputation-monthly-typology'].tipologiasUnicas %}
                    {% if tipologia != 'MEDIA' %}
                        <td style="text-align: center;padding:4px;width: 90px;">{{ tipologia | default("-") }}</td>
                    {% endif %}
                    {% endfor %}
                  </tr>
                </table>
              </td>
            </tr>
            {# GROUPS #}
            {% for group in page.groups %}
              <tr>
                <td style="border-right: 2px solid #0d2634; height: 40px; text-align: center;">
                  <span style="font-size: 15px; font-weight: bold; text-transform: uppercase">{{group.title}}</span>
                </td>
                <td style="border-right: 2px solid #0d2634; text-align: center;">
                  <table style="margin: auto">
                    <col style="width: 90">
                    <col style="width: 90">
                    <tr>
                      <td style="text-align: center;">
                        <table>
                          <tr>
                            <td>
                              {% if group.calculation['reputation-reviews-global'].score.original > 0 %}
                              <img src="img/pdf/comparative-circle-{{group.calculation['reputation-reviews-global'].color}}.png" >
                              {% endif %}
                            </td>
                            <td><span style="font-size: 16px; font-weight: bold;">{{group.calculation['reputation-reviews-global'].score.formatted}}</span></td>
                          </tr>
                          <tr>
                            <td colspan="2"><span style="font-size: 12px; font-weight: bold;">{{group.calculation['reputation-reviews-global'].reviews.formatted}}</span></td>
                          </tr>
                        </table>
                      </td>
                      <td style="text-align: center;">
                        <table>
                          <tr>
                            <td>
                              {% if group.calculation['reputation-reviews-month'].score.original > 0 %}
                              <img src="img/pdf/comparative-circle-{{group.calculation['reputation-reviews-month'].color}}.png" >
                              {% endif %}
                            </td>
                            <td><span style="font-size: 16px; font-weight: bold;">{{group.calculation['reputation-reviews-month'].score.formatted}}</span></td>
                          </tr>
                          <tr>
                            <td colspan="2"><span style="font-size: 16px; font-weight: bold;">{{group.calculation['reputation-reviews-month'].reviews.formatted}}</span></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
                <td style="border-right: 2px solid #0d2634;">
                  <table style="margin: auto;">
                    <col style="width: 90">
                    <col style="width: 90">
                    <tr>
                    {% for tipologia in data.pagination[0].groups[0].calculation['evolution-reputation-monthly-typology'].tipologiasUnicas %}
                    {% if tipologia != 'MEDIA' %}
                    
                      <td style="text-align: center;width:105px;">
                        <span style="font-size: 16px; font-weight: bold;">{{group.calculation['evolution-reputation-monthly-typology'].data[12].tipologias[tipologia].averageScore | default("-")}}</span>
                        <br/>
                        <span style="font-size: 12px; font-weight: bold;">{{group.calculation['evolution-reputation-monthly-typology'].data[12].tipologias[tipologia].totalReviews | default("-")}}</span>
                      </td>
  
                      {% endif %}
                    {% endfor %}
                    </tr>
                  </table>
                </td>
              </tr>
            {% endfor %}
          </table>        
        </td>
      </tr>
      <tr>
        <td style="height: 53px; background-color: #0d2634; color: #FFF; text-transform: uppercase; text-align: center; font-size: 25px; line-height: 53px; font-weight: bold;"><img src="img/pdf/logo.png" height="40"></td>
      </tr>
    </table>
  
  </page>
  
  {% endfor %}