#loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #f7fafc;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .spinner {
      border: 8px solid #f3f3f3;
      border-top: 8px solid #032690;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Iconos (se mantienen igual que antes) */
    .icon-warning::before {
      content: "\26A0";
    }

    .icon-language::before {
      content: "\1F310";
    }

    .icon-info::before {
      content: "\2139";
    }

    .icon-times::before {
      content: "\274C";
    }

    .icon-tools::before {
      content: "\1F6E0";
    }

    .icon-microchip::before {
      content: "\1F4BB";
    }

    .icon-wrench::before {
      content: "\1F527";
    }

    .icon-check::before {
      content: "\2705";
    }

    .icon-box::before {
      content: "\1F4E6";
    }

    .icon-user::before {
      content: "\1F9D1";
    }

    .icon-exclamation::before {
      content: "\2757";
    }

    /* Estilos globales */
    body {
      background-color: #f7fafc;
      /* equivale a bg-gray-100 */
      color: #1a202c;
      /* equivale a text-gray-900 */
      margin: 0;
      font-family: 'Roboto', sans-serif;
    }

    /* Navegación */
    nav {
      background-color: #032690;
      /* blue-600 */
      padding: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
    }

    /* Modo oscuro */
    body.dark {
      background-color: #1a202c;
      color: #f7fafc;
    }

    body.dark nav {
      background-color: #1a202c;
    }

    body.dark .card {
      background-color: #2d3748;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
        0 4px 6px -2px rgba(0, 0, 0, 0.2);
    }

    body.dark h1,
    body.dark h2,
    body.dark p,
    body.dark li {
      color: #f7fafc;
    }

    body.dark .note {
      color: #e2e8f0;
    }

    body.dark #loading {
      background-color: #1a202c;
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo img {
      height: 32px;
      /* h-8 */
      margin-right: 1rem;
      margin-left: 1rem;
      /* mr-3 */
    }

    .title-nav {
      font-size: 18px;
      font-weight: bold;
    }

    .language-switcher button {
      margin: 0 8px;
      /* mx-2 */
      background: none;
      border: none;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }

    .language-switcher button.hidden {
      display: none;
    }

    /* Botón para modo oscuro */
    #dark-mode-toggle {
      margin: 0 8px;
      background: none;
      border: 1px solid white;
      color: white;
      font-size: 16px;
      cursor: pointer;
      padding: 4px 8px;
    }

    /* Contenedor principal */
    .container {
      max-width: 1152px;
      /* equivalente a max-w-6xl */
      margin: 40px auto 0;
      /* mt-10 y centrado horizontal */
      padding: 24px;
      /* p-6 */
    }

    /* Layout tipo grid para las tarjetas */
    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      /* gap-6 */
    }

    @media (min-width: 768px) {
      .grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* Estilos de las tarjetas (cards) */
    .card {
      background-color: #fff;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      border-radius: 8px;
      /* rounded-lg */
      padding: 24px;
    }

    /* Encabezados y texto */
    h1 {
      font-size: 24px;
      /* text-2xl */
      font-weight: bold;
      text-align: center;
      margin: 0;
    }

    h1.icon-warning {
      color: #e3342f;
      /* red-600 */
    }

    h2 {
      margin-top: 24px;
      /* mt-6 */
      font-size: 20px;
      /* text-xl */
      font-weight: 600;
      /* font-semibold */
    }

    p {
      margin-top: 16px;
      /* mt-4 */
      font-size: 18px;
      /* text-lg */
      line-height: 1.5;
    }

    .note {
      margin-top: 24px;
      /* mt-6 */
      color: #4a5568;
      /* text-gray-700 */
      font-weight: bolder;
    }

    /* Imagen */
    img {
      width: 100%;
    }

    /* Listas */
    ul {
      margin-top: 8px;
      padding-left: 20px;
      list-style-type: none;
    }

    li {
      margin-bottom: 8px;
    }