.elementor-455 .elementor-element.elementor-element-fc939da{--display:flex;}/* Start custom CSS for html, class: .elementor-element-cb61852 *//* ====== Variables principales ====== */
.fracciones-module {
  --color-borde: #e3e6ea;
  --color-primario: #1b5e20;   /* Verde institucional */
  --color-secundario: #2e7d32; /* Verde secundario elegante */
  --color-texto: #2a2a2a;
  --color-texto-sec: #5a5f66;
  --color-fila: #f8fafc;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,0.06);

  border: 1px solid var(--color-borde);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #fff;
  margin: 20px auto;
  overflow: hidden;
  font-size: 0.8rem; /* reducido */
  font-family: "Segoe UI", "Roboto", sans-serif;
}

/* ====== Encabezado ====== */
.fracciones-header {
  background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
  color: #fff;
  padding: 12px 16px; /* más compacto */
}

.fracciones-descripcion {
  margin: 0;
  font-size: 0.75rem; /* reducido */
  color: #f1f8ff;
  font-weight: 500; /* jerarquía secundaria */
}

/* ====== Tabla ====== */
.fracciones-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.8rem; /* reducido */
  background: #fff;
  border: none; /* unificado con el módulo */
  border-radius: 0;
  overflow: hidden;
}

.fracciones-table th,
.fracciones-table td {
  border: 1px solid var(--color-borde);
  padding: 10px 12px; /* más compacto */
  color: var(--color-texto);
  font-size: 0.8rem; /* reducido */
}

/* Encabezados */
.fracciones-table thead th {
  background: #f1f8f4;
  font-weight: 600;
  text-align: left;
}

/* Filas alternas */
.fracciones-table tbody tr:nth-child(even) {
  background: var(--color-fila);
}

/* Hover accesible */
.fracciones-table tbody tr:hover {
  background: #e8f5e9;
  box-shadow: inset 0 0 0 2px var(--color-secundario);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ====== Enlaces ====== */
.fraccion-link {
  color: var(--color-primario);
  text-decoration: none;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 0.75rem; /* reducido */
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.fraccion-link:hover {
  background: var(--color-primario);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ====== Badges ====== */
.area-badge {
  display: inline-block;
  background: #e8f5e9;
  color: var(--color-primario);
  border: 1px solid #c8e6c9;
  padding: 2px 6px;
  border-radius: 8px; /* actualizado: menos ovalado */
  font-size: 0.7rem; /* reducido */
  font-weight: 500; /* jerarquía secundaria */
}

/* ====== Mensaje vacío ====== */
.mensaje-vacio {
  text-align: center;
  padding: 10px;
  color: var(--color-texto-sec);
  font-style: italic;
  font-size: 0.75rem; /* reducido */
}

/* ====== Transición global ====== */
* {
  transition: all 0.2s ease-in-out;
}

/* ====== Responsivo ====== */
@media (max-width: 560px) {
  .fracciones-table thead {
    display: none;
  }
  .fracciones-table,
  .fracciones-table tbody,
  .fracciones-table tr,
  .fracciones-table td {
    display: block;
    width: 100%;
  }
  .fracciones-table tbody tr {
    margin-bottom: 10px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
  }
  .fracciones-table tbody tr:nth-child(even) {
    background: #f9fdf9; /* alternancia en móvil */
  }
  .fracciones-table tbody td {
    border-bottom: none;
    padding: 6px 8px;
    font-size: 0.75rem; /* reducido en móvil */
  }
  .fracciones-table tbody td[data-label]::before {
    content: attr(data-label) " ";
    display: block;
    font-weight: 600;
    color: var(--color-texto-sec);
    margin-bottom: 3px;
    font-size: 0.7rem;
  }
}/* End custom CSS */