body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
  }

  .app-container {
      background: white;
      max-width: 800px;
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      padding: 30px;
      box-sizing: border-box;
      position: relative;
  }

  #pantalla-config,
  #pantalla-test,
  #pantalla-resultados,
  #pantalla-estadisticas {
      display: none;
      text-align: left;
  }

  #pantalla-login {
      text-align: center;
  }

  h2 {
      text-align: center;
      color: #333;
      margin-bottom: 5px;
  }

  .info-global-bd {
      text-align: center;
      color: #666;
      font-size: 0.9em;
      margin-bottom: 25px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
  }

  .grupo-filtro {
      margin-bottom: 20px;
      background: #f8fbff;
      padding: 15px;
      border-radius: 8px;
      border: 1px solid #e0e0e0;
  }

  .grupo-filtro h3 {
      margin-top: 0;
      font-size: 1.1em;
      color: #444;
  }

  .login-box {
      display: flex;
      flex-direction: column;
      gap: 15px;
      max-width: 300px;
      margin: 0 auto;
  }

  select,
  input[type="password"],
  input[type="number"] {
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 6px;
      font-size: 1em;
  }

  .btn-empezar {
      width: 100%;
      background-color: #28a745;
      color: white;
      border: none;
      font-size: 1.2em;
      padding: 15px;
      margin-top: 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: 0.2s;
  }

  .btn-empezar:hover {
      background-color: #218838;
  }

  .logo-login {
      font-size: 4em;
      margin-bottom: 10px;
  }

  .btn-secundario {
      background-color: #6c757d;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 0.9em;
      cursor: pointer;
      margin-right: 5px;
  }

  .btn-stats {
      background-color: #17a2b8;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 0.9em;
      cursor: pointer;
      font-weight: bold;
  }

  .btn-admin {
      background-color: #ffc107;
      color: #333;
      border: none;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 0.9em;
      cursor: pointer;
      font-weight: bold;
      margin-bottom: 15px;
      width: 100%;
      transition: 0.2s;
  }

  .btn-admin:hover {
      background-color: #e0a800;
  }

  .panel-modos {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
  }

  .btn-simulacro {
      background-color: #dc3545;
      color: white;
      flex: 1;
      padding: 12px;
      font-size: 1em;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
      transition: 0.2s;
  }

  .btn-simulacro:hover {
      background-color: #c82333;
  }

  .btn-fallos {
      background-color: #6f42c1;
      color: white;
      flex: 1;
      padding: 12px;
      font-size: 1em;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-weight: bold;
      transition: 0.2s;
  }

  .btn-fallos:hover {
      background-color: #5a32a3;
  }

  .btn-reset {
      background-color: #dc3545;
      color: white;
      border: none;
      padding: 10px;
      border-radius: 6px;
      cursor: pointer;
      margin-top: 20px;
      width: 100%;
  }

  .bloque-tema {
      margin-top: 15px;
      border-bottom: 1px dashed #ccc;
      padding-bottom: 15px;
  }

  .bloque-tema:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
  }

  .bloque-tema h4 {
      margin: 0 0 10px 0;
      color: #007bff;
      font-size: 1.05em;
  }

  .grid-partes {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 10px;
  }

  .filtro-item {
      display: flex;
      align-items: center;      
      gap: 8px;
      cursor: pointer;
      font-size: 0.95em;
      padding-right: 10px;
  }

  .etiqueta-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .cantidad-preguntas {
      background-color: #007bff;
      color: white;
      font-size: 0.75em;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  #cronometro {
      font-size: 1.8em;
      font-weight: bold;
      color: #dc3545;
      text-align: center;
      margin-bottom: 15px;
      display: none;
      background: #f8d7da;
      padding: 10px;
      border-radius: 8px;
      border: 2px solid #f5c6cb;
  }

  .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      font-size: 0.9em;
      color: #666;
      border-bottom: 1px solid #eee;
      padding-bottom: 10px;
  }

  .pregunta {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
      line-height: 1.4;
  }

  .opciones {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .opcion {
      padding: 15px;
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      background: #fff;
      font-size: 1em;
      text-align: left;
  }

  .opcion:hover:not(.disabled) {
      border-color: #007bff;
      background: #f8fbff;
  }

  .opcion.seleccionada {
      background-color: #cce5ff;
      border-color: #80bdff;
      color: #004085;
  }

  .opcion.correcta {
      background-color: #d4edda;
      border-color: #28a745;
      color: #155724;
  }

  .opcion.incorrecta {
      background-color: #f8d7da;
      border-color: #dc3545;
      color: #721c24;
  }

  .disabled {
      pointer-events: none;
  }

  .controles {
      margin-top: 20px;
      text-align: right;
      display: flex;
      justify-content: space-between;
  }

  .btn-salir {
      background-color: #6c757d;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 1em;
      cursor: pointer;
      transition: 0.2s;
  }

  .btn-salir:hover {
      background-color: #5a6268;
  }

  .btn-siguiente {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 1em;
      cursor: pointer;
      display: none;
      transition: 0.2s;
  }

  .resultados {
      text-align: center;
  }

  .nota-final {
      font-size: 3em;
      font-weight: bold;
      color: #007bff;
      margin: 20px 0;
  }

  .btn-repetir {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 6px;
      font-size: 1em;
      cursor: pointer;
      margin-top: 20px;
      width: 100%;
      transition: 0.2s;
  }

  .btn-repetir:hover {
      background-color: #0056b3;
  }

  .lista-errores {
      margin-top: 30px;
      text-align: left;
  }

  .error-item {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  }

  .error-pregunta {
      font-weight: bold;
      margin-bottom: 10px;
      color: #333;
  }

  .error-marcada {
      color: #dc3545;
      background: #f8d7da;
      padding: 8px;
      border-radius: 4px;
      margin-bottom: 5px;
      font-size: 0.95em;
  }

  .error-correcta {
      color: #28a745;
      background: #d4edda;
      padding: 8px;
      border-radius: 4px;
      font-size: 0.95em;
  }

  .stat-item {
      background: #fff;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 10px;
  }

  .stat-header {
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      margin-bottom: 8px;
      color: #333;
  }

  .stat-bar-bg {
      width: 100%;
      background-color: #f8d7da;
      border-radius: 4px;
      height: 12px;
      overflow: hidden;
      display: flex;
  }

  .stat-bar-fill {
      background-color: #28a745;
      height: 100%;
  }