/* ==========================================================================
   Section Modules: Rediseño visual de secciones de módulos (2.x)
   ==========================================================================
   Reemplaza iconos PNG 128x128 por badges Font Awesome compactos.
   Layout plano sin cards anidadas.
   También cubre iconos pequeños (16x16) de estado y acción en tablas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Iconos grandes de módulo (128x128): ocultar PNG, mostrar badge FA
   -------------------------------------------------------------------------- */

/* Ocultar la imagen PNG */
td[width="128"] img[width="128"] {
  display: none;
}

/* Reducir celda */
td[width="128"] {
  width: 56px !important;
  vertical-align: top;
  padding-top: 10px;
}

/* Badge circular base */
td[width="128"].sanLR04::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #3E73A7;
  color: #FFFFFF;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   2. Mapeo de iconos grandes (128x128) por src del <img>
      Cada selector es más específico que el base para ganar especificidad
   -------------------------------------------------------------------------- */
td[width="128"].sanLR04:has(img[src$="ic-buques.png"])::before { content: "\f21a"; }
td[width="128"].sanLR04:has(img[src$="ic-contenedor.png"])::before { content: "\f1b2"; }
td[width="128"].sanLR04:has(img[src$="ic-empresas.png"])::before { content: "\f1ad"; }
td[width="128"].sanLR04:has(img[src$="ic-servicios.png"])::before { content: "\f494"; }
td[width="128"].sanLR04:has(img[src$="ic-catalogos.png"])::before { content: "\f02d"; }
td[width="128"].sanLR04:has(img[src$="ic-operaciones.png"])::before { content: "\f085"; }
td[width="128"].sanLR04:has(img[src$="ic-consultas.png"])::before { content: "\f080"; }
td[width="128"].sanLR04:has(img[src$="ic-finanzas.png"])::before { content: "\f51e"; }
td[width="128"].sanLR04:has(img[src$="ic-maniobras.png"])::before { content: "\f021"; }
td[width="128"].sanLR04:has(img[src$="ic-configuraciones.png"])::before { content: "\f1de"; }
td[width="128"].sanLR04:has(img[src$="ic-porte.png"])::before { content: "\f0d1"; }
td[width="128"].sanLR04:has(img[src$="ic-facturar.png"])::before { content: "\f571"; }
td[width="128"].sanLR04:has(img[src$="ic-descuento.png"])::before { content: "\25"; }
td[width="128"].sanLR04:has(img[src$="ancla.png"])::before { content: "\f13d"; }
td[width="128"].sanLR04:has(img[src$="naviera.png"])::before { content: "\f21a"; }
td[width="128"].sanLR04:has(img[src$="ic-buques-.png"])::before { content: "\f21a"; }
td[width="128"].sanLR04:has(img[src$="ic-empresas-.png"])::before { content: "\f1ad"; }

/* --------------------------------------------------------------------------
   3. Sección 2.1 (Inicio): iconos sin width/height attr
      Estructura: td.sanLR04[height="20"] > a > img (sin width attr)
      El ::before va en el <a> para que sea clickeable
   -------------------------------------------------------------------------- */

/* Sobreescribir height restrictivo del td */
td.sanLR04[height="20"]:has(> a > img:not([width])) {
  height: auto !important;
  padding: 8px 0.4em;
}

/* Ocultar PNG en 2.1 */
td.sanLR04[height="20"] > a > img:not([width]) {
  display: none;
}

/* Badge clickeable en el <a> */
td.sanLR04[height="20"] > a:has(> img:not([width]))::before {
  content: "\f0c8";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #3E73A7;
  color: #FFFFFF;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
  vertical-align: middle;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

td.sanLR04[height="20"] > a:has(> img:not([width])):hover::before {
  background: #4E82B3;
  transform: scale(1.08);
}

/* Mapeo para iconos de 2.1 — en el <a> */
td.sanLR04[height="20"] > a:has(> img[src$="ic-buques.png"])::before { content: "\f21a"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-contenedor.png"])::before { content: "\f1b2"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-empresas.png"])::before { content: "\f1ad"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-servicios.png"])::before { content: "\f494"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-catalogos.png"])::before { content: "\f02d"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-operaciones.png"])::before { content: "\f085"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-consultas.png"])::before { content: "\f080"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-finanzas.png"])::before { content: "\f51e"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-maniobras.png"])::before { content: "\f021"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-configuraciones.png"])::before { content: "\f1de"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-porte.png"])::before { content: "\f0d1"; }
td.sanLR04[height="20"] > a:has(> img[src$="ic-facturar.png"])::before { content: "\f571"; }
td.sanLR04[height="20"] > a:has(> img[src$="ancla.png"])::before { content: "\f13d"; }
td.sanLR04[height="20"] > a:has(> img[src$="naviera.png"])::before { content: "\f21a"; }


/* --------------------------------------------------------------------------
   4. Layout plano para tablas de módulos
   -------------------------------------------------------------------------- */

/* Tabla principal: ancho completo */
table[width="900px"] {
  border-collapse: collapse;
  width: 100% !important;
}

/* Separador entre módulos */
table[width="900px"] tr:has(td[width="128"]) {
  border-bottom: 1px solid #E0E7EE;
}

table[width="900px"] tr:has(td[width="128"]) > td {
  padding: 12px 8px;
}

/* Links de subsecciones */
table[width="900px"] .fonN12S {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

table[width="900px"] a:hover .fonN12S {
  background-color: #E8F0F7;
  color: #3E73A7;
}

/* Separadores internos */
table[width="900px"] hr[color="#666666"] {
  border: none;
  height: 1px;
  background: #E0E7EE;
  margin: 2px 0;
}

/* HR superior */
table[width="900px"] hr[color="#CACACA"] {
  border: none;
  height: 1px;
  background: #E0E7EE;
}

/* --------------------------------------------------------------------------
   5. Iconos pequeños de estado (16x16) en tablas de datos
      Estos son ic-AC, ic-AU, ic-CA, ic-EL, ic-PA, ic-PR, ic-FI, ic-NU, ic-CP, ic-EL
   -------------------------------------------------------------------------- */

/* No ocultar iconos 16x16 en tablas de datos — solo mejorar su presentación */
img[width="16"][height="16"][src*="images/png/ic-"] {
  border-radius: 3px;
}